body {
  font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  overflow-x: hidden; /* Prevent horizontal scroll */
  touch-action: pan-y; /* Allow vertical scrolling only */
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.untouchable {
  -webkit-tap-highlight-color: transparent; /* Disable tap highlight on mobile */
  pointer-events: none; /* Disable pointer events */
  -webkit-user-select: none; /* Disable text selection */
  user-select: none; /* Disable text selection */
  -webkit-touch-callout: none; /* Disable iOS callout */
}

.preset-container {
  width: 100%;
  max-width: 768px;
  flex: 0 1 auto;
}

.image-section {
  position: relative;
  width: 100%;
}

.image-wrapper {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 220px); /* Poolback for browsers that don't support 100svh */
  max-height: calc(100svh - 220px);
  aspect-ratio: 3 / 4;
  background-color: #333;
}

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

.image-label {
  position: absolute;
  top: 0.75em;
  left: 50%;
  transform: translateX(-50%);
  font-family: Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #fff;
  background-color: transparent;
}

#compare-button {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  display: flex;
  align-items: end;
  justify-content: right;
  padding: 10px;
  background: none;
  border: none;
}

#compare-button .border-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: none;
  border-radius: 50%;
}

#compare-button .image-bg {
  background: url(../img/preset/preview_beforeafter_black.svg) no-repeat center center;
  background-size: contain;
  width: 13px;
  height: 13px;
}

.details-section {
  padding: 20px 20px 160px 20px; /* bottom padding for floating download button */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
 }

.preset-title {
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: space-between;
}

.preset-title svg {
  display: inline-block;
  height: 1.5em; /* h1의 font-size 기준으로 높이 맞춤 */
  width: auto; /* 비율 유지 */
  vertical-align: middle; /* 세로 정렬 보정 */
}

.preset-title h1 {
  display: inline-block;
  font-family: Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.0em;
  letter-spacing: 0.2em;
  margin: 0;
  color: #ff8100;
}

.qr-code {
  margin-left: auto;
  float: right;
  width: 1.5em;
  height: 1.5em;
}

.description {
  font-size: 0.6rem;
  padding: 0;
  margin: 0 0 0 40px;
  color: #666;
}

.banner {
  background-color: #ff8100;
  color: #000;
  padding: 10px;
  font-size: 0.75rem;
  text-align: center;
}

.line {
  width: 100%;
  height: 1px;
  border-top: 1px dotted #666;
}

.attributes {
  display: flex;
  gap: 10px;
}

.attributes h2 {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
  margin-bottom: 10px;
}

.attributes ul {
  max-width: 240px; /* column max가 2가 되도록 설정 */
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto;;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  direction: rtl;
}

.attributes li {
  padding: 4px;
  font-size: 0.5rem;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

.attributes li span {
  font-family: Menlo, monospace;
  margin-left: 16px;
}

.download-button {
  display: block;
  background-color: #fff;
  text-align: center;;
  border: none;
  padding: 15px;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  z-index: 10;
  box-sizing: border-box;
  box-shadow: 0px 5px 30px rgba(0, 0, 0, 1);
}
a.download-button, a.download-button:hover, a.download-button:visited, a.download-button:active {
  text-decoration: none;
}
.download-button img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 18px;
  margin: 0 8px;
}
.download-button span {
  display: inline-block;
  vertical-align: bottom;
  line-height: 18px;
  font-size: 12px;
  color: #000;
}

/* For small mobile screens: Ensure title and description are visible without scroll */
@media (max-height: 600px) {
  .image-section .image-wrapper img {
    object-fit: cover;
  }
  .details-section {
    position: relative;
    z-index: 5;
  }
}

/* Desktop/Tablet layout */
@media (min-width: 768px) {
  .preset-container {
    display: flex;
    flex-direction: row;
    background-color: #000;
  }

  .image-section {
    flex: 1;
    max-width: 50%;
    border-radius: 10px;
    overflow: hidden;
  }

  .image-wrapper {
    aspect-ratio: 1;
    max-height: 100%;
  }

  .details-section {
    max-width: 50%;
    padding: 0 20px;
  }

  .download-button {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    padding: 15px 30px;
    margin-top: auto; /* Push to bottom of details section */
    align-self: center;
    transform: none;
  }
}

/* Attributes icons */
.attributes li.beauty { background: url(../img/preset/beauty_presetdetail_white.svg) no-repeat left center; }
.attributes li.bloom { background: url(../img/preset/bloom_presetdetail_white.svg) no-repeat left center; }
.attributes li.blur { background: url(../img/preset/blur_presetdetail_white.svg) no-repeat left center; }
.attributes li.brightness { background: url(../img/preset/brightness_presetdetail_white.svg) no-repeat left center; }
.attributes li.bnw { background: url(../img/preset/bnw_presetdetail_white.svg) no-repeat left center; }
.attributes li.contrast { background: url(../img/preset/contrast_presetdetail_white.svg) no-repeat left center; }
.attributes li.exposure { background: url(../img/preset/exposure_presetdetail_white.svg) no-repeat left center; }
.attributes li.brightness { background: url(../img/preset/brightness_presetdetail_white.svg) no-repeat left center; }
.attributes li.fade { background: url(../img/preset/fade_presetdetail_white.svg) no-repeat left center; }
.attributes li.grain { background: url(../img/preset/grain_presetdetail_white.svg) no-repeat left center; }
.attributes li.halation { background: url(../img/preset/halation_presetdetail_white.svg) no-repeat left center; }
.attributes li.highlights { background: url(../img/preset/highlights_presetdetail_white.svg) no-repeat left center; }
.attributes li.hsl { background: url(../img/preset/hsl_presetdetail_white.svg) no-repeat left center; }
.attributes li.saturation { background: url(../img/preset/saturation_presetdetail_white.svg) no-repeat left center; }
.attributes li.shadows { background: url(../img/preset/shadows_presetdetail_white.svg) no-repeat left center; }
.attributes li.sharpen { background: url(../img/preset/sharpen_presetdetail_white.svg) no-repeat left center; }
.attributes li.softlight { background: url(../img/preset/softlight_presetdetail_white.svg) no-repeat left center; }
.attributes li.vignette { background: url(../img/preset/vignette_presetdetail_white.svg) no-repeat left center; }
.attributes li.whitebalance { background: url(../img/preset/whitebalance_presetdetail_white.svg) no-repeat left center; }