@font-face {
  font-family: 'Exposure80Italic';
  src:
    url('../srcs/fonts/ExposureItalic.woff2') format('woff2'),
    url('../srcs/fonts/ExposureItalic.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --gray50: #808080; 
  --dividerX: 25vw; 
}

/* --- Mobile Notice Overlay --- */
#mobile-notice {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #ffffff;
  z-index: 10000;
}

/* ============================================
   BASE / DESKTOP STYLES (Default)
   ============================================ */
a { color: black; text-decoration: none; }
html, body { height: 100%; margin: 0; background: #ffffff; color: var(--black); overflow-y: scroll; }
body { scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar { display: none; }

.wrap { position: relative; height: 100vh; overflow: hidden; z-index: 100; }

#logo { position: fixed; top: 40px; left: 48px; z-index: 1000; text-decoration: underline dotted; text-underline-offset: 3px; }
.logo {
  margin: 0;
  font-family: Exposure80Italic, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 104px; line-height: 0.9; letter-spacing: 0; user-select: none; z-index: 999; 
}

.menu {
  position: fixed; left: 48px; bottom: 42px; display: flex; flex-direction: column; gap: 0; 
  font-family: Baskerville, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 16px; line-height: 33px; text-align: left;
}
.menu a:hover { text-decoration: underline; }

.menu-top {
  position: fixed; left: 48px; top: 25%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0; 
  font-family: Baskerville, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 16px; line-height: 33px; text-align: left;
}
.menu-top a:hover { text-decoration: underline; }

.divider {
  display: none;
  position: fixed; left: var(--dividerX); height: 92vh; top: 50%; transform: translateY(-50%); 
  width: 0; pointer-events: none; background: none;
}
.divider::after {
  content: ""; position: absolute; left: -1px; top: 0; height: 100%; width: 0;
  border-right: 1px solid #000; opacity: 0.6;
}

.strip {
  position: fixed; left: var(--dividerX); top: 0; height: 100vh; width: calc(100vw - var(--dividerX));
  overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; gap: 7vw; 
  padding: 0 6vw 0 50px; -webkit-overflow-scrolling: touch;
}

.card { flex: 0 0 auto; scroll-snap-align: start; position: relative; display: grid; place-items: center; height: 60vh; aspect-ratio: 1; }
.card-reduced { height: 90vh; }
.card-last { flex: 0 0 auto; scroll-snap-align: start; position: relative; display: grid; place-items: center; height: 80vh; aspect-ratio: 0.5; margin-left: 1000px; margin-right: 450px; }

.cover-container { display: flex; align-items: flex-start; width: 100%; height: auto; overflow: visible; position: relative; }
.img { position: relative; width: 80%; height: auto; }
.meta { left: -20px; opacity: 1; width: 20%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-left: 20px; }

.cover-container img { position: relative; width: 100%; height: auto; max-height: 85vh; object-fit: contain; transition: none; display: block; }
.cover-back { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; }
.cover-container span { font-family: Baskerville, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 12px; line-height: 16px; text-align: left; opacity: 1; user-select: none; }
.meta-1 { margin-bottom: 4px; }
.meta-2 { font-style: italic; margin-top: 10px; }
.meta-title:hover { border-bottom: 1px dotted var(--black); cursor: pointer; }
.cover-container span, .cover-container span em { color: var(--black); z-index: 10; }
.card .cover-back { opacity: 0; }
.img:hover .cover-front { opacity: 0; cursor: pointer; }
.img:hover .cover-back { opacity: 1; cursor: pointer; }

/* --- Issue interior viewer --- */
#detail-body .book-viewer {
  width: min(44vw, 620px);
  height: min(78vh, 820px);
  min-height: 460px;
  align-self: flex-start;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.interior-slideshow,
.cover-sheets {
  position: absolute;
  inset: 0;
}

.interior-slideshow {
  z-index: 1;
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  aspect-ratio: 2480 / 3391;
  transform: translateX(-50%);
}

.book-viewer[data-volume="2"] .interior-slideshow { aspect-ratio: 3307 / 4134; }
.book-viewer[data-volume="haircuts"] .interior-slideshow { aspect-ratio: 240 / 310; }

.interior-slideshow img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center top;
  opacity: 0;
  transition: none;
}

.interior-slideshow img.is-active { opacity: 1; }

.cover-sheets {
  z-index: 3;
  display: flex;
  opacity: 1;
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity;
}

.cover-sheets img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center top;
  opacity: 1 !important;
  transition: opacity 260ms ease;
}

