:root{
  --header-pad-y: 14px;
  --header-gap: 14px;
  --bg: #ffffff;
  --bg-rgb: 255, 255, 255;
  --text: #000000;
  --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:  72px;
  --card-gap:     8px;
  --sheet-btn-size: 32px;
  --sheet-btn-gap:  12px;
  --sheet-pad-right: 16px;
  --mark-size: 0.35rem;
  --mark-gap: 0.14rem;
  --mark-offset: 0rem;
  --mark-owner:   #e11d48;
  --mark-friends: #1144fa;
}



*{
  box-sizing: border-box;
}

html,body {
  height:auto;
  overflow-y:auto;
}

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

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


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


.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(var(--bg-rgb), 70);
  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;
}

/* KEEP (grid) — 이것만 남기세요 */
.site-header_inner{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  width: var(--container-w);
  margin-inline: auto;
}

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


.with-controls{
  display:flex;
  gap:10px;
  margin-right:0;
}

.with-toggle {
  position: relative;
  background:none;
  border:0;
  margin:0 16px;
  cursor:pointer;
}

.with-toggle.is-off{
  opacity:.5;
}


.navigation-container_left-column  { grid-column: 1; justify-self: start; }
.navigation-container_right-column { grid-column: 3; justify-self: end;  }


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


.site-navigation--right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: .75rem;         /* 열 간격만 명시적으로 */
  white-space: nowrap;
  width: auto;
}


.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: 0;
}
.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;
}


/* ===== GRID ===== */

/* NEW: 바깥 래퍼에 수평 패딩 */
.site-inner { padding-inline: 16px; }

.site-inner-contents-grid,
.books-wrap,
.books-grid {
  overflow-y: visible !important;
  max-height: none !important;
  -webkit-overflow-scrolling: auto; }


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

.books-wrap{
  width: var(--container-w);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: visible;
}

.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;
}

.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{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

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

.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;
  
}

.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;
}


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

.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: 6px;
  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: 6px 0 18px;
  margin: 0;
  display: block;
  text-align: center;
}

.book__meta.meta--line .book__line{
  margin: 0;
  font-size: 12px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.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;
}


.book__markers{
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 16px;
}
.book__markers .marks{
  display:
  inline-flex;
  gap: 6px;
}

.mark-spacer{
  display: inline-block;
  height: 16px;
} 

.mark{
  width: 12px; height: 12px;
  border-radius: 9999px;
  background: transparent;
  border: 2px solid currentColor;
  box-sizing: border-box;
}
.mark--owner   { color: var(--mark-owner); }
.mark--friends { color: var(--mark-friends); }


.book__markers--overlay{
  position: absolute;
  bottom: var(--mark-offset);
  display: flex;
  gap: var(--mark-gap);
  z-index: 2;
  pointer-events: none;
}

.view--grid .book__markers--overlay{ display: flex; }
.view--grid .meta--line .book__markers{ display: none; }


.book__markers--overlay .marks{ display:flex; gap: var(--mark-gap); }
.book__markers--overlay .mark{
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: 9999px;
  display: inline-block;
  border: 0;
  box-shadow: none;
  background: currentColor;
}


.book__markers--overlay .mark--owner  { color: var(--mark-owner);  }
.book__markers--overlay .mark--friends{ color: var(--mark-friends); }


.books-table .td-marks{
  width: 40px;
  text-align: center;
  vertical-align: middle;
  padding: 10px 8px;
}

.books-table .td-marks .mark{
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: 50%;
  background: currentColor;
  border: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

.books-table .td-marks .marks{
  display: inline-flex;
  gap: var(--mark-gap);
  align-items: center;
  justify-content: center;
  min-height: 16px;
}



/* sheet nav */
.sheet__nav{
  position: absolute; 
  width: var(--sheet-btn-size);
  height: var(--sheet-btn-size);
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #000000;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.sheet__next{
  right: calc(var(--sheet-pad-right) + var(--sheet-btn-size) + var(--sheet-btn-gap));
}
.sheet__prev{
  right: calc(var(--sheet-pad-right) + 2*(var(--sheet-btn-size) + var(--sheet-btn-gap)));
}

.sheet__nav:hover{ background:#f6f6f6; }


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

.books-table col.col-marks     { width: 40px; }
.books-table col.col-author    { width: 20%; }
.books-table col.col-title     { width: 50%; }
.books-table col.col-publisher { width: 18%; }
.books-table col.col-date      { width: 12%; }


.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 td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.books-table td:nth-child(3) .cell-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.3;
}


.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;
}




