/* =========================
   RESET
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;
  overflow: hidden;

  background: #3f3f3f;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Helvetica Neue",
    Arial,
    sans-serif;

  user-select: none;
  -webkit-user-select: none;

  /* iOS Safari iframe 텍스트 자동 확대 방지 */
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

button {
  margin: 0;
  font: inherit;
  color: inherit;

  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* =========================
   DESKTOP / IFRAME AREA
   ========================= */

.desktop {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  display: grid;
  place-items: center;

  padding: 18px;
  overflow: hidden;

  background: #3f3f3f;
}

/* =========================
   FINDER WINDOW
   ========================= */

.finder {
  position: relative;

  /*
    iframe 내부의 가로 공간과 세로 공간 중
    더 작은 크기에 맞춰 Finder 전체를 축소
  */
  width: min(
    calc(100% - 36px),
    calc((100dvh - 36px) * 2048 / 1369),
    1480px
  );

  max-width: 100%;
  max-height: 100%;

  aspect-ratio: 2048 / 1369;

  flex: none;

  /*
    내부 요소가 화면 전체가 아니라
    Finder 창 크기를 기준으로 반응함
  */
  container-type: inline-size;
  container-name: finder;
}

/* Finder 배경 PNG */

.window-image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================
   FINDER CONTENT AREA
   ========================= */

.item-area {
  position: absolute;

  left: 19.8%;
  top: 20.5%;
  right: 8%;
  bottom: 13%;

  overflow: hidden;

  container-type: inline-size;
}

/* =========================
   FILE ITEM
   ========================= */

.file-item {
  position: absolute;

  left: 11.5%;
  top: 5.8%;

  /*
    기존 11.3%보다 조금 크게 설정.
    iframe에서 아이콘이 지나치게 작아지는 것을 방지
  */
  width: 12.5%;
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
  outline: none;
  box-shadow: none;

  background: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  cursor: default;

  appearance: none;
  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* ZIP / Folder icon */

.file-icon {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================
   FILE NAME
   ========================= */

.file-name {
  display: block;

  width: max-content;
  max-width: 150%;

  /*
    아이콘 아래쪽에 가깝게 붙임
  */
  margin-top: -14%;

  padding: 0 2px 1px;

  border: 0;
  border-radius: 3px;

  color: #222;
  background: transparent;

  /*
    Safari iframe에서 cqw가 예상과 다르게 렌더링될 때를 고려해
    기본값은 px로 제한하고 container query에서 단계별 변경
  */
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;

  white-space: nowrap;
  text-align: center;
  text-shadow: none;

  pointer-events: none;

  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* =========================
   SELECTED STATE
   ========================= */

.file-item.selected {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.file-item.selected .file-name {
  color: #222 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   FOCUS
   ========================= */

.file-item:focus {
  outline: none;
}

.file-item:focus-visible {
  outline: 2px solid rgba(0, 122, 255, 0.78);
  outline-offset: 4px;
  border-radius: 5px;
}

/* =========================
   HOTSPOTS
   ========================= */

.hotspot {
  position: absolute;

  margin: 0;
  padding: 0;

  border: 0;
  outline: none;

  background: transparent;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;
}

.back-hotspot {
  left: 19.2%;
  top: 12.2%;
  width: 3.4%;
  height: 6%;
}

.home-hotspot {
  left: 7.2%;
  top: 38.2%;
  width: 11.3%;
  height: 5.5%;
}

.hotspot:focus {
  outline: none;
}

.hotspot:focus-visible {
  outline: 2px solid rgba(0, 122, 255, 0.7);
  outline-offset: 1px;
}

/* =========================
   FINDER CONTAINER:
   MEDIUM SIZE
   ========================= */

@container finder (max-width: 900px) {
  .file-item {
    width: 13%;
  }

  .file-name {
    margin-top: -13%;
    font-size: 11px !important;
    letter-spacing: -0.025em;
  }
}

/* =========================
   FINDER CONTAINER:
   MOBILE EMBED
   ========================= */

@container finder (max-width: 700px) {
  .file-item {
    width: 14%;
  }

  .file-name {
    margin-top: -12%;
    padding: 0 1px;

    font-size: 8px !important;
    line-height: 1;
    letter-spacing: -0.025em;
  }
}

/* =========================
   FINDER CONTAINER:
   VERY SMALL EMBED
   ========================= */

@container finder (max-width: 420px) {
  .file-item {
    width: 15%;
  }

  .file-name {
    margin-top: -11%;

    font-size: 6px !important;
    line-height: 1;
    letter-spacing: -0.03em;
  }
}

/* =========================
   IFRAME VIEWPORT:
   MOBILE
   ========================= */

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;

    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }

  .desktop {
    width: 100%;
    height: 100%;
    min-height: 0;

    padding: 8px;
  }

  .finder {
    width: min(
      calc(100% - 16px),
      calc((100dvh - 16px) * 2048 / 1369)
    );
  }
}

/* =========================
   IFRAME VIEWPORT:
   VERY SMALL MOBILE
   ========================= */

@media (max-width: 420px) {
  .desktop {
    padding: 6px;
  }

  .finder {
    width: min(
      calc(100% - 12px),
      calc((100dvh - 12px) * 2048 / 1369)
    );
  }

  /*
    iOS iframe에서 container query가 적용되지 않을 경우를 위한
    최종 fallback
  */
  .file-item {
    width: 15%;
  }

  .file-name {
    margin-top: -11%;
    font-size: 6px !important;

    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }
}

/* =========================
   LANDSCAPE / SHORT IFRAME
   ========================= */

@media (orientation: landscape) and (max-height: 600px) {
  .desktop {
    padding: 8px;
  }

  .finder {
    width: min(
      calc(100% - 16px),
      calc((100dvh - 16px) * 2048 / 1369)
    );
  }
}