@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
  --cover-delay: .05s;                         /*책장에서 나올 때까지 필요한 딜레이 */
  --cover-ease: ease-in;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

header.site-header .nav-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

header.site-header .nav-toggle:focus-visible + .menu-mobile {
  outline: 2px solid #212123;
  outline-offset: 4px;
}

header.site-header .nav-close,
header.site-header .nav-overlay {
  display: none;
}

header.site-header .search-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

header.site-header .mobile-search-popup {
  display: none;
}

header.site-header .lib-nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

header.site-header .logo-wrap {
  display:flex;
  align-items:center;
}

header.site-header .lib-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

header.site-header .lib-nav__select-wrapper {
  display: none;
}

header.site-header .lib-nav__select {
  width: 100%;
}

header.site-header .lib-nav__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

header.site-header .search-wrap {
  position: relative;
  min-width: 200px;
}

.input-with-clear {
  position: relative;
}

.input-with-clear > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 40px;
}

.input-clear-button {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.input-clear-button img {
  width: 16px;
  height: 16px;
}

.input-clear-button:hover,
.input-clear-button:active {
  background: transparent;
}

.input-clear-button:focus-visible {
  outline: 2px solid var(--grass-green-border);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(217, 255, 112, 0.5);
}

.input-clear-button[hidden] {
  display: none;
}

header.site-header .search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--white);
  border-radius: 12px;
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.12);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1400;
}

header.site-header .search-suggestions[hidden] {
  display: none;
}

header.site-header .search-suggestion {
  display: flex;
  align-items: center;
  justify-content: left !important;
  gap: 12px !important;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

header.site-header .search-suggestion:hover,
header.site-header .search-suggestion:focus-visible {
  background: var(--grass-green-50per);
  outline: none;
}

header.site-header .search-suggestion__thumbnail {
  width: 40px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--gray-100);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  flex-shrink: 0;
}

header.site-header .search-suggestion__thumbnail--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
}

header.site-header .search-suggestion__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

header.site-header .search-suggestion__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header.site-header .search-suggestion__author {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header.site-header .search-suggestion--empty {
  justify-content: center;
  color: var(--gray-500);
  font-size: 14px;
  cursor: default;
}

header.site-header .lib-nav__actions .nav-action {
  display: flex;
  align-items: center;
}

header.site-header .lib-nav__actions form {
  margin: 0;
}

header.site-header .lib-nav__actions button,
header.site-header .lib-nav__actions .nav-action__button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  gap: 4px;
}

header.site-header .lib-nav__actions button:focus-visible,
header.site-header .lib-nav__actions .nav-action__button:focus-visible {
  outline: 2px solid #212123;
  outline-offset: 4px;
}

header.site-header .header-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:44px;
}

header.site-header .header-action {
  font-weight:600;
  color:var(--gray-700);
  text-decoration:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  appearance:none;
}

header.site-header .header-action:focus-visible {
  outline:2px solid #212123;
  outline-offset:4px;
}

header.site-header .header-action--search {
  color:#212123;
}

header.site-header .header-action--start {
  display: inline-flex;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--gray-700);
  font-size: 1rem;
}

.header-action--login {
  font-size: 0.9rem;
}

