/* 도서 찾기 (PUB-05 이달의 추천도서 · PUB-06 인증도서 찾기 · PUB-07 도서 상세) */
.container { width: min(1120px, 100% - 40px); margin: 0 auto; }
.brand-title {
    margin: 0;
    font-family: var(--vb-font-brand);
    font-weight: 800;
    color: var(--vb-color-text-title);
}
.main { flex: 1 0 auto; }
.b-page { padding: 75px 0 75px; }
.b-title { font-size: 34px; line-height: 1.5; }

/* 위시리스트 버튼 (목록 카드) */
.wish {
    position: absolute;
    top: 8px;
    left: calc(100% - 40px);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.wish img { display: block; width: 44px; height: 44px; max-width: none; }

/* ─── PUB-05 이달의 추천도서 ─── */
.r-month { display: flex; align-items: center; gap: 16px; margin-top: 88px; }
.r-month__btn {
    width: 36px;
    height: 36px;
    padding: 0 0 2px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    box-shadow: 0 8px 12px rgba(31, 51, 38, 0.06);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--vb-color-text-secondary);
    cursor: pointer;
}
.r-month__label { font-size: 24px; line-height: 1.5; }
.r-stages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 72px;
    margin-top: 38px;
    padding: 17px 19px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
}
.r-stages__label { margin-right: 17px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-text-title); }
.r-stage {
    width: 70px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--vb-color-text-primary);
    cursor: pointer;
}
.r-stage.is-active { border-color: var(--vb-color-brand-green); background: var(--vb-color-brand-green); color: var(--vb-color-text-inverse); }
.r-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 92px 20px; margin: 36px 0 0; padding: 0; list-style: none; }
.r-card { position: relative; }
.r-card > a { display: block; }
.r-card__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 207.5 / 296;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 4px;
    background: var(--vb-color-brand-green-surface);
    box-shadow: 0 4px 12px rgba(23, 38, 28, 0.14);
    font-size: 12px;
    line-height: 18px;
    color: var(--vb-color-text-primary);
}
.r-card__stage { margin: 16px 0 0; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-brand-green); }
.r-card__title { margin: 6px 0 0; min-height: 56px; font-size: 16px; font-weight: 600; line-height: 26px; color: var(--vb-color-text-title); }
.r-card__author { margin: 0; font-size: 13px; line-height: 20px; color: var(--vb-color-text-primary); }
.r-notice {
    margin-top: 100px;
    padding: 15px 19px 13px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 16px;
    background: var(--vb-color-surface-white);
    font-size: 13px;
    line-height: 20px;
    color: var(--vb-color-text-primary);
}
.r-notice strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--vb-color-text-title); }
.r-notice p { margin: 0; }

/* ─── PUB-06 인증도서 찾기 ─── */
.s-bar {
    display: flex;
    align-items: center;
    height: 60px;
    margin-top: 65px;
    padding: 0 8px 0 24px;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #eaf8e6 50.2%, #c3efcb);
}
.s-bar__icon { position: relative; flex: none; width: 16px; height: 16px; margin-right: 14px; }
.s-bar__icon img { display: block; width: 16px; height: 16px; }
.s-bar__icon::after {
    content: "";
    position: absolute;
    left: 12.2px;
    top: 13px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: var(--vb-color-brand-green);
    transform: rotate(45deg);
    transform-origin: left center;
}
.s-bar__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    line-height: 22px;
    color: var(--vb-color-text-primary);
}
.s-bar__input::placeholder { color: var(--vb-color-text-muted); }
.s-bar__input:focus { outline: none; }
.s-bar .btn { width: 104px; }

.f-panel {
    margin-top: 40px;
    padding: 28px 27px 28px 28px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
}
.f-row { display: flex; align-items: flex-start; }
.f-row + .f-row { margin-top: 20px; }
.f-row__label { flex: none; width: 96px; padding-top: 8px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-text-secondary); }
.f-row__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.b-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    color: var(--vb-color-text-primary);
    cursor: pointer;
}
.b-chip.is-selected { border-color: var(--vb-color-brand-green); background: var(--vb-color-brand-green); font-weight: 600; color: var(--vb-color-text-inverse); }
.f-selected { display: flex; align-items: center; margin-top: 20px; padding-top: 19px; border-top: 1px solid var(--vb-color-border-default); }
.f-selected .f-row__label { padding-top: 0; font-weight: 400; }
.f-tokens { display: flex; flex: 1; flex-wrap: wrap; gap: 7px; min-height: 30px; }
.f-token {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 11px 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--vb-color-brand-green-tint);
    font-size: 13px;
    line-height: 20px;
    color: var(--vb-color-brand-green);
    cursor: pointer;
}
.f-reset { padding: 0; border: 0; background: none; font-size: 13px; line-height: 20px; color: var(--vb-color-text-secondary); cursor: pointer; }

