/* Venn diagram (main) - 반응형 */
.venn-container {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 60vh; */
  width: 100%;
}
.venn-container svg {
  width: 40%;
  max-width: min(900px, 80vw);
  height: auto;
  aspect-ratio: 640 / 600;
  display: block;
  /* 레티나/고해상도에서 선명하게 */
  transform: translateZ(0);
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
}
.venn-container .venn-circle {
  cursor: grab;
  fill: transparent;
  stroke: var(--ty-black);
  stroke-width: 1.5px;
}
.venn-container .venn-circle:active {
  cursor: grabbing;
  
  /* stroke-width: 4px; */
}
.venn-container .venn-label {
  pointer-events: none;
  font-family: var(--venn-font);
  font-size: var(--venn-font-size);
  /* font-weight: var(--venn-font-weight); */
  font-weight: 100;

  fill: var(--ty-black);
  text-anchor: middle;
  dominant-baseline: middle;

}
.venn-container .venn-overlap-label {
  cursor: pointer;
  font-family: var(--venn-font);
  font-size: var(--venn-font-size);
  /* font-weight: var(--venn-font-weight); */
  fill: var(--ty-black);
  text-anchor: middle;
  dominant-baseline: middle;
}
/* 호버 시 밑줄: 원에 호버하면 그 다음 형제인 .venn-label에 적용 */
.venn-container .venn-circle:hover + .venn-label {
  text-decoration: underline;
}
.venn-container .venn-overlap-label:hover {
  text-decoration: underline;
}

/* Safari: 벤 다이어그램 라벨이 더 굵게 나와서 weight 한 단계 낮춤 (Chrome과 비슷하게) */
@supports (-webkit-hyphens: none) {
  .venn-container .venn-label,
  .venn-container .venn-overlap-label {
    /* font-weight: 600; */
  }
}

@media (max-width: 768px) {
  .venn-container svg {
    width: 100%;
  }
  .venn-container 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;
}
}