/* ============================================================================
   book.css 로 넘어온 공용 컴포넌트 (옛 additional.css)
   ----------------------------------------------------------------------------
   additional.css 가 ui.css·book.css 보다 먼저 로드됐으므로,
   그때의 우선순위를 지키려 파일 앞쪽에 둔다.
   ============================================================================ */

/* ── 도서 고르기 판 (book-picker) ────────────────────────────────────
   판의 뼈대(사진 머리 · 탭 · 구르는 목록 · 발) 는 ui.css 의 .nlm-modal--panel 이
   그린다. 여기 남긴 것은 이 화면만의 것 — 판 너비, 언어 고르는 줄, 표지 격자다. */
.book-picker .nlm-modal__box {
    width:53.125rem;
    max-width:90%;
}
/* 머리에 사진을 깔지 않는다. 여기서 볼 것은 표지 예순 장이라,
   그 위에 또 그림이 앉으면 판이 두 번 시끄러워진다 — 이름표만 남긴다. */
.book-picker .nlm-modal__banner {
    --banner:none;
    height:auto;
    min-height:0;
    padding:1.125rem 1.5rem;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    color:var(--ink);
}
.book-picker .nlm-modal__banner .nlm-modal__title {
    font-size:var(--fs-lg);
    color:var(--ink);
    text-shadow:none;
}
.book-picker .nlm-modal__x {
    top:50%;
    transform:translateY(-50%);
    background:none;
    color:var(--muted);
}
.book-picker .nlm-modal__x:hover {
    background:var(--panel);
    color:var(--ink);
}
/* 언어 고르는 줄 — 목록 맨 위에 놓인다. 붙여 두려고(sticky) 했더니 목록
   가운데 떠서 표지들 위에 얹혀 보였다. 그냥 목록의 머리로 둔다.
   고르는 칸이 판 너비를 다 먹던 것(flex:1)은 손에 맞게 묶는다. */
.book-picker .lang-box {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:.75rem;
    margin:0 0 1rem;
    padding:0 0 1rem;
    border-bottom:1px solid var(--line-soft);
}
/* layout.css 의 «.lang-box:not(...):not(...) .lang-title {width:100%}» 가
   특이도 (0,4,0) 이라 이름표가 줄을 통째로 먹고 고르는 칸을 62px 로 짓눌렀다.
   같은 무게로 맞받는다. */
.book-picker .lang-box:not(.lang-box02):not(.sort-box) .lang-title {
    width:auto;
    flex:0 0 auto;
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
}
.book-picker .lang-box select {
    flex:0 1 17.5rem;
    min-width:0;
}
/* 책이 없을 때는 격자를 풀고 «없음» 한 줄이 자리를 지킨다 */
.book-picker .book-area:has(.empty-state) {
    display:block;
}
.book-picker .book-area {
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:1.5rem 1.25rem;
    margin-top:0;
    padding:0;
    list-style:none;
}
.book-picker .book-area li {
    display:flex;
    flex-direction:column;
    gap:.5rem;
    cursor:pointer;
}
/* 표지가 앉는 판 — 세로 비율을 고정해 줄마다 밑줄이 나란히 선다 */
.book-picker .book-area li .img-border {
    position:relative;
    aspect-ratio:2 / 3;
    padding:0;
    border:0;
    border-radius:var(--r-sm);
    background:var(--paper-warm);
    overflow:hidden;
    box-shadow:var(--sh-card);
    transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.book-picker .book-area li:hover .img-border {
    transform:translateY(-2px);
    box-shadow:var(--sh-lift);
}
.book-picker .book-area li img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
/* 고른 표시 — 예전에는 그림 안쪽에 4px 테를 그어 그림이 그만큼 쪼그라들었다.
   테를 바깥에 두르고 모서리에 «✓» 를 얹어, 고를 때 자리가 흔들리지 않게 한다. */
.book-picker .book-area li .img-border.on {
    outline:3px solid var(--gold);
    outline-offset:2px;
}
.book-picker .book-area li .img-border.on:after {
    content:'';
    position:absolute;
    top:.375rem;
    right:.375rem;
    width:1.375rem;
    height:1.375rem;
    border-radius:50%;
    background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") no-repeat center / .8125rem;
    box-shadow:var(--sh-soft);
}
.book-picker .book-area li .book-name {
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:var(--lh-tight);
    color:var(--ink);
    text-align:center;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.book-picker .book-area li:hover .book-name {
    color:var(--gold-deep);
}
.book-picker .book-area li .book-lang {
    margin-top:-.25rem;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.04em;
    color:var(--muted);
    text-align:center;
}

@media (max-width:1024px) {
    .book-picker .book-area {
        gap:1rem;
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}
@media (max-width:767px) {
    /* 손 안에서는 판이 화면을 채운다 — ui.css 의 판형 규칙을 여기 너비가 이기므로
       그 자리에서 함께 풀어 준다 */
    .book-picker .nlm-modal__box {
        width:100%;
        max-width:100%;
    }
}
@media (max-width:480px) {
    .book-picker .book-area {
        gap:1rem;
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}


/* ── 도서 다운로드 히어로 (pdf_download_box) ────────────────────────────────────── */
/* ── 도서 다운로드 히어로 (pdf_download_box) ───────────────────────── */


/* ── 도서 목록 탭 (booklist_wrap) ───────────────────────────────────────────── */
/* ── 도서 목록 탭 (booklist_wrap) ──────────────────────────────────── */

@media (max-width:767px) {
    .booklist-wrap .tab {
        display:flex;
        border-radius:var(--r-pill);
    }
    .booklist-wrap .tab li {
        height:auto;
        line-height:unset;
    }
    .booklist-wrap .tab li a {
        padding:.5rem 1.25rem;
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        line-height:unset;
    }
}

/* ── 도서 라벨 배지 — 전역 기본형 ─────────────────────────────────────────────────── */
/* ── 도서 라벨 배지 · 카드 라벨 줄 — 전역 기본형 (book.css 밖 문맥용) ── */
.book-labels {display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; min-height:22px; align-items:center;}
/* 글자 값이 여기 없으면 배지를 감싸는 문맥마다 제 사본을 갖게 된다 — 실제로
   목록·카드·상세 넷이 저마다 같은 값을 다시 적고 있었고, 사본이 없는
   bookDown 만 배지가 본문 글자(16px·400)로 부풀어 있었다. 기본형이 온전한
   배지를 그린다. 문맥은 차이만 얹는다. */
.badge-chip {display:inline-flex; align-items:center; min-height:22px; box-sizing:border-box;
    padding:3px 9px; border:1px solid rgba(0,0,0,.06); border-radius:var(--r-pill);
    font-size:var(--fs-2xs); line-height:var(--lh-tight); font-weight:700;
}

/* ============================================================================
   book.css — 도서 화면 전용 (목록 · 상세 · 카드 · 추천 진열)
   ----------------------------------------------------------------------------
   · sub.css 의 도서 블록과 book-cards.css 를 한곳으로 모은 것이다
   · sub.css 다음에 로드된다 (_root/_components/incHeader.php)
   · 색은 _tokens.css 의 토큰만 참조한다
   ========================================================================== */

/* ── sub.css 에서 이관 (2026.08 개편분 포함) ─────────────────────── */

.section-title03 .book-sel,.book-sel.flex {display:flex; justify-content:space-between; align-items:center; margin-top:20px;}
.section-title03 .book-sel:after,.book-sel.flex:after {display:none}
.section-title03 .book-sel .lang-box {float:none;}
@media screen and (max-width:1024px) {
.section-title03 .book-sel,.book-sel.flex {display:block;}
}
.book-area {padding:55px 0 0;}
.book-area .book-list {padding-top:30px;}
.book-area .book-list:after {display:block; content:''; clear:both;}
/* 옛 float 4열. «찾은 것이 없다» 알림은 칸이 아니라 한 줄이므로 뺀다
   (안 빼면 280px 짜리 한 칸에 갇혀 쪼그라든다) */
.book-area .book-list > li:not(.empty-state) {float:left; width:calc((100% - 60px)/4); margin:0 0 40px 20px;}
.book-area .book-list > li:not(.empty-state):nth-child(4n+1) {margin-left:0; clear:both;}
.book-area .book-list > li .img-area {max-width:260px; margin:0 auto;}
.book-area .book-list > li .img-area img {width:100%; height:100%;}
.book-area .book-list > li .text-area {text-align:center;}
.book-area .book-list > li .text-area .book-name {font-size:var(--fs-md);}
.book .book-sel:after {display:block; clear:both; content:'';}
.book .lang-box {float:left; padding:5px 15px;}
.book .sort-box .lang-title {text-align:right;font-size:18px;}
.book2 .lang-box {float:none; }
.book2 .sort-box .lang-title {text-align:left;}
.book2 .sort-box {margin:10px 0 0;}

/* 추천 진열 캐러셀 — slick 제거 후 자체 모듈(.nlmc, ui.css) 기반.
   컨테이너(.book-list)가 곧 스냅 트랙이고 .item 이 슬라이드다.
   화살표(기본형 ui.css)는 섹션 타이틀 오른쪽 .pager 안에 생성된다. */
/* 캐러셀이 붙기 **전**의 한 줄.
   붙기 전 .book-list 는 그냥 블록이라 카드가 한 줄에 하나씩 세로로 쌓였다
   — 도서 상세 17권이 25,462px, 복음 85권이 110,228px 였다. 예전 규칙은
   [class*="book_swiper"](밑줄)을 겨눴는데 마크업은 book-swiper(붙임표)라
   한 번도 닿지 않았다.
   칸 수는 bookDetail.js·tabernacle.js·tabernacleDetail.js 의 slidesToShow 를
   그대로 옮긴 것이다. 그래서 여기 경계는 설계 브레이크포인트가 아니라 **그
   설정의 경계**(1024·640)다 — 초기화 순간에 카드가 튀지 않으려면 두 값이
   같아야 한다. 설정을 고치면 여기도 함께 고칠 것. */
.book-swiper .book-list:not(.slick-initialized) {display:flex; flex-wrap:nowrap; overflow:hidden;}
.book-swiper .book-list:not(.slick-initialized) > * {flex:0 0 25%; min-width:0;}
@media screen and (max-width:1023.98px) {
    .book-swiper .book-list:not(.slick-initialized) > * {flex-basis:33.3333%;}
}
@media screen and (max-width:639.98px) {
    .book-swiper .book-list:not(.slick-initialized) > * {flex-basis:50%;}
}
.book-swiper .book-list > .item {padding:0 10px; box-sizing:border-box;}
/* 카드 링크의 class="inner" 는 레이아웃 컨테이너 .inner 와 이름이 겹친다.
   태블릿 폭에서 layout.css 가 .inner 에 좌우 30px 을 물려 카드가 칸보다 좁아졌다.
   카드 링크는 제 칸을 꽉 채운다 — 이름만 같을 뿐 다른 물건이다. */
.book-list a.inner {width:100%; max-width:none; padding:0; margin:0;}
.book-swiper .text-area {margin-top:5px;}
.inner .book-swiper .book-list {margin:0 -10px; padding:30px 0;}
.inner .book-swiper .book-list > .item {text-align:center;}

@media screen and (max-width:767px) {
.book .lang-box {padding:5px 0 0;}

}

.book-detail {padding:30px 0 40px; }
.book-detail:after {display:block; clear:both; content:'';}
.book-detail .book-img {width:330px; float:left;}
.book-detail .book-img .img-area {width:100%; max-width:330px;margin-top:30px; }
.book-detail .book-img .img-area img {width:100%;}
.book-detail .book-img .book-info {}
.book-detail .book-img .book-info ul {margin:0 auto; width:90%; overflow:hidden; padding:10px 0 0;}
.book-detail .book-img .book-info ul li {color:var(--ink);/*float:left;*/padding:0 20px;position:relative;font-size:var(--fs-md);}
.book-detail .book-img .book-info ul li:before {content:'';display:inline-block; width:1px; height:20px; margin:0 10px;background:var(--line);position:absolute; top:3px;left:-10px;}
.book-detail .book-img .book-info ul li span {color:var(--muted); margin:0 10px 0 0;font-size:var(--fs-md);}
.book-detail .book-text {width:calc(100% - 330px);float:right; padding:20px 0 0 70px; box-sizing:border-box;}
.book-detail .book-text .book-name {font-size:20px; line-height:27px;font-weight:400; color:var(--ink);}
.book-detail .book-text .a-name {font-size:22px; line-height:28px;}
.book-detail .book-text .book-author {color:var(--ink); font-size:var(--fs-base); margin-top:10px;}

[class^="pdfDown_title"] {width:98%;height:auto;background:#EAC7C8;color:var(--paper);padding:14px;font-weight:600;border-radius:2px;}
.pdfDown-p3 {line-height:26px;font-weight:600;text-align:center;margin-bottom:30px;word-break:keep-all;}

#pdfDown_loading {transform:scale(0.5); text-align:center;margin-top:-30px;}
.pdf-leader-box,.pdfDown-bottomBox {margin-top:40px; border-radius:20px;text-align:center;}
.pdf-leader-box {background:#f7f7f7; padding:30px 20px;}
.pdf-leader-box strong {font-weight:500; line-height:var(--lh-base);}.pdf-leader-box .list-reader {margin-top:30px; font-size:0;}
.pdf-leader-box li {display:inline-block; padding:12px;}
.pdf-leader-box .lab {display:block; margin-top:5px; font-size:var(--fs-md); font-weight:400;}
.pdfDown-bottomBox {background:var(--info-bg);padding:0 10px;}
.pdfDown-bottomBox .pdfDown-p3 {height:26px;padding-top:30px;}
.pdfDown-bottomBox img {display:block; max-width:100%; margin:0 auto;}
.review .book-detail {padding:20px; border:1px solid var(--line);}
.review .book-detail .book-img {width:150px;}
.review .book-detail .book-text {width:calc(100% - 150px); padding:15px 0 0 30px;}
.review .book-detail .small-title {font-size:var(--fs-base); color:var(--gold); font-weight:700; line-height:30px; margin-bottom:10px;}
.review .book-detail .book-text .book-info ul {}
.review .book-detail .book-text .book-info ul li {color:var(--ink); float:left; position:relative;font-size:var(--fs-md);}
.review .book-detail .book-text .book-info ul li:nth-child(2) {margin:0 0 0 20px; padding:0 0 0 20px;}
.review .book-detail .book-text .book-info ul li:nth-child(3) {margin:0 0 0 20px; padding:0 0 0 20px;}
.review .book-detail .book-text .book-info ul li:nth-child(2):before {content:'';display:inline-block; width:1px; height:20px; margin:0 10px;background:var(--line);position:absolute; top:3px;left:-10px;}
.review .book-detail .book-text .book-info ul li:nth-child(3):before {content:'';display:inline-block; width:1px; height:20px; margin:0 10px;background:var(--line);position:absolute; top:3px;left:-10px;}
.review .book-detail .book-text .book-info ul li span {color:var(--muted); margin:0 10px 0 0;font-size:var(--fs-md);}

.order-com .book-area {padding:0;}
@media screen and (min-width:768px) and (max-width:1200px) {
.book-area .book-list li .img-area {max-width:200px;}
.book .sort-box { float:none; clear:both; padding:10px 0 0 0; margin:0;}
.book .sort-box .lang-title {text-align:left;}
.book-detail .book-text .book-name {font-size:1.25rem;}
.book-detail .book-text {padding:0 0 0 30px;}
}
@media screen and (min-width:481px) and (max-width:767px) {
.book-area .book-list li .text-area .book-name {font-size:var(--fs-base);}
.book-area .book-list li { width:calc((100% - 30px)/4); margin:0 0 30px 10px;}
.book-area {padding:45px 0 0;}
.book-area .book-list li .img-area {max-width:150px;}
.book .sort-box { float:none; clear:both; padding:10px 0 0 0; margin:0;}
.book .lang-box {width:100%;}
.book .sort-box select { width:100%; }
.book .sort-box .lang-title {text-align:left;}
.book-detail .book-img .img-area {margin-top:0}
.book-detail {margin-bottom:-20px;}
.book-detail .book-text .book-name {font-size:1.25rem;}
.book-detail .book-text {padding:0 0 0 30px;}
.book-detail .book-img {float:none; margin:0 auto;}
.book-detail .book-text {float:none; width:100%; padding:20px 0 0; }
.book-detail .book-text .small-title {font-size:var(--fs-base);}

.review .book-detail {padding:10px;}
.review .book-detail .book-img {width:120px; margin:0; float:left;}
.review .book-detail .book-text {float:right; width:calc(100% - 120px); padding-top:0; padding-left:20px;}
.review .book-detail .small-title {margin-bottom:0;}
.review .book-detail .book-text .book-name {font-size:1.25rem;}
.review .book-detail .book-text .book-author {margin:5px 0;}
.review .book-detail .book-text .book-info ul li:nth-child(2) {margin:0 0 0 10px; padding:0 0 0 10px;}
.review .book-detail .book-text .book-info ul li:nth-child(3) {margin:0 0 0 10px; padding:0 0 0 10px;}
.review .book-detail .book-text .book-info ul li {font-size:var(--fs-base); }
.review .book-detail .book-text .book-info ul li span {font-size:var(--fs-base);}
.book-view [class^="section_tit"] h4 {width:calc(100% - 200px);}

}
@media screen and (max-width:480px) {
.book-view [class^="section_tit"] h4 {width:100%; text-align:center;}
.book-view [class^="section_tit"] h4.tal {text-align:left}
.book-area .book-list li {width: calc((100% - 10px)/2); margin:0 0 40px 10px; }
.book-area .book-list li:nth-child(2n+1) {margin-left:0; clear:both;}
.book-area {padding:25px 0 0;}
.book-detail .book-img .img-area {max-width:200px; margin-top:0;margin:0 auto;}
.book-area .book-list li .img-area {max-width:150px;}
.book .lang-box {clear:both; float:none;}
.book .sort-box {margin:0 0 0 0; padding:5px 0 0;}
.book .sort-box .lang-title {text-align:left;}
.book-detail {margin-bottom:-20px;}
.book-detail .book-text .book-name {font-size:1.25rem;}
.book-detail .book-text {padding:0 0 0 30px;}
.book-detail .book-img {float:none; margin:0 auto; width:auto;}
.book-detail .book-img .book-info ul li:before {display:none;}
.book-detail .book-text {float:none; width:100%; padding:20px 0 0; }
.book-detail .book-text .small-title {font-size:var(--fs-base);}
.book-detail .book-img .book-info ul {width:220px;}
.book-detail .book-img .book-info ul li { padding:0 10px;}

.review .book-detail .book-text {width:100%; padding-left:0;}
.review .book-detail .book-text .book-author {margin:5px 0;}

}
#sub_contents.book {
    --book-ink:var(--ink);
    --book-copy:var(--copy-soft);
    --book-muted:var(--muted);
    --book-gold:var(--gold);
    --book-gold-soft:var(--gold-soft);
    --book-line:var(--line);
    --book-paper:var(--paper-warm);
    --book-panel:var(--panel);
    /* 표지 최소폭·간격만 정하고 열 수는 폭이 정하게 둔다 (auto-fill) */
    --book-cover-min:160px;
    --book-grid-x:22px;
    --book-grid-y:36px;
    padding:0 0 88px;
    background:var(--paper);
    color:var(--book-ink);
}
#sub_contents.book:before {display:none;}
#sub_contents.book > form {display:block;}
#sub_contents.book ul.book-grid:after {display:none;}
#sub_contents.book ul.book-grid > li {float:none; clear:none; box-sizing:border-box;}
#sub_contents.book ul.book-grid > li > a {color:inherit; text-decoration:none;}
#sub_contents.book ul.book-grid > li .img-area {position:relative; overflow:hidden;
    border:1px solid rgba(45,37,24,.08); box-sizing:border-box; background:var(--panel);
    transition:transform .24s ease,box-shadow .24s ease;}
#sub_contents.book ul.book-grid > li .img-area img {display:block; width:100%; height:auto;
    aspect-ratio:260/381; object-fit:cover; transition:transform .3s ease;}
#sub_contents.book ul.book-grid > li .text-area .book-name {display:-webkit-box; overflow:hidden;
    -webkit-box-orient:vertical;}
#sub_contents.book ul.book-grid > li .book-labels {display:flex; flex-wrap:wrap; gap:4px;}
#sub_contents.book ul.book-grid > li .book-labels .badge-chip {display:inline-flex; align-items:center;
    min-height:22px; box-sizing:border-box; padding:3px 9px; border:1px solid rgba(0,0,0,.06);
    border-radius:999px; font-size:10px; line-height:1.35; font-weight:700; letter-spacing:.01em;}
#sub_contents.book ul.book-grid > li > a:focus-visible {outline:2px solid var(--book-gold);
    outline-offset:5px; border-radius:5px;}
