/* Squrevenn - 겹치는 사각형 다이어그램 (흰 배경, 검정 선·텍스트) */

.squrevenn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* background-color: var(--ty-white); */
  color: var(--ty-black);
}

.squrevenn-container .squrevenn-svg {
  width: 40%;
  max-width: min(900px, 90vw);
  height: auto;
  aspect-ratio: 640 / 520;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
}

.squrevenn-container .squrevenn-rect {
  stroke: var(--ty-black);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}

.squrevenn-container .squrevenn-rect:active {
  cursor: grabbing;
}

.squrevenn-container .squrevenn-rect-g:hover .squrevenn-label {
  text-decoration: underline;
}

.squrevenn-container .squrevenn-label {
  pointer-events: none;
  font-family: var(--venn-font, var(--title));
  font-size: var(--venn-font-size, 1.5rem);
  font-weight: 100;
  fill: var(--ty-black);
  text-anchor: middle;
  dominant-baseline: middle;
}

@media (max-width: 768px) {
  .squrevenn-container .squrevenn-svg {
    margin-top: 20px;
    width: 100%;
    max-width: min(1000px, 100vw);
    height: auto;
    aspect-ratio: 640 / 600;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
    shape-rendering: geometricPrecision;
  }
}