.b-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vb-color-border-subtle);
}
.b-count { margin: 0; font-size: 16px; line-height: 26px; color: var(--vb-color-text-primary); }
.b-count strong { margin-left: 6px; font-weight: 600; color: var(--vb-color-brand-green); }
.b-sort { position: relative; }
.b-sort__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 132px;
    height: 36px;
    padding: 0 17px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--vb-color-text-primary);
    cursor: pointer;
}
.b-sort__btn img { width: 8px; height: 5px; transition: transform 0.15s; }
.b-sort__btn[aria-expanded="true"] img { transform: rotate(180deg); }
.b-sort__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: 132px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 16px;
    background: var(--vb-color-surface-white);
    box-shadow: 0 8px 24px rgba(15, 56, 31, 0.1);
    list-style: none;
}
.b-sort__menu button {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    color: var(--vb-color-text-primary);
    cursor: pointer;
}
.b-sort__menu button[aria-selected="true"] { background: var(--vb-color-brand-green-surface); font-weight: 600; color: var(--vb-color-brand-green); }

.b-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.b-card { position: relative; min-height: 431px; }
.b-card > a { display: block; }
.b-card__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 208 / 297;
    border-radius: 12px;
    background: var(--vb-color-surface-subtle);
    font-size: 12px;
    line-height: 18px;
    color: var(--vb-color-text-muted);
}
.b-card__meta { margin: 14px 0 0; font-size: 12px; line-height: 18px; color: var(--vb-color-text-secondary); }
.b-card__meta strong { margin-right: 5px; font-weight: 600; color: var(--vb-color-brand-green); }
.b-card__title { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 22px; color: var(--vb-color-text-primary); }
.b-card__author { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--vb-color-text-secondary); }
.b-card__readers { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--vb-color-text-secondary); }
.b-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-top: 4px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--vb-color-brand-green-tint);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: var(--vb-color-brand-green);
}
.b-badge--rr { background: var(--vb-color-rr-tint); color: var(--vb-color-rr-blue); }

.b-pagination { display: flex; justify-content: center; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
.b-page-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 13px;
    line-height: 20px;
    color: var(--vb-color-text-secondary);
    cursor: pointer;
}
.b-page-btn.is-current { border-color: var(--vb-color-brand-green); background: var(--vb-color-brand-green); font-weight: 600; color: var(--vb-color-text-inverse); }
.b-page--search { padding-bottom: 87px; }
.b-page--search[data-result-state="empty"],
.b-page--search[data-result-state="error"] { padding-bottom: 64px; }

.b-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 320px;
    margin-top: 16px;
    padding-top: 55px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
    text-align: center;
}
.b-state__icon { position: relative; width: 64px; height: 64px; }
.b-state__icon img { position: absolute; display: block; }
.b-state__icon img:first-child { inset: 0; width: 64px; height: 64px; }
.b-state__icon img + img { left: 21px; top: 21px; width: 22px; height: 22px; }
.b-state__title { margin: 16px 0 0; font-size: 20px; font-weight: 700; line-height: 30px; color: var(--vb-color-text-title); }
.b-state__desc { margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--vb-color-text-secondary); }
.b-state .btn { width: 160px; margin-top: 14px; }

.sk-cover { aspect-ratio: 208 / 297; border-radius: 12px; background: var(--vb-color-surface-subtle); }
.sk-line { height: 12px; margin-top: 10px; border-radius: 6px; background: var(--vb-color-surface-subtle); }
.sk-line--title { width: 150px; height: 16px; margin-top: 19px; }
.sk-line--author { width: 100px; }
.sk-line--meta { width: 120px; }

