:root{
  --header-pad-y: 14px;
  --header-gap: 14px;
  --bg: white;
  --text: black;
  --font: "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  --container-w: min(var(--grid-w), 92vw);
  --grid-w: 1000px;
  --cols: 8;
  --card-media-h: 220px;
  --card-meta-h:  64px;
  --card-gap:     8px;
}



*{
  box-sizing: border-box;
}

html,body {
  height:100%; }

body{
  display: flex;
  flex-direction: column;
  margin:0;
  font: 14px/1.4 var(--font);
  color: var(--text);
  background: var(--bg);
}

main, .content {
  flex: 1 0 auto;
}


a{
  color: inherit;
  text-decoration: none; }


.site-header{
  position: sticky;
  top:0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--header-pad-y) 16px;
}

body::before{
  content: none;
  display: block;
}

.site-header_top{
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
}

.site-header_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
  flex-wrap: nowrap;
  padding-bottom: 16px;
}

.site-header_top,
.site-header_inner{
  width: var(--container-w);
  margin-inline: auto;
}

.site-inner-contents{
  width: var(--container-w);
  margin-inline: auto;
  padding: var(--header-pad-y) 16px;
}


.navigation-container_left-column,
.navigation-container_right-column{
  flex: 1 1 0;
  min-width: 0;
}


.navigation-container_left-column .site-navigation{
  display:flex;
  align-items:center;
  gap: 2rem .75rem;
  flex-wrap: nowrap;
  justify-content:flex-start;
  white-space: nowrap;
}


.site-navigation--right{
  display:flex;
  align-items:center;
  gap: 2rem .75rem;
  flex-wrap: nowrap;
  justify-content:flex-end;
  white-space: nowrap;
  width: 100%;
}


.navigation-container_left-column .site-navigation,
.navigation-container_right-column .site-navigation{
  display: flex;
  align-items: center;
  gap: 2rem .75rem;
  flex-wrap: wrap;
}


.site-navigation > *{
  flex: 0 0 auto;
}

.site-navigation {
  list-style: none;
  margin: 0;
  padding: 0;
}


li.nav-item {
  list-style: none;
}



.chip, .toggle{
  display:inline-block;
  padding: 6px 12px;
  border: 1px solid var(--text);
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
}


/* toggle */
.segmented{
  display: inline-flex;
  align-items: center;
  background: #e9e9e9;
  border-radius: 9999px;
  gap: 0;
}

.segmented__btn{
  border:1px solid transparent;
  background:transparent;
  padding:.50rem .50rem;
  border-radius:9999px;
  font: 14px/1 var(--font);
  cursor:pointer;
}
.segmented__btn[aria-selected="true"]{
  background:#fff;
  border-color:#000;
}

/* − N + */
.btn-circle{
  width: 22px;
  height: 22px;
  border:1px solid #000;
  border-radius:9999px;
  background:#fff;
  line-height:1;
  font-size:14px;
  cursor:pointer;
}
.cols-controls{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin-right:.75rem;
}
.cols-count{
  font: 16px/1 var(--font); }

.view-controls[data-mode="table"] .cols-controls{
  display:none;
}
.view--table .books-grid{
  grid-template-columns: 1fr; 
  row-gap: 8px;
}


.site-inner-contents{
  width: min(var(--grid-max), 92vw);
  margin-inline: auto;
  padding: var(--header-pad-y) 16px;
}

.site-inner-contents-grid{
  width: min(var(--grid-max), 92vw);
  margin-inline: auto;
}


/* ===== GRID ===== */
.books-wrap{
  width: var(--grid-w);
  margin: 0 auto;
  overflow-x: auto;
}

.books-grid{
  display: grid;
  grid-template-columns: repeat(var(--cols,8), minmax(0,1fr));
  gap: 12px;
  row-gap: 0;
}


.book-card{
  margin: 0;
  padding: 0;
}

.book{
  position: relative;
  height: calc(var(--card-media-h) + var(--card-meta-h));
  overflow: hidden;
  transition: transform .08s ease, box-shadow .12s ease;
}

.book__link{
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}


.book__link:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: calc(var(--book-radius) + 2px);
}

.book__media{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--card-media-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding-bottom: 12px;
}

.book__media img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.book__meta{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--card-meta-h);
  padding: 8px 6px;
  display: flex;
  align-items: flex-start;
}

.book__author {
  font-size: 12px;
  line-height: 1;
  margin: 0;
}