@media screen and (min-width: 1024px) {
header.site-header {
  width:calc(100vw - 48px);
  background: transparent;
  display:flex;
  flex-direction: row;
  align-items: center;
  padding: 16px 24px;
  gap: 32px;
}

  header.site-header .menu-mobile {
    display:none;
  }

  header.site-header .lib-nav {
    display:grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex: 1 1 auto;
    column-gap: 32px;
  }

  header.site-header.site-header--guest .lib-nav {
    grid-template-columns: auto;
    justify-content: center;
  }

  header.site-header .lib-nav .lib-nav__list {
    display:flex;
    flex-direction: row;
    justify-content: center;
    justify-self: center;
    background: var(--white);
    border-radius: 50vh;
    flex-wrap:wrap;
    padding: 2px;
    box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 8%),
                0px 0px 2px 0px rgb(0 0 0 / 8%);
    max-width: 100%;
    overflow: hidden;
    gap: 0;
  }

  header.site-header .lib-nav.lib-nav--desktop-hide-list .lib-nav__list {
    display: none;
  }

  header.site-header .lib-nav__select-wrapper {
    justify-self: center;
    min-width: 220px;
  }

  header.site-header.site-header--guest .lib-nav__actions {
    display: none;
    min-width: 0;
  }

  header.site-header .lib-nav__actions {
    justify-self: center;
    min-width: 264px;
  }

  header.site-header .lib-nav__actions .search-wrap {
    width: 100%;
    min-width: 232px;
  }

  header.site-header .lib-nav__actions .search-wrap .input-search {
    width: 100%;
    min-width: 232px;
  }

  header.site-header .lib-nav__select {
    display: block;
    font-size: 0.875rem;
    border-radius: 50vh;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--gray-700);
    background-color: var(--white);
    appearance: none;
    cursor: pointer;
    box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 8%),
                0px 0px 2px 0px rgb(0 0 0 / 8%);
  }

  header.site-header .lib-nav__select::-ms-expand {
    display: none;
  }

  header.site-header .lib-nav:not(.lib-nav--overflow) .lib-nav__select-wrapper {
    display: none;
  }

  header.site-header .lib-nav.lib-nav--overflow .lib-nav__list {
    display: none;
  }

  header.site-header .lib-nav.lib-nav--overflow .lib-nav__select-wrapper {
    display: block;
  }

  header.site-header .lib-nav .lib_author {
    display:none;
  }

  header.site-header .lib-nav .lib-nav__list a {
    font-size: 0.875rem;
    color: var(--gray-700);
    font-weight: 600;
    border-radius: 50vh;
    padding: 8px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  header.site-header .lib-nav .lib-nav__list a.is-active,
  header.site-header .lib-nav .lib-nav__list a:hover {
  background: var(--gray-60);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

  header.site-header .lib-nav .lib-nav__list a.selected {
    border: none;
    background: linear-gradient(-225deg, rgba(213,255,112,1) 0%, rgba(213,255,112,1) 40%, rgba(127,221,255,1) 100%);
    border-radius: 50vh;
    color: var(--black);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  }

  header.site-header .lib-nav__actions .nav-action {
    width: 24px;
    height: 24px;
    padding: 0;
  }

  header.site-header .lib-nav__actions .nav-action .name {
    display: none;
  }

  header.site-header .lib-nav__actions .nav-action.bookmark,
  header.site-header .lib-nav__actions .nav-action.setting {
    background-size: 24px 24px;
    padding-left: 8px;
  }

  header.site-header .lib-nav__actions .nav-action.my-library {
    display:none;
  }

  header.site-header .lib-nav__actions .nav-action {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  header.site-header .lib-nav.lib-nav--condensed {
    grid-template-columns: auto;
    justify-content: flex-end;
  }

  header.site-header .lib-nav.lib-nav--condensed .lib-nav__actions {
    justify-self: flex-end;
  }

  header.site-header .lib-nav__actions {
    justify-self: end;
    margin-left: 0;
    gap: 16px;
  }

  header.site-header .nav-close,
  header.site-header .nav-overlay {
    display:none;
  }
  header.site-header .header-actions {
    display:none;
  }
  header.site-header .header-actions.header-actions--guest {
    display:flex;
    align-items:center;
    gap:16px;
  }
  header.site-header .header-action--start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 12px;
    width: fit-content;
    background-color: var(--grass-green);
    border: 1px solid var(--grass-green-border);
    color: var(--black);
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  header.site-header .header-action--start:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  header.site-header .header-action--start:active {
    transform: translateY(0);
    box-shadow: none;
  }

  header.site-header .lib-nav__actions .nav-action {
    width: 24px;
    height: 24px;
  }

  header.site-header .lib-nav__actions .nav-action .name {
  display: none;
  }

  header.site-header .lib-nav__actions .nav-action.setting {
    background: url(img/icon_setting_pc.svg) center center no-repeat;
  }
  header.site-header .lib-nav__actions .nav-action.bookmark {
    background: url(img/icon_bookmark_pc.svg) center center no-repeat;
  }

  .book-stage__extra-list{
    text-align: left;
  }
  .book-stage__extra-list li {
    line-height: 1.4;
  }
  .library-list {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 12px 12px !important;
      align-items: start;
    }
  }

@media screen and (max-width: 1023px) {
  header.site-header {
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    background-color: #fffc;
    color: var(--black);
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0 0 0 .0625rem #00000014;
    z-index:1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 12px;
}
  header.site-header.site-header--minimal {
    justify-content: center;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
  }

  header.site-header.site-header--minimal .logo-wrap {
    margin: 0 auto;
  }

  header.site-header.site-header--guest {
    min-height: 64px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  header.site-header .header-actions.header-actions--guest a.header-action--login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  header.site-header.site-header--guest .logo-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    justify-content: center;
  }

  header.site-header .header-actions.header-actions--guest {
    width: auto;
    justify-content: flex-end;
  }

  header.site-header .header-actions.header-actions--guest .header-action--start {
    display: none;
  }

  header.site-header .menu-mobile {
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  header.site-header .logo {
    height:32px;
    width:auto;
  }
  header.site-header .lib-nav {
    display:flex;
    position:fixed;
    top:0;
    left:0;
    width: 280px;
    height:100dvh;
    padding: calc(88px + env(safe-area-inset-top, 0)) 24px calc(24px + env(safe-area-inset-bottom, 0));
    background-color: var(--white);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-right: 1px solid #00000014;
    transform: translateX(-100%);
    opacity:0;
    pointer-events:none;
    transition: transform .3s ease, opacity .3s ease;
    z-index: 1100;
    overflow-y:auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }
  header.site-header .lib-nav .lib-link {
    display: block;
    width: calc(100% - 24px);
    padding: 6px 0 6px 24px;
    color: var(--black);
    font-weight: 600;
    background: url(img/icon_library.svg) no-repeat left 2px center;
}

header.site-header .lib-nav .lib-link.selected {
    background-image:
        url(img/icon_library.svg),
        linear-gradient(-225deg, rgba(213,255,112,1) 0%, rgba(213,255,112,1) 40%, rgba(127,221,255,1) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left 2px center, left center;
    border-radius: 4px;
}

  header.site-header .lib-nav .lib_author {
    width:100%;
    font-size: 1.5rem;
    font-weight: 200;
    background: url(img/img_background.svg) repeat-x right center
  }
  header.site-header .lib-nav .lib_author span {
    background-color: var(--white);
    padding-right: 4px;
    word-break: break-all;
  }
  header.site-header .lib-nav__list {
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  header.site-header .lib-nav__actions {
    width:100%;
    flex-direction:column;
    align-items:stretch;
    margin-left:0;
    margin-top:24px;
    gap:12px;
  }
  header.site-header .lib-nav__actions .search-wrap {
    width: 100%;
    min-width: 264px;
  }
  header.site-header .lib-nav__actions .nav-action,
  header.site-header .lib-nav__actions form {
    width:100%;
  }
  header.site-header .lib-nav__actions button,
  header.site-header .lib-nav__actions .nav-action__button {
    justify-content:flex-start;
    width:100%;
    padding:4px 0px 4px 24px;
    text-align:left;
    color: var(--black);
  }
  header.site-header .lib-nav__actions {
    font-size: 1rem;
    font-weight: 600;
    color: var(--black);
  }

  header.site-header .lib-nav__actions .nav-action.setting {
    display: block;
    width: calc(100% - 24px);
    padding: 6px 0 6px 24px;
    color: var(--black);
    background: url(img/icon_setting.svg) left center no-repeat;
  }
  header.site-header .lib-nav__actions .nav-action.bookmark {
    display: block;
    width: calc(100% - 24px);
    padding: 6px 0 6px 24px;
    color: var(--black);
    background: url(img/icon_bookmark.svg) left center no-repeat;
  }

  header.site-header .lib-nav__actions .nav-action.my-library {
    display: block;
    width: calc(100% - 24px);
    padding: 6px 0 6px 24px;
    color: var(--black);
    background: url(img/icon_bookmark_user.svg) left center no-repeat;
  }

  header.site-header .lib-nav__actions .nav-action .name {
    font-weight: 600;
  }


header.site-header .nav-close {
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    left: min(calc(280px + 8px), calc(100vw - 64px));
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--gray-100);
    font-weight:600;
    z-index: 1101;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform: translateX(-12px);
    transition: opacity .3s ease, transform .3s ease;
  }

  header.site-header .nav-overlay {
    display:block;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100dvh;
    box-sizing: border-box;
    margin:0;
    background: rgba(0,0,0,0.65);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity:0;
    pointer-events:none;
    touch-action: none;
    transition: opacity .3s ease;
    z-index: 1000;
  }
  header.site-header .menu-mobile,
  header.site-header .header-actions:not(.header-actions--guest) {
    width: 44px;
  }
  .header-action--login {
  font-size: 1rem;
}
  header.site-header .nav-toggle:checked ~ .lib-nav {
    transform: translateX(0);
    opacity:1;
    pointer-events:auto;
  }
  header.site-header .nav-toggle:checked ~ .nav-close {
    opacity:1;
    pointer-events:auto;
    transform: translateX(0);
  }

  header.site-header .nav-toggle:checked ~ .nav-overlay {
    opacity:1;
    pointer-events:auto;
  }

  header.site-header .lib-nav__actions .search-wrap {
    display: none;
  }

  header.site-header .mobile-search-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--white);
    width: 100vw;
    height: 100dvh;
    padding: calc(16px + env(safe-area-inset-top, 0)) 16px calc(24px + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  header.site-header .mobile-search-popup .mobile-search-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--white);
    width: 100%;
    max-width: 100%;
  }

  header.site-header .mobile-search-popup .mobile-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    border: none;
    cursor: pointer;
    margin-top: 6px;
  }

  header.site-header .mobile-search-popup .mobile-search-close:focus-visible {
    outline: 2px solid #212123;
    outline-offset: 4px;
  }

  header.site-header .mobile-search-popup .mobile-search-close img {
    width: 12px;
    height: 12px;
  }

  header.site-header .mobile-search-popup .search-wrap {
    flex: 1 1 auto;
    position: relative;
  }

  header.site-header .mobile-search-popup .search-suggestions {
    position: absolute;
    top: calc(100% + 12px);
    left: calc(-1 * (32px + 12px));
    padding: 4px 0;
    box-shadow: none;
    max-height: calc(100dvh - 220px);
    width: calc(100% + 32px + 12px);
  }

  header.site-header .mobile-search-popup .search-suggestion {
    border-radius: 0;
    padding: 8px 0px;
  }

  header.site-header .mobile-search-popup .input-search {
    width: 100%;
    box-sizing: border-box;
    max-width: none;
  }

  header.site-header .search-toggle:checked ~ .mobile-search-popup {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }


  .list-bg {
    padding-top: calc(60px + env(safe-area-inset-top, 0));
  }

  .library-manager, .login-container, .term-container, .error-container, .bookmarks-page, .admin-nav {
    padding: calc(60px + 24px + env(safe-area-inset-top, 0)) 24px 12px !important;
  }

}

/* 공통 변수: 실제 힌지 위치와 겹침 폭 */
.book{
  --hinge: max(var(--spinew), 24px);  /* 실제 스파인 표시폭 */
  --seam: 1px;                         /* 1~1.5px 정도 겹치기 */
  transition: transform 0.32s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.book.is-will-change,
.book-cover-card.is-will-change {
  will-change: transform;
}

.list-bg {
    min-width:100%;
    flex: 1 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    padding-right: calc(24px + env(safe-area-inset-right, 0));
    position: relative;
    box-shadow: inset -120px 0 90px -60px rgba(255,255,255,0.95);
}


.container {
    padding: 0px 8px;
    display: flex;
    flex-direction: column;
    position:relative;
}

.list-bg .container,
.main-content{
    -webkit-overflow-scrolling: touch;
}

.book.is-search-highlight,
.book-cover-card.is-search-highlight {
    outline: 3px solid rgba(127, 221, 255, 0.85);
    outline-offset: 2px;
    transition: outline 0.3s ease;
}

.shelf {
    --floor-h: 24px;
    --gap: 8px;
    --row-h: 276px;
    min-width:100%;
    width:fit-content;
    height:fit-content;
    min-height: calc(var(--row-h) + var(--floor-h));
    position:relative;
    isolation: isolate; 
    margin-top: 8px;
}

.shelf .floor-top {
    clip-path: polygon(32px 0, calc(100% - 32px) 0, 100% 100%, 0 100%);
    height:24px;
    background: linear-gradient(
        180deg,
        rgba(200,200,200,0.5) 10%,
        rgba(200,200,200,0.5) 100%);
    display:block;
    z-index: 1;
    position: absolute; left:0; right:0; bottom:-8px;
    pointer-events: none;
}

.space {
    position: relative;    
}

.book-space {
    padding: 0px 16px;
    min-height: calc(var(--row-h) + var(--floor-h));
    display:flex;
    padding-right: calc(40px + env(safe-area-inset-right, 0));
    flex-direction: row;
    align-items: end;
    isolation: isolate;
    z-index: 2;
    position: relative;
    overflow: visible;
}

.shelf .floor-side {
    background-color: #EEEEEE;
    width:100%;
    height:8px;
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.7);
    filter:
    drop-shadow(0px 2px 8px rgba(0,0,0,0.2))
    drop-shadow(0px 8px 30px rgba(0,0,0,0.99))
    drop-shadow(0px 12px 60px rgba(0,0,0,0.59));
    position: absolute; left:0; right:0; bottom: -16px;
}

.shelf .shelf-name {
  position:absolute;
  font-size: 16px;
  color:var(--black);
  background-color: rgba(213,255,112, 0.88);
  padding: 4px 6px;
  font-weight:800;
  box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.7);
  border:1px solid #BCE656;
  top:-6px;
}