#sub_contents.book .js-no-result .empty-state {margin:30px 0; font-size:var(--fs-md);}
#sub_contents.book > form > .inner,#sub_contents.book > .inner {width:calc(100% - 48px); max-width:1180px; margin-right:auto; margin-left:auto;
    padding-right:0; padding-left:0; box-sizing:border-box;}
#sub_contents.book .book-area {padding-top:0;}
#sub_contents.book > form > .inner:first-of-type {display:block; margin-top:0; padding-top:28px;}
#sub_contents.book > form > .inner:first-of-type:before {display:none;}
#sub_contents.book .trust-band {display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
    width:100%; margin:0; padding:0 0 20px; border:0;
    border-bottom:1px solid var(--book-line); background:transparent; box-shadow:none;}
/* 다른 페이지의 section_tit 계열(26px/700)과 같은 급으로 맞춘다 */
#sub_contents.book .trust-band .tb-lead {flex:0 0 100%; width:100%; min-width:100%; margin:0;
    color:var(--book-ink); font-size:26px;
    line-height:1.35; font-weight:700; letter-spacing:-.02em;}
#sub_contents.book .trust-band .tb-stat,#sub_contents.book .trust-band .tb-free {padding:0; border:0; background:none; color:var(--book-copy);
    font-size:var(--fs-xs); line-height:1.4; font-weight:500; white-space:nowrap;}
#sub_contents.book .trust-band .tb-stat b,#sub_contents.book .trust-band .tb-free {color:var(--book-gold); font-size:var(--fs-xs); font-weight:700;}
/* 숫자 뒤 단위 — «27» 이 무엇의 27인지 말해 준다. 좁은 화면에서는 접는다.
   .tb-free 는 조각을 감췄을 때 틈이 남지 않도록 flex 로 세운다. */
#sub_contents.book .trust-band .tb-unit {font-weight:500;}
#sub_contents.book .trust-band .tb-free {display:inline-flex; align-items:center; gap:5px;}
#sub_contents.book .trust-band .tb-free-ico {font-size:12px; line-height:1;}
#sub_contents.book .trust-band .tb-more {display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:36px; margin:0 0 0 auto; padding:0 14px; border:1px solid var(--gold-line); border-radius:999px;
    background:var(--gold-wash); color:var(--gold-deep); font-size:var(--fs-xs); line-height:1; font-weight:700; text-decoration:none;}
#sub_contents.book .trust-band .tb-caret {display:inline-block; font-size:9px; transition:transform .2s ease;}
#sub_contents.book .trust-band .tb-more.is-open .tb-caret {transform:rotate(180deg);}
/* 왼쪽 선을 머리글과 맞춘다 — 20px 들여쓰기 때문에 소개문만 안쪽으로 밀려 있었다 */
#sub_contents.book .trust-detail {max-width:none; margin:0; padding:18px 0; border-bottom:1px solid var(--book-line);
    background:var(--paper-warm);}
#sub_contents.book .trust-detail .td-lead {margin:0 0 6px; color:var(--book-ink); font-size:var(--fs-base); line-height:var(--lh-base);}
#sub_contents.book .trust-detail .td-desc {margin:0; color:var(--book-copy); font-size:var(--fs-sm); line-height:1.75;}
/* 위쪽 도구줄 — 왼쪽에 «단권 / 합본», 오른쪽에 언어 고르기. 한 줄이다.
   예전에는 밑줄 탭이 한 줄(81px), 언어 상자가 또 한 줄(72px)을 먹어
   첫 책까지 150px 가 그냥 밀렸다. */