/* ─── PUB-07 도서 상세 ─── */
.d-main { flex: 1 0 auto; padding: 29px 0 75px; background: #fcfcfc; }
.d-back { display: inline-flex; align-items: center; gap: 8px; margin-left: 1px; padding: 0 2px; font-size: 14px; font-weight: 600; line-height: 22px; color: var(--vb-color-brand-green); }
.d-back img { width: 14.8px; height: 11.8px; }
.d-top { display: grid; grid-template-columns: 500px 1fr; gap: 30px; margin-top: 24px; }
.d-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 520px;
    overflow: hidden;
    border-radius: 20px;
    background-image: linear-gradient(134deg, #eaf6ec 0%, #f5f2e6 71.4%);
}
.d-cover__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 372px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 8px;
    background: var(--vb-color-surface-white);
    box-shadow: 0 12px 32px rgba(15, 51, 31, 0.18);
    font-size: 13px;
    line-height: 20px;
    color: var(--vb-color-text-secondary);
}
.d-info {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
}
.d-info__body { flex: 1; padding: 32px 36px 24px 34px; }
.d-chips { display: flex; gap: 8px; }
.chip-status { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-weight: 600; }
.chip-status--level { background: var(--vb-color-brand-green); font-size: 13px; line-height: 20px; color: var(--vb-color-text-inverse); }
.chip-status--cat { background: var(--vb-color-brand-green-tint); font-size: 12px; line-height: 18px; color: var(--vb-color-brand-green); }
.d-done {
    position: absolute;
    top: 35px;
    right: 34px;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--vb-color-brand-green);
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    color: var(--vb-color-text-inverse);
}
.d-title { margin: 14px 0 0; font-size: 28px; font-weight: 700; line-height: 1.5; color: var(--vb-color-text-title); }
.d-author { margin: 2px 0 0; font-size: 16px; line-height: 26px; color: var(--vb-color-text-primary); }
.d-rating { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--vb-color-text-secondary); }
.d-rating span { margin-right: 6px; font-weight: 600; color: var(--vb-color-semantic-warning); }
.d-label { margin: 28px 0 4px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-text-title); }
.d-competency { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.d-competency li {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
    color: var(--vb-color-text-primary);
}
.d-stats { margin: 34px 0 0; padding-top: 21px; border-top: 1px solid var(--vb-color-border-subtle); font-size: 14px; line-height: 22px; color: var(--vb-color-text-secondary); }
.d-stats strong { margin: 0 5px 0 8px; font-weight: 600; color: var(--vb-color-text-title); }
.d-race { margin: 20px 0 0; padding: 0; list-style: none; }
.d-race li { display: flex; align-items: center; font-size: 14px; line-height: 22px; color: var(--vb-color-text-primary); }
.d-race li + li { margin-top: 8px; }
.d-race img { flex: none; width: 8px; height: 8px; margin-right: 8px; }
.d-race__name { min-width: 90px; margin-right: 12px; font-weight: 600; }
.d-race__name--rr { color: var(--vb-color-rr-blue); }
.d-race__name--tr { color: var(--vb-color-tr-purple); }
.d-race .is-muted { color: var(--vb-color-text-secondary); }
.d-actions { display: grid; grid-template-columns: 258px 259px 1fr; height: 72px; border-top: 1px solid var(--vb-color-border-default); }
.d-action { display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 14px; font-weight: 600; line-height: 22px; text-align: center; }
.d-action--primary-rr { background: var(--vb-color-rr-blue-light); color: var(--vb-color-text-inverse); }
.d-action--secondary-rr { background: var(--vb-color-rr-tint); color: var(--vb-color-rr-blue); }
.d-action--primary-tr { background: var(--vb-color-tr-purple-mid); color: var(--vb-color-text-inverse); }
.d-action--secondary-tr { background: var(--vb-color-tr-tint); color: var(--vb-color-tr-purple); }
.d-action--disabled { background: var(--vb-color-state-disabled-bg); color: var(--vb-color-state-disabled-text); cursor: default; }
.d-wish { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-left: 1px solid var(--vb-color-border-default); background: var(--vb-color-surface-white); cursor: pointer; }
.d-wish img { width: 19.6px; height: 19.6px; }
.d-wish[aria-pressed="true"] img { width: 44px; height: 44px; max-width: none; }

.d-bottom { display: grid; grid-template-columns: 683fr 417fr; gap: 20px; margin-top: 40px; }
.d-box {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 24px 22px 24px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
}
.d-box--intro { background: var(--vb-color-brand-green-surface); }
.d-box__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 30px; color: var(--vb-color-text-title); }
.d-box__text { margin: 14px 0 0; font-size: 14px; line-height: 22px; color: var(--vb-color-text-primary); }
.d-box__note { margin: auto 0 0; padding-top: 16px; font-size: 12px; line-height: 18px; color: var(--vb-color-text-primary); }
.d-writer { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.d-writer img { width: 56px; height: 56px; }
.d-writer strong { display: block; font-size: 16px; font-weight: 600; line-height: 26px; color: var(--vb-color-text-title); }
.d-writer span { font-size: 12px; line-height: 18px; color: var(--vb-color-text-primary); }
.d-writer__bio { margin: 24px 0 0; font-size: 13px; line-height: 20px; color: var(--vb-color-text-primary); }
.d-link { display: inline-block; margin-top: 28px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-brand-green); }

