@charset "utf-8";

/* ==================================================================
 * content.css - 좋은 변화 콘텐츠(content) 폴더 전용 스타일
 * content 폴더의 모든 페이지 스타일을 이 한 파일에서 함께 관리한다.
 *
 *   books.php   책으로 가치 잇기 : Section Head / books-*
 *   columns.php 언론 칼럼        : (추후 추가)
 *   lecture_html.php 강연 영상   : lecture-*
 * ================================================================== */

/* ==================================================================
 * Section Head
 * 페이지별로 css 를 독립 관리하므로 main.css / intro.css / sub_about.css /
 * news.css 에도 같은 규칙이 각각 들어 있다. 수정 시 함께 맞춘다.
 * ================================================================== */
.sec-head { margin-bottom: 48px; text-align: center; }

.sec-head__en {
    font-family: var(--font-en);
    font-size: 13px; font-weight: 700;
    letter-spacing: .18em;
    color: var(--c-accent);
}
.sec-head__ko {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--c-ink);
    letter-spacing: -.035em;
}
.sec-head__desc { margin-top: 14px; color: var(--c-sub); }

.sec-head--light .sec-head__ko { color: #fff; }
.sec-head--light .sec-head__en { color: var(--c-accent); }


/* ==================================================================
 * 책으로 가치 잇기
 * 목록 형태는 비영리활동가학교 엣지 ‘도서관’을 참고했다.
 *   표지(2:3) + 연도 배지 + 제목 + 요약
 * 다만 책 한 권당 소개·추천의 글 분량이 많아, 카드 그리드 대신
 * 가로 배치(표지 왼쪽 / 내용 오른쪽) 목록으로 풀었다.
 * ================================================================== */
.books { padding: 90px 0 110px; }

/* ---------- 상단 : 건수 + 연도 필터 ---------- */
.books__util {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-line);
}
.books__count { font-size: 15px; color: var(--c-sub); }
.books__count strong { color: var(--c-primary); font-weight: 700; }

.books__filter { display: flex; flex-wrap: wrap; gap: 8px; }
.books__filter button {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14.5px; font-weight: 600;
    color: var(--c-sub);
    box-shadow: inset 0 0 0 1px var(--c-line);
    transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.books__filter button:hover { color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-accent); }
.books__filter button.is-active {
    color: #fff;
    background: var(--c-primary);
    box-shadow: inset 0 0 0 1px var(--c-primary);
}

/* ---------- 목록 ----------
   xl 이상에서 한 줄에 3개. 폭이 좁아지면 2개 → 1개로 줄어든다.
   3열에서는 표지를 옆에 둘 자리가 없어 위로 올린 세로 카드로 쓴다. */
.books__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.books__item {
    border-radius: var(--radius);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--c-line);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
    overflow: hidden;
}
/* 카드 전체가 상세보기 링크 */
.books__item > a { display: block; height: 100%; }
.books__item:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-md);
}
/* 필터로 감출 때 */
.books__item[hidden] { display: none; }

/* ---------- 표지 ----------
   표지 비율이 제각각일 수 있어 잘라내지 않고(contain) 담는다. */
.books__cover {
    position: relative;
    /* 비율(aspect-ratio)로 두면 3열에서 카드 폭에 비례해 600px 가까이 늘어난다.
       칸 수와 관계없이 일정한 높이를 쓰도록 고정한다. */
    height: 340px;
    padding: 26px 26px 0;
    background: var(--c-bg-soft);
}
.books__cover img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 8px 18px rgba(8, 48, 63, .18));
    transition: transform .5s var(--ease);
}
.books__item:hover .books__cover img { transform: translateY(-5px); }

/* 연도 배지 */
.books__year {
    position: absolute; left: 12px; top: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    color: #fff;
    background: rgba(8, 48, 63, .72);
    backdrop-filter: blur(4px);
}

/* ---------- 내용 ---------- */
.books__body {
    min-width: 0;
    padding: 26px 26px 30px;
}

/* 제목 : 길이가 달라도 카드 높이가 흔들리지 않게 2줄로 제한 */
.books__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.4;
    color: var(--c-ink);
    margin-bottom: 12px;
    transition: color .25s var(--ease);
}
.books__item:hover .books__title { color: var(--c-primary); }

