/* KOFA 책장(핸드북·백서 공통) — 분류별로 묶고, 책은 가로로 나열. 폭이 차면 다음 줄로.
   분류 묶음(.hbs-group)도 내용만큼의 폭으로 가로로 이어 붙어, 책이 적은 분류끼리는 한 줄에 함께 놓입니다. */
.hbs{display:flex;flex-wrap:wrap;align-items:flex-start;gap:30px 44px;margin-top:14px;}
.hbs-group{flex:0 1 auto;min-width:0;max-width:100%;}
.hbs-head{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;padding:0 0 8px;border-bottom:1px solid var(--line-strong, rgba(230,205,148,.35));
  font-size:15px;font-weight:700;letter-spacing:0;color:var(--gold-bright,#e6cd94);font-family:inherit;line-height:1.3;}
.hbs-head span{font-size:12px;font-weight:600;color:var(--ink-faint,#b3a4c9);}
.hbs-row{display:flex;flex-wrap:wrap;gap:22px 18px;}

.hbt{width:150px;display:flex;flex-direction:column;align-items:stretch;text-decoration:none;color:inherit;}
.hbt-cover{position:relative;display:block;width:100%;aspect-ratio:1/1.414;padding:0;border:1px solid var(--line-strong, rgba(230,205,148,.35));
  background:var(--surface,#2a1d40);cursor:pointer;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.32);transition:transform .2s ease, box-shadow .2s ease;}
.hbt-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.hbt:hover .hbt-cover, .hbt-cover:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.42);}
.hbt-cover:focus-visible{outline:2px solid var(--gold-bright,#e6cd94);outline-offset:2px;}
.hbt-free{position:absolute;top:6px;left:6px;background:#1e7b3c;color:#ffffff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.02em;}
.hbt-lockmark{position:absolute;right:6px;bottom:6px;background:rgba(10,6,20,.72);color:#ffffff;font-size:11px;padding:2px 5px;border-radius:3px;}
.hbt-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:9px;
  font-size:13px;line-height:1.4;font-weight:600;color:var(--ink,#f8f6f1);}
.hbt-meta{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-faint,#b3a4c9);}
.hbt-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.hbt-actions .btn{padding:5px 10px;font-size:12px;}

/* 메인 화면용(작은 책) */
.hbs-compact{gap:24px 36px;}
.hbs-compact .hbs-head{font-size:14px;margin-bottom:10px;}
.hbs-compact .hbs-row{gap:16px 14px;}
.hbs-compact .hbt{width:104px;}
.hbs-compact .hbt-title{font-size:12px;margin-top:7px;}
.hbs-compact .hbt-meta{font-size:10.5px;}
.hbs-wp{margin-top:0;}
.hbs-wp .hbt-title{text-align:center;font-family:var(--display, inherit);}

/* 핸드북 페이지 목록: 기존 2열 카드 격자 대신 책장 */
.hb-cards.hbs{display:flex;grid-template-columns:none;}

@media(max-width:560px){
  .hbs{gap:22px 24px;}
  .hbt{width:128px;}
  .hbs-compact .hbt{width:92px;}
  .hbs-row{gap:16px 12px;}
}

/* 별도 칸(Business English 등) — 핸드북 책장과 구분되는 패널 */
.hbs-sep{flex:1 1 100%;max-width:100%;margin-top:6px;padding:18px 20px 22px;border:1px solid var(--line-strong, rgba(230,205,148,.35));border-left:4px solid #7b6bd6;
  background:linear-gradient(135deg, rgba(123,107,214,.16), rgba(123,107,214,.04));border-radius:4px;}
.hbs-sep-eyebrow{font-size:11px;letter-spacing:.08em;color:#c9bdfa;font-weight:700;margin-bottom:4px;}
.hbs-sep-title{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-size:17px;font-weight:700;color:var(--ink,#f8f6f1);line-height:1.3;}
.hbs-sep-title span{font-size:12px;font-weight:600;color:var(--ink-faint,#b3a4c9);}
.hbs-sep-desc{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--ink-dim,#d6cae6);max-width:72ch;}
.hbs-compact .hbs-sep{padding:14px 16px 18px;}
.hbs-compact .hbs-sep-title{font-size:15px;}
[dir="rtl"] .hbs-sep{border-left:1px solid var(--line-strong, rgba(230,205,148,.35));border-right:4px solid #7b6bd6;}

/* 밝은 배경 사이트(뉴스와이어·이러닝센터)용 */
.hbs-light{--ink:#14202E;--ink-dim:#3B4A5C;--ink-faint:#5E6B78;--line-strong:#CFD8DF;--gold-bright:#0D3B3E;--surface:#EEF2F5;}
.hbs-light .hbt-cover{box-shadow:0 6px 14px rgba(20,32,46,.16);}
.hbs-light .hbt:hover .hbt-cover, .hbs-light .hbt-cover:hover{box-shadow:0 10px 20px rgba(20,32,46,.24);}
.hbs-light .hbs-sep{background:linear-gradient(135deg,#F3F0FF,#FBFAFF);border-color:#D9D2F5;border-left-color:#6B5BD0;}
.hbs-light .hbs-sep-eyebrow{color:#5546B8;}
[dir="rtl"] .hbs-light .hbs-sep{border-left-color:#D9D2F5;border-right-color:#6B5BD0;}
.hbt-st{display:block;margin-top:6px;font-size:11px;line-height:1.35;color:#8A5A12;}
.hbt-st.ok{color:#1E6B3A;}
.hbt-actions .sm{padding:5px 10px;font-size:12px;}