/* ══════════════════════════════════════════════════════════
   도감 첫 화면
   ══════════════════════════════════════════════════════════ */
body.catalog{display:flex; justify-content:center; padding:52px 26px 70px}
.book{width:100%; max-width:1080px}

.title{margin-bottom:38px}
.title .trow{display:flex; align-items:center; justify-content:space-between; gap:24px}
.title h1{font-size:38px; font-weight:800; letter-spacing:-.04em}
.title .logo{height:32px; flex:none}
.title p{margin-top:10px; font-size:16px; color:var(--muted); line-height:1.6}

.group{margin-bottom:36px}
.ghead{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.ghead h2{font-size:15px; font-weight:800; color:var(--text);
          background:#e7ecf6; border-radius:7px; padding:5px 12px}
.ghead .rule{flex:1; height:1px; background:var(--line)}
.ghead .cnt{font-size:12.5px; font-weight:700; color:var(--faint)}

.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(292px, 1fr)); gap:14px}

.entry{display:block; padding:18px 20px 17px; transition:.16s; position:relative}
a.entry:hover{transform:translateY(-2px); border-color:#c9d6f0;
              box-shadow:0 6px 20px rgba(24,34,54,.09)}
.entry.soon{opacity:.62; cursor:default}

.thumb{margin-bottom:12px}
.thumb svg{display:block; width:100%; height:auto}
.entry.soon .thumb{filter:grayscale(1); opacity:.55}   /* 준비중은 색을 뺀다 */

.entry h3{font-size:18px; font-weight:800; letter-spacing:-.02em}
.entry .en{font-size:12.5px; font-weight:600; color:var(--faint); margin-left:7px}
.entry p{margin-top:7px; font-size:13.5px; color:var(--muted); line-height:1.6}

.tag{position:absolute; top:16px; right:18px; font-size:11.5px; font-weight:800;
     border-radius:6px; padding:3px 8px; background:#eef1f6; color:var(--faint)}
a.entry .tag{background:#e6edfe; color:var(--accent)}

.foot{margin-top:8px; display:flex; align-items:baseline; justify-content:space-between; gap:20px}
.foot p{font-size:13px; color:var(--faint); line-height:1.7}