/* style.css */

/* #__next {
  color: red !important;
} */

/* MAP */
#ctr-mapPlay * {
  backface-visibility: hidden;
  user-select: none;
}

#ctr-mapPlay .border-div {
  box-shadow:
    0px 0px 0px 0.25px rgb(23, 23, 23),
    0px 0px 0px 0.25px inset rgb(23, 23, 23);
}

#ctr-mapPlay .inwall-div {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
  box-shadow: 0px 0px 0px 0.5px rgb(23, 23, 23);
}

#ctr-mapPlay .floor-div {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#ctr-mapPlay .hall-title-p {
  align-self: flex-end;
  justify-self: center;
  padding-left: 1.5rem /* 24px */;
  padding-right: 1.5rem /* 24px */;
  font-size: 56px;
  font-weight: 500;
}

/* HIGHLIGHT: map 페이지에서 전체 보기에서 홀별 주제 */
/* map.ts에서 hallDesc 텍스트 가져와서 시각화하고 그 글자수에 따라 크기 조절 */
/* LOG 2025: 18px */
/* LOG 2026: 30px */
#ctr-mapPlay .hall-desc-p {
  font-size: 30px;
  font-weight: 500;
  padding-left: 4px;
  padding-right: 4px;
}

#ctr-mapPlay .exwall-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(23 23 23 / var(--tw-border-opacity));
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#ctr-mapPlay .exwall-btn-none {
  --tw-bg-opacity: 1;
  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
}

.exwall-div-a {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 215 / var(--tw-bg-opacity));
}

.exwall-div-a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 169 190 / var(--tw-bg-opacity));
}

.exwall-btn-a {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 215 / var(--tw-bg-opacity)) !important;
}

.exwall-btn-a:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(250 204 215 / var(--tw-bg-opacity)) !important;
}

.exwall-div-b {
  --tw-bg-opacity: 1;
  background-color: rgb(255 214 176 / var(--tw-bg-opacity));
}

.exwall-div-b:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 165 81 / var(--tw-bg-opacity));
}

.exwall-btn-b {
  --tw-bg-opacity: 1;
  background-color: rgb(255 214 176 / var(--tw-bg-opacity)) !important;
}

.exwall-btn-b:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 214 176 / var(--tw-bg-opacity)) !important;
}

.exwall-div-c {
  --tw-bg-opacity: 1;
  background-color: rgb(193 223 246 / var(--tw-bg-opacity));
}

.exwall-div-c:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(110 194 255 / var(--tw-bg-opacity));
}

.exwall-btn-c {
  --tw-bg-opacity: 1;
  background-color: rgb(193 223 246 / var(--tw-bg-opacity)) !important;
}

.exwall-btn-c:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(193 223 246 / var(--tw-bg-opacity)) !important;
}

.exwall-div-d {
  --tw-bg-opacity: 1;
  background-color: rgb(167 236 198 / var(--tw-bg-opacity));
}

.exwall-div-d:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(42 199 114 / var(--tw-bg-opacity));
}

.exwall-btn-d {
  --tw-bg-opacity: 1;
  background-color: rgb(167 236 198 / var(--tw-bg-opacity)) !important;
}

.exwall-btn-d:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(167 236 198 / var(--tw-bg-opacity)) !important;
}

#ctr-mapPlay .ceil-div {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#ctr-mapPlay .ceil-div-a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 169 190 / var(--tw-bg-opacity));
}

#ctr-mapPlay .ceil-div-b:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 165 81 / var(--tw-bg-opacity));
}

#ctr-mapPlay .ceil-div-c:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(110 194 255 / var(--tw-bg-opacity));
}