.shelf--name-hidden .shelf-name,
.shelf--name-hidden .shelf-name-top {
  display: none !important;
}

/* 이미 있던 전환에 delay만 추가 */
.book__spine{
  transition: transform .05s var(--cover-ease), opacity .05s ease-in;
  z-index: 2;
  transition-delay: var(--cover-delay);   
}

.book__cover,
.book::after{
  transition: transform .05s var(--cover-ease), opacity .05s ease-in;
  transition-delay: var(--cover-delay); 
  z-index: 1;
}

.book__spine {
  position: absolute;
  top:0; 
  left:0;
  width: var(--hinge); 
  height:100%;
  background: var(--bg); 
  color: var(--fg);
  box-sizing:border-box;
  transform-origin:left center; 
  transform:rotateY(0deg);
  backface-visibility:hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow:hidden;
  justify-content: flex-start;
  row-gap: 4px;
  padding-top:12px;
  padding-bottom:12px;
  box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.30);
  block-size: 100%;
  --spine-tail-gap: 12px;
}

.book::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.24),
    0 3px 6px rgba(0,0,0,0.18);
}

.book-stage__book-slot .book::before {
  content: none;
}

/* 텍스트 폴백 커버 */
.book::after{
  content: attr(data-title);
  position:absolute; top:0; 
  left: calc(var(--hinge) - var(--seam));
  width: calc(var(--coverw) + var(--seam)); height:100%;
  background: var(--bg); color: var(--fg);
  padding:12px; 
  box-sizing:border-box;
  transform-origin:left center; 
  transform:rotateY(-90deg);
  backface-visibility:hidden; 
  pointer-events:none;
}

.book.has-cover::after{ content:none; }

/* 이미지 커버 */
.book__cover{
  position:absolute; top:0; left: calc(var(--hinge) - var(--seam));
  width: calc(var(--coverw) + var(--seam)); height:100%;
  overflow:hidden; 
  transform-origin:left center; transform:rotateY(-90deg);
  backface-visibility:hidden; pointer-events:none;
}

.book__cover img{ display:block; width:100%; height:100%; object-fit:cover; }

/* 커버 부분 끝 */

/* ==== 스파인 안쪽 컨테이너 (기존이랑 거의 동일) ==== */
.book__label{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  inline-size: 100%;
  writing-mode: vertical-rl;
  text-orientation: sideways;

  padding: 0;  
  box-sizing: border-box;
  margin: 0;
  height: auto;

  overflow: hidden;    /* 아래 12px 잘릴 수 있게 */
}

.book__label::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;        /* 진짜 물리적인 바닥 */
  height: 10px;     /* 너무 많으면 8px 정도까지 줄여도 됨 */

  background: transparent;
  opacity: 0;
  transition: opacity .08s ease;

  pointer-events: none;
}

.book__label[data-clamped="1"]::after{
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 40%,
    var(--bg) 100%
  );
  opacity: 1;

  pointer-events: none;
}

.book__label-text{
  display:inline-flex;
  align-items: center;
  justify-content: flex-start;
  writing-mode: inherit;
  text-orientation: inherit;

  /* 한 줄로만, 넘치면 … */
  white-space: nowrap;
  overflow: hidden;

  line-height: 1;
  max-inline-size: var(--title-max, calc(var(--bookh, 0px) - 24px));

  /* 아래 12px 여유 → 이 부분이 잘려 나감 */
  padding: 0;
  box-sizing: border-box;
  height:fit-content;
}

/* 제목 */
.book__label-text::before{
  content: attr(data-title);
  font-weight: 800;
  font-size: clamp(11px, 44cqw, 24px);
  /* display / white-space / overflow 등은 없음 → inline 그대로 */
}

/* 저자 */
.book__label-text::after{
  content: "  " attr(data-author);  /* 제목 뒤에 공백 + 저자 */
  white-space: pre;
  font-size: 8px;
  font-weight: 400;
  opacity: 0.7;
}

/* 저자 없으면 아예 안 붙이기 */
.book__label-text[data-author=""]::after{
  content: "";
}

/* 측정용(이미 쓰고 있던 경우) */
.book__label-measure--title{
  display: block;
  writing-mode: inherit;
  text-orientation: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  max-inline-size: var(--title-max, calc(var(--bookh, 0px) - 24px));
  margin-inline: auto;
}


.book__label-measure{
  position:absolute;
  top:0;
  left:0;
  right:0;
  visibility:hidden;
  pointer-events:none;
  margin-inline:auto;
  overflow:hidden;
  writing-mode: inherit;
  text-orientation: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
  font-size: clamp(11px, 44cqw, 24px);
  line-height: 1;
  max-inline-size: var(--title-max, calc(var(--bookh, 0px) - 24px));
  padding:0;
  box-sizing: border-box;
}

.shelf .book {
    container-type: inline-size;
    transition: transform .05s linear;
    will-change: transform;
    overflow: visible; 
    color: var(--fg);
    z-index: 0;
    transform: translateY(-4px);
}

/* 기본값: 왼쪽 힌지, 커버가 화면 쪽으로 ‘열리는’ 방향 */
.book{ --dir: 1; }    /* 이상하면 -1로 바꿔보세요 */

/* 1단계: 살짝 꺼내기(스파인 약간 기울고, 커버는 반쯤) */
.book.bk-outside .book__spine{ transform: rotateY(calc(var(--dir) * -18deg)); }
.book.bk-outside .book__cover{ transform: rotateY(calc(var(--dir) * -70deg)); }
.book.bk-outside::after      { transform: rotateY(calc(var(--dir) * -70deg)); }

/* 2단계: 정면(커버 0°, 스파인 90°로 사라짐) */
.book.bk-viewinside .book__cover{ transform: rotateY(calc(var(--dir) * 0deg)) translateZ(2px); }
.book.bk-viewinside::after      { transform: rotateY(calc(var(--dir) * 0deg)) translateZ(2px); }
.book.bk-viewinside .book__spine{ transform: rotateY(calc(var(--dir) * 90deg)) translateZ(1px); opacity: 0; }

/* 열기 시작과 동시에 커버를 등 위로 올림 (z-index는 즉시 변경됨) */
.book.bk-outside .book__cover,
.book.bk-outside::after{
  z-index: 3;
}

/* 정면에서도 커버가 최상단 유지 */
.book.bk-viewinside .book__cover,
.book.bk-viewinside::after{
  z-index: 3;
}
/* 등은 뒤로/사라짐 */
.book.bk-viewinside .book__spine{
  z-index: 1;
  /* 이미 rotateY(90deg) + opacity:0 처리되어 있겠죠 */
}

/* 상태 규칙을 더 구체적으로 */
.shelf .book.bk-outside    { transform: translateY(-6px) scale(1.04);  z-index:50; }
.shelf .book.bk-viewinside { transform: translateY(-8px) scale(1.10);  z-index:999; }

/* 선반 데코는 책보다 아래로 */
.shelf .floor-top { z-index: 1; pointer-events: none; }

/* 독립 표지 카드 (spine 쪽 CSS와 전혀 별개) */
.book-cover-card{
  position: relative;
  display: block;          /* book-space가 row flex라 가로로 나란히 배치됨 */
  overflow: hidden;
  box-shadow: 
    0 1px 1px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.16);
  --display-gap: 8px;
  margin: 0px var(--display-gap);
}

.book-cover-card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 커버 이미지가 없을 때 아주 간단한 폴백 (원치 않으면 삭제 가능) */
.book-cover-fallback{
  width: 100%; height: 100%;
  padding: 12px; box-sizing: border-box;
  background: #ddd; color: #111;
  font-weight: 800; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis;
}

/* 양장 반양장 */

.book--hardcover {
  border-radius: 2px;
  overflow:hidden;
}

.book--semi {
  border-radius: 1px;
  overflow:hidden;
}

/* 양장 반양장 디테일 - 책등 */

.book__spine.book--hardcover::before {
  content: "";
  position: absolute;
  top: 0px;               
  left: 0px;
  min-width:2px;              
  width: 20%;            
  height: 100%;            
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0) 100%
);
}

.book__spine.book--hardcover::after {
  content: "";
  position: absolute;
  top: 0px;               
  right: 0px;
  min-width:12px;              
  width: 60%;            
  height: 100%;            
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.16) 0%,
    rgba(0,0,0,0) 100%
);
}

/* 매우 어두운 표지 → 흰색 하이라이트 */
.book__spine.book--hardcover.book--dark::after {
    right: 2px;
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0) 100%
);
}

.book__spine.book--semi {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
  overflow: hidden; /* 가상요소가 밖으로 새지 않게 */
}