#sub_contents.book .book-topbar {display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:12px 24px; margin:0; padding:32px 0 0;}
/* 도서 목록의 «단권 / 합본» 고르기 — 모양과 아이콘은 ui.css 의 .tabs-segment
   한 벌이 그린다. 여기서는 이 화면만의 것, «가장 센 조작기» 라는 크기만 맡는다.
   (예전에는 밑줄·글자색·flex 배치를 여기서 한 번 더 그려 두 겹이었다) */
/* 이것이 이 화면에서 가장 센 조작기다 — 누르면 카탈로그 전체가 바뀐다.
   그러니 캐러셀 안쪽만 바꾸는 .feature-head 보다 크고 진해야 한다.
   전에는 46h 대 54h 로 위계가 뒤집혀 있었다 (작은 쪽이 더 중요한 쪽이었다). */
#sub_contents.book .book-mode-switch {flex:0 0 auto; margin:0; padding:6px;
    border-color:var(--line);}
/* box-sizing 을 못 박는다 — 좁은 화면에서 width:100% 에 좌우 여백이 더해져
   조각이 제 칸을 12px 넘고, 금색 면이 옆 아이콘을 덮었다 */
#sub_contents.book .book-mode-switch > li > a {min-height:2.75rem; padding:0 1.5rem;
    box-sizing:border-box; gap:8px; font-size:var(--fs-md);}
/* .mode-icon 은 ui.css 의 세그먼트 어휘로 옮겼다 — 메인 화면도 같은 것을 쓴다 */
/* float 도 옛 흔적이라 여기서 끊는다 (.book .lang-box {float:left}) */
#sub_contents.book .book-topbar .language-control {display:flex; flex-wrap:wrap; align-items:center;
    justify-content:flex-end; float:none; gap:8px 12px; width:auto; margin:0; padding:0;}
/* 이 화면에서 유일한 «대문자 + 자간» 이라 혼자 튀었고, select 와 12px 떨어져
   무엇의 이름표인지도 약했다. ⊕ 아이콘과 바로 옆 안내문이 이미 말해 주므로
   화면에서는 감추고 읽어 주는 기계에만 남긴다 (정렬 상자와 같은 방식). */
#sub_contents.book .book-topbar .lang-title {position:absolute; overflow:hidden; width:1px;
    height:1px; margin:-1px; padding:0; clip:rect(0 0 0 0); white-space:nowrap;}
#sub_contents.book .language-select-wrap {position:relative; width:100%;}
#sub_contents.book .book-topbar .language-select-wrap {flex:0 1 auto; width:clamp(13.75rem,24vw,20rem);}
#sub_contents.book .book-topbar select {display:block; width:100%; max-width:none; height:44px;
    padding:0 44px 0 44px; border:1px solid var(--line-input); border-radius:12px; background-color:var(--paper);
    color:var(--book-ink); font-size:var(--fs-sm) !important; line-height:44px; font-weight:700; box-shadow:0 5px 15px -14px rgba(55,45,27,.7);}
/* 오른쪽에서 읽는 말 — 화살표가 왼쪽으로 가므로(layout.css) 그림표는 오른쪽으로 비킨다.
   둘 다 왼쪽에 서서 겹쳐 있었다 */
.align-right #sub_contents.book .language-select-wrap:before {right:15px; left:auto;}
/* 지구본. 예전에는 «⊕» 글자였는데 그건 «더하기» 로 읽혀 언어와 상관이 없었고,
   같은 줄의 돋보기·정렬 그림표(선으로 그린 16px)와 무게도 달랐다. */
#sub_contents.book .language-select-wrap:before {content:''; position:absolute; z-index:var(--z-inlay); left:15px; top:50%;
    width:16px; height:16px; background:center/16px 16px no-repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a13.5 13.5 0 0 1 0 18a13.5 13.5 0 0 1 0-18'/%3E%3C/svg%3E");
    transform:translateY(-50%); pointer-events:none;}
/* 이것은 안내문이지 단추가 아니다. 그런데 «About us» 단추와 바탕(--gold-wash)이
   똑같아 «눌러서 언어를 고르는 곳» 처럼 읽혔다. 옷을 벗기고 글자만 남긴다.
   한 줄에 모서리가 999px·12px·9px 세 가지이던 것도 이걸로 둘로 준다. */
#sub_contents.book .language-control .lang-box-desc {display:inline-flex; align-items:center; width:auto; min-height:0;
    margin:0; padding:0; gap:6px; border:0; border-radius:0; background:none; color:var(--book-muted); white-space:nowrap;}
#sub_contents.book .language-control .lang-box-desc img {flex:0 0 16px; width:16px; height:16px;}
#sub_contents.book .language-control .lang-box-desc span {font-size:var(--fs-2xs); line-height:var(--lh-tight); font-weight:700;}
/* 간격 자 한 벌 — 바깥 18 / 영역 사이 12 / 카드 안 14.
   예전에는 바깥 24, 카드 15, 격자 8, 점 16 으로 넷이 서로 관계가 없었다. */
#sub_contents.book .feature-carousel {position:relative; overflow:hidden; margin-top:28px; padding:18px;
    border:1px solid var(--book-line); border-radius:16px; background:var(--book-paper); box-shadow:none;}
#sub_contents.book .feature-carousel:after {display:none;}
#sub_contents.book .feature-carousel .feature-head {display:inline-flex; align-items:center; gap:4px; min-height:0;
    width:auto; margin:0; padding:4px; border:1px solid var(--line); border-radius:11px; background:var(--panel);}
#sub_contents.book .feature-carousel .feature-head:before {display:none;}
#sub_contents.book .feature-carousel .feature-head .ft-tab,#sub_contents.book .feature-carousel .feature-head .feature-title {position:relative; width:auto; margin:0;
    min-height:34px; padding:0 16px; border:0; border-radius:8px; background:transparent; box-shadow:none;
    color:#817a70; font-family:inherit; font-size:var(--fs-sm); line-height:34px; font-weight:700;
    letter-spacing:-.01em; white-space:nowrap;
    transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;}
/* 골드 «면» 은 위쪽 갈래 고르기 하나만 쓴다 — 여기는 흰 면 + 골드 글자로
   한 급 낮춘다. 같은 얼굴을 둘이 나눠 쓰면 어느 쪽이 중한지 알 수 없다. */
#sub_contents.book .feature-carousel .feature-head .ft-tab.is-on,#sub_contents.book .feature-carousel .feature-head .feature-title {border:0; background:var(--paper);
    color:var(--book-gold); box-shadow:0 2px 6px -3px rgba(60,45,20,.45);}
#sub_contents.book .feature-carousel .feature-head .ft-tab.is-on:after,#sub_contents.book .feature-carousel .feature-head .feature-title:after {display:none; content:none;}
#sub_contents.book .feature-carousel .feature-panel.is-off {display:none;}
/* 화살표는 탭과 같은 줄(카드 상단 오른쪽) — 탭 필박스(44px)와 세로 중심을 맞춘다 */
#sub_contents.book .feature-carousel .feature-panel-tools {display:flex; align-items:center; justify-content:flex-end;
    position:absolute; top:18px; inset-inline-end:18px; min-height:0; margin:0;}
#sub_contents.book .feature-carousel .feature-pager {display:flex; gap:7px; margin:0;}
#sub_contents.book .feature-carousel .feature-pager:empty {visibility:hidden; display:block; height:44px;}
/* 34px — 44px 짜리 원 둘이 탭보다 눈에 먼저 들어왔다 */
#sub_contents.book .feature-carousel .feature-pager .slick-arrow {position:relative; width:34px; height:34px;
    padding:0; overflow:hidden; border:1px solid var(--line-input); border-radius:50%; background:var(--paper);
    background-image:none !important; color:transparent; font-size:0 !important; line-height:0; text-indent:-9999px;
    box-shadow:none; cursor:pointer;}
#sub_contents.book .feature-carousel .feature-pager .slick-arrow:before {content:''; position:absolute; left:50%;
    top:50%; width:8px; height:8px; border-top:1.5px solid #554f46; border-right:1.5px solid #554f46;}
#sub_contents.book .feature-carousel .feature-pager .slick-prev:before {transform:translate(-35%,-50%) rotate(-135deg);}
#sub_contents.book .feature-carousel .feature-pager .slick-next:before {transform:translate(-65%,-50%) rotate(45deg);}
#sub_contents.book .feature-carousel .feature-pager .slick-disabled {opacity:.3; cursor:default;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid {width:auto;
    margin:0 -6px; padding:12px 0 0;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid:not(.slick-initialized) {display:flex; flex-wrap:nowrap;
    overflow:hidden;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid:not(.slick-initialized) > li {flex:0 0 50%; width:50%;}
/* 본 목록 격자의 «margin:0 0 40px» 이 여기까지 따라와 카드 밑에 죽은 띠가 있었다 */
#sub_contents.book .feature-carousel .feature-grid > li {display:block; height:auto;
    margin:0; padding:0 6px; box-sizing:border-box;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] > a {display:grid;
    grid-template-columns:138px minmax(0,1fr); grid-template-rows:1fr; gap:14px; width:100%; height:282px;
    min-height:282px; margin:0; padding:14px; border:1px solid var(--line); border-radius:10px; box-sizing:border-box;
    background:linear-gradient(145deg,var(--paper) 0%,var(--paper-warm) 100%);
    box-shadow:0 10px 24px -25px rgba(48,38,22,.7); transform:none; text-decoration:none;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .img-area {width:138px; height:202px;
    margin:0; border-radius:4px 7px 7px 4px; align-self:start;
    box-shadow:0 9px 20px -14px rgba(42,31,16,.65);}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .text-area {display:flex;
    flex-direction:column; min-width:0; height:100%; padding:0; text-align:start;}
/* 글씨를 한 급씩 올린다 — 10px·10.5px 는 본문으로 읽히지 않는다 */
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .text-area .small-title {
    margin:0 0 6px; color:var(--muted); font-size:var(--fs-2xs); line-height:1.4; font-weight:600;
    letter-spacing:.025em;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .text-area .small-title:before {display:none;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .text-area .book-series {margin:0 0 4px;
    color:var(--book-ink); font-size:var(--fs-base); line-height:1.35; font-weight:700; letter-spacing:-.015em;}
/* 세 줄 자리를 미리 잡아 두면 두 줄짜리 제목 밑에 빈 줄이 남는다 — 잘라내기만 한다 */
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .text-area .book-name {height:auto;
    min-height:0; display:-webkit-box; overflow:hidden; color:var(--ink); font-size:0.78125rem; line-height:1.5;
    font-weight:700; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
/* 열에 아홉은 라벨이 없는데 22px + 위아래 6px 를 잡고 있었다 */
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .book-labels {display:flex;
    align-items:center; min-height:0; margin:8px 0 0; gap:4px; overflow:hidden;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .book-labels:empty {display:none;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .book-labels .badge-chip {
    display:inline-flex; align-items:center; min-height:22px; padding:3px 9px; border:1px solid rgba(0,0,0,.06);
    border-radius:999px; box-sizing:border-box; font-size:var(--fs-2xs); line-height:var(--lh-tight); font-weight:700;
    text-decoration:none; box-shadow:none;}
/* 이 «margin:auto 0 0» 이 남는 공간을 통째로 위쪽 여백(45px)으로 만들어
   카드 한가운데에 구멍을 냈다. 상자를 아래로 밀지 말고, 남는 만큼 늘려
   소개글을 더 보여 준다 (flex:1). */
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .book-review {display:-webkit-box;
    flex:1 1 0; width:100%; height:auto; min-height:0; margin:12px 0 0; padding:9px 10px; border:1px solid var(--panel-deep);
    border-radius:6px; box-sizing:border-box; overflow:hidden; background:var(--paper-warm); color:var(--copy-soft);
    font-size:var(--fs-xs); line-height:1.6;}
/* 상자 높이가 줄 높이의 배수가 아니라 마지막 줄이 반쯤 잘려 끝난다.
   아래쪽을 옅게 지워 «이어진다» 로 읽히게 한다 (줄 수를 못 박으면 카드마다 빈다) */
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .book-review {
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 1.1em),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 1.1em),transparent);}
#sub_contents.book .feature-carousel .slick-dots {display:flex; justify-content:center; gap:7px;
    margin:14px 0 0;}
#sub_contents.book .feature-carousel .slick-dots li {display:block; width:auto; padding:0;}
#sub_contents.book .feature-carousel .slick-dots button {display:block; width:7px; height:7px;
    padding:0; border:0; border-radius:50%; background:#cbc5ba; font-size:0;}
#sub_contents.book .feature-carousel .slick-dots .slick-active button {background:var(--book-gold);}
/* 영역과 영역 사이 — 신뢰띠 뒤 32 / 캐러셀 앞 44 / 캐러셀 뒤 64.
   특히 갈래 고르기와 캐러셀 사이는 10px 뿐이라 두 세그먼트가 붙어 보였다. */
#sub_contents.book form > .inner:has(> .feature-carousel) > .feature-carousel {margin-top:1.75rem;}
#sub_contents.book .inner:has(> .feature-carousel) + .inner {margin-top:4rem;}
#sub_contents.book form > .inner > .book-area {margin-top:0;}
#sub_contents.book .book-area > .section-title03 {padding:0; border:0;}
#sub_contents.book .catalog-title-row,#sub_contents.book .topic-title-row {display:flex; flex-wrap:nowrap; align-items:center;
    justify-content:flex-start; gap:12px; width:100%;}
#sub_contents.book .catalog-title-row > h4,#sub_contents.book .topic-title-row > h4 {order:1; flex:0 1 auto; min-width:0;}
#sub_contents.book .catalog-title-row:after,#sub_contents.book .topic-title-row:after {content:''; order:2; flex:1 1 20px; min-width:14px; height:1px;
    background:#e3daca;}
#sub_contents.book .catalog-counts,#sub_contents.book .topic-counts {order:3; flex:0 0 auto;}
#sub_contents.book .book-area > .section-title03 > h4,#sub_contents.book .catalog-title-row > h4 {margin:0; color:var(--book-ink); font-family:inherit;
    font-size:22px; line-height:1.4; font-weight:700; letter-spacing:-.03em;}