/* 저자 · 출판사 · 발간일 : 카드 폭이 좁아 알약 대신 담백한 줄로 */
.books__meta {
    display: grid; gap: 3px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--c-line);
}
.books__meta > div { display: flex; gap: 8px; font-size: 14px; }
.books__meta dt {
    flex: none; width: 44px;
    font-weight: 700;
    color: var(--c-primary);
}
.books__meta dd {
    margin: 0;
    min-width: 0;
    color: var(--c-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 대표 한 줄 */
.books__quote {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
    padding-left: 14px;
    font-size: 15px; font-weight: 600;
    line-height: 1.55;
    color: var(--c-primary);
}
.books__quote::before {
    content: '';
    position: absolute; left: 0; top: .25em; bottom: .25em;
    width: 3px;
    border-radius: 3px;
    background: var(--c-accent);
}

/* 목록에는 첫 문단만 3줄로 보여준다 (전문은 상세보기) */
.books__summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--c-sub);
}

/* 자세히 보기 */
.books__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 20px;
    font-size: 14.5px; font-weight: 700;
    color: var(--c-primary);
}
.books__more svg {
    width: 15px; height: 15px;
    transition: transform .25s var(--ease);
}
.books__item:hover .books__more svg { transform: translateX(3px); }

/* 필터 결과가 없을 때 */
.books__empty {
    padding: 60px 0;
    text-align: center;
    color: var(--c-sub);
}

/* ==================================================================
 * Responsive
 * ================================================================== */
/* xl(1200px) 미만 : 2열 */
@media (max-width: 1199.98px) {
    .books__list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 1024px) {
    .books { padding: 70px 0 90px; }
}

/* 좁은 화면 : 1열 (카드가 지나치게 넓어지지 않게 폭 제한) */
@media (max-width: 640px) {
    .books { padding: 56px 0 76px; }
    .books__util { justify-content: flex-start; }
    .books__list { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .books__cover { height: 300px; padding: 22px 22px 0; }
    .books__body { padding: 22px 22px 26px; }
    .books__summary { font-size: 15px; }
    .sec-head { margin-bottom: 34px; }
}


/* ==================================================================
 * 도서 상세보기 (content/view.php)
 * ================================================================== */
.bview { padding: 90px 0 110px; }


/* ---------- 표지 + 서지정보 ---------- */
.bview__head {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 46px;
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--c-line);
}
.bview__cover {
    position: relative;
    align-self: start;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-bg-soft);
    box-shadow: var(--shadow-md);
}
.bview__cover img { width: 100%; height: 100%; object-fit: cover; }

.bview__year {
    position: absolute; left: 14px; top: 14px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
    color: #fff;
    background: rgba(8, 48, 63, .72);
    backdrop-filter: blur(4px);
}

.bview__info { min-width: 0; }

.bview__title {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.035em;
    color: var(--c-ink);
    margin-bottom: 18px;
}

.bview__quote {
    position: relative;
    margin-bottom: 22px;
    padding-left: 18px;
    font-size: 17.5px; font-weight: 600;
    line-height: 1.6;
    color: var(--c-primary);
}
.bview__quote::before {
    content: '';
    position: absolute; left: 0; top: .25em; bottom: .25em;
    width: 3px;
    border-radius: 3px;
    background: var(--c-accent);
}

.bview__meta { display: grid; gap: 2px; margin-bottom: 26px; }
.bview__meta > div {
    display: flex; align-items: baseline; gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--c-line);
}
.bview__meta dt {
    flex: none; width: 64px;
    font-size: 14.5px; font-weight: 700;
    color: var(--c-primary);
}
.bview__meta dd { margin: 0; font-size: 15.5px; color: var(--c-body); }

.bview__buy {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px; font-weight: 700;
    color: #fff;
    background: var(--c-primary);
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.bview__buy svg { width: 16px; height: 16px; }
.bview__buy:hover { background: var(--c-primary-dark); transform: translateY(-2px); }

/* ---------- 책 소개 · 추천의 글 ---------- */
.bview__section + .bview__section { margin-top: 44px; }

.bview__section-title {
    position: relative;
    margin-bottom: 20px;
    padding-left: 16px;
    font-size: 21px; font-weight: 800;
    letter-spacing: -.03em;
    color: var(--c-ink);
}
.bview__section-title::before {
    content: '';
    position: absolute; left: 0; top: .22em; bottom: .22em;
    width: 4px;
    border-radius: 4px;
    background: var(--c-accent);
}

.bview__text p {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--c-body);
}
.bview__text p + p { margin-top: 14px; }