/* 반양장 표면 코팅/하이라이트 (오른쪽→왼쪽 방향) */
.book__spine.book--semi::before {
  content: "";
  position: absolute;
  inset: 0;                  /* 전체 표면 덮기 */
  pointer-events: none;

  /* 방향: to left (오른쪽에서 왼쪽으로 진행) 
     스톱: 0%   = 오른쪽 끝
           88%  = 왼쪽으로 12% 지점
           100% = 왼쪽 끝
     투명→검정(30%)→흰색(30%)로 살짝 코팅 효과 */
  background: linear-gradient(
    to left,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,.30) 88%,
    rgba(255,255,255,.30) 100%
  );

  /* 코팅 감도를 더 자연스럽게: 필요시 사용 */
  mix-blend-mode: soft-light; /* 없애고 싶으면 주석 처리 */
}

/* 매우 어두운 표지에는 흰 하이라이트 비중을 조금 올려 가독성 ↑ (옵션) */
.book__spine.book--semi.book--dark::before {
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.06) 0%,   /* 아주 약한 밝기 추가 */
    rgba(0,0,0,.25)        88%,
    rgba(255,255,255,.36)  100%
  );
}

/* ─────────────────────────────────────────────
   표지 공통: 오버레이 레이어 베이스
   (스파인은 그대로 두고, 표지 컨테이너에만 적용)
   ───────────────────────────────────────────── */

.book-cover-card { position: relative; }

/* 오른쪽 하이라이트(그대로) */
.book-cover-card.book--hardcover::after,
.book__cover.book--hardcover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  border-top:1px solid rgba(255,255,255,0.7);
  border-right:1px solid rgba(0,0,0,0.16);
  background: linear-gradient(to left, rgba(0,0,0,.08), transparent);
}

/* 왼쪽 8px 스트립: 페이드 + 보조 라인 */
.book-cover-card.book--hardcover::before,
.book__cover.book--hardcover::before {
  content:"";
  position:absolute;
  left:0px; top:0;
  width:8px; height:100%;
  pointer-events:none;
  z-index:5;

  background:
    linear-gradient(to right,
      rgba(0,0,0,0.15) 0px,
      rgba(0,0,0,0) 4px
    ),
    linear-gradient(to right,
      rgba(0,0,0,0)   0px,
      rgba(0,0,0,0)   4px,
      rgba(0,0,0,0)   5px,
      rgba(0,0,0,0.1)   6px,
      rgba(0,0,0,0)   8px
    );
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  background-size: 100% 100%, 100% 100%;
}

.book-cover-card.book--hardcover.book--dark::before,
.book__cover.book--hardcover.book--dark::before {
  left:1px;
  border-left: 1px solid rgba(255,255,255,0.65);
  background:
    linear-gradient(to right,
      rgba(255,255,255,.45) 0px,
      rgba(255,255,255,0) 4px
    ),
    linear-gradient(to right,
      rgba(255,255,255,0)   0px,
      rgba(255,255,255,0)   4px,
      rgba(255,255,255,0)   5px,
      rgba(255,255,255,0.25)   6px,
      rgba(255,255,255,0)   8px
    );
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  background-size: 100% 100%, 100% 100%;
}

/* 아주 어두운 표지일 때 하이라이트만 바꿈 (스트립은 동일) */
.book-cover-card.book--hardcover.book--dark::after,
.book__cover.book--hardcover.book--dark::after{
  border-top:1px solid rgba(255,255,255,0.2);
  border-right:1px solid rgba(0,0,0,0.5);
  background: linear-gradient(to left, rgba(255,255,255,.16), transparent);
}

/* 반양장 */

/* 왼쪽 얇은 스트립(옵션) */
.book__cover.book--semi::before,
.book-cover-card.book--semi::before{
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 2px; height: 100%;
  background: rgba(0,0,0,0.08);  /* 밝은 표지면 0.35~0.4 추천 */
  pointer-events: none;
  z-index: 5;                           /* 이미지 위 */
}

/* 코팅/비네팅(스파인과 동일 방향성) */
.book__cover.book--semi::after,
.book-cover-card.book--semi::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 88%, rgba(255,255,255,.30) 100%);
  mix-blend-mode: soft-light;  /* 과하면 제거 */
}

/* 왼쪽 얇은 스트립(옵션) */
.book__cover.book--semi.book--dark::before,
.book-cover-card.book--semi.book--dark::before{
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 2px; height: 100%;
  background: rgba(255,255,255,0.16);  /* 밝은 표지면 0.35~0.4 추천 */
  pointer-events: none;
  z-index: 5;                           /* 이미지 위 */
}

/* 아주 어두운 표지일 때 톤 보정(선택) */
.book__cover.book--semi.book--dark::after,
.book-cover-card.book--semi.book--dark::after{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(to left, rgba(255,255,255,.25) 88%, rgba(255,255,255,.38) 100%);
  mix-blend-mode: soft-light;
}

.button-fab {
  width:56px;
  height:56px;
  border-radius: 50%;
  background-color: var(--grass-green);
  box-shadow: 
    0 1px 2px rgba(0,0,0,.16),
    0 8px 12px rgba(0,0,0,.24);
  position: fixed;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  bottom:calc(16px + constant(safe-area-inset-bottom, 0px));
  right:16px;
  display:flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 100;
}

.button-fab:active {
  transform: scale(1.15);
  box-shadow: none;
  background-color:rgba(213,255,112,.7);
  border: 1px solid var(--grass-green);
}

.button-fab-bookmark {
  width:56px;
  height:56px;
  border-radius:50%;
  background-color: var(--white);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 
    0 1px 2px rgba(0,0,0,.16),
    0 8px 12px rgba(0,0,0,.24);
  position: fixed;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  bottom:calc(16px + constant(safe-area-inset-bottom, 0px));
  left:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 100;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  z-index: 100;
}

.button-fab-bookmark img {
  width: 24px;
  height: auto;
}

.button-fab-bookmark:active {
  transform: scale(1.15);
  box-shadow: none;
  background-color: var(--grass-green-50);
  border: 1px solid var(--grass-green-border);
}

.button-fab-bookmark.is-active {
  background-color: var(--grass-green-50);
  border: 1px solid var(--grass-green-border);
}

/* 책 상세 스테이지 */
.book-stage{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1200;
}

#book-stage[aria-hidden="true"]{
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.book-stage[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.book-stage__backdrop, .account-withdraw-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.book-stage__shell{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(820px, 94vw);
  gap: 16px;
  max-height: calc(100vh - 1rem);
}

.book-stage__book-slot{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-top: 2rem;
}

.book-stage__book-slot .book,
.book-stage__book-slot .book-cover-card{
  pointer-events: none;
  transform-origin: center bottom;
  transform: scale(1);
  transition: transform 0.32s cubic-bezier(0.1, 0.9, 0.2, 1);
  word-break: break-all;
}

.book-stage__book-slot .book__cover,
.book-stage__book-slot .book-cover-card{
  background-color: var(--gray-100);
}

/* 가운데 계산 */
.book-stage__book-slot .book.book--staged{
  transform: translateX(calc(-0.72 * (var(--coverw) + var(--seam)))) scale(1.18);
}

.book-stage__book-slot .book-cover-card.book--staged{
  transform: scale(1.1);
}

.book-stage__panel{
  position: relative;
  z-index: 1;
  width: calc(100vw - 1rem);
  max-width: 820px;
  background: #fff;
  border-radius: 24px;
  padding: 152px 0px 24px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.24),
    0 6px 16px rgba(0,0,0,0.18);
  margin-top: -152px;
  opacity: 0;
  transform: translateY(24px);
  transition: transform .32s ease, opacity .32s ease;
  max-height: calc(100vh - clamp(48px,12vh,140px) * 2);
  overflow: hidden;
}

.book-stage[aria-hidden="false"] .book-stage__panel{
  opacity: 1;
  transform: translateY(0);
}

.book-stage__body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0px 24px 24px;
  max-height: calc(100vh - clamp(48px,12vh,140px) * 2 - 70px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.book-stage__body::before,
.book-stage__body::after{
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  max-height: 48px;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
  opacity: 0;
}

.book-stage__body::before{
  top: 0;
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));
}

.book-stage__body::after{
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.book-stage__body[data-scrollable="1"][data-at-top="0"]::before{
  opacity: 1;
}

.book-stage__body[data-scrollable="1"][data-at-bottom="0"]::after{
  opacity: 1;
}

.book-stage__title{
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
}
.book-stage__author{
  margin: 0;
  font-size: clamp(14px, 2vw, 18px);
  color: var(--gray-500);
  text-align: center;
}

.book-stage__meta{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  color: var(--black);
  width: 100%;
}

.book-stage__meta li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  font-size: 1rem;
  width: 100%;
  gap: 16px;
  border-bottom: var(--gray-60) 1px solid;
  min-height: 28px;
}

.book-stage__meta li.is-hidden{
  display: none;
}

.book-stage__meta-label{
  font-weight: 700;
  color: var(--black);
}

.book-stage__meta-value{
  font-weight: 400;
  text-align: right;
}

.book-stage__badge, code.isbn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px 6px 28px;
  border-radius: 50vh;
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.2;
  background-color: var(--gray-40);
  color: var(--black);
  white-space: nowrap;
  width:fit-content;
}