#sub_contents.book .book-area > .section-title03 > h4:after,#sub_contents.book .catalog-title-row > h4:after {display:none; content:none;}
#sub_contents.book .catalog-counts,#sub_contents.book .topic-counts {display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; margin-left:0;}
#sub_contents.book .catalog-counts span,#sub_contents.book .topic-counts span {display:inline-flex; align-items:baseline; gap:5px; min-height:30px;
    padding:0 11px; border-radius:999px; box-sizing:border-box;
    background:var(--panel); color:#746d62; font-size:10px; line-height:28px; font-weight:700; white-space:nowrap;}
#sub_contents.book .catalog-counts b,#sub_contents.book .topic-counts b {color:var(--book-gold); font-size:var(--fs-xs); font-weight:700;}
#sub_contents.book .section-title03 .book-sel {display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap;
    margin-top:18px; padding:16px; border:1px solid var(--book-line); border-radius:14px;
    background:linear-gradient(180deg,var(--paper) 0%,var(--book-paper) 100%);}
#sub_contents.book .section-title03 .select-wrap {display:flex; align-items:center; flex:0 0 auto;}
#sub_contents.book .sort-box select {height:40px; min-width:164px; border-color:var(--line-input); border-radius:10px;
    font-size:var(--fs-xs) !important;}
#sub_contents.book .book-search {display:flex; flex:1 1 240px; justify-content:flex-end; padding:0;}
#sub_contents.book .book-search input {width:min(300px,100%); height:40px; border-color:var(--line-input); border-radius:10px;
    font-size:var(--fs-xs);}
#sub_contents.book .series-filter {order:3; flex:1 1 100%; display:flex; flex-wrap:wrap; gap:7px;
    padding:12px 0 0; border-top:1px solid #ece5d8;}
#sub_contents.book .series-chip {min-height:32px; padding:6px 13px; border:1px solid #e2dbcd; border-radius:999px;
    background:var(--paper); color:var(--book-copy); font-size:11.5px; line-height:1.2; font-weight:600; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;}
#sub_contents.book .series-chip:hover {border-color:#d5c08a; background:#fffdf7; color:var(--book-ink);}
#sub_contents.book .series-chip.is-on {border-color:var(--book-gold); background:var(--book-gold); color:var(--paper);
    font-weight:700; box-shadow:var(--sh-gold);}
#sub_contents.book .series-chip .c {margin-left:5px; font-size:10px; font-weight:700; opacity:.6;}
#sub_contents.book .book-area ul.book-grid:not(.feature-grid) {display:grid;
    grid-template-columns:repeat(auto-fill,
        minmax(min(var(--book-cover-min), calc(50% - var(--book-grid-x) / 2)), 1fr));
    gap:var(--book-grid-y) var(--book-grid-x); margin:0; padding-top:28px;}
#sub_contents.book .book-area ul.book-grid:not(.feature-grid) > li {display:flex; width:auto; min-width:0; margin:0;}
/* 주제 안의 시리즈 묶음 — 주제 머리글보다 한 급 낮은 곁머리.
   주제 제목이 골드 막대 + 큰 글씨라면, 이쪽은 가는 선 + 작은 글씨다. */
#sub_contents.book .series-group {margin-top:30px;}
#sub_contents.book .series-group:first-child {margin-top:0;}
#sub_contents.book .series-group-title {display:flex; align-items:center; gap:9px; margin:0;
    color:var(--book-copy); font-size:var(--fs-sm); line-height:1.4; font-weight:700; letter-spacing:-.01em;}
#sub_contents.book .series-group-title:before {content:''; flex:0 0 3px; width:3px; height:13px;
    border-radius:2px; background:var(--gold-line);}
#sub_contents.book .series-group-title:after {content:''; flex:1 1 auto; height:1px;
    background:var(--book-line);}
#sub_contents.book .series-group-title .c {order:3; flex:0 0 auto; min-width:20px; padding:2px 8px;
    border-radius:999px; background:var(--gold-wash); color:var(--book-gold);
    font-size:var(--fs-2xs); line-height:1.4; font-weight:700; text-align:center;}
#sub_contents.book .series-group .book-grid {padding-top:14px;}
#sub_contents.book .book-area .book-area {margin:0; padding:54px 0 0;}
#sub_contents.book .book-area .book-area .inner,#sub_contents.book .book-area .inner {width:100%; max-width:none; margin:0; padding:0;}
#sub_contents.book .book-area .book-area .section-title03 h4 {position:relative; margin:0; padding-left:12px; padding-bottom: 0;
    color:var(--book-ink); font-size:var(--fs-md); line-height:1.45; font-weight:700;}
#sub_contents.book .book-area .book-area .section-title03 h4:before {content:''; position:absolute; left:0;
    top:.22em; bottom:.22em; width:3px; border-radius:3px; background:#c5a552;}
#sub_contents.book .book-area .book-area .section-title03 h4:after {display:none; content:none;}
#sub_contents.book .topic-title-row {gap:12px;}
#sub_contents.book .coworker-note a {font-size:inherit; color:var(--book-gold); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
#sub_contents.book .coworker-note {max-width:1180px; margin:56px auto 0; padding:18px 20px;
    border:1px solid var(--book-line); border-radius:12px; background:var(--book-paper); color:var(--book-copy);
    font-size:var(--fs-xs); line-height:1.7;}
@media (hover:hover) {
#sub_contents.book .book-area ul.book-grid > li > a:hover {background:none; box-shadow:none; transform:none;}
#sub_contents.book .book-area ul.book-grid > li > a:hover .img-area {transform:translateY(-3px);
        box-shadow:var(--sh-lift);}
#sub_contents.book .book-area ul.book-grid > li > a:hover .img-area img {transform:scale(1.02);}
#sub_contents.book .book-area ul.book-grid:not(.feature-grid) > li > a:hover .text-area .book-name,#sub_contents.book .book-area ul.book-grid:not(.feature-grid) > li > a:hover .text-area .book-series {
        color:var(--book-gold);}
}
@media all and (max-width:1024px) {
.booklist-wrap #nav {display:none;}
#sub_contents.book .trust-band {display:flex; flex-wrap:wrap; align-items:center; gap:9px 15px;}
#sub_contents.book .trust-band .tb-lead {flex:0 0 100%; width:100%; min-width:100%;}
#sub_contents.book .trust-band .tb-more {margin-left:auto;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid:not(.slick-initialized) > li {
        flex-basis:100%; width:100%;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] > a {
        grid-template-columns:124px minmax(0,1fr); height:274px; min-height:274px; gap:14px; padding:13px;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .img-area {
        width:124px !important; max-width:124px; height:182px !important; max-height:182px;
        overflow:hidden;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .img-area img {
        display:block; width:100%; height:100%; max-height:182px;
        aspect-ratio:auto; object-fit:cover;}
#sub_contents.book {--book-cover-min:155px; --book-grid-x:18px; --book-grid-y:32px;}
}
@media all and (max-width:767px) {
#sub_contents.book {padding-bottom:56px;}
/* sub.css 의 전역 «.small-title {height:40px; line-height:40px; margin-top:-10px}» 이
   좁은 화면에서 도서 카드까지 새어 들어왔다. 한 줄짜리 «— English 22» 가 40px 를
   먹고 있었고, 이 화면에만 카드가 85장이다. 카드 안에서는 글자 높이만큼만 쓴다. */
#sub_contents.book .book-grid .small-title {height:auto; line-height:var(--lh-tight); margin-top:0;}
#sub_contents.book > form > .inner,#sub_contents.book > .inner {width:calc(100% - 32px);}
#sub_contents.book > form > .inner:first-of-type {padding-top:20px;}
#sub_contents.book .trust-band {display:flex; align-items:center; gap:9px 14px; padding-bottom:16px;}
#sub_contents.book .trust-band .tb-lead {flex:0 0 100%; width:100%; min-width:100%; font-size:var(--fs-md);}
#sub_contents.book .trust-band .tb-stat,#sub_contents.book .trust-band .tb-free {font-size:10.5px;}
#sub_contents.book .trust-band .tb-unit {display:none;}
#sub_contents.book .trust-band .tb-more {min-height:32px; margin-left:auto; padding:0 11px; font-size:10.5px;}
#sub_contents.book .trust-detail {padding:14px 0;}
/* 좁은 화면에서는 한 줄이 안 되니 위아래로 — 세그먼트는 폭을 꽉 채워 두 조각이
       똑같이 나뉘고, 긴 «Dual Language (Bilingual Book)» 는 두 줄로 접힌다. */
#sub_contents.book .book-topbar {flex-direction:column; align-items:stretch; gap:10px; padding:22px 0 0;}
#sub_contents.book .book-mode-switch {display:flex; width:100%; padding:5px;}
#sub_contents.book .book-mode-switch > li {flex:1 1 0; min-width:0;}
#sub_contents.book .book-mode-switch > li > a {width:100%; min-height:2.625rem; gap:7px; padding:0 8px;
        font-size:var(--fs-sm); line-height:1.25; white-space:normal;}
#sub_contents.book .book-topbar .language-control {justify-content:flex-start; gap:7px 10px;}
/* «LANGUAGE» 딱지와 고르개는 한 줄에 — 딱지만으로 한 줄을 쓰던 것을 없앤다 */
#sub_contents.book .book-topbar .lang-title {flex:0 0 auto;}
#sub_contents.book .book-topbar .language-select-wrap {flex:1 1 12rem; width:auto; min-width:0;}
#sub_contents.book .book-topbar .lang-box-desc {flex:1 1 100%;}
#sub_contents.book .language-control .lang-box-desc {margin:0; min-height:0; padding:0; white-space:normal;}
#sub_contents.book .feature-carousel {margin:32px -2px 0; padding:18px 14px 16px; border-radius:12px;}
#sub_contents.book .feature-carousel .feature-head {display:flex; width:100%; gap:4px; box-sizing:border-box;}
/* 좁은 화면은 탭이 전폭이라 화살표를 탭 줄에 못 올린다 — 다시 아래 줄로 */
#sub_contents.book .feature-carousel .feature-panel-tools {position:static; margin:12px 0 0;}
#sub_contents.book .feature-carousel .feature-head .ft-tab,#sub_contents.book .feature-carousel .feature-head .feature-title {flex:1 1 50%; min-width:0; padding:0 8px;
        font-size:var(--fs-2xs); text-align:center; overflow:hidden; text-overflow:ellipsis;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid:not(.slick-initialized) > li {flex-basis:100%; width:100%;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] > a {grid-template-columns:102px minmax(0,1fr);
        width:100%; height:258px; min-height:258px; gap:12px; padding:12px;}
#sub_contents.book .feature-carousel {padding:14px;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid {padding-top:10px;}
#sub_contents.book .feature-carousel .slick-dots {margin-top:12px;}
#sub_contents.book .feature-carousel .feature-pager .slick-arrow {width:32px; height:32px;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .img-area {
        width:102px !important; max-width:102px; height:150px !important; max-height:150px;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .img-area img {
        height:100%; max-height:150px; object-fit:cover;}
/* 넓은 화면과 같은 처방 — 세 줄 자리를 미리 잡지 않고, 소개 상자는 고정 높이
   대신 남는 만큼 늘린다. 9.5px 는 본문으로 읽히지 않아 한 급 올린다. */
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .text-area .book-name {height:auto;
        min-height:0; font-size:var(--fs-xs); -webkit-line-clamp:3;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .book-review {flex:1 1 0; height:auto;
        min-height:0; margin:10px 0 0; padding:8px 9px; font-size:var(--fs-2xs); line-height:1.55;}
#sub_contents.book .inner:has(> .feature-carousel) + .inner {margin-top:2.75rem;}
#sub_contents.book form > .inner > .book-area {margin-top:0;}
#sub_contents.book .book-area > .section-title03 > h4,#sub_contents.book .catalog-title-row > h4 {font-size:var(--fs-lg);}
#sub_contents.book .catalog-title-row:after,#sub_contents.book .topic-title-row:after {display:none; content:none;}
#sub_contents.book .catalog-title-row {align-items:flex-start; flex-direction:column; flex-wrap:wrap; gap:9px;}
#sub_contents.book .catalog-counts {margin-left:0;}
#sub_contents.book .topic-title-row {flex-wrap:wrap; gap:0px;}
#sub_contents.book .topic-counts {margin-top:12px;width: 100%;}
#sub_contents.book .section-title03 .book-sel {align-items:stretch; padding:12px;}
#sub_contents.book .section-title03 .select-wrap,#sub_contents.book .section-title03 .lang-box,#sub_contents.book .sort-box select,#sub_contents.book .book-search,#sub_contents.book .book-search input {width:100%; max-width:none;}
#sub_contents.book .series-filter {padding-top:9px;}
#sub_contents.book {--book-cover-min:140px; --book-grid-x:14px; --book-grid-y:28px;}
#sub_contents.book .book-area ul.book-grid:not(.feature-grid) {padding-top:22px;}
#sub_contents.book .series-group {margin-top:22px;}
#sub_contents.book .series-group .book-grid {padding-top:11px;}
#sub_contents.book .book-area .book-area {padding-top:36px;}
#sub_contents.book .book-area .book-area .section-title03 h4 {padding-bottom: 0; font-size:15px;}
#sub_contents.book .coworker-note {margin-top:42px; padding:15px;}
}
@media all and (max-width:480px) {
#sub_contents.book .trust-band {column-gap:12px;}
#sub_contents.book .book-mode-switch > li > a {padding:0 6px; font-size:var(--fs-2xs);}
#sub_contents.book .feature-carousel {margin-right:-8px; margin-left:-8px; padding-right:10px; padding-left:10px;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] > a {grid-template-columns:90px minmax(0,1fr);
        height:252px; min-height:252px; gap:10px; padding:10px;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .img-area {
        width:90px !important; max-width:90px; height:132px !important; max-height:132px;}
#sub_contents.book .book-area.feature-carousel ul.feature-grid li[data-search] .img-area img {
        height:100%; max-height:132px;}
#sub_contents.book {--book-cover-min:132px; --book-grid-x:13px; --book-grid-y:26px;}
}
#sub_contents.book .section-title03 .book-sel {display:grid;
    grid-template-columns:minmax(210px,280px) minmax(260px,1fr);
    grid-template-areas:'sort search' 'series series'; align-items:center; gap:10px 12px;
    padding:12px; border-radius:14px;}