/* Sheet header title + subtitle */
#sheet-title.sheet__title{
  display: inline-flex;
  align-items: center;
  gap: var(--header-gap, 14px);
}

#sheet-title .t-main{
  font-size: 18px;
  font-weight: 700;
}

#sheet-title .t-sub{
  font-size: 14px;
  opacity: .8;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
  display: inline-block;
  line-height: 1;
}

.cell-title{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.cell-title .t-main{
}

.cell-title .t-sub{
  font-size: 10px;
  opacity: .5;
  font-weight: 400;
}

.cell-title, .cell-title .t-main, .cell-title .t-sub{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* ooop! empty */
.empty-message{
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  text-align: center;
  margin: 40px 0;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.5;
  color: #000000;
  pointer-events: none;
}

.empty-message.on{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.owner-text {
  color: var(--mark-owner);
  font-weight: 500; 
}

.friends-text {
  color: var(--mark-friends);
  font-weight: 500;
}




/* footer */
.footer{
  margin: 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: rgba(255, 255, 255, .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));
}


.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;
}


/* bottom sheet header */
.sheet__header{
  position: relative;
  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;
}

.sheet__close{
  position: absolute; 
  right: var(--sheet-pad-right);
  width: var(--sheet-btn-size);
  height: var(--sheet-btn-size);
  border-radius: 9999px;
  border: 1px solid #000;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  z-index: 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: 14px;
  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;
}


/*  Bottom sheet header */
.sheet__subline{
  display:flex;
  align-items:center;
  gap: var(--header-gap,14px);
}

.sheet-marks{
  display:inline-flex;
  gap: var(--mark-gap, 6px);
  margin-left: .5ch;
  vertical-align: middle;
  align-items: center;
}

.sheet-marks .mark{
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  position: relative;
} 

.sheet-marks .mark--owner   {
  color: var(--mark-owner,   #e11d48);
}
.sheet-marks .mark--friends {
  color: var(--mark-friends, #1144fa);
}

.sheet-marks .sr-only{
  position:absolute!important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
} 


/* shelving */
.header--shelf-open .shelf-controls {
  max-height: 200px;
  opacity: 1;
} 

#shelf-controls.shelf-controls{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -6px);
  width: min(var(--grid-max), 92vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  margin: 0; padding: 0;
  background: transparent;
  z-index: 50; 
}

.site-header_inner.header--shelf-open #shelf-controls{
  opacity: 1;
  transform: translate(-50%, 25%);
  pointer-events: auto;
}


/* shelf-pill */
.shelf-pill{
  position: relative;
  border:1px solid #000;
  border-radius:999px;
  padding:.5rem .75rem;
  font:12px/1.1 var(--font, "Helvetica Neue", Arial, sans-serif);
  background: rgba(255,255,255,.65);
  color:#000;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
}

.shelf-pill::after{
  content:"—";
  display: inline-block;
  width:1.1em;
  text-align:center;
  margin-left:.4em;
}
.shelf-pill[data-state="asc"]::after{
  content:"▲";
}
.shelf-pill[data-state="desc"]::after{
  content:"▼";
}

#shuffle-pill::after {
  content: none !important;
}
.shelf-pill--shuffle .icon{
  display: inline-block;
  transform-origin: 50% 50%; }

@keyframes spinStar {
  to { transform: rotate(360deg); }
}
.shelf-pill--shuffle:hover .icon{
  animation: spinStar 1.2s linear infinite;
}

.shelf-pill:not(.shelf-pill--shuffle)::after{
  content:"—";
  display:inline-block;
  width:1.1em;
  text-align:center;
  margin-left:.4em;
}
.shelf-pill:not(.shelf-pill--shuffle)[data-state="asc"]::after{
  content:"▲"; }
.shelf-pill:not(.shelf-pill--shuffle)[data-state="desc"]::after{
  content:"▼"; }

.shelf-pill--shuffle::after {
  content:none !important;
}

.shelf-pill--shuffle .icon{
  display: inline-block;
  transform-origin: 50% 50%;
}
@keyframes spinStar {
  to { transform: rotate(360deg); }
}
.shelf-pill--shuffle:hover .icon{
  animation: spinStar 1.2s linear infinite;
}


/* field-numbering (1/2/3) */
.shelf-pill[data-rank]::before {
  content: attr(data-rank);
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 10px;
  line-height: 1.2em;
  text-align: center;
}


/* load more */
.load-more{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  border:1px solid #000;
  border-radius: 999px;
  background:#fff;
  font:12px/1 var(--font, "Helvetica Neue", Arial, sans-serif);
  cursor:pointer;
}

.load-more-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 18px auto 26px;
}