.book-stage__badge--format-paper{
  color: var(--gray-700);
  background: var(--gray-60) url(img/icon_label_paperbook.svg) left 12px center no-repeat;
}

.book-stage__badge--format-ebook{
  color: var(--gray-700);
  background: var(--gray-60) url(img/icon_label_ebook.svg) left 12px center no-repeat;
}

.book-stage__badge--format-audiobook{
  color: var(--gray-700);
  background: var(--gray-60) url(img/icon_label_audiobook.svg) left 12px center no-repeat;
}

code.isbn {
  color: var(--gray-700);
  background: var(--gray-60) url(img/icon_barcode_isbn.svg) left 12px center no-repeat;
}


.book-stage__status-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.book-stage__badge--status-done {
  color: var(--black);
  background: var(--grass-green) url(img/icon_label_status_done.svg) left 12px center no-repeat;
}

.book-stage__badge--status-reading{
  background: url("img/icon_label_status_reading.svg") no-repeat 12px center,
    linear-gradient(-225deg, rgba(213,255,112,1) 0%, rgba(213,255,112,1) 40%, rgba(127,221,255,1) 100%);
  color: var(--black);
}

.book-stage__badge--status-notyet{
  color: var(--black);
  background: var(--second-blue) url(img/icon_label_status_notyet.svg) left 12px center no-repeat;
}

.book-stage__badge--status-stopped{
  color: var(--black);
  background: var(--second-blue) url(img/icon_label_status_stopped.svg) left 12px center no-repeat;
}

.book-stage__meta-value.date {
  padding-right:8px;
}

