/* body 다음 fullscreen 시계 (100vw x 100vh, 꽉 참 + 사각형 + 십자가) */
.withok-fullscreen-clock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
}

.withok-fullscreen-clock .withok-hover-clock,
.withok-fullscreen-clock .works-instagram__clock {
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: 1;
}

.withok-fullscreen-clock .withok-hover-corner,
.withok-fullscreen-clock .works-instagram__corner {
  width: 1.5rem;
  height: 1.5rem;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover 시 내부 검정 사각형 0.5rem 표시 */
.withok-fullscreen-clock .withok-hover-corner:hover::before,
.withok-fullscreen-clock .works-instagram__corner:hover::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background-color: #000;
  flex-shrink: 0;
}

.withok-fullscreen-clock .withok-hover-crosshair,
.withok-fullscreen-clock .works-instagram__crosshair {
  opacity: 1;
}

.withok-fullscreen-clock .withok-hover-crosshair[data-axis="h"],
.withok-fullscreen-clock .works-instagram__crosshair[data-axis="h"] {
  transform: translateY(-0.5px) scaleX(1);
}

.withok-fullscreen-clock .withok-hover-crosshair[data-axis="v"],
.withok-fullscreen-clock .works-instagram__crosshair[data-axis="v"] {
  transform: translateX(-0.5px) scaleY(1);
}

.withok-fullscreen-clock .withok-hover-clock__tick,
.withok-fullscreen-clock .withok-hover-clock__hand,
.withok-fullscreen-clock .works-instagram__clock-tick,
.withok-fullscreen-clock .works-instagram__clock-hand {
  stroke: var(--color-blue-link);
}

.withok-fullscreen-clock .withok-hover-corner,
.withok-fullscreen-clock .works-instagram__corner {
  background: var(--color-blue-link);
}

.withok-fullscreen-clock .withok-hover-crosshair,
.withok-fullscreen-clock .works-instagram__crosshair {
  background: var(--color-blue-link);
}

/* 어두운 배경일 때 시계 선색 blue */
body:has(.site-header--dark-bg) .withok-fullscreen-clock .withok-hover-clock__tick,
body:has(.site-header--dark-bg) .withok-fullscreen-clock .withok-hover-clock__hand,
body:has(.site-header--dark-bg) .withok-fullscreen-clock .works-instagram__clock-tick,
body:has(.site-header--dark-bg) .withok-fullscreen-clock .works-instagram__clock-hand {
  stroke: var(--color-blue-link);
}

body:has(.site-header--dark-bg) .withok-fullscreen-clock .withok-hover-corner,
body:has(.site-header--dark-bg) .withok-fullscreen-clock .works-instagram__corner {
  background: var(--color-blue-link);
}

body:has(.site-header--dark-bg) .withok-fullscreen-clock .withok-hover-crosshair,
body:has(.site-header--dark-bg) .withok-fullscreen-clock .works-instagram__crosshair {
  background: var(--color-blue-link);
}

/* footer-tools의 Dark 모드일 때도 시계 색은 항상 blue 유지 */
html[data-theme-mode="dark"] .withok-fullscreen-clock .withok-hover-clock__tick,
html[data-theme-mode="dark"] .withok-fullscreen-clock .withok-hover-clock__hand,
html[data-theme-mode="dark"] .withok-fullscreen-clock .works-instagram__clock-tick,
html[data-theme-mode="dark"] .withok-fullscreen-clock .works-instagram__clock-hand {
  stroke: var(--color-blue-link);
}

html[data-theme-mode="dark"] .withok-fullscreen-clock .withok-hover-corner,
html[data-theme-mode="dark"] .withok-fullscreen-clock .works-instagram__corner,
html[data-theme-mode="dark"] .withok-fullscreen-clock .withok-hover-crosshair,
html[data-theme-mode="dark"] .withok-fullscreen-clock .works-instagram__crosshair {
  background: var(--color-blue-link);
}

.withok-hover-clock {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.15s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 3;
}

.withok-hover-clock.is-visible {
  opacity: 1;
  transform: scale(1);
}

:where(.img, .video, figure, .hover-image, .gallery-card-thumb):hover > .withok-hover-clock,
:where(.img, .video, figure, .hover-image, .gallery-card-thumb):focus-within > .withok-hover-clock,
.hover-image.visible > .withok-hover-clock {
  opacity: 1;
}

.withok-hover-clock__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.withok-hover-clock__tick,
.withok-hover-clock__hand {
  stroke: var(--withok-hover-line-color, var(--color-blue-link));
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.withok-hover-corner {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: var(--withok-hover-line-color, var(--color-blue-link));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 2;
}


.withok-hover-corner[data-corner="0"] { top: 0; left: 0; }
.withok-hover-corner[data-corner="1"] { top: 0; right: 0; }
.withok-hover-corner[data-corner="2"] { bottom: 0; left: 0; }
.withok-hover-corner[data-corner="3"] { bottom: 0; right: 0; }

:where(.img, .video, figure, .hover-image, .gallery-card-thumb):hover > .withok-hover-corner,
:where(.img, .video, figure, .hover-image, .gallery-card-thumb):focus-within > .withok-hover-corner,
.hover-image.visible > .withok-hover-corner {
  opacity: 1;
  transform: scale(1);
}

.withok-hover-crosshair {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background: var(--withok-hover-line-color, var(--color-blue-link));
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.withok-hover-crosshair[data-axis="h"] {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-0.5px) scaleX(0);
  transform-origin: center;
}

.withok-hover-crosshair[data-axis="v"] {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-0.5px) scaleY(0);
  transform-origin: center;
}

:where(.img, .video, figure, .hover-image, .gallery-card-thumb):hover > .withok-hover-crosshair,
:where(.img, .video, figure, .hover-image, .gallery-card-thumb):focus-within > .withok-hover-crosshair,
.hover-image.visible > .withok-hover-crosshair {
  opacity: 1;
}

:where(.img, .video, figure, .hover-image, .gallery-card-thumb):hover > .withok-hover-crosshair[data-axis="h"],
:where(.img, .video, figure, .hover-image, .gallery-card-thumb):focus-within > .withok-hover-crosshair[data-axis="h"],
.hover-image.visible > .withok-hover-crosshair[data-axis="h"] {
  transform: translateY(-0.5px) scaleX(1);
}

:where(.img, .video, figure, .hover-image, .gallery-card-thumb):hover > .withok-hover-crosshair[data-axis="v"],
:where(.img, .video, figure, .hover-image, .gallery-card-thumb):focus-within > .withok-hover-crosshair[data-axis="v"],
.hover-image.visible > .withok-hover-crosshair[data-axis="v"] {
  transform: translateX(-0.5px) scaleY(1);
}