.load-more[disabled]{
  opacity:.5;
  cursor: default; }

.loader{
  display:none;
}
.loader.on{
  display:inline-flex;
}

.loader::before{
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #000; border-right-color:transparent;
  animation: spin .9s linear infinite;
}

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



/* about-sheet */
#about-sheet{
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 11000 !important; 
}

#about-sheet .sheet__backdrop,
#about-sheet .sheet__panel { display: none !important; }

.about-card{
  position: absolute;
  max-width: min(420px, 92vw);
  background: var(--bg,#fff);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  padding: 12px 14px;
  font-size: clamp(13px,0.95vw,15px);
  line-height: 1.65;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, height .18s ease;
}
.about-card.on{
  opacity: 1;
  transform: translateY(0);
}

.about-card.switch-out{
  opacity:0;
  transform:translateY(-4px);
}
.about-card p{
  margin:0;
}


/* mini tooltip */
.mini-tip{
  position: fixed; 
  z-index: 12000;
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(30,30,30,.92);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  transform: translate(-50%, 6px);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.mini-tip.on{
  opacity: 1;
  transform: translate(-50%, 0);
}


/* sorry! */
.unsupported-message {
  position: fixed;
  inset: 0;
  background: #fff;
  color: magenta;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  padding: 2rem;
  z-index: 9999;
  display: none;
}

.swarm-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  z-index: 0; 
}


#unsupported{
  position: fixed;
  inset: 0;
  width: 100%; 
  height: 100svh;
  background: #ffffff; 
  z-index: 10000; 
  overscroll-behavior:none;
}


#unsupported.motion-on .swarm-canvas{ 
  display:block; 
}

#unsupported .unsupported-copy{
  position: relative;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

#unsupported.motion-on .unsupported-copy{ 
  display:none; 
}

.unsupported-cta{ 
  margin-top: .8rem; 
  font-size: clamp(16px, 4.2vw, 22px); 
}  

#unsupported,
#unsupported .unsupported-message{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  background: #fff;
  z-index: 10000;
  overscroll-behavior: none;  
}

#unsupported .unsupported-message{
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}


html.no-scroll,
body.no-scroll{
  height: 100%;
  overflow: hidden;
}
body.no-scroll{
  position: fixed;
  left: 0; right: 0; width: 100%;
}

.swarm-canvas{ z-index: 10001; }




/* 새로운 질서 친구들 circle */
.apply{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:fixed;
  z-index:10050;
  width:9rem;
  height:9rem;
  font-size:.875rem;
  font-weight:600;
  line-height:1.375;
  text-align:center;
  color:snow;
  background-color:midnightblue;
  border-radius:50%;
  animation:none;
  opacity:1;
}

.apply.follow-center{
  left:0; top:0;
  right:auto; bottom:auto;
  transform:translate(-50%, -50%);
}

.apply__label{ animation:rotate 10s linear infinite; }
@keyframes rotate{ to{ transform:rotate(360deg); } }

.glapress-credit {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  z-index: 20000;
  text-decoration: underline;
}
.glapress-credit a {
  color: #000;
  text-decoration: underline;
}
.glapress-credit a span {
  font-weight: 600; 
}

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


@media (max-width: 800px){
  .unsupported-message{ 
    display:flex;
    align-items:center; 
    justify-content:center; 
  }

  .app, .site{ display:none !important; }
}