.book-stage__likes{
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.book-stage__location-view{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  justify-content: flex-end;
}

.book-stage__location-view.is-hidden{
  display:none;
}

.book-stage__location-form{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.book-stage__location-form.is-hidden{
  display:none;
}

.book-stage__location-inputs{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: right;
}

.book-stage__location-actions{
  display:flex;
  gap:8px;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.book-stage__location-feedback{
  margin:0;
  font-size:0.85rem;
  color:rgba(0,0,0,0.55);
}

.book-stage__location-feedback[data-tone="error"]{
  color: var(--warning);
}

.book-stage__location-feedback[data-tone="success"]{
  color: var(--black);
}

.book-stage__likes[data-empty="1"]::after{
  content: '-';
  opacity: .5;
}

.book-stage__summary{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.book-stage__summary.is-hidden{
  display: none;
}

.book-stage__actions-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  align-self: stretch;
  margin-top: auto;
}

.book-stage__actions{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.book-stage__actions .small {
  flex: 0 0 auto;
}

.book-stage__publisher{
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.book-stage__publisher-source{
  font-size: 0.9375rem;
  color: var(--gray-500);
  font-weight: 600;
}

.book-stage__publisher-source.is-hidden{
  display: none;
}

.book-stage__publisher.is-hidden{
  display: none;
}

.book-stage__description{
  font-size: 1rem;
  line-height: 1.5;
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.book-stage__body .large {
    width: calc(100% - 24px);
  }

.book-stage__description.is-hidden{
  display: none;
}

.book-stage__purchase{
  width: calc(100% - 8px);
  background-color: var(--bg-color);
  border-radius: 12px;
  padding: 8px;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:var(--gray-500);
  font-size: 0.75rem;
  line-height: 1.4;
}

.book-stage__purchase.is-hidden{
  display: none;
}

.book-stage__extra{
  width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background-color: var(--gray-60);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 4px;
}

.book-stage__extra.is-hidden{
  display: none;
}

.book-stage__extra-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 8px;
  font-size: 0.875rem;
  color:var(--gray-800);
}

.book-stage__extra-list li.is-hidden{
  display: none;
}

.book-stage__extra-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.book-stage__extra-label{
  font-weight: 700;
  color: var(--gray-700);
  white-space: nowrap;
}


.book-stage__extra-value{
  color: var(--black);
  word-break: break-word;
}

.book-stage__extra-value--split{
  display: inline-flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: center;
}

.book-stage__extra-class-kdc,
.book-stage__extra-class-number{
  display: inline-flex;
  align-items: center;
}

.book-stage__extra-class-kdc{
  background-color: var(--gray-400);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.book-stage__extra-class-kdc--band-0 { background-color: #137B03; }
.book-stage__extra-class-kdc--band-1 { background-color: #F80608; }
.book-stage__extra-class-kdc--band-2 { background-color: #516B47; }
.book-stage__extra-class-kdc--band-3 { background-color: #ea580c; }
.book-stage__extra-class-kdc--band-4 { background-color: #FA6205; }
.book-stage__extra-class-kdc--band-5 { background-color: #0568D4; }
.book-stage__extra-class-kdc--band-6 { background-color: #F9AF08; }
.book-stage__extra-class-kdc--band-7 { background-color: #62C305; }
.book-stage__extra-class-kdc--band-8 { background-color: #001B86; }
.book-stage__extra-class-kdc--band-9 { background-color: #5D0059; }

.book-stage__extra-class-number{
  font-variant-numeric: tabular-nums;
}

.book-stage__extra-list.is-open{
  display: grid;
}

a.book-stage__extra-toggle, a.book-stage__extra-toggle span {
  font-weight:700;
  color:var(--gray-700);
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

a.book-stage__extra-toggle img{
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.book-stage__extra.is-open a.book-stage__extra-toggle img{
  transform: rotate(90deg);
}

.book-stage__note{
  margin-top: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.book-stage__note.is-hidden{
  display: none;
}

.book-stage__note-title, .book-stage__publisher-label, .book-stage__same-book .title {
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--black);
}

.book-stage__publisher-label.is-hidden{
  display: none;
}

.book-stage__note-text{
  white-space: pre-wrap;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black);
  width: 100%;
  overflow-wrap: anywhere;
}

.book-stage__note-text img{
  display: block;
  width: auto !important;
  height: auto;
  max-width: min(520px, 96%);
  margin: 4px auto;
  border-radius: 4px;
}

.book-stage__note-text figure{
  margin: 16px auto;
  max-width: min(520px, 90%);
}

.book-stage__note-text figure img{
  width: auto !important;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

.book-stage__note-text.is-hidden{
  display: none;
}

.book-stage__note-images{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.book-stage__note-image{
  max-width: min(520px, 90%);
  border-radius: 4px;
}

.book-stage__note-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

.book-stage__same-book {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 24px;
}

.book-stage__same-book.is-hidden {
  display: none;
}

.same-book {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.same-book-list {
  display:inline-flex;
  gap: 0px;
  align-items: center;
  flex-wrap: wrap;
}

.same-book-list .inherit {
  fill: var(--second-blue-text);
}

.same-book-list .book-user, .same-book-list .book-title {
  display: inline-flex;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background-color: var(--second-blue-20);
  font-weight: 600;
  font-size: 0.9375rem;
  align-items: center;
}

.same-book-list .book-user:hover, .same-book-list .book-title:hover {
  color:var(--second-blue-text);
}

.book-stage__close{
  background: none;
  border: 0;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.book-stage__close--panel{
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--gray-100);
}

.book-stage__close--floating {
  display: none;
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 1400;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--gray-100-50per);
  backdrop-filter: blur(4px);
}

.modal-close {
  top: 16px;
  right: 12px;
  z-index: 1400;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--gray-100-50per);
}

.book-stage__close--floating span, .book-stage__close span {
  display: flex;
  align-items: center;
}

.book-stage__close:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


.library-card__toggle-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  flex: 0 0 auto;
}

.library-item.is-expanded .library-card__toggle-icon {
  transform: rotate(90deg);
}

body.is-stage-open,
body.is-nav-open{
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: contain;
}

@media (max-width: 480px) {
  .book-stage{
    padding: 12px 8px;
    align-items: flex-start;
    overflow: hidden;
    max-height: calc(100dvh - 24px);
    overscroll-behavior: contain;
  }
  .book-stage__shell{
    width: 100%;
    max-width: 100%;
    height: calc(100% - 16px);
    max-height: none;
    background: #fff;
    border-radius: 16px;
    box-shadow:
      0 18px 36px rgba(0,0,0,0.22),
      0 8px 18px rgba(0,0,0,0.18);
    overflow-y: auto;
    padding: 8px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }
  .book-stage__book-slot{
    order: -1;
    margin: 0 auto;
    position: relative;
    transform: translateX(0);
    top:44px;
  }
  .book-stage__book-slot .book-cover-card.book--staged{
    transform: scale(1.18);
  }
  .book-stage__panel{
    max-width: none;
    background: transparent;
    border-radius: 0;
    margin-top: 56px;
    padding: 0;
    width: 100%;
    box-shadow: none;
    max-height: none;
    position: static;
  }
  .book-stage__body{
    max-height: none;
    overflow: visible;
    padding: 0px 8px;
    gap: 8px;
  }
  .book-stage__body::before,
  .book-stage__body::after {
    height: 2px;
  }
  .book-stage__note{
    width: 100%;
    gap: 12px;
  }
  .book-stage__note-text{
    max-width: 100%;
  }
  .book-stage__body .large {
    width: calc(100% - 24px);
  }
  
  .book-stage__summary{
    align-items: stretch;
  }
  .book-stage__actions{
    padding-top: 12px;
    gap: 8px;
  }
  .book-stage__extra-list{
    text-align: left;
  }
  .book-stage__description{
    max-width: 100%;
  }
  .book-stage__note-images{
    align-items: stretch;
  }
  .book-stage__note-image{
    max-width: 100%;
  }
  .book-stage__close--panel{
    display: none;
  }
  .book-stage__close--floating{
    position:fixed;
    display: inline-flex;
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    right: calc(env(safe-area-inset-right, 0px) + 16px);
  }
  .book-stage .like{
    width: 18px;
    height: 18px;
  }

  #result .add-books-layout, #result .ok, .direct-register-done__summary .ok, .start-card {
    padding: var(--card-mobile-padding) !important;
    width: var(--card-mobile-width) !important;
  }
  
  .start-card.signup {
    display:none;
  }
}

.book.is-stage-source,
.book-cover-card.is-stage-source{
  visibility: hidden;
}

.book-stage .like {
  border-radius : 50%;
  background: var(--grass-green);
  width: 20px;
  height: 20px;
  display: inline-block;
}

.note-editor-page, .new-book-page, #result, .admin-edit, 
.direct-register-page, .direct-register-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  width: calc(100vw - 24px);
  max-width: 1280px;
  margin: 0 auto;
}

.admin-request-list,
.admin-request-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  width: calc(100vw - 24px);
  max-width: 1200px;
  margin: 0 auto;
}

.admin-request-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-request-list__filter {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.admin-request-table-wrapper {
  overflow-x: auto;
}

.admin-request-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.admin-request-table th,
.admin-request-table td {
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
  vertical-align: top;
}

.admin-request-table__book small,
.admin-request-table__user small,
.admin-request-table__dates small {
  display: block;
  color: var(--gray-500);
  margin-top: 4px;
}

.admin-request-list__empty {
  padding: 24px;
  border: 1px dashed var(--gray-150);
  border-radius: 12px;
  text-align: center;
  color: var(--gray-600);
}

.admin-request-detail__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-request-detail__subtitle {
  margin: 4px 0 0;
  color: var(--gray-600);
}

.admin-request-detail__meta,
.admin-request-detail__form,
.admin-request-detail__body,
.admin-request-detail__history,
.admin-request-detail__meta-json {
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  padding: 16px;
  background: var(--white);
}

.admin-request-detail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.admin-request-detail__meta dl {
  margin: 0;
}

.admin-request-detail__meta dt {
  font-weight: 600;
  color: var(--gray-600);
}

.admin-request-detail__meta dd {
  margin: 4px 0 0;
}

.admin-request-detail__content {
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  padding: 16px;
  background: var(--gray-10);
  max-height: 400px;
  overflow:auto;
}

.admin-request-detail__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.admin-request-detail__field textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
}

.admin-request-detail__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.admin-request-detail__meta-json pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.85rem;
}

.note-editor-page {
  min-height: calc(100vh - 66px);
}

.library-manager, .login-container, .user-manager, .term-container, .error-container, .bookmarks-page, .admin-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 24px;
  width: calc(100vw - 48px);
}

p.title-desc {
  font-size: 1rem;
  color: var(--gray-600);
  padding-bottom: 8px;
}

.new-book-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.new-book-pane.is-hidden {
  display: none !important;
}

.new-book-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0px;
  margin-top: 16px;
  border-top: 1px dashed var(--gray-150);
}

.new-book-settings .row, .direct-register-page .row, 
.user-manager__content .row, .login-container .row,
.admin-container .row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#result .ok ul, .direct-register-done__summary .ok ul {
  list-style: none;
}

#result .ok ul li, .direct-register-done__summary .ok ul li {
 padding: 6px 0px;
 line-height:1.5;
}

#result .ok .place, .direct-register-done__summary .ok .place {
  font-size: 1.25rem;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--black);
}

.ok .badge, .candidate-info .badge {
  color: var(--white);
}

.empty-results p.title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
}

.cands h3 {
  margin-bottom: 12px;
}

.empty-results .button-secondary.large, 
.cands-secondary .button-secondary.large {
  width: calc(100% - 32px);
}

.user-manager a.large, .login-container a.large {
  width: calc(100% - 32px);
}

#result .ok p, .direct-register-done__summary .ok p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--black);
  padding-bottom: 6px;
  border-bottom : 1px dashed var(--gray-150);
}

#result .ok a.title, .direct-register-done__summary .ok a.title {
  font-weight: 600;
  color: var(--black);
  font-size: 1.125rem;
}

#result .ok .author, .direct-register-done__summary .ok .author {
  color: var(--gray-500);
}

.candidate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.candidate-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cands-secondary {
  margin-top: 16px;
  display: flex;
  flex-direction:column;
  justify-content: center;
  gap: 8px;
}

.cands-secondary p {
  text-align:center;
  font-size: 0.875rem;
  color: var(--gray-500);
}

.candidate-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.candidate-label input[type="checkbox"]::before, .candidate-label input[type="checkbox"]:checked::before {
  width: 24px;
  height: 24px;
  background-size: cover;
}

.candidate-thumb {
  display: block;
  width: 85px;
  flex-shrink: 0;
}

.candidate-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.candidate-thumb--google-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 120px;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.candidate-label img {
  width: 80px;
  height: auto;
}

.candidate-label--camera input[type="checkbox"] {
  display: none;
}

.candidate-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.empty-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-results__note {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.875rem;
}

.empty-results__note a {
  font-weight: 700;
}

.empty-results__manual {
  align-self: flex-start;
}

.selection-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.selection-summary {
  font-weight: 600;
  color: var(--gray-700);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.selection-summary.is-hidden {
  display: none;
}

.selection-summary .selection-notice {
  font-size: 0.75rem;
  color: var(--caution);
  padding: 4px 6px 4px 20px;
  background: var(--caution-10) url(img/icon_warning_weak.svg) no-repeat left 4px center;
  border-radius: 50vh;
  
}

.candidate-info .title {
  font-weight: 700;
  color: var(--black);
}

.candidate-info .author {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.button-primary[data-register-button] .spinner {
  display: none;
}

.button-primary[data-register-button].button-loading .spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

.button-primary span.spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button-primary[data-register-button] [data-button-label] {
  width: auto;
  flex: 0 1 auto;
}

.spinner {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  border-radius: 50%;
  border: 4px solid var(--gray-150);
  border-right-color: var(--gray-400);
  animation: l2 1s linear infinite;
  box-sizing: border-box;
  margin: 0 6px 0 6px;
  flex: 0 0 20px;
  vertical-align: middle;
}

@keyframes l2 {
    to {
        transform: rotate(1turn)
    }
}

.button-primary.button-loading,
.button-primary.button-loading:focus,
.button-primary.button-loading:hover {
  background-color: var(--gray-60);
  color: var(--gray-500);
  border: 1px solid var(--gray-100);

}

.button-primary.button-loading {
  cursor: wait;
}

.direct-register-done__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.direct-register-done__actions .large {
  width: calc(100% - 32px);
}

.badge-secondary {
  background: var(--gray-200);
  color: var(--gray-700);
}

#result .add-books-layout {
  background-color: var(--white);
  border-radius: var(--card-radius);
  width: var(--card-width);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
}

#result .ok, .direct-register-done__summary .ok, .start-card {
  background-color: var(--white);
  border-radius: var(--card-radius);
  width: var(--card-width);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
}

#result .add-books-columns {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  #result .add-books-columns {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }

  #result .add-books-columns .cands {
    flex: 2 1 0;
  }

  #result .add-books-columns.has-owned .owned-list {
    flex: 1 1 0;
    margin-top: 0;
  }

  .owned-list__items.is-collapsed .owned-list__item:nth-child(n + 2) {
    display: flex;
  }

  .owned-list__toggle {
    display: none;
  }

  .login-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start;
  }
  
  .login-container .start-card {
    align-self: center;
  }

}

.owned-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 1023px) {
  .owned-list__items.is-collapsed .owned-list__item:nth-child(n + 2) {
    display: none;
  }
}

.owned-list__toggle {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--second-blue);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}

.owned-list__toggle:hover,
.owned-list__toggle:focus {
  text-decoration: underline;
}

header.note-editor-page__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  width: calc(100vw - 24px);
  padding: 12px;
}

.note-editor-page__header-left,
.note-editor-page__header-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.note-editor-page__header-left {
  justify-content: flex-start;
  grid-column: 1;
}

.note-editor-page__header-right {
  justify-content: flex-end;
  gap: 8px;
  grid-column: 3;
  justify-self: end;
}

.note-editor-page__header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  grid-column: 2;
  justify-self: center;
}

.note-editor-page__header-left .button-secondary {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
  min-width: 0;
}

.note-editor-page__header-left .button-secondary img {
  flex-shrink: 0;
}