.cover-sheets .cover-back { display: none; }

.book-viewer.is-revealed .cover-sheets {
  opacity: 0;
  pointer-events: none;
}

.slide-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 220ms ease;
}

.slide-arrow svg { width: 36px; height: 36px; overflow: visible; }
.slide-arrow polyline { fill: none; stroke: #fff; stroke-linecap: square; stroke-linejoin: miter; }
.slide-arrow .arrow-outline { stroke-width: 2.5px; opacity: .35; }
.slide-arrow .arrow-shape { stroke-width: 1px; }
.slide-arrow-next svg { transform: rotate(180deg); }
.slide-arrow:hover { opacity: .7 !important; }
.slide-arrow:focus-visible { opacity: 1; outline: 1px solid #fff; outline-offset: 3px; }
.slide-arrow-prev { left: 14px; }
.slide-arrow-next { right: 14px; }
.book-viewer:hover .slide-arrow,
.book-viewer.is-revealed .slide-arrow { opacity: 1; }

.slide-count {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 13px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, .8);
  color: #000;
  font: 11px/1.2 Baskerville, ui-serif, Georgia, serif;
  opacity: 0;
  transition: opacity 220ms ease;
}
.book-viewer.is-revealed .slide-count { opacity: 1; }

#detail-body .cover-container { gap: clamp(48px, 5vw, 96px); }
#detail-body .cover-container .meta { margin-left: 0; }

.strip-about {
  position: fixed; left: var(--dividerX); top: 22vh; height: auto; width: calc(100vw - var(--dividerX));
  overflow-x: auto; overflow-y: hidden; display: flex; align-items: flex-start; gap: 7vw; 
  padding: 0 6vw 0 50px; -webkit-overflow-scrolling: touch;
}
.strip-about p { line-height: 1.6; margin-top: 0; margin-bottom: 4px; }

/* ============================================
   TABLET (601px – 1024px)
   ============================================ */
@media (min-width: 601px) and (max-width: 1024px) {
  .wrap { height: 100dvh; }
  .divider { height: 92dvh; }
  
  .menu-top { top: 25dvh; font-size: 16px; line-height: 33px; }
  .menu { bottom: 42px; font-size: 16px; line-height: 33px; }
  
  .strip { height: 100dvh; }
  .card { height: 60dvh; }
  .card-reduced { height: 80dvh; }
  .cover-container img { max-height: 80dvh; }
}

/* ============================================
   MONOGRAPHS GRID STYLES
   ============================================ */
body.show-monographs .strip {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  height: 100vh;
  left: var(--dividerX);
  top: 0;
  width: calc(100vw - var(--dividerX));
  position: fixed;
}

body.show-monographs .fluidpaper-item {
  display: none !important;
}

body:not(.show-monographs) .monographs-grid {
  display: none !important;
}

.monographs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: #ffffff;
  width: 100%;
}

.grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background-color: #e5e5e5;
  aspect-ratio: 4 / 3;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.grid-meta {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gray50);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  pointer-events: none;
}

a.grid-item .grid-meta {
  color: #FFF601;
}

.grid-title,
.grid-price {
  color: #0000ff;
}

.grid-price {
  opacity: 0.8;
  margin-top: 2px;
}

.grid-img-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: stretch;
}

.grid-img-container img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.grid-img-inner {
  opacity: 0;
}

.grid-item:hover .grid-img-cover {
  opacity: 0;
}

.grid-item:hover .grid-img-inner {
  opacity: 1;
}

@media (max-width: 1024px) {
  .monographs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-item {
    aspect-ratio: 1.2;
  }
}