#sub_contents.book .section-title03 .book-sel:before,#sub_contents.book .section-title03 .book-sel:after {display:none; content:none;}
#sub_contents.book .section-title03 .book-sel:not(:has(.series-filter)) {
    grid-template-areas:'sort search'; grid-template-rows:44px; row-gap:0; padding-top:10px; padding-bottom:10px;}
#sub_contents.book .section-title03 .select-wrap {grid-area:sort; position:relative; width:100%;}
#sub_contents.book .section-title03 .select-wrap:not(:has(.sort-box)) {display:none;}
/* 옛 float 시절의 «.book .lang-box {padding:5px 15px}» 와 «.book .sort-box {margin:10px 0 0}»
   가 여기까지 따라와, 정렬 상자만 54px 에 10px 아래로 밀려 검색창과 어긋나 있었다.
   아이콘 칸은 46px — 16px 아이콘의 한가운데(23px)가 검색 돋보기와 같은 자리에 선다. */
#sub_contents.book .section-title03 .select-wrap .lang-box {display:grid;
    grid-template-columns:46px minmax(0,1fr); align-items:center; float:none;
    width:100%; margin:0; padding:0;}
#sub_contents.book .section-title03 .select-wrap .lang-box:before {content:''; grid-column:1; grid-row:1;
    z-index:var(--z-inlay); width:16px; height:16px; margin:auto; background:center/16px 16px no-repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a57c1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M6 12h12M10 18h4'/%3E%3C/svg%3E");
    pointer-events:none;}
#sub_contents.book .section-title03 .select-wrap .lang-title {position:absolute; overflow:hidden; width:1px;
    height:1px; margin:-1px; padding:0; clip:rect(0 0 0 0); white-space:nowrap;}
#sub_contents.book .section-title03 .sort-box select {grid-column:1/-1; grid-row:1; width:100%; min-width:0;
    height:44px; padding:0 38px 0 42px; border:1px solid var(--line-input); border-radius:10px; background-color:var(--paper);
    color:var(--book-ink); font-size:var(--fs-xs) !important; line-height:44px; font-weight:700;
    box-shadow:var(--sh-soft);}
#sub_contents.book .section-title03 .book-search {grid-area:search; position:relative; display:block; width:100%;}
#sub_contents.book .section-title03 .book-search:before {content:''; position:absolute; z-index:var(--z-inlay); left:15px;
    top:50%; width:16px; height:16px; background:center/16px 16px no-repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    transform:translateY(-50%); pointer-events:none;}
#sub_contents.book .section-title03 .book-search input {display:block; width:100%; max-width:none; height:44px;
    padding:0 16px 0 42px; border:1px solid var(--line-input); border-radius:10px; background:var(--paper);
    background-image:none; color:var(--book-ink); font-size:var(--fs-xs); box-shadow:var(--sh-soft);}
#sub_contents.book .section-title03 .book-search input:focus {border-color:var(--gold);
    box-shadow:0 0 0 3px var(--focus);}
#sub_contents.book .section-title03 .book-search input::placeholder {color:#aaa49a;}
#sub_contents.book .section-title03 .series-filter {grid-area:series; margin:0;}
/* 정렬 칸을 280px 로 묶어 두면 «Ordenar los libros por núme…» 처럼 말끝이 잘린다 */
#sub_contents.book .section-title03 .book-sel:has(.sort-box) {
    grid-template-columns:minmax(13.125rem,24rem) minmax(260px,1fr);
    grid-template-areas:'sort search' 'series series';}
#sub_contents.book .section-title03 .book-sel:has(.sort-box):not(:has(.series-filter)) {
    grid-template-areas:'sort search'; grid-template-rows:44px; row-gap:0;}
/* 정렬 Select 이 없으면 검색창이 한 줄을 다 쓴다. 있으면 정렬과 검색이 한 줄
   (윗줄 :has(.sort-box) 규칙). 시리즈 칩은 언제나 그 아랫줄이다 —
   칩 이름이 긴 말(스페인어)에서는 칩만 여러 줄이 되므로 옆에 세울 수 없다. */
#sub_contents.book .section-title03 .book-sel:not(:has(.sort-box)) {
    grid-template-columns:minmax(260px,1fr);
    grid-template-areas:'search' 'series';}
#sub_contents.book .section-title03 .book-sel:not(:has(.sort-box)):not(:has(.series-filter)) {
    grid-template-areas:'search'; grid-template-rows:44px; row-gap:0;}
@media all and (max-width:767px) {
#sub_contents.book .section-title03 .book-sel {grid-template-columns:1fr;
        grid-template-areas:'search' 'sort' 'series'; gap:8px; padding:10px;}
#sub_contents.book .section-title03 .select-wrap,#sub_contents.book .section-title03 .select-wrap .lang-box {width:100%;}
#sub_contents.book .section-title03 .sort-box select,#sub_contents.book .section-title03 .book-search input {height:42px;}
#sub_contents.book .section-title03 .book-sel:not(:has(.series-filter)) {
        grid-template-areas:'search' 'sort'; grid-template-rows:42px 42px; row-gap:8px;}
#sub_contents.book .section-title03 .book-sel:has(.sort-box) {
        grid-template-columns:1fr; grid-template-areas:'search' 'sort' 'series';}
#sub_contents.book .section-title03 .book-sel:has(.sort-box):not(:has(.series-filter)) {
        grid-template-areas:'search' 'sort'; grid-template-rows:42px 42px; row-gap:8px;}
#sub_contents.book .section-title03 .book-sel:not(:has(.sort-box)) {
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:'search' 'series';}
#sub_contents.book .section-title03 .book-sel:not(:has(.sort-box)):not(:has(.series-filter)) {
        grid-template-areas:'search'; grid-template-rows:42px; row-gap:0;}
}

/* ── book-cards.css 흡수 (원래 sub.css 뒤에 로드되던 것) ────────── */

/* Shared book presentation
   Used by the home page, book detail, Bible-study recommendations and order book lists. */
:root {
    --shared-book-ink:var(--ink);
    --shared-book-copy:var(--copy-soft);
    --shared-book-muted:var(--muted);
    --shared-book-gold:var(--gold);
    --shared-book-line:var(--line);
    --shared-book-paper:var(--paper-warm);
}

/* Recommendation shelves */
.book-recommend-area {box-sizing:border-box;}
.book-recommend-area .section-title {display:flex; align-items:center; min-height:40px; padding-bottom:12px;
    border-bottom:1px solid var(--shared-book-line);}
.book-recommend-area .section-title h4 {margin:0; color:var(--shared-book-ink); font-size:17px; line-height:1.4;
    font-weight:700; letter-spacing:-.025em;}
/* 화살표 둘은 한 줄로 선다. 예전 규칙은 [class*="book_swiper"] (밑줄) 을 겨눴는데
   실제 마크업은 book-swiper (붙임표)라 한 번도 닿지 않았다 — 그래서 세로로 쌓였다. */
.book-recommend-area .section-title .pager {display:flex; flex:0 0 auto; gap:8px; margin-left:auto; font-size:0;}
/* 카드 생김새는 ui.css 의 «도서 카드» 한 벌 — 여기는 영역별 치수만 남긴다 */

