:root {
  color-scheme: dark;
  background: #2c1609;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  background: #2c1609;
}

body {
  display: flex;
  justify-content: center;
}

.landing-page {
  position: relative;
  width: min(100%, 1366px);
  line-height: 0;
  overflow: hidden;
}

.landing-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 0.7%;
  cursor: pointer;
  line-height: normal;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

/* 키보드 사용자가 링크 위치를 확인할 수 있도록 표시 */
.hotspot:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: -4px;
  background: rgba(255, 255, 255, 0.14);
}

/* SVG viewBox 1024.5 × 4395.75 기준 좌표를 백분율로 변환 */
.hotspot-instagram {
  left: 14.25%;
  top: 32.25%;
  width: 35.75%;
  height: 1.95%;
}

.hotspot-smartstore {
  left: 54.30%;
  top: 32.25%;
  width: 35.65%;
  height: 1.95%;
}