#ctr-mapPlay .ceil-div-d:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(42 199 114 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallA {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 215 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallA:hover,
#ctr-mapPlay .booth-div-hallA:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 169 190 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallB {
  --tw-bg-opacity: 1;
  background-color: rgb(255 214 176 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallB:hover,
#ctr-mapPlay .booth-div-hallB:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 165 81 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallC {
  --tw-bg-opacity: 1;
  background-color: rgb(193 223 246 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallC:hover,
#ctr-mapPlay .booth-div-hallC:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(110 194 255 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallD {
  --tw-bg-opacity: 1;
  background-color: rgb(167 236 198 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-hallD:hover,
#ctr-mapPlay .booth-div-hallD:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(42 199 114 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-public {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-public:hover,
#ctr-mapPlay .booth-div-public:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-r {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  background-size: contain;
}

#ctr-mapPlay .booth-div-r:hover,
#ctr-mapPlay .booth-div-r:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-major {
  --tw-bg-opacity: 1;
  background-color: rgb(255 240 166 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-major:hover,
#ctr-mapPlay .booth-div-major:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(253 208 0 / var(--tw-bg-opacity));
}

#ctr-mapPlay .exwall-div,
#ctr-mapPlay .ceil-div,
#ctr-mapPlay .booth-div {
  @apply outline-none hover:cursor-pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

#ctr-mapPlay .exwall-div:hover,
#ctr-mapPlay .ceil-div:hover,
#ctr-mapPlay .booth-div:hover {
  cursor: pointer;
}

#ctr-mapPlay .booth-div {
  text-align: center;
  font-family:
    IBMPlexSansKR,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica Neue,
    Arial,
    'Noto Sans',
    sans-serif;
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#ctr-mapPlay .booth-div-freezed {
  pointer-events: none !important;
}

#ctr-mapPlay .booth-div-lock {
  pointer-events: none !important;
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-public-locked {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#ctr-mapPlay .booth-div-start {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(166 202 255 / var(--tw-bg-opacity)) !important;
}

#ctr-mapPlay .booth-div-start:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(104 159 255 / var(--tw-bg-opacity)) !important;
}

#ctr-mapPlay .booth-div-end {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 187 178 / var(--tw-bg-opacity)) !important;
}

#ctr-mapPlay .booth-div-end:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 110 88 / var(--tw-bg-opacity)) !important;
}

#ctr-mapPlay .booth-div-mid {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(224 205 240 / var(--tw-bg-opacity)) !important;
}

#ctr-mapPlay .booth-div-mid:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(203 137 255 / var(--tw-bg-opacity)) !important;
}

#ctr-mapPlay .gate-div-oneWay {
  background-image: url(/images/map/gate-oneWay.svg);
}

#ctr-mapPlay .gate-div-twoWay {
  background-image: url(/images/map/gate-twoWay.svg);
}

#ctr-mapPlay .escalator-div-up {
  background-image: url(/images/map/escalator-up.svg);
}

#ctr-mapPlay .escalator-div-down {
  background-image: url(/images/map/escalator-down.svg);
}

#ctr-mapPlay .booth-wrapper-div {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#ctr-mapPlay .booth-name-p {
  -webkit-font-smoothing: subpixel-antialiased;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  pointer-events: none;
  position: relative;
  width: 100%;
  overflow: hidden;
  word-break: break-all;
  vertical-align: top;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

#ctr-mapPlay .booth-name-p.booth-vertical-two {
  -webkit-line-clamp: 5;
}

#ctr-mapPlay .booth-name-p.booth-vertical-three {
  -webkit-line-clamp: 7;
}

#ctr-mapPlay .booth-div-exhibitor > .booth-wrapper-div > .booth-name-p::after {
  content: attr(data-booth);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  width: max-content;
}

#ctr-mapPlay .route-path-svg {
  pointer-events: none !important;
}

#ctr-mapPlay .route-milestone-div {
  pointer-events: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  text-align: center;
  font-size: 10px;
}

#ctr-mapPlay .column-div {
  pointer-events: none !important;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity));
}

#ctr-mapPlay .qrcode-div {
  pointer-events: none !important;
  background-image: url(/images/map/qrcode.svg);
}