/* Plain book lists, such as order completion */
.book-area > ul.book-list:not(.book-grid) {display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    gap:30px 20px; margin:0; padding:24px 0 0;}
.book-area > ul.book-list:not(.book-grid):after {display:none;}
.book-area > ul.book-list:not(.book-grid) > li {float:none; width:auto; margin:0;}
@media all and (max-width:1024px) {
    .book-area > ul.book-list:not(.book-grid) {grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media all and (max-width:767px) {
    .book-recommend-area .section-title h4 {font-size:15px;}
    .book-recommend-area .book-list .text-area {padding-top:9px;}
    .book-recommend-area .book-list .book-name {font-size:var(--fs-2xs);}
    .book-area > ul.book-list:not(.book-grid) {grid-template-columns:repeat(3,minmax(0,1fr));
        gap:26px 14px; padding-top:20px;}
}

@media all and (max-width:480px) {
    .book-area > ul.book-list:not(.book-grid) {grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 13px;}
}

@media (prefers-reduced-motion:reduce) {
    .book-recommend-area .book-list .img-area,.book-recommend-area .book-list .img-area img {transition:none;}
}


/* ── 도서 상세 화면 전면 정돈 (2026.08 골드·잉크·페이퍼 체계) ────────
   표지 왼쪽 / 오른쪽 컬럼에 시리즈+권수 → 제목 → English 번호·메타 → 라벨·상태 → 다운로드 ── */

.book-view {padding-bottom:80px;}
.book-view .detail-section-head {display:flex; align-items:center; justify-content:space-between; min-height:42px; padding-bottom:16px; border-bottom:1px solid var(--line-soft);}
.book-view .detail-section-head h4 {display:flex; align-items:center; gap:12px; margin:0; padding-bottom:0; color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.02em;}
.book-view .detail-section-head h4:before {width:4px; height:18px; border-radius:99px; background:var(--gold); content:'';}
.book-view .detail-section-head h4:after {width:42px; height:1px; background:var(--gold); content:'';}
.book-view .detail-section-head .right {margin-left:auto;}

/* 도서 상세 메인 레이아웃 (Grid) */
.book-view .book-detail {display:grid; grid-template-columns:minmax(240px, 320px) minmax(0, 1fr); gap:48px;
    align-items:start; margin-top:28px; padding:34px; border:1px solid var(--line); border-radius:22px;
    background:#fff;}
.book-view .book-detail:after {display:none;}

/* 도서 표지 영역 */
.book-view .book-detail .book-img {position:sticky; top:24px; width:100%; max-width:320px; float:none; margin:0;}
.book-view .book-detail .book-img .img-area {position:relative; width:100%; max-width:none; margin:0; overflow:hidden;
    border-radius:4px 12px 12px 4px; background:var(--panel);
    box-shadow:0 4px 14px rgba(31,26,18,.10), 0 20px 38px -18px rgba(31,26,18,.60);
    transition:transform var(--t-base), box-shadow var(--t-base);}
.book-view .book-detail .book-img .img-area:hover {transform:translateY(-3px); box-shadow:0 8px 22px rgba(31,26,18,.14), 0 28px 46px -20px rgba(31,26,18,.62);}
.book-view .book-detail .book-img .img-area:before {content:''; position:absolute; z-index:var(--z-inlay); top:0; bottom:0; left:0; width:8px;
    background:linear-gradient(90deg, rgba(24,18,10,.22), rgba(255,255,255,.12), transparent); pointer-events:none;}
.book-view .book-detail .book-img .img-area:after {content:''; position:absolute; z-index:var(--z-inlay); inset:0;
    border:1px solid rgba(34,27,16,.08); border-radius:inherit;
    box-shadow:inset -1px 0 rgba(255,255,255,.25); pointer-events:none;}
.book-view .book-detail .book-img .img-area img {display:block; width:100%; height:auto; aspect-ratio:260/381; object-fit:cover;}

/* 표지 하단 샘플 미리보기 버튼 */
.book-view .book-detail .book-img .sample-area {display:flex; justify-content:center; margin-top:16px;}
.book-view .book-detail .book-img .BtnSample {display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; min-height:44px; padding:0 20px; box-sizing:border-box;
    border:1.5px solid var(--line-input); border-radius:var(--r-pill);
    background:var(--paper); color:var(--ink); font-size:var(--fs-sm); font-weight:700; text-decoration:none;
    box-shadow:var(--sh-soft); transition:border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);}
.book-view .book-detail .book-img .BtnSample:before {width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6b16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center/contain no-repeat; content:'';}
.book-view .book-detail .book-img .BtnSample:hover {border-color:var(--gold); background:var(--gold-wash); color:var(--gold-deep); box-shadow:var(--sh-gold);}

/* 오른쪽 도서 정보 영역 */
.book-view .book-detail .book-text.book-down-info {display:flex; flex-direction:column; min-width:0; width:auto; float:none; padding:0; box-sizing:border-box;}

/* 시리즈 + 권번호 */
.book-detail .detail-series {display:inline-block; margin:0 0 6px; color:var(--gold); font-size:14.5px; line-height:1.35;
    font-weight:700; letter-spacing:-.01em;}

/* 도서 제목 */
.book-detail .book-text .book-name.a-name {display:block; margin:0 0 14px; padding:0;
    color:var(--ink); font-size:clamp(24px, 2vw, 32px); line-height:var(--lh-tight); font-weight:700; letter-spacing:-.025em; word-break:keep-all;}

/* 메타 정보 바 */
/* 이 줄은 class 가 «book-author detail-meta» 라 위쪽 .book-detail .book-text .book-author
   규칙(선택자 셋)이 늘 이겨 왔다 — 여기도 셋으로 맞춰 제 크기를 찾아 준다 */
.book-detail .book-text .detail-meta {display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
    margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--line-soft);
    color:var(--copy-soft); font-size:13.5px; line-height:1.5;}
.book-detail .detail-meta > span {display:inline-flex; align-items:center; gap:4px;}
.book-detail .detail-meta b {color:var(--ink); font-weight:700;}
.book-detail .detail-meta .detail-oldno {display:inline-flex; align-items:center; padding:3px 10px;
    border-radius:var(--r-pill); background:var(--gold-soft); color:var(--gold-deep);
    font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;}

/* 라벨 및 상태 배지 — 각 무리 앞에 Tags / State 라벨을 세운다 */
.book-detail .detail-labels {display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0 0 20px;}
.book-detail .detail-labels-group {display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0;}
.book-detail .detail-labels-caption {color:var(--copy-soft); font-size:var(--fs-xs); font-weight:700; letter-spacing:-.01em; white-space:nowrap;}
.book-detail .detail-labels .badge-chip {display:inline-flex; align-items:center; min-height:24px;
    padding:4px 10px; border:1px solid rgba(0,0,0,.06); border-radius:var(--r-pill);
    box-sizing:border-box; font-size:var(--fs-2xs); line-height:var(--lh-tight); font-weight:700;}

/* 다운로드 패널 */
.book-detail .download-panel {padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:var(--paper-warm);}
.book-detail .download-panel .title {margin:0 0 6px; color:var(--ink); font-size:15px; font-weight:700; letter-spacing:-.01em;}
.book-detail .download-panel .title b {color:var(--gold); font-size:inherit;}
.book-detail .download-panel .desc {margin:0 0 14px; color:var(--copy); font-size:12.5px; line-height:1.55;}
.book-detail .download-panel .btn-list {display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin:0;}
.book-detail .download-panel .audio-downloads:not(:empty) {margin-top:10px;}

/* 다운로드 버튼 공통 베이스 (컴팩트 사이즈) */
.book-down-info .BtnPdf,
.book-down-info .BtnEpub,
.book-down-info .BtnAudio,
.audio-area .BtnAudio {
    width: 100%;
    display:inline-flex; align-items:center; justify-content:center;
    min-height:40px; padding:0 34px 0 16px; border-radius:8px; box-sizing:border-box;
    color:#fff !important; font-size:12.5px; font-weight:700; text-decoration:none;
    transition:background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

/* PDF: 화사한 핑크 */
.book-down-info .BtnPdf {
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m6 11 6 6 6-6'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center / 15px, #e84393;
    box-shadow:0 3px 8px rgba(232,67,147,.28);
}
.book-down-info .BtnPdf:hover {
    background-color:#d63384; transform:translateY(-1px); box-shadow:0 5px 14px rgba(232,67,147,.38);
}

/* EPUB: 선명한 보라 */
.book-down-info .BtnEpub {
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m6 11 6 6 6-6'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center / 15px, #7c3aed;
    box-shadow:0 3px 8px rgba(124,58,237,.28);
}
.book-down-info .BtnEpub:hover {
    background-color:#6d28d9; transform:translateY(-1px); box-shadow:0 5px 14px rgba(124,58,237,.38);
}

/* Audio: 웜 앰버 골드 */
.book-down-info .BtnAudio,
.audio-area .BtnAudio {
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m6 11 6 6 6-6'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center / 15px, #c67b07;
    box-shadow:0 3px 8px rgba(198,123,7,.25);
}
.book-down-info .BtnAudio:hover,
.audio-area .BtnAudio:hover {
    background-color:#a86603; transform:translateY(-1px); box-shadow:0 5px 14px rgba(198,123,7,.35);
}

/* 번호 안내 박스 (시안 §4) */
.book-down-info .oldno-note {margin:14px 0 0; padding:12px 16px; border:1px solid var(--gold-line); border-left:4px solid var(--gold);
    border-radius:var(--r-md); background:var(--gold-wash); color:var(--copy); font-size:12.5px; line-height:var(--lh-base);}
.book-down-info .oldno-note b {color:var(--ink); font-weight:700;}
.book-down-info .oldno-note + .desc {margin:8px 0 0; color:var(--muted); font-size:11.5px; line-height:1.5;}

/* 보조 액션 그리드 (뷰어 + 아마존) */
.book-view .detail-secondary-actions {display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px;}
.book-down-info .viewer-area,
.book-down-info .amazon-area {
    display:flex; flex-direction:column; min-width:0; height:100%; margin:0; padding:16px 18px;
    border:1px solid var(--line); border-radius:14px; background:var(--paper-warm); box-sizing:border-box;
}
.book-down-info .viewer-area .subtit,
.book-down-info .amazon-area .subtit {
    display:flex; align-items:center; gap:6px; margin:0 0 12px; color:var(--ink); font-size:13.5px; font-weight:700;
}
.book-down-info .viewer-area .btn-list {
    display:grid; gap:8px; width:100%;
}
.book-down-info .viewer-area .btn-list a {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:40px; padding:0 8px; border:1.5px solid var(--gold); border-radius:8px; box-sizing:border-box;
    background:#fff; color:var(--gold-deep); font-size:12.5px; font-weight:700; text-decoration:none; text-align:center;
    box-shadow:var(--sh-soft); transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.book-down-info .viewer-area .btn-list a:hover {
    border-color:var(--gold-deep); background:var(--gold); color:#fff; box-shadow:var(--sh-gold);
}
.book-down-info .amazon-area .btn-list {
    display:block; width:100%; margin-top:auto;
}
.book-down-info .amazon-area .BtnAmazon {
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; min-height:40px; padding:0 16px; border-radius:8px; box-sizing:border-box;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat 92% center / 12px, var(--gold);
    color:#fff !important; font-size:12.5px; font-weight:700; text-decoration:none; box-shadow:var(--sh-gold);
    transition:background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.book-down-info .amazon-area .BtnAmazon:hover {
    background-color:var(--gold-deep); transform:translateY(-1px); box-shadow:var(--sh-lift);
}
.book-down-info .amazon-area.disabled .BtnAmazon {
    background:var(--line-input); color:var(--muted) !important; box-shadow:none; cursor:default; transform:none;
}
.book-down-info .amazon-note {margin:8px 0 0; color:var(--copy-soft); font-size:var(--fs-2xs); line-height:1.45;}

/* ── 중단: 본문 소개 및 장바구니 (view_middle) ────────────────────────── */
.view-middle {padding-top:44px;}

/* 본문 소개 카드 */
.view-middle .book-content.resize-box {
    /* 자리 잡기는 ui.css 의 .resize-box 가 갖는다. 색은 토큰으로 — 가림막이
       상자 배경과 어긋나지 않도록 --resize-bg 는 background 와 같은 것을 넘긴다. */
    --collapsed-h:480px; --resize-bg:var(--paper);
    padding:34px 38px 64px; border:1px solid var(--line);
    border-radius:var(--r-xl); background:var(--paper); box-shadow:var(--sh-soft);
    transition:max-height .3s ease;
}
.view-middle .book-content.resize-box:before {
    display:block; width:38px; height:2px; margin-bottom:20px; background:var(--gold); content:'';
}
.view-middle .book-content.resize-box.open {
    overflow:visible; padding-bottom:64px;
}
.view-middle .book-content .desc {color:var(--copy); font-size:14.5px; line-height:1.85; word-break:break-word;}
.view-middle .book-content .desc p {margin:0 0 1.2em;}
.view-middle .book-content .desc p:last-child {margin-bottom:0;}

/* 본문 더보기 버튼 (캡슐 필형 - 절대 잘리지 않는 안전한 내부 위치) */
/* «더 보기» 알약과 가림막은 ui.css 의 .resize-box 가 그린다.
   여기 있던 사본(알약 + 120px 가림막)은 걷었다 — 성막 소개 카드에는 전폭 띠 꼴로
   또 한 벌이 있어서, 같은 «더 보기» 가 화면마다 달랐다. */

/* 장바구니 섹션 */
.view-middle .add-cart {
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    margin-top:36px; padding:24px 28px; border:1px solid var(--line); border-radius:18px;
    background:var(--paper-warm); text-align:left;
}
.view-middle .add-cart .small-title {
    margin:0; color:var(--ink); font-size:var(--fs-md); font-weight:700; line-height:1.4;
}
.view-middle .add-cart a {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:0 36px; border-radius:var(--r-md); box-sizing:border-box;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 4h2l2.4 11h10.2L20 8H6'/%3E%3C/svg%3E") no-repeat 90% center / 18px, var(--gold);
    color:#fff !important; font-size:14.5px; font-weight:700; text-decoration:none;
    box-shadow:var(--sh-gold); transition:background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.view-middle .add-cart a:hover {
    background-color:var(--gold-deep); transform:translateY(-1px); box-shadow:var(--sh-lift); color:#fff !important;
}

/* ── 오디오 영역 (audio_area) ─────────────────────────────────────── */
.audio-area {margin-top:48px; padding:28px 30px; border:1px solid var(--line); border-radius:20px; background:#fff;}
.audio-area .total-box {display:flex; align-items:center; min-height:36px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line-soft);}
/* sub.css 가 이 제목을 상자 한가운데에 절대배치해 둔다 — 다른 섹션 머리띠와 어긋나므로
   자리로 되돌리고, 앞의 금빛 표시도 형제들과 같은 것으로 세운다.
   (건수를 적을 자리인 .total-box strong.total 은 이 화면에서 늘 비어 있어 걷어냈다 —
    board.css 의 :before 만 남아 제목 위에 «|» 한 줄로 떠 있었다) */
.audio-area .total-box .small-title {position:static; display:flex; align-items:center; gap:12px; transform:none;
    margin:0; padding:0; color:var(--ink); font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.02em;}
.audio-area .total-box .small-title:before {flex:0 0 auto; width:4px; height:16px; border-radius:99px; background:var(--gold); content:'';}
.audio-area .total-box .small-title:after {flex:0 0 auto; width:36px; height:1px; background:var(--gold); content:'';}
.audio-area .sound-list {margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.audio-area .sound-list li {border:0; margin:0;}
.audio-area iframe {display:block; width:100%; border:0;}
.audio-area .btn-list {display:flex; justify-content:flex-end; margin-top:14px;}
.audio-area .BtnAudio {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:0 24px; border-radius:var(--r-md);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m6 11 6 6 6-6'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") no-repeat 90% center / 18px, var(--gold);
    color:#fff !important; font-size:13.5px; font-weight:700; text-decoration:none; box-shadow:var(--sh-gold);
    transition:background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.audio-area .BtnAudio:hover {
    background-color:var(--gold-deep); transform:translateY(-1px); box-shadow:var(--sh-lift); color:#fff !important;
}

/* ── 독자 서평 섹션 (wrap_review: 플랫 미니멀 리스트) ─────────────── */
.wrap-review {margin-top:44px; padding-top:28px; border-top:1px solid var(--line-soft);}
.wrap-review .section-title02 h4 {display:flex; align-items:center; gap:12px; margin:0 0 12px; color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.02em;}
.wrap-review .section-title02 h4:before {width:4px; height:16px; border-radius:99px; background:var(--gold); content:'';}
.wrap-review .section-title02 h4:after {width:36px; height:1px; background:var(--gold); content:'';}

/* 패딩을 빼고 구분선으로 연결되는 플랫 리스트 */
.wrap-review .wrap-list .list {
    display:flex; flex-direction:column; gap:0;
    margin:0; padding:0; list-style:none;
}
.wrap-review .wrap-list .list > li {
    display:block; width:100%; margin:0;
    border-bottom:1px solid var(--line-soft);
}
.wrap-review .wrap-list .list > li:last-child {
    border-bottom:none;
}
.wrap-review .wrap-list .list .inner {
    display:block; width:100%;
    border:none; border-radius:0; background:transparent; box-shadow:none; box-sizing:border-box;
}
.wrap-review .review-title {
    display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:6px;
}
.wrap-review .review-title .title {
    display:inline-block; margin:0; color:var(--ink); font-size:15px; font-weight:700; line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wrap-review .review-title .reviewer {
    flex-shrink:0; color:var(--muted); font-size:var(--fs-xs); line-height:1.4;
}
.wrap-review .conts-review {margin-top:0;}
.wrap-review .conts-review .conts {color:var(--copy-soft); font-size:13.5px; line-height:1.65;}
.wrap-review .conts-review .conts p {
    margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wrap-review .conts-review.on .conts p {
    display:block; -webkit-line-clamp:unset; overflow:visible;
}
.wrap-review .conts-review .more {
    display:inline-flex; align-items:center; gap:4px; margin-top:6px; color:var(--gold); font-size:var(--fs-xs); font-weight:700; text-decoration:none;
}
.wrap-review .conts-review .more:hover {color:var(--gold-deep); text-decoration:underline;}
.wrap-review .wrap-more {margin-top:24px; text-align:center;}
.wrap-review .wrap-more .link {display:inline-flex; align-items:center; justify-content:center;
    min-height:38px; padding:0 24px; border:1px solid var(--line-input); border-radius:var(--r-pill);
    background:var(--paper); color:var(--gold-deep); font-size:12.5px; font-weight:700; text-decoration:none;
    box-shadow:var(--sh-soft); transition:border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);}
.wrap-review .wrap-more .link:hover {border-color:var(--gold); background:var(--gold-wash); box-shadow:var(--sh-gold);}
/* sub.css 가 이 링크에 절대배치 셰브런을 달아 둔다 — 알약 안으로 들여 세운다 */
.wrap-review .wrap-more .link:after {position:static; flex-shrink:0; width:11px; height:7px; margin:0 0 0 8px;}
.align-right .wrap-review .wrap-more .link {padding:0 24px;}
.align-right .wrap-review .wrap-more .link:after {margin:0 8px 0 0; order:-1;}

/* 목록으로 버튼 (btn_box) */
.view-middle .btn-box {margin:52px 0 0; text-align:center;}
.view-middle .btn-box .btn-list {display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:0 36px; border:1.5px solid var(--line-input); border-radius:var(--r-md);
    background:var(--paper); color:var(--ink); font-size:var(--fs-base); font-weight:700; cursor:pointer;
    box-shadow:var(--sh-soft); transition:border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);}
.view-middle .btn-box .btn-list:hover {border-color:var(--gold); background:var(--gold-wash); color:var(--gold-deep); box-shadow:var(--sh-gold);}

/* ── 관련 도서 진열 영역 (book_recommend_area) ───────────────────── */
.book-view .book-recommend-area,
.tabernacle .book-recommend-area {
    margin-top:54px; padding-top:32px; border-top:1px solid var(--line-soft);
    background:transparent; border-radius:0;
}
/* 성막 화면은 앞 블록이 이미 밑줄을 긋는다 — 줄이 겹치지 않게 제 것을 접는다 */
.tabernacle .view-type2 + .book-recommend-area {padding-top:0; border-top:0;}
.book-view .book-recommend-area .section-title,
.tabernacle .book-recommend-area .section-title {
    display:flex; align-items:center; min-height:40px; margin-bottom:20px; padding-bottom:0; border-bottom:none;
}
.book-view .book-recommend-area .section-title h4,
.tabernacle .book-recommend-area .section-title h4 {
    display:flex; align-items:center; gap:12px; margin:0;
    color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.02em;
}
.book-view .book-recommend-area .section-title h4:before,
.tabernacle .book-recommend-area .section-title h4:before {width:4px; height:16px; border-radius:99px; background:var(--gold); content:'';}
.book-view .book-recommend-area .section-title h4:after,
.tabernacle .book-recommend-area .section-title h4:after {width:36px; height:1px; background:var(--gold); content:'';}
.book-view .book-recommend-area .section-title .pager,
.tabernacle .book-recommend-area .section-title .pager {margin-left:auto;}
.book-view .book-recommend-area .book-list,
.tabernacle .book-recommend-area .book-list {margin:0 -10px;}
.book-view .book-recommend-area .book-list .item,
.tabernacle .book-recommend-area .book-list .item {padding:0 10px; box-sizing:border-box;}
.book-view .book-recommend-area .book-list .item > a.inner,
.tabernacle .book-recommend-area .book-list .item > a.inner {
    display:flex; flex-direction:column; width:100%; color:inherit; text-decoration:none;
}
/* 관련 도서 카드는 ui.css 의 «도서 카드» 한 벌이 그린다 (사본 제거) */
/* ── 도서 다운로드 전용 페이지 (book_down_page) ─────────────────────── */
.book-down-page .inner-narrow {
    max-width:960px; margin:0 auto;
}
.book-down-page .detail-section-head {
    width:100%; margin-bottom:0;
}
.book-down-page .book-top-summary {
    display:grid; grid-template-columns:minmax(120px, 150px) minmax(0, 1fr);
    gap:32px; align-items:center; width:100%; box-sizing:border-box;
    padding:28px 32px; border-radius:20px;
    background:linear-gradient(180deg, #fffef9 0%, #fdf8ea 100%);
    border:1.5px solid rgba(220, 180, 90, 0.40);
    box-shadow:0 12px 32px -18px rgba(60, 48, 20, 0.12);
    margin:20px 0;
}
.book-down-page .book-top-summary .book-img {
    position:static; width:100%; max-width:150px; margin:0 auto;
}
.book-down-page .book-top-summary .img-area {
    position:relative; width:100%; aspect-ratio:260/381; overflow:hidden;
    border-radius:4px 10px 10px 4px; background:var(--panel);
    box-shadow:0 4px 12px rgba(31,26,18,.10), 0 16px 30px -14px rgba(31,26,18,.55);
    transition:transform var(--t-base), box-shadow var(--t-base);
}
.book-down-page .book-top-summary .img-area:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(31,26,18,.14), 0 22px 36px -16px rgba(31,26,18,.58);
}
.book-down-page .book-top-summary .img-area:before {
    content:''; position:absolute; z-index:var(--z-inlay); top:0; bottom:0; left:0; width:7px;
    background:linear-gradient(90deg, rgba(24,18,10,.22), rgba(255,255,255,.12), transparent);
    pointer-events:none;
}
.book-down-page .book-top-summary .img-area:after {
    content:''; position:absolute; z-index:var(--z-inlay); inset:0;
    border:1px solid rgba(34,27,16,.08); border-radius:inherit;
    box-shadow:inset -1px 0 rgba(255,255,255,.25); pointer-events:none;
}
.book-down-page .book-top-summary .img-area img {
    display:block; width:100%; height:100%; aspect-ratio:260/381; object-fit:cover;
}
.book-down-page .book-top-summary .book-text {
    display:flex; flex-direction:column; justify-content:center;
    width:100% !important; float:none !important; padding:0 !important;
    min-width:0; box-sizing:border-box;
}
.book-down-page .detail-series {
    display:inline-block; margin:0 0 6px; color:var(--gold-deep); font-size:13.5px;
    font-weight:700; letter-spacing:-.01em;
}
.book-down-page .book-top-summary .book-name.a-name {
    margin:0 0 10px; font-size:clamp(var(--fs-lg), 1.8vw, var(--fs-xl)); line-height:1.32; font-weight:700; color:var(--ink);
    word-break:keep-all;
}
.book-down-page .book-top-summary .detail-meta {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 10px;
    padding:0; border:none; color:var(--copy-soft); font-size:var(--fs-sm); line-height:1.45;
}
.book-down-page .book-top-summary .detail-meta > span {
    display:inline-flex; align-items:center; gap:4px;
}
.book-down-page .book-top-summary .detail-meta b {
    color:var(--ink); font-weight:700;
}
.book-down-page .book-top-summary .detail-meta .detail-oldno {
    display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--r-pill);
    background:var(--gold-wash); color:var(--gold-deep); font-size:var(--fs-xs); font-weight:700;
}
.book-down-page .book-top-summary .detail-labels {
    display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; min-height:22px; margin-top:2px;
}
.book-down-page .book-top-summary .detail-labels-group {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-width:0;
}
.book-down-page .book-top-summary .detail-labels-caption {
    color:var(--copy-soft); font-size:11.5px; font-weight:700; white-space:nowrap;
}
.book-down-page .down-form-wrap {
    width:100%; margin:0;
}
.book-down-page .down-hero-box {
    margin-top:0; width:100%; box-sizing:border-box;
    padding:30px 28px; border-radius:18px; text-align:center; color:#fff;
    box-shadow:var(--sh-lift);
}
.book-down-page .down-hero-box.is-pdf {
    background:linear-gradient(135deg, #e84393 0%, #c82333 100%);
}
.book-down-page .down-hero-box.is-epub {
    background:linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
}
.book-down-page .down-hero-box .badge-free {
    display:inline-block; padding:4px 14px; border-radius:var(--r-pill);
    background:rgba(255,255,255,0.22); backdrop-filter:blur(4px);
    color:#fff; font-size:12.5px; font-weight:700; letter-spacing:0.05em; margin-bottom:12px;
}
.book-down-page .down-hero-box .down-title {
    margin:0 0 8px; font-size:var(--fs-xl); font-weight:700; color:#fff; letter-spacing:-0.02em;
}
.book-down-page .down-hero-box .down-desc {
    margin:0 auto 24px; max-width:520px; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,0.92);
}
.book-down-page .btn-download-now {
    display:inline-flex; align-items:center; justify-content:center;
    width:min(320px, 100%); min-height:48px; padding:0 24px; border-radius:12px;
    background:#fff; font-size:15px; font-weight:700; text-decoration:none;
    box-shadow:0 4px 14px rgba(0,0,0,0.15);
    transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.book-down-page .btn-download-now.btn-pdf {
    color:#e84393 !important;
}
.book-down-page .btn-download-now.btn-epub {
    color:#7c3aed !important;
}
.book-down-page .btn-download-now:hover {
    transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.25);
}
.book-down-page .down-file-meta {
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin-top:20px;
    font-size:var(--fs-xs); color:rgba(255,255,255,0.9);
}
.book-down-page .down-file-meta .meta-pill {
    background:rgba(0,0,0,0.14); padding:4px 10px; border-radius:6px;
}

/* ── 리더 안내 박스 (pdf_leader_box) & 하단 섹션 ──────────────────── */
.book-down-page .down-sub-sections {
    width:100%; max-width:none; margin:40px 0 0;
}
.book-down-page .pdf-leader-box {
    margin-top:0; padding:28px 32px; border:1px solid var(--line); border-radius:18px;
    background:var(--paper-warm); text-align:center;
}
.book-down-page .pdf-leader-box .leader-title {
    display:block; color:var(--ink); font-size:14.5px; font-weight:700; margin-bottom:14px;
}
.book-down-page .pdf-leader-box .leader-desc {
    color:var(--copy-soft); font-size:var(--fs-sm); line-height:1.55; margin:-4px 0 16px;
}
.book-down-page .list-reader {
    display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px; margin:0; padding:0; list-style:none;
}
.book-down-page .list-reader li {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; width:110px; min-height:86px; padding:12px 8px; border-radius:10px;
    background:#fff; border:1px solid var(--line-soft); box-shadow:var(--sh-soft);
    box-sizing:border-box; transition:transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.book-down-page .list-reader li:hover {
    transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--sh-gold);
}
.book-down-page .list-reader li a {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; width:100%; height:100%; color:inherit; text-decoration:none;
}
.book-down-page .list-reader .ico {display:inline-flex; align-items:center; justify-content:center;}
.book-down-page .list-reader .ico img {width:36px; height:36px; object-fit:contain;}
.book-down-page .list-reader .lab {font-size:var(--fs-2xs); font-weight:700; color:var(--ink); text-align:center; line-height:var(--lh-tight);}

/* ── 하단 배너 (pdfDown_bottomBox) ─────────────────────────────────── */
.book-down-page .pdfDown-bottomBox {
    margin-top:36px; text-align:center;
}
.book-down-page .pdfDown-bottomBox .pdfDown-p3 {
    color:var(--copy-soft); font-size:var(--fs-sm); line-height:var(--lh-base); margin-bottom:14px;
}
.book-down-page .pdfDown-bottomBox img {
    max-width:100%; height:auto; border-radius:12px;
}

/* ── 도서 샘플 미리보기 (book-preview) ────────────────────────────
   가림막(어두운 유리) · 상자 · 머리띠 · 닫기 · 무대 그림자는 ui.css 의
   .nlm-modal--lightbox 가 그린다. 여기 남긴 것은 이 화면만의 것 — 표본 배지와
   쪽 넘김 도구 한 벌이다. 책 이름은 머리띠에서 뺐다 — 바로 뒤 화면이 그 책의
   상세이고, 좁은 폭에서 제목이 말줄임으로 잘려 쪽 넘김을 밀어내기만 했다.

   예전에는 이 모달이 제 규칙 22개로 가림막부터 닫기 동그라미까지 혼자 다 그렸고,
   z-index 는 1000000 !important 였다. 여는 것도 fadeIn() 이라 book.css 의
   align-items:center 두 줄이 한 번도 걸린 적이 없었다 — jQuery 가 인라인
   display:none 을 지운 뒤 계산값이 여전히 none 이면 태그 기본값(block)을 박기
   때문이다. 이제 NlmModal 이 hidden 속성으로 여닫으므로 flex 정렬이 산다. */
.book-preview .nlm-modal__title {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.book-preview .badge-sample {
    display:inline-flex; align-items:center; flex:0 0 auto;
    padding:4px 10px; border-radius:var(--r-pill);
    background:var(--gold); color:var(--paper);
    font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.05em;
    white-space:nowrap;
}
/* 쪽 넘김 — 유리 위에 뜬 알약 하나로 묶는다 */
.book-preview .page-info {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    flex:0 0 auto;
    padding:4px 10px; border-radius:var(--r-pill);
    background:rgba(255,255,255,0.14);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 8px 24px rgba(0,0,0,0.28);
}
.book-preview .page-info .page-button {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,0.12); color:var(--paper); cursor:pointer;
    transition:background-color var(--t-fast), transform var(--t-fast);
}
.book-preview .page-info .page-button:hover {
    background:var(--gold); transform:scale(1.08);
}
.book-preview .page-info .page-counter {
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    min-width:54px; padding:0 8px;
    color:var(--paper); font-size:var(--fs-sm); font-weight:700;
}
.book-preview .page-info .page-counter .divider {
    opacity:0.5; font-weight:400;
}
.book-preview .nlm-modal__inner {
    display:flex; justify-content:center; align-items:center;
}

@media (max-width:767px) {
    /* 좁은 화면에서는 이름 · 닫기가 한 줄, 쪽 넘김이 아랫줄로 내려간다 */
    .book-preview .nlm-modal__head {
        display:grid; grid-template-columns:1fr auto; gap:8px 12px;
    }
    .book-preview .nlm-modal__title {grid-column:1 / 2; grid-row:1 / 2;}
    .book-preview .nlm-modal__x {grid-column:2 / 3; grid-row:1 / 2;}
    .book-preview .page-info {grid-column:1 / 3; grid-row:2 / 2; margin:0 auto;}
}


/* ── RTL 지원 ─────────────────────────────────────────────────────── */
/* 추천 캐러셀의 화살표 — 자리(inset-inline-end)는 논리 속성이 옮겨 주지만
   셰브런은 방향 아이콘이라 얼굴까지 뒤집어야 한다 (design-language.md §3).
   ui.css 의 일반 규칙보다 여기 값이 더 구체적이라 여기서 한 번 더 적는다. */
.align-right #sub_contents.book .feature-carousel .feature-pager .slick-prev:before {transform:translate(-65%,-50%) rotate(45deg);}
.align-right #sub_contents.book .feature-carousel .feature-pager .slick-next:before {transform:translate(-35%,-50%) rotate(-135deg);}

.align-right .book-view .detail-section-head h4:before,
.align-right .book-view .wrap-review .section-title02 h4:before,
.align-right .book-view .book-recommend-area .section-title h4:before,
.align-right .tabernacle .book-recommend-area .section-title h4:before {order:0;}

/* ── 반응형 브레이크포인트 (1024 / 767 / 480) ─────────────────────── */
@media all and (max-width:1024px) {
    .book-view .book-detail {grid-template-columns:minmax(0, 240px) minmax(0, 1fr); gap:32px; padding:28px;}
    .book-view .detail-secondary-actions {grid-template-columns:1fr;}
    .book-view .book-detail .book-img {position:static;}
    .book-detail .book-text .book-name.a-name {font-size:var(--fs-xl);}
}

@media all and (max-width:767px) {
    /* 제목이 두 줄로 접히는 폭에서는 꼬리 선을 접는다 — 화살표 옆에 뜬금없이 걸린다 */
    .book-view .book-recommend-area .section-title h4:after,
    .tabernacle .book-recommend-area .section-title h4:after,
    .book-view .detail-section-head h4:after,
    .book-view .wrap-review .section-title02 h4:after {display:none;}
    .book-view {padding-top:24px;}
    .book-view .detail-section-head {align-items:flex-start;}
    .book-view .detail-section-head h4 {font-size:var(--fs-md);}
    .book-down-page .book-top-summary {grid-template-columns:1fr; gap:20px; text-align:center; padding:22px 18px; margin:16px 0;}
    .book-down-page .book-top-summary .book-img {width:min(180px, 60vw);}    .book-down-page .book-top-summary .detail-meta,
    .book-down-page .book-top-summary .detail-labels {justify-content:center;}
    /* 상자가 세 겹으로 물려 있어(inner-narrow 20 + 카드 24 + 패널 18) 정작 누를 것이
       화면 한가운데로 밀려 있었다 — 겹마다 조금씩 덜어 손가락에 폭을 돌려준다 */
    .book-view .book-detail {grid-template-columns:1fr; gap:24px; padding:20px;}
    .book-view .book-detail .book-img {width:min(240px, 78vw); max-width:none; margin:0 auto;}
    .book-view .book-detail .book-text.book-down-info {width:100%;}
    .book-detail .book-text .book-name.a-name {font-size:22px; margin-bottom:12px;}
    .book-detail .book-text .detail-meta {font-size:12.5px; gap:6px 10px;}
    .book-detail .download-panel {padding:16px;}
    .book-down-info .btn-list {grid-template-columns:1fr; gap:8px;}
    /* 손끝 과녁 — 40px 는 좁다. 애플 44 · 구글 48 사이로 올리고 글씨도 함께 키운다 */
    .book-down-info .BtnPdf,
    .book-down-info .BtnEpub,
    .book-down-info .BtnAudio {padding:0 40px 0 18px; min-height:46px; font-size:13.5px;}
    .book-view .detail-secondary-actions {grid-template-columns:1fr;}
    .book-down-info .viewer-area .btn-list a,
    .book-down-info .amazon-area .BtnAmazon {min-height:46px; font-size:13.5px;}
    .book-down-info .oldno-note {padding:12px 14px; font-size:13px;}
    .book-down-info .oldno-note + .desc {font-size:12.5px;}
    .book-down-info .amazon-note {font-size:12px;}
    .view-middle {padding-top:32px;}
    .view-middle .book-content.resize-box {padding:24px 20px 38px;}
    .view-middle .add-cart {flex-direction:column; align-items:stretch; gap:16px; padding:20px 18px; text-align:center;}
    .view-middle .add-cart .small-title {text-align:center;}
    .view-middle .add-cart a {width:100%; min-width:0;}
    .audio-area {padding:20px;}
    .audio-area .total-box .small-title {font-size:var(--fs-md);}
    .audio-area .total-box .small-title:after {display:none;}
    .audio-area iframe {height:240px;}
    .audio-area .btn-list {justify-content:stretch;}
    .audio-area .BtnAudio {width:100%; min-height:46px;}
    .wrap-review .wrap-list .list {gap:8px;}
    .wrap-review .wrap-list .list .inner {padding:12px 16px;}
    .wrap-review .review-title {flex-direction:column; align-items:flex-start; gap:2px;}
    .wrap-review .review-title .title {white-space:normal;}
    .view-middle .btn-box .btn-list {width:100%;}
}

@media all and (max-width:480px) {
    .book-view .book-detail {padding:16px;}
    .book-view .book-detail .book-img {width:min(200px, 72vw);}
    .book-detail .book-text .book-name.a-name {font-size:var(--fs-lg);}
    .book-detail .book-text .detail-meta {gap:6px 8px;}
    .book-detail .download-panel {padding:14px;}
    .book-down-info .viewer-area {padding:14px;}
    .book-down-info .amazon-area {padding:14px;}
    .view-middle .book-content.resize-box {padding:20px 16px 38px;}
    .audio-area {padding:16px;}
    .audio-area iframe {height:210px;}
}