.d-reviews {
    position: relative;
    min-height: 380px;
    margin-top: 40px;
    padding: 24px 24px 60px 21px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
}
.d-reviews__grid { display: grid; grid-template-columns: 390px 1fr; margin-top: 18px; }
.d-score { display: grid; grid-template-columns: 140px 1fr; align-content: start; padding-left: 4px; }
.d-score__num { margin: 0; font-family: var(--vb-font-brand); font-size: 44px; font-weight: 800; line-height: 1.4; color: var(--vb-color-text-title); }
.d-score__stars { margin: -4px 0 0; font-size: 14px; font-weight: 600; line-height: 22px; color: var(--vb-color-semantic-warning); }
.d-dist { margin: 4px 0 0; padding: 0; list-style: none; }
.d-dist li { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 18px; color: var(--vb-color-text-primary); }
.d-dist li + li { margin-top: 8px; }
.d-dist__bar { position: relative; flex: none; width: 166.667px; height: 8px; overflow: hidden; border-radius: 4px; background: var(--vb-color-surface-subtle); }
.d-dist__bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--vb-color-brand-green); }
.d-score__note { grid-column: 1 / -1; margin: 10px 0 0; font-size: 12px; line-height: 18px; color: var(--vb-color-text-primary); }
.d-review-list { margin: 0; padding: 0; list-style: none; }
.d-review-list li + li { margin-top: 12px; }
.d-review { min-height: 72px; padding: 12px 16px 12px 14px; border: 1px solid var(--vb-color-border-default); border-radius: 14px; background: #fcfdfc; }
.d-review__head { display: flex; align-items: center; gap: 8px; }
.d-review__name { font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-text-title); }
.d-review__stars { font-size: 12px; font-weight: 600; line-height: 18px; color: var(--vb-color-semantic-warning); }
.d-review__date { margin-left: auto; font-size: 12px; line-height: 18px; color: var(--vb-color-text-primary); }
.d-review__text { margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--vb-color-text-primary); }
.d-reviews__more { position: absolute; right: 25px; bottom: 25px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-brand-green); }

@media (max-width: 1100px) {
    .r-grid, .b-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
    .f-row, .f-selected { flex-direction: column; gap: 8px; }
    .f-row__label { padding-top: 0; }
    .d-top, .d-bottom, .d-reviews__grid { grid-template-columns: 1fr; gap: 20px; }
    .d-actions { grid-template-columns: 1fr 1fr 64px; height: auto; min-height: 72px; }
    .d-score { grid-template-columns: 1fr; }
}