.note-editor-page__header-back-label {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: var(--white);
  border-radius: 50vh;
  box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 8%),
                0px 0px 2px 0px rgb(0 0 0 / 8%);
}

.segmented-control__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 50vh;
  color: var(--gray-700);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.segmented-control__item.is-active, .segmented-control__item.is-active:hover,
.segmented-control__item.is-active:active {
  border: none;
  background: linear-gradient(-225deg, rgba(213,255,112,1) 0%, rgba(213,255,112,1) 40%, rgba(127,221,255,1) 100%);
  border-radius: 50vh;
  color: var(--black);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.segmented-control__item:hover,
.segmented-control__item:active {
  background: var(--gray-60);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.note-editor-page__meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}

.note-editor-page__title {
  font-size: 1rem;
  font-weight: 700;
}

.note-editor-page__author {
  color: var(--gray-500);
  font-size: 0.75rem;
}

.note-editor-page__error {
  background: var(--warning-10);
  border: 1px solid var(--warning-20);
  color: var(--warning);
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
}

.note-editor-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
}

.note-editor-form__controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-editor-form__editor {
  flex: 1 1 auto;
  min-height: 50vh;
}

.note-editor-form__editor .sun-editor {
  border-radius: 8px;
  overflow: hidden;
}

.note-editor-form__editor .sun-editor .se-toolbar {
  border-bottom: 1px solid var(--gray-100);
}

.note-editor-form__editor .sun-editor .se-wrapper {
  min-height: 45vh;
}

.note-editor-form__editor .sun-editor .se-wrapper .se-wrapper-inner {
  font-size: 1rem;
  line-height: 1.5;
}

.note-editor-form__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.book-stage__note-text ol {
  white-space: normal;      /* 리스트에서는 pre-wrap 계승하지 않도록 */
  margin: 0;
  padding: 0 0 0 24px;      /* 들여쓰기는 유지하고 상‧하단 여백 제거 */
}

.book-stage__note-text ol > li {
  white-space: normal;
  margin: 0;
}

.book-stage__note-text ol > li + li {
  margin-top: 8px;          /* gap처럼 항목 간 간격 */
}

.book-stage__note-text ol > li p {
  margin: 0;                /* <p> 기본 margin 때문에 벌어지는 간격 제거 */
}

.book-stage__description p {
  margin: 0 0 1em;
}

.book-stage__description p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px){
  .book-stage__note-text,
  .book-stage__description{
    white-space: normal;
  }

  .book-stage__note-text p,
  .book-stage__description p{
    margin: 0 0 1em;
  }

  .book-stage__note-text p:last-child,
  .book-stage__description p:last-child{
    margin-bottom: 0;
  }
}

.note-editor-form__controls, .new-book-page .row  {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.new-book-page ul.helper {
  list-style: none;
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
  align-items: flex-start;
}

.new-book-page ul.helper li {
  font-size: 0.875rem;
  color:var(--gray-700);
  text-align: left !important;
  line-height: 1.4;
}

.barcode-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 999;
}

.barcode-modal.is-active {
  display: flex;
}

.barcode-modal__dialog {
  width: min(95vw, 640px);
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.25);
}

.barcode-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0px 0px 4px;
}

.barcode-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.barcode-modal__video {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  background: var(--black);
  border-radius: 12px;
  object-fit: cover;
}

.barcode-modal__message {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 700;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 8px;
}

.barcode-modal__message[data-state="error"] {
  color: var(--warning);
}

.direct-register-page__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}

.direct-register-page__description {
  margin: 0;
  color: var(--gray-600);
  line-height: 1.5;
}

.direct-register-page__tips {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--gray-500);
  line-height: 1.5;
}

.direct-register-page__isbn-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.direct-register-page__isbn-input {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.direct-register-page__isbn-input input[type="text"] {
  flex: 1;
}

.direct-register-page__isbn-input .button-secondary {
  flex: 0 0 auto;
  white-space: nowrap;
}

.direct-register-page__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.direct-register-page__fieldset {
  display: grid;
  gap: 16px;
}

.direct-register-page .form-label, .admin-edit__field .form-label  {
  flex-direction: row;
  gap: 0px;
}

.direct-register-page__fieldset--columns {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.direct-register-page__fieldset--locations {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.direct-register-page__error {
  margin-bottom: 16px;
}

.direct-register-page__isbn-result {
  margin-top: 8px;
}

.direct-register-page__label-meta, .admin-edit__field .form-label span, .required {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 0.85rem;
  color: var(--caution);
  font-weight: 600;
}

.library-manager__intro, .direct-register-page__intro, .admin-edit__header, 
.user-manager__intro, .terms__intro, .bookmarks-page__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.library-manager__title, .admin-edit__header h1, .user-manager__title, 
.login-container h1, .terms__title, .bookmarks-page__title, .admin-container h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.library-manager__desc, .user-manager__desc, .login-desc, .bookmarks-page__desc {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.95rem;
}

.library-manager__content, .user-manager__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.library-manager__libraries {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.library-manager__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.library-manager__limit {
  font-size: 0.875rem;
  color: var(--gray-400);
}

.library-manager__empty {
  padding: 32px;
  border-radius: 16px;
  background: var(--gray-60);
  background: var(--gray-40);
  text-align: center;
  color: var(--gray-600);
  font-weight: 600;
}

.library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.library-item {
  border-radius: var(--card-radius);
  background: var(--white);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.library-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.library-card__header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
}

.library-card__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  padding-right: 12px;
}

.library-card__header,
.shelf-row {
  cursor: grab;
}
.library-card__header:active,
.shelf-row:active {
  cursor: grabbing;
}

.library-card__header,
.shelf-row {
  user-select: none;
  touch-action: pan-y;
}

.inline-edit,
.inline-edit input,
.inline-edit textarea {
  cursor: auto;
  user-select: text;
}

.library-card__toggle {
  appearance: none;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 4px 12px 12px;
  flex: 1 1 auto;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.library-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.library-card__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--black);
  background: var(--white) url(img/icon_library.svg) left center no-repeat;
  padding: 0 0 0 22px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-card__count {
  font-size: 0.875rem;
  color: var(--gray-500);
  font-weight: 500;
  margin-left: auto;
  flex: 0 0 auto;
}

.library-card__edit {
  margin-left: auto;
}

.library-card__body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.library-card__empty {
  margin: 0;
  padding: 24px;
  border-radius: 16px;
  background: var(--gray-40);
  background: var(--gray-60);
  text-align: center;
  color: var(--gray-500);
  font-weight: 600;
}

.shelf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shelf-item {
  border: 1px solid var(--gray-60);
  border-radius: 12px;
  background: var(--gray-40);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inline-edit.shelf-row__edit-form {
  width: 100%;
  margin: 0px 0px 12px 0px;
}

.inline-edit__field input[type="text"] {
  width:calc(100% - 26px);
}

.shelf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  width: calc(100% - 8px);
}

.shelf-row__main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.shelf-row__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin-left: auto;
}

.shelf-row__name {
  font-weight: 600;
  color: var(--gray-800);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelf-row__count {
  font-size: 0.85rem;
  color: var(--gray-500);
  font-weight: 600;
}

.inline-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px;
  border-radius: 12px;
  width: var(100% - 28px);
  margin: 0px 12px 12px 12px;
}

.inline-edit__field input {
  width: calc(100% - 24px);
}

.inline-edit__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inline-edit__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.inline-edit__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--black);
  flex: 1;
}

.inline-edit__toggle input {
  width: 16px;
  height: 16px;
}

.inline-edit__hint {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-500);
  text-align: left;
}

.inline-sort {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0px;
}

.inline-sort__field select {
  width: 100%;
}

.inline-sort__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.is-dragging {
  opacity: 0.7;
  transform: rotate(1deg);
}

