@charset "utf-8";
/* 도서 게시판 스킨 (adplan_book) — 표지 그리드 목록 + 서지 정보 상세 */

.abk_list, .abk_view{
  --abk-ink:#15181c;
  --abk-body:#5f666f;
  --abk-dim:#98a0aa;
  --abk-line:#e1e5ea;
  --abk-blue:#123a7a;
  --abk-red:#d33b2f;
  max-width:1240px; margin:0 auto; padding:0 24px 60px; color:var(--abk-body);
}

/* 표지 공통 — 이미지가 없어도 제목으로 그린다 */
.abk_item__cover, .abk_cover{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:24px 18px; border-radius:3px; overflow:hidden;
  background:linear-gradient(160deg, hsl(var(--h) 48% 46%) 0%, hsl(var(--h) 54% 31%) 100%);
  box-shadow:0 10px 24px rgba(16,32,58,.18), inset -8px 0 14px -10px rgba(0,0,0,.5);
}
.abk_item__cover img, .abk_cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.abk_cover__band{ position:absolute; left:0; top:0; bottom:0; width:12px; background:rgba(0,0,0,.22); }
.abk_cover__t{ font-size:17px; font-weight:800; line-height:1.4; color:#fff; letter-spacing:-.02em;
  word-break:keep-all; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.abk_cover__y{ margin-top:8px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.82); }

/* ============================================================ 목록 */
.abk_list__hd{ display:flex; align-items:baseline; gap:12px; padding:36px 0 0; }
.abk_list__tit{ margin:0; font-size:26px; font-weight:800; color:var(--abk-ink); letter-spacing:-.02em; }
.abk_list__total{ margin:0; font-size:14px; color:var(--abk-dim); }
.abk_list__total strong{ color:var(--abk-ink); }

.abk_cate{ display:flex; flex-wrap:wrap; gap:6px; margin:20px 0 0; padding:14px 0;
  border-top:2px solid var(--abk-ink); border-bottom:1px solid var(--abk-line); }