/* ============================================
   MOBILE (max-width: 600px)
   ============================================ */
@media (max-width: 600px) {
  html, body { height: 100%; overflow-y: auto !important; }
  .wrap { height: auto; min-height: 100dvh; overflow: visible; display: flex; flex-direction: column; }
  .divider { display: none !important; }

  #logo { position: fixed; top: 24px; left: 24px; font-size: 16px; z-index: 2000; }
  
  /* Landing State (index-body without .is-works) */
  #index-body:not(.is-works):not(.show-monographs) .strip { display: none !important; }
  
  /* Menu Top (Landing) */
  .menu-top {
    position: fixed; top: 50dvh; left: 24px; transform: translateY(-50%);
    font-size: 16px; line-height: 28px;
    z-index: 1000;
  }
  
  /* When Works are shown or on Detail/About page */
  .is-works .menu-top,
  .show-monographs .menu-top,
  #detail-body .menu-top,
  #about-body .menu-top { display: none !important; }
  
  /* Footer (Menu) */
  /* Default for Landing Page: Fixed at bottom */
  .menu {
    position: fixed !important;
    left: 24px !important;
    bottom: 24px !important;
    top: auto !important;
    right: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px;
    line-height: 28px;
    z-index: 5000 !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .menu a { color: #000 !important; text-decoration: none; }
  
  /* For Content Pages (Works/Detail/About): Relative at bottom of scroll */
  body.is-works .menu,
  body.show-monographs .menu,
  body#detail-body .menu,
  body#about-body .menu {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    margin-top: 60px !important;
    padding: 0 0 60px 24px !important;
    order: 3;
  }

  /* Strip / Content Area */
  .strip, .strip-about {
    position: relative; top: 0; left: 0; width: 100%; height: auto;
    overflow-y: visible; overflow-x: hidden; display: flex; flex-direction: column;
    padding: 120px 24px 0 24px; box-sizing: border-box; gap: 80px; z-index: 100;
    -webkit-overflow-scrolling: touch;
    order: 2;
  }
  
  /* Layout: Meta below image */
  .card, .card-reduced {
    width: 100%; height: auto; aspect-ratio: unset; display: block;
    margin-top: 0; position: relative;
  }
  .card-last { margin: 40px 0 120px 0; height: auto; display: block; }

  .cover-container { flex-direction: column !important; align-items: flex-start !important; }
  .img { width: 100% !important; flex-shrink: 0; }
  .cover-container img { max-height: none !important; width: 100%; height: auto; object-fit: contain; }
  #detail-body .book-viewer { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  #detail-body .book-viewer .cover-sheets { display: none; }
  #detail-body .book-viewer .slide-arrow,
  #detail-body .book-viewer .slide-count { opacity: 1; }
  
  .meta { 
    width: 100% !important; 
    margin-left: 0 !important; 
    margin-top: 24px !important; 
    left: 0 !important; 
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .meta p { max-width: 100% !important; margin-top: 15px !important; }
  .meta button#request-btn { margin-top: 20px; color: #000; -webkit-appearance: none; }

  .strip-about { padding: 120px 24px 120px 24px; transform: none; display: block; }
  
  body.show-monographs .strip {
    display: block !important;
    padding: 80px 0 0 0 !important;
    height: auto !important;
    overflow-y: visible !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
  
  .show-monographs .monographs-grid {
    grid-template-columns: 1fr !important;
  }
  
  .show-monographs .grid-item {
    aspect-ratio: 1 !important;
    padding: 0 !important;
  }
}

/* ============================================
   CURRENCY TOGGLE (bottom right)
   ============================================ */
.currency-toggle {
  position: fixed;
  right: 48px;
  bottom: 40px;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 8px 14px;
  box-sizing: border-box;
  font-family: Baskerville, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  user-select: none;
}

.currency-option {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--black);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s;
}

.currency-option:hover { opacity: 0.75; }

.currency-option.is-active {
  opacity: 1;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.currency-sep { opacity: 0.3; }