.user-manager__content .info, .login-container .input-form, .login-area, 
.admin-area, .admin-area .input-form  {
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.start-card .blockquote {
  display: inline-flex;
  align-items: center;
}

.user-manager__content .info .id-email {
  font-size:1.125rem;
  font-weight:700;
  padding-bottom: 4px;
}

.user-manager__content .profile-row .profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-manager__content .profile-inputs, .login-area .profile-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.user-manager__content .profile-inputs input .login-area .profile-inputs input {
  flex: 1 1 120px;
  min-width: 120px;
}

.profile-url-prefix {
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

.form-feedback, p.status, .admin-edit__notice--success, .account-withdraw-modal__feedback,
.search-hint {
  margin: 0 0 12px;
  padding: 8px 12px 8px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-feedback {
  display: block;
}

p.status {
  display: none;
}

p.status.error,
p.status.success,
p.status.progress {
  display: block;
}

.form-feedback:last-child {
  margin-bottom: 0;
}

.form-feedback[hidden],
.form-feedback[data-visible="0"] {
  display: none !important;
}

.form-feedback[data-tone="error"], p.status.error, .account-withdraw-modal__feedback, .search-hint--warning {
  background: var(--warning-10) url(img/icon_warning.svg) no-repeat left 8px top 12px;
  color: var(--warning);
  border: 1px solid var(--warning-20);
}

.form-feedback[data-tone="success"], .form-feedback[data-tone="info"], p.status.success, .admin-edit__notice--success {
  background: var(--grass-green-50per) url(img/icon_complete.svg) no-repeat left 8px top 12px;
  border: 1px solid var(--grass-green-border);
  color: var(--black);
}


.form-feedback[data-tone="progress"], p.status.progress {
  background: var(--gray-60) url(img/icon_ing.svg) no-repeat left 8px top 12px;
  border: 1px solid var(--gray-100);
  color: var(--gray-500);
}

.form-feedback[data-tone="warning"] {
  background: var(--notice-20) url(img/icon_warning.svg) no-repeat left 8px top 12px;
  border: 1px solid var(--notice);
  color: var(--caution);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border: 1px solid var(--warning);
  outline: none;
  box-shadow: none;
}

input.is-invalid:focus,
input.is-invalid:focus-visible,
select.is-invalid:focus,
select.is-invalid:focus-visible,
textarea.is-invalid:focus,
textarea.is-invalid:focus-visible {
  outline: none !important;
  box-shadow: none;
}

input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: var(--grass-green-border);
}

input:required:user-invalid,
select:required:user-invalid,
textarea:required:user-invalid {
  border: 1px solid var(--warning);
  outline: none;
  box-shadow: none;
}

input:required:user-invalid:focus,
input:required:user-invalid:focus-visible,
select:required:user-invalid:focus,
select:required:user-invalid:focus-visible,
textarea:required:user-invalid:focus,
textarea:required:user-invalid:focus-visible {
  outline: none !important;
  box-shadow: none;
}

.helper {
  text-align:center;
  font-size: 0.9375rem;
}

.helper a {
  font-weight:700;
}

.button-secondary .barcode {
  fill: var(--gray-700);
}

.button-secondary:hover .barcode, .button-secondary:active .barcode {
  fill: var(--black);
}

.button-secondary:disabled .barcode {
  fill: var(--gray-400);
}

.button-primary.large svg.icon-add {
  width:16px;
  height: 16px;
}

.direct-register-page__isbn-result {
  font-weight: 600;
  color: var(--warning);
  font-size: 0.875rem;
}

.direct-register-page__isbn-none, .inline-checkbox {
  display:inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 0.875rem;
  color: var(--black);
}

.inline-checkbox a {
  font-weight:700;
}

.admin-edit__preview figure {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
}
.admin-edit__preview img {
  max-width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.admin-edit__preview figcaption {
  font-size: 0.85rem;
}
.admin-edit__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.admin-edit__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-edit__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--gray-600);
}
.admin-edit__field-error {
  color: var(--warning);
  font-size: 0.85rem;
}
.admin-edit__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-edit__actions .button-secondary {
  text-decoration: none;
}

footer {
  display:flex;
  flex-direction: column;
  font-size: 0.75rem;
  padding: 16px;
  gap: 8px;
  width: calc(100vw - 32px);
  background-color: var(--bg-color);
  background-image: linear-gradient(180deg, #E9E9E9 0%, var(--bg-color) 35%);
  z-index: 1;
}

body.auth-page footer {
  background-image: none;
}

footer .menu-area, footer .copyright  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

footer .menu-area a {
  color: var(--gray-700);
}

footer .menu-area a:hover, footer .menu-area a:active {
  color: var(--black);
}

.hr-another-option {
  background: transparent url(img/img_bg_hr.svg) repeat-x center left;
  text-align:center;
}

.hr-another-option span {
  background-color: var(--bg-color);
  padding: 0px 8px;
  font-size: 0.875rem;
  color:var(--gray-700);
}

/* 약관 */
.terms {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.terms p {
    margin-top:4px;
    margin-bottom:8px;
    overflow-wrap: break-word;
}

.terms ol, .terms ul {
    margin-top:4px;
    margin-bottom:8px;
    margin-left:24px;
}

.terms li {
    line-height:1.5;
}

.terms h2 {
  font-size:1.37rem;
}

.terms h3 {
    font-weight:600;
    line-height:1.5;
}

.terms h2 {
    margin-top:16px;
}

/* 에러 */

.error-container h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

.error-container h1, .error-container p {
  text-align: center;
  padding: 0px 24px;
}

.error-container img {
  width:100%;
  height:auto;
}

.error-container .img-notfound {
  max-width:324px;
}

.error-container .img-forbidden {
  max-width:346px;
}

.error-container .img-badrequest {
  max-width:330px;
}
.error-container .img-servererror {
  max-width:350px;
}

body.error-page .wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.error-page .main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0));
}

.error-page .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

@media (min-width: 1024px){
  .error-container h1 {
    font-size: 2rem;
  }
  .error-container p {
    font-size: 1.125rem;
  }

  .error-container .img-notfound {
    max-width:486px;
    height:auto;
  } 
  .error-container .img-forbidden {
    max-width:519px;
    height:auto;
  }
  .error-container .img-servererror {
    max-width:525px;
    height: auto;
  }
}


.bookmark-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .bookmark-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .bookmark-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bookmark-row {
  background-color: var(--white);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
}

.bookmark-row__info {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: wrap;
}

.bookmark-row__body {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bookmark-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bookmark-row[data-public-url] {
  cursor: pointer;
}

.bookmark-row__title {
  font-weight: 700;
  font-size: 1.0625rem;
  color:var(--black);
  background: var(--white) url(img/icon_bookmark_user.svg) left center no-repeat;
  padding: 0 0 0 22px;
}

.bookmark-row__handle {
  font-size: 0.9rem;
  color: var(--gray-600);
}

.bookmark-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 10px;
  font-size: 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.bookmark-row__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.bookmark-row__unavailable {
  font-size: 0.85rem;
  color: var(--gray-500);
}

.bookmark-empty {
  margin: 0;
  font-size: 1rem;
  color: var(--gray-600);
  background: var(--gray-60);
  padding: 16px;
  border-radius:4px;
}

@media (max-width: 480px) {
  .bookmark-row {
      padding: var(--card-mobile-padding);
      min-width: var(--card-mobile-width);
    }
}

  .account-withdraw-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding:8px;
  }
  .account-withdraw-modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
  }
  .account-withdraw-modal__panel {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 24px;
    max-width: 460px;
    width: min(92vw, 460px);
    box-shadow:
      0 32px 48px rgba(15, 23, 42, 0.35),
      0 12px 20px rgba(15, 23, 42, 0.25);
    text-align: left;
    z-index: 1;
  }
  .account-withdraw-modal__panel h3 {
    margin-top: 0;
    margin-bottom: 12px;
  }
  .account-withdraw-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
 
p.label-desc a {
  font-weight:700;
  color:var(--gray-700);
  cursor:pointer;
}

p.label-desc a:hover, p.label-desc a:active {
  color:var(--black);
}

ul.delete-list {
  margin-left:16px;
  display:flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.account-withdraw-modal__feedback {
  margin: 12px 0px 0px 0px !important;
}

.profile-grade {
    font-weight:700;
    font-size: 1.0625rem;
    border-radius:8px;
    width:fit-content;
}

.profile-grade.profile-grade--member {
    background: var(--gray-100);
    color: var(--gray-800);
    padding:6px 8px;
}

.profile-grade.profile-grade--donor {
    padding:6px 26px 6px 8px;
    color: var(--donated-pink-text);
    background: var(--donated-pink-10) url(img/icon_member_donated.svg) no-repeat right 6px center;
}

.profile-grade.profile-grade--admin {
    padding:6px 24px 6px 8px;
    color:#462906;
    background: #FFFACE url(img/icon_member_admin.svg) no-repeat right 4px center;
}

.user-manager__content .row .info {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.profile-grade-note {
  width:fit-content;
  color: var(--gray-700);
  font-weight:600;
}

.profile-grade-note__delta {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 50vh;
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.2;
  background-color: var(--gray-100);
  color: var(--black);
  white-space: nowrap;
  width:fit-content;
}

/* 어드민 */

.donation-table {
  margin-top: 24px;
}

.table-scroll {
  margin-top: 12px;
  overflow-x: scroll;
}

.table-scroll table {
  width:100%;
}

.table-scroll thead {
  border-top: 1px solid var(--gray-100);
  border-bottom: 2px solid var(--gray-100);
  background-color: var(--white);
}

.table-scroll thead th {
  padding: 8px;
  font-weight: 700;
  font-size: 0.875rem;
}

.table-scroll td {
  padding: 8px;
  border-bottom: 1px solid var(--gray-60);
}

.table-scroll td, .table-scroll th {
  text-align: center;
}

/* 나중에 */
  .admin-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
  }
  .admin-nav__title {
    font-weight: 700;
    color: #444;
    white-space: nowrap;
  }
  .admin-nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .admin-nav__links a {
    display: inline-block;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
  }
  .admin-nav__links a:hover {
    background: #f0f0f0;
  }