.book__title{
  margin: 0 0 6px;
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book__publisher{
  display: block;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta--line {
  line-height: 1;
}

.book__meta.meta--line {
  padding: 0 6px 20px;
  margin: 0;
  display: block;
  text-align: center;
}


.book__meta.meta--line .book__author,
.book__meta.meta--line .book__title {
  display: inline;
  margin: 0;
  white-space: normal;
}

.book__meta.meta--line,
.book__meta.meta--line .book__title,
.book__meta.meta--line .book__author {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}

.book__meta.meta--line .book__author {
  font-size: 12px;
  white-space: nowrap;
}
.book__meta.meta--line .book__author::after {
  content: " :";
  margin-right: .25ch;
}


.book__meta.meta--line .book__title {
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}


.book__line {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* ===== Table view ===== */
.books-table{
  width: var(--grid-w);
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 12px;
}

.books-table thead th{
  text-align: left;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 2px solid #000;
}

.books-table tbody td{
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid #e5e5e5;
}

.books-table tbody tr:nth-child(even){
  background: #ffffff;
}

.books-table tbody tr:nth-child(odd){
  background: #f4f4f4;
}

.books-table tbody tr {
  filter: invert(0);
}

.books-table tbody tr:hover {
  filter: invert(1);
}


.books-table tbody:focus-within tr { opacity: .5; }

.view--table .books-grid{ display: none; }
.view--table .books-table{ display: table; }

.view--grid  .books-table{ display: none; }
.view--grid  .books-grid { display: grid }


.view-controls[data-mode="table"] .cols-controls{ display:none; }


.table-container table tr {
  transition: filter 0.25s ease;
}

.table-container table:hover tr {
  opacity: .5;
}

.table-container table tr:hover {
  opacity: 1;
}


/* footer */
.footer{
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: var(--header-pad-y) 16px;
}

.footer__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  width: var(--container-w);
  margin-inline: auto;
}

.footer__email{
  text-decoration: none;
  color: var(--text);
}

.footer__note{
  margin: 0;
  text-align: right;
  width: auto;
}


/* ===== Bottom Sheet ===== */
.sheet{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1100;
}

.sheet.sheet--open{
  pointer-events: auto;
}

.sheet[aria-hidden="true"]{ display: none; }

.sheet__backdrop{
  position: absolute; inset: 0;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  opacity: 0;
  transition: opacity .25s ease;
}

.sheet__panel{
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  background: #ffffff;
  opacity: 0.9;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.15);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); /* iOS 홈인디케이터 보정 */
}

/* 열릴 때 */
.sheet--open .sheet__backdrop{ opacity: 1; }
.sheet--open .sheet__panel{ transform: translateY(0); }

/* ★ 헤더/바디를 컨테이너 폭으로 중앙 정렬 */
.sheet__header,
.sheet__body{
  width: var(--container-w);
  margin-inline: auto;
  overflow: auto;
}

/* 헤더 */
.sheet__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;                           /* 좌우 패딩 제거 → 정확히 컨테이너 폭 */
  border-bottom: 1px solid #e9e9e9;
}
.sheet__title{
  margin:0; font-size: 18px; line-height:1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* X 버튼: 컨테이너 우측 안쪽에 들어오도록 */
.sheet__close{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid #000000;
  background: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size:20px;
  line-height:1;
}

.sheet__body{
  padding: 12px 0 20px;                      /* 좌우 패딩 제거 */
  overflow: auto;
}

.sheet__body > .book-detail{
  width: var(--container-w);
  margin-inline: auto;
}


.book-detail{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}


.book-detail__desc{
  grid-column: 3; 
  align-self: start;
  max-height: calc(88vh - 140px);
  overflow: auto;
  padding-right: 8px;
}

.book-detail__section-title{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}


.sheet__panel{
  max-height: 88vh;
}
.sheet__body {
  overflow: auto;
}

.book-detail__cover{
  grid-column: 1;
}

.book-detail__meta  {
  grid-column: 2;
}

.book-detail__content{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: start;
}

.book-detail__cover img{
  width: 220px;
  height: auto;
  display: block;
}
.book-detail__meta{
  font-size: 14px;
  line-height: 1.5;
}
.book-detail__meta dl{
  margin: 0;
}
.book-detail__meta dt{
  font-weight: 700;
}
.book-detail__meta dd{
  margin: 0 0 8px;
}

.book-meta-row{
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  column-gap: 0;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
}

.book-meta-row li strong{
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.book-meta-row li{ font-size:14px; line-height:1.45; }
.book-meta-row strong{
  display:block;
  font-weight:700;
  margin-bottom: 4px;
}

.book-description{
  grid-column: 2;
  margin: 0;
}

.book-description h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}
.book-description .desc-text{
  margin: 0;
  line-height: 1.7;
  white-space: pre-wrap;
}
.book-description .desc-text br{ display:inline; 


/* 바디 스크롤 잠금 */
.body--locked{ overflow: hidden; }




/* media(1000px) */
/* ====== Mobile overrides ====== */
@media (max-width: 1000px){

  :root{
    --cols: 2;
    --card-media-h: 180px;
    --card-meta-h: 56px;
  }

  .books-grid{
    gap: 10px;
  }

  .site-header_inner{
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .navigations-container_left-column,
  .navigations-container_right-column{
    flex: 1 0 100%;
  }
  .navigations-container_right-column .site-navigation{
    justify-content: space-between;
  }

  .book-detail{
    grid-template-columns: 1fr;
  }
  .book-detail__content{
    grid-template-columns: 1fr;
  }
  .book-meta-row{
    grid-column: 1;
  }
  .book-description{
    grid-column: 1;
  }

}