.bview__review {
    padding: 28px 30px;
    border-radius: var(--radius);
    background: var(--c-bg-soft);
}
.bview__review + .bview__review { margin-top: 16px; }
.bview__review-by {
    margin-bottom: 12px;
    font-size: 15.5px; font-weight: 700;
    color: var(--c-primary);
}
.bview__review .bview__text p { font-size: 16px; color: var(--c-sub); }

/* ---------- 이전 · 다음 책 ---------- */
/* 폭은 본문과 같이 .container-xxl(1400px) 를 그대로 쓴다 */
.bview__nav {
    margin-top: 50px;
    border-top: 1px solid var(--c-line);
}
.bview__nav-item {
    display: flex; align-items: center;
    gap: 20px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--c-line);
}
.bview__nav-label {
    flex: none; width: 66px;
    font-size: 14px; font-weight: 700;
    color: var(--c-primary);
}
.bview__nav-item a {
    min-width: 0;
    font-size: 15.5px;
    color: var(--c-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .25s var(--ease);
}
.bview__nav-item a:hover { color: var(--c-primary); text-decoration: underline; }
.bview__nav-none { font-size: 15.5px; color: var(--c-line); }

/* ---------- 목록으로 ---------- */
.bview__foot { margin-top: 40px; text-align: center; }

.bview__list-btn {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 50px;
    padding: 0 30px;
    border-radius: 999px;
    font-size: 15px; font-weight: 700;
    color: var(--c-primary);
    box-shadow: inset 0 0 0 1.5px var(--c-line);
    transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.bview__list-btn svg { width: 17px; height: 17px; }
.bview__list-btn:hover {
    color: #fff;
    background: var(--c-primary);
    box-shadow: inset 0 0 0 1.5px var(--c-primary);
}

/* ---------- 책이 없을 때 ---------- */
.bview__empty { padding: 80px 0; text-align: center; }
.bview__empty-title {
    font-size: 22px; font-weight: 700;
    color: var(--c-ink);
    margin-bottom: 10px;
}
.bview__empty-desc { color: var(--c-sub); margin-bottom: 28px; }

/* ==================================================================
 * 도서 상세보기 Responsive
 * ================================================================== */
@media (max-width: 1024px) {
    .bview { padding: 70px 0 90px; }
    .bview__head { grid-template-columns: 220px 1fr; gap: 34px; }
}
@media (max-width: 767.98px) {
    .bview__head { }
}
@media (max-width: 640px) {
    .bview { padding: 56px 0 76px; }
    .bview__head { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; margin-bottom: 32px; }
    .bview__cover { width: 190px; margin: 0 auto; }
    .bview__review { padding: 22px 20px; }
    .bview__text p { font-size: 16px; }
    .bview__nav-item { gap: 14px; padding: 15px 2px; }
    .bview__nav-label { width: 54px; font-size: 13.5px; }
    .bview__nav-item a, .bview__nav-none { font-size: 15px; }
    .bview__info {
        border-top: 1px solid var(--c-line);
        margin-top: 5px;
        padding-top: 20px;
    }
}


/* ==================================================================
 * 강연 영상 (content/lecture_html.php)
 * 카드 · 배지 · 필터는 books-* 와 같은 결을 쓴다.
 * 다만 영상이라 표지(2:3) 대신 썸네일(16:9)을 쓰고,
 * 유튜브 목록처럼 썸네일 왼쪽 · 내용 오른쪽 가로 카드를 한 줄에 2개씩 놓는다.
 * ================================================================== */
.lecture { padding: 90px 0 110px; }

/* ---------- 상단 : 편수 ---------- */
.lecture__util {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-line);
}
.lecture__count { font-size: 15px; color: var(--c-sub); }
.lecture__count strong { color: var(--c-primary); font-weight: 700; }

/* ---------- 목록 : 가로 카드 한 줄에 2개 ---------- */
.lecture__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.lecture__item {
    border-radius: var(--radius);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--c-line);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
    overflow: hidden;
}
/* 카드 전체가 영상 링크 (링크가 없으면 같은 클래스의 <div> 로 그려진다).
   썸네일 왼쪽 / 내용 오른쪽 가로 배치 — 유튜브 목록과 같은 형태. */