.abk_cate a{ padding:6px 13px; border-radius:999px; font-size:13px; color:var(--abk-body); text-decoration:none; }
.abk_cate a:hover{ background:#f2f5f9; color:var(--abk-ink); }
.abk_cate a.is-on{ background:var(--abk-blue); color:#fff; font-weight:700; }

.abk_grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px 22px; margin:30px 0 0; padding:0; list-style:none; }
.abk_item{ position:relative; }
.abk_item a{ display:block; text-decoration:none; color:inherit; }
.abk_item__cover{ aspect-ratio:3/4; transition:transform .28s ease, box-shadow .28s ease; }
.abk_item a:hover .abk_item__cover{ transform:translateY(-5px); box-shadow:0 16px 32px rgba(16,32,58,.26); }
.abk_item__off{ position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:4px;
  background:var(--abk-red); color:#fff; font-size:11.5px; font-weight:800; }
.abk_item__t{ display:block; margin:13px 0 0; font-size:14.5px; font-weight:700; line-height:1.5;
  color:var(--abk-ink); word-break:keep-all; }
.abk_item__a{ display:block; margin-top:5px; font-size:12.5px; color:var(--abk-dim); }
.abk_item__p{ display:block; margin-top:5px; font-size:13.5px; }
.abk_item__p s{ margin-right:6px; color:var(--abk-dim); font-size:12.5px; }
.abk_item__p b{ color:var(--abk-blue); font-weight:800; }
.abk_item__chk{ position:absolute; top:8px; left:8px; z-index:2; }

.abk_grid__none{ grid-column:1/-1; padding:80px 0; text-align:center; color:var(--abk-dim); }

.abk_list__ft{ display:flex; justify-content:flex-end; gap:6px; margin:28px 0 0; }
.abk_btn{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border:1px solid var(--abk-line);
  border-radius:4px; background:#fff; color:var(--abk-ink); font-size:13px; font-weight:700;
  text-decoration:none; cursor:pointer; }
.abk_btn--dark{ background:var(--abk-blue); border-color:var(--abk-blue); color:#fff; }

.abk_sch{ display:flex; justify-content:center; gap:0; margin:34px 0 0; }
.abk_sch select{ height:40px; padding:0 8px; border:1px solid var(--abk-line); border-right:0;
  border-radius:4px 0 0 4px; background:#fff; font-size:13px; color:var(--abk-body); }
.abk_sch input[type=text]{ width:240px; height:40px; padding:0 12px; border:1px solid var(--abk-line);
  font-size:13px; color:var(--abk-ink); }
.abk_sch button{ height:40px; padding:0 22px; border:0; border-radius:0 4px 4px 0;
  background:var(--abk-ink); color:#fff; font-size:13px; font-weight:700; cursor:pointer; }

/* ============================================================ 상세 */
.abk_crumb{ padding:30px 0 0; font-size:13px; color:var(--abk-dim); }
.abk_crumb a{ color:var(--abk-body); text-decoration:none; }
.abk_crumb a:hover{ color:var(--abk-blue); }
.abk_crumb span{ margin:0 6px; }

.abk_tit{ margin:12px 0 0; font-size:27px; font-weight:800; line-height:1.4;
  color:var(--abk-ink); letter-spacing:-.02em; word-break:keep-all; }

.abk_head{ display:grid; grid-template-columns:300px 1fr; gap:44px; margin:26px 0 0;
  padding:30px; border:1px solid var(--abk-line); border-radius:10px; background:#fff; }
.abk_cover{ aspect-ratio:3/4; }
.abk_cover .abk_cover__t{ font-size:22px; }

.abk_spec{ width:100%; border-collapse:collapse; }
.abk_spec th, .abk_spec td{ padding:13px 4px; border-bottom:1px solid var(--abk-line);
  font-size:14px; text-align:left; vertical-align:middle; }
.abk_spec th{ width:100px; color:var(--abk-body); font-weight:600; }
.abk_spec td{ color:var(--abk-ink); }
.abk_spec__was{ color:var(--abk-dim); text-decoration:line-through; font-size:15px; }
.abk_spec__sell td strong{ font-size:24px; font-weight:800; color:var(--abk-blue); letter-spacing:-.02em; }
.abk_spec__sell td em{ margin-left:8px; padding:3px 8px; border-radius:4px;
  background:var(--abk-red); color:#fff; font-size:12px; font-style:normal; font-weight:700; }

.abk_buy{ margin:24px 0 0; }
.abk_buy__btn{ display:block; padding:16px; border-radius:6px; background:var(--abk-blue);
  color:#fff; font-size:17px; font-weight:800; letter-spacing:.1em; text-align:center; text-decoration:none; }
.abk_buy__btn:hover{ background:#0b2a5c; }
.abk_buy__note{ margin:10px 0 0; font-size:12.5px; color:var(--abk-dim); text-align:center; }

.abk_tabs{ display:flex; margin:36px 0 0; border:1px solid var(--abk-line); border-bottom:0; border-radius:6px 6px 0 0; overflow:hidden; }
.abk_tabs button{ flex:1; padding:14px 8px; border:0; border-right:1px solid var(--abk-line);
  background:#f5f7fa; color:var(--abk-body); font-size:14.5px; font-weight:700; cursor:pointer; }
.abk_tabs button:last-child{ border-right:0; }
.abk_tabs button.is-on{ background:#fff; color:var(--abk-blue); position:relative; }
.abk_tabs button.is-on::after{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--abk-blue); }

.abk_panel{ padding:30px 26px; border:1px solid var(--abk-line); border-radius:0 0 6px 6px;
  font-size:15px; line-height:1.9; color:#2b2b2b; word-break:keep-all; }
.abk_panel img{ max-width:100%; height:auto; }
.abk_panel__none{ padding:30px 0; text-align:center; color:var(--abk-dim); }

.abk_files{ margin:26px 0 0; padding:18px 22px; border:1px solid var(--abk-line); border-radius:8px; background:#fafbfc; }
.abk_files h2{ margin:0 0 10px; font-size:14px; font-weight:700; color:var(--abk-ink); }
.abk_files ul{ margin:0; padding:0; list-style:none; }
.abk_files li{ padding:4px 0; font-size:14px; }
.abk_files a{ color:var(--abk-blue); text-decoration:none; }
.abk_files a:hover{ text-decoration:underline; }
.abk_files em{ font-style:normal; font-size:12px; color:var(--abk-dim); }

.abk_foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:30px 0 0; }
.abk_foot__list{ display:inline-flex; align-items:center; height:40px; padding:0 22px;
  border:1px solid var(--abk-line); border-radius:4px; background:#fff;
  color:var(--abk-ink); font-size:14px; font-weight:700; text-decoration:none; }
.abk_foot__admin{ display:flex; gap:6px; }
.abk_foot__admin a{ display:inline-flex; align-items:center; height:40px; padding:0 14px;
  border:1px solid var(--abk-line); border-radius:4px; background:#fff;
  color:var(--abk-body); font-size:13px; text-decoration:none; }

.abk_nb{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 0; }
.abk_nb a{ padding:14px 16px; border:1px solid var(--abk-line); border-radius:6px;
  font-size:13.5px; color:var(--abk-ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.abk_nb a:hover{ border-color:var(--abk-blue); color:var(--abk-blue); }
.abk_nb em{ margin-right:8px; font-style:normal; font-size:12px; color:var(--abk-dim); }
.abk_nb__next{ text-align:right; }

/* ============================================================ 반응형 */
@media (max-width:1100px){ .abk_grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:880px){
  .abk_grid{ grid-template-columns:repeat(3,1fr); }
  .abk_head{ grid-template-columns:1fr; gap:26px; padding:22px; }
  .abk_cover{ max-width:250px; margin:0 auto; }
  .abk_tit{ font-size:22px; }
}
@media (max-width:560px){
  .abk_list, .abk_view{ padding:0 16px 40px; }
  .abk_grid{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
  .abk_cover__t{ font-size:15px; }
  .abk_tabs button{ font-size:13px; padding:12px 4px; }
  .abk_panel{ padding:22px 16px; font-size:14.5px; }
  .abk_sch input[type=text]{ width:auto; flex:1; }
  .abk_nb{ grid-template-columns:1fr; }
  .abk_nb__next{ text-align:left; }
}

/* 장바구니 버튼 */
.abk_item{ position:relative; }
.abk_item__cart{ display:block; width:100%; margin:8px 0 0; height:34px; border:1px solid var(--abk-line);
  border-radius:5px; background:#fff; color:var(--abk-ink); font-size:12.5px; font-weight:700; cursor:pointer; }
.abk_item__cart:hover{ background:var(--abk-blue); border-color:var(--abk-blue); color:#fff; }
.abk_item__cart.is-on{ background:#12a150; border-color:#12a150; color:#fff; }

.abk_buy__qty{ display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.abk_buy__qty label{ font-size:14px; font-weight:600; color:var(--abk-body); }
.abk_buy__qty input{ width:88px; height:42px; padding:0 10px; border:1px solid var(--abk-line);
  border-radius:5px; text-align:center; font-size:15px; }
.abk_buy__btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.abk_buy__cart{ height:54px; border:1px solid var(--abk-blue); border-radius:6px; background:#fff;
  color:var(--abk-blue); font-size:16px; font-weight:800; cursor:pointer; }
.abk_buy__cart:hover{ background:#f2f6fc; }
.abk_buy__cart:disabled{ background:#12a150; border-color:#12a150; color:#fff; }
.abk_buy__btn{ height:54px; border:0; border-radius:6px; background:var(--abk-blue);
  color:#fff; font-size:16px; font-weight:800; letter-spacing:.04em; cursor:pointer; }
.abk_buy__btn:hover{ background:#0b2a5c; }
@media (max-width:560px){ .abk_buy__btns{ grid-template-columns:1fr; } }