/* 표지 그림이 있으면 자리를 채웁니다 (관리자 도서 등록의 표지) */
.b-card__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.d-cover__img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ── PUB-07 도서 상세 수정안 (2026-09-22 사본 1004:2) · PUB-07A 독자 리뷰 전체 (1057:2657) ── */
.bd-body { background: #fcfcfc; }
.bd-main { flex: 1 0 auto; padding: 29px 0 100px; }
.bd-wrap { width: min(1120px, 100% - 40px); }
.bd-crumb { margin: 0; font-size: 14px; line-height: 20px; color: var(--vb-color-text-secondary); }
.bd-crumb a { color: inherit; }
.bd-crumb strong { font-weight: 600; color: var(--vb-color-text-title); }
.bd-top { display: grid; grid-template-columns: 500px 1fr; gap: 30px; margin-top: 26px; }
.bd-stage {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 412px;   /* 오른쪽 정보 카드가 길어지면 같이 늘어남 (2026-09-29) */
    padding-top: 20px;
    border-radius: 20px;
    background: linear-gradient(141deg, var(--vb-color-brand-green-tint) 0%, var(--vb-color-rr-tint) 100%);
}
.bd-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 372px;
    overflow: hidden;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 8px;
    background: var(--vb-color-surface-white);
    box-shadow: 0 12px 32px rgba(15, 51, 31, 0.18);
    font-size: 13px;
    line-height: 20px;
    color: var(--vb-color-text-secondary);
}
.bd-cover img { width: 100%; height: 100%; object-fit: cover; }
/* 표지 왼쪽 위(좌 +8 · 상 −2) — 베리북스 V 리본 · 기관 +n */
.bd-ribbon { position: absolute; top: 18px; left: calc(50% - 122px); display: flex; align-items: flex-start; gap: 4px; }
.bd-ribbon__v { position: relative; width: 24px; height: 32px; }
.bd-ribbon__v img { display: block; width: 24px; height: 32px; }
.bd-ribbon__v b { position: absolute; top: 3px; left: 8px; font-size: 12px; line-height: 16px; color: var(--vb-color-text-inverse); }
.bd-ribbon__count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 11px;
    font-weight: 600;
    color: var(--vb-color-text-title);
    cursor: default;
}
.bd-info {
    position: relative;
    min-height: 412px;   /* 고정 높이면 제목이 세 줄일 때 단추가 카드 아래에 붙어 잘림 — 한두 줄이면 디자인 높이 그대로 (2026-09-29) */
    padding: 30px 35px 30px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
}
.bd-info__chips { position: absolute; top: 37px; right: 35px; display: flex; gap: 8px; }
.bd-done { top: 72px; right: 35px; }
.bd-title { margin: 0; padding-right: 150px; font-size: 28px; font-weight: 700; line-height: 1.5; color: var(--vb-color-text-primary); }
.bd-author { margin: 6px 0 0 2px; font-size: 18px; font-weight: 600; line-height: 28px; color: var(--vb-color-text-primary); }
.bd-meta { display: flex; align-items: center; gap: 4px; margin: 9px 0 0 2px; font-size: 14px; line-height: 20px; color: var(--vb-color-text-secondary); }
.bd-rows { margin: 28px 0 0; padding: 0; list-style: none; }
.bd-row {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 53px;
    border-bottom: 1px solid var(--vb-color-border-subtle);
    font-size: 16px;
    line-height: 26px;
    color: var(--vb-color-text-secondary);
}
.bd-row--count { height: 30px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--vb-color-text-title); }
.bd-row__rr { min-width: 92px; font-weight: 500; color: var(--vb-color-rr-blue); }
.bd-row__tr { min-width: 95px; font-weight: 500; color: var(--vb-color-tr-purple); }
.bd-actions { display: flex; gap: 12px; margin-top: 24px; }
.bd-main-btn { flex: 1; height: 52px; border-radius: 999px; font-size: 16px; line-height: 26px; }
.bd-wish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 120px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 16px;
    line-height: 26px;
    color: var(--vb-color-text-primary);
    cursor: pointer;
}
.bd-wish img { width: 18px; height: 18px; }
.bd-wish[aria-pressed="true"] img { width: 30px; height: 30px; margin: -6px; max-width: none; }
.bd-sublink { margin: 10px 0 0; font-size: 13px; line-height: 20px; }
.bd-sublink a { color: var(--vb-color-rr-blue); }
.bd-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
    padding: 23px 0 27px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 20px;
    background: var(--vb-color-surface-white);
}
.bd-fact { padding: 0 16px 0 27px; }
.bd-fact + .bd-fact { border-left: 1px solid var(--vb-color-border-subtle); padding-left: 16px; }
.bd-fact h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 26px; color: var(--vb-color-text-title); }
.bd-fact p { margin: 0; font-size: 13px; line-height: 20px; color: var(--vb-color-text-muted); }
.bd-fact__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bd-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--vb-color-text-primary);
}
.bd-chip.is-off { border-color: transparent; background: var(--vb-color-state-disabled-bg); color: var(--vb-color-state-disabled-text); }
.bd-empty { font-size: 14px; line-height: 32px; color: var(--vb-color-text-muted); }
.bd-body-card {
    margin-top: 40px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 16px;
    background: var(--vb-color-surface-white);
}
.bd-sec { margin: 0 27px; padding: 25px 1px 28px; }
.bd-sec + .bd-sec { border-top: 2px solid var(--vb-color-state-disabled-bg); }
.bd-sec__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 30px; color: var(--vb-color-text-primary); }
.bd-intro { margin: 14px 0 0; font-size: 16px; line-height: 26px; color: var(--vb-color-text-secondary); white-space: pre-line; }
.bd-writer { margin: 14px 0 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--vb-color-text-title); }
.bd-writer__bio { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--vb-color-text-secondary); white-space: pre-line; }
.bd-link { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-brand-green); }
.bd-reviews { display: grid; grid-template-columns: 360px 1fr; gap: 26px; margin-top: 18px; }
.bd-score { text-align: center; }
.bd-score__num { margin: 0; font-family: var(--vb-font-brand); font-size: 44px; line-height: 1.4; letter-spacing: -0.88px; color: var(--vb-color-text-primary); }
.bd-stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
.bd-star { display: block; width: 36px; height: 36px; background: url("/images/icons/star-empty.svg") center / contain no-repeat; }
.bd-star--full { background-image: url("/images/icons/star-full.svg"); }
.bd-star--half {
    background-image: url("/images/icons/star-half-fill.svg"), url("/images/icons/star-empty.svg");
    background-size: 50% 100%, contain;
    background-position: left center, center;
}
.bd-dist { margin: 16px 0 0 32px; padding: 0; list-style: none; }
.bd-dist li { display: flex; align-items: center; gap: 20px; font-size: 13px; line-height: 20px; color: var(--vb-color-text-secondary); }
.bd-dist li + li { margin-top: 6px; }
.bd-dist__bar { position: relative; width: 261px; height: 8px; border-radius: 4px; background: var(--vb-color-border-default); }
.bd-dist__bar span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: var(--vb-color-text-primary); }
.bd-review-list { margin: 0; padding: 0; list-style: none; }
.bd-review { padding: 13px 14px 12px; border: 1px solid var(--vb-color-brand-green-line); border-radius: 14px; background: var(--vb-color-surface-white); }
.bd-review + .bd-review { margin-top: 12px; }
.bd-review__head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 20px; }
.bd-review__head b { font-weight: 600; color: var(--vb-color-text-title); }
.bd-review__stars { font-size: 12px; font-weight: 600; line-height: 18px; color: var(--vb-color-semantic-warning); }
.bd-review__date { margin-left: auto; font-size: 12px; line-height: 18px; color: var(--vb-color-text-primary); }
.bd-review__text { margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--vb-color-text-primary); }
.bd-review--empty .bd-review__text { margin: 0; color: var(--vb-color-text-secondary); }
.bd-reviews__links { display: flex; justify-content: flex-end; gap: 16px; margin: 22px 0 0; }
.bd-reviews__links a { font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-brand-green); }
/* PUB-07A */
.bd-page-title { margin: 22px 0 0; font-size: 28px; font-weight: 700; line-height: 1.5; color: var(--vb-color-text-title); }
.bd-page-sub { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--vb-color-text-secondary); }
.bd-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-top: 24px;
    padding: 33px 0;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 16px;
    background: var(--vb-color-surface-white);
}
.bd-summary__score { text-align: center; }
.bd-summary .bd-dist { margin: 0 0 0 16px; }
.bd-sort { display: flex; gap: 8px; margin-top: 40px; }
.bd-sort a {
    height: 32px;
    padding: 5px 13px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 999px;
    background: var(--vb-color-surface-white);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--vb-color-text-primary);
}
.bd-sort a.is-on { border-color: var(--vb-color-brand-green); background: var(--vb-color-brand-green); color: var(--vb-color-text-inverse); }
.bd-review-list--full { margin-top: 20px; }
.bd-pager { display: flex; justify-content: center; gap: 10px; margin: 32px 0 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.bd-pager a { color: var(--vb-color-text-secondary); }
.bd-pager a.is-on { color: var(--vb-color-brand-green); }
@media (max-width: 767px) {
    .bd-top, .bd-reviews, .bd-summary, .bd-facts { grid-template-columns: 1fr; }
    .bd-stage { height: auto; padding-bottom: 20px; }
    .bd-info { height: auto; padding-bottom: 24px; }
    .bd-title { padding-right: 0; margin-top: 36px; }
    .bd-fact + .bd-fact { border-left: 0; border-top: 1px solid var(--vb-color-border-subtle); padding: 16px 16px 0 27px; margin-top: 16px; }
    .bd-dist { margin-left: 0; }
    .bd-dist__bar { width: 100%; flex: 1; }
}