.lecture__link {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    height: 100%;
}
.lecture__item:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-md);
}
/* 필터로 감출 때 */
.lecture__item[hidden] { display: none; }

/* ---------- 썸네일 (왼쪽) ----------
   같은 줄의 카드는 높이가 같아지므로, 썸네일도 카드 높이에 맞춰 늘려
   좌측에 빈 공간이 생기지 않게 한다. 16:9 는 min-height 로 지킨다. */
.lecture__thumb {
    position: relative;
    align-self: stretch;
    min-height: 100px;
    overflow: hidden;
    background: var(--c-bg-soft);
    aspect-ratio: 16 / 9;
}
.lecture__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.lecture__item:hover .lecture__thumb img { transform: scale(1.05); }

/* 썸네일이 아직 없을 때 */
.lecture__noimg {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    color: var(--c-line);
}
.lecture__noimg svg { width: 44px; height: 44px; }

/* 가운데 재생 버튼 — 평소엔 은은하게, 호버 시 브랜드 색으로 */
.lecture__play {
    position: absolute; left: 50%; top: 50%;
    z-index: 2;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    color: #fff;
    background: rgba(8, 48, 63, .55);
    transform: translate(-50%, -50%);
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.lecture__play svg { width: 19px; height: 19px; transform: translateX(1px); }
.lecture__item:hover .lecture__play {
    background: var(--c-primary);
    transform: translate(-50%, -50%) scale(1.08);
}

/* ---------- 내용 ---------- */
.lecture__body {
    min-width: 0;
    padding: 22px 26px 24px;
}

/* 제목 : 길이가 달라도 카드 높이가 흔들리지 않게 2줄로 제한 */
.lecture__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--c-ink);
    margin-bottom: 12px;
    transition: color .25s var(--ease);
}
.lecture__item:hover .lecture__title { color: var(--c-primary); }

/* 설명 : 목록에서는 3줄까지만 (전문은 영상에서) */
.lecture__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--c-sub);
}

/* 영상 보기 */
.lecture__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 20px;
    font-size: 14.5px; font-weight: 700;
    color: var(--c-primary);
    display:none;
}
.lecture__more svg {
    width: 15px; height: 15px;
    transition: transform .25s var(--ease);
}
.lecture__item:hover .lecture__more svg { transform: translateX(3px); }

/* 영상이 없을 때 (vod 스킨 목록 · 메인 강의/활동 섹션) */
.lecture__empty {
    padding: 60px 0;
    text-align: center;
    color: var(--c-sub);
}

/* ==================================================================
 * 강연 영상 Responsive
 * ================================================================== */



/* 2열로는 내용 칸이 너무 좁아지는 지점 — 1열 가로 카드로 */
@media (max-width: 1200px) {
    .lecture { padding: 70px 0 90px; }
    .lecture__list { grid-template-columns: 1fr; gap: 20px; }
    .lecture__title { font-size: 20px; 
    -webkit-line-clamp: 1;
    line-clamp: 1;}
}
/* 좁은 화면 : 썸네일을 위로 올린 세로 카드 (가로로는 글이 두세 자씩 끊긴다) */
@media (max-width: 600px) {
    .lecture__link { grid-template-columns: 200px minmax(0, 1fr); }
    .lecture__more {display: none;}
    .lecture__desc {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
}

/* 좁은 화면 : 썸네일을 위로 올린 세로 카드 (가로로는 글이 두세 자씩 끊긴다) */
@media (max-width: 500px) {
    .lecture { padding: 56px 0 76px; }
    .lecture__list { max-width: 480px; margin-inline: auto; }
    .lecture__link { grid-template-columns: minmax(0, 1fr); }
    .lecture__thumb { aspect-ratio: 16 / 9; min-height: 0; }
    .lecture__body { padding: 20px 22px 24px; }
    .lecture__title { font-size: 18.5px; }
    .lecture__desc { font-size: 15px; }
    .lecture__play { width: 54px; height: 54px; }
    .lecture__play svg { width: 22px; height: 22px; }
}