/*
 * annotation-video-player-v6의 instruction-ui-v2 / instruction-ui-v3 / non-destructive-test
 * Overlay.svelte 3개(및 quiz-video-player/quiz-v1과 겹치는 일부 규칙)에서 텍스트 그대로
 * 중복돼 있던 <style> 규칙을 모은 파일. legacy-ui/PRPO(그룹 A)는 이 파일을 참조하지 않고
 * 클래스명 일부(.subtask-list-button, .overlay-popup 등)가 겹치므로, 모든 선택자를
 * [data-overlay-family="v5"] 아래로 스코프해 그룹 A로 새어나가지 않도록 한다.
 * (akview-maas의 annotation-popup.css 분리 선례를 구조적으로만 참고 -- 값은 이 프로젝트
 * 자체 값을 그대로 유지, maas의 CSS를 이식하지 않음)
 */

[data-overlay-family="v5"].layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  --seeker-bar-height: 35px;
}

[data-overlay-family="v5"].layers > * {
  position: absolute;
}

[data-overlay-family="v5"] .subtask-list-button {
  position: absolute;
  box-sizing: border-box;
  pointer-events: all;
  cursor: pointer;
  bottom: calc(var(--seeker-bar-height) + 1%);
  top: auto;
  left: 92.5%;
  width: 5.2%;
  height: 9.3%;
  border-radius: 50%;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

[data-overlay-family="v5"] .toggle-mute-button {
  pointer-events: all;
  box-sizing: border-box;
  z-index: 1;

  position: absolute;
  bottom: calc(var(--seeker-bar-height) + 11.5%);
  top: auto;
  left: 86.5%;
  width: 5%;
  height: 8.9%;
  border: 0px solid cyan;
  border-radius: 25px;

  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

[data-overlay-family="v5"] .toggle-fullscreen-button {
  pointer-events: all;
  box-sizing: border-box;
  z-index: 1;

  position: absolute;
  bottom: calc(var(--seeker-bar-height) + 11.5%);
  top: auto;
  left: 92.5%;
  width: 5%;
  height: 8.9%;
  border: 0px solid cyan;

  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/* Cycles the manual panel through its three views -- collapsed -> expanded ->
   hidden -> collapsed (see cycleInstructionPanelView in the instruction-ui-v2/v3
   Overlay.svelte). Formerly a two-state toggle button (.toggle-instruction-button). */
[data-overlay-family="v5"] .cycle-instruction-button {
  position: absolute;
  display: block;
  box-sizing: border-box;
  bottom: calc(var(--seeker-bar-height) + 1%);
  top: auto;
  left: 86.5%;
  width: 5.2%;
  height: 9.3%;
  z-index: 10;
  cursor: pointer;
  pointer-events: all;
  border: 0px solid cyan;
  border-radius: 50%;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

[data-overlay-family="v5"] .overlay-tag {
  pointer-events: all;
  cursor: pointer;

  stroke: rgba(175, 224, 231, 1);
  fill: url(#overlay-tag-gradient);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  rx: 5px;
  ry: 5px;

  &:active,
  &:focus,
  &:hover {
    stroke: rgba(127, 127, 127, 1);
    fill: rgba(64, 132, 255, 1);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

[data-overlay-family="v5"] .overlay-tag-text {
  font-family: "Liberation Sans", sans-serif;
  font-weight: normal;
  font-size: 20px;
  stroke-width: 0.2px;
  stroke: white;
  fill: white;
}

[data-overlay-family="v5"] .overlay-tag-anchor-line {
  stroke-width: 5px;
  stroke: rgba(131, 185, 185, 0.7);
  stroke-linecap: round;
}

/* Empty annotation -- instruction-ui-v2/v3 전용 (quiz-v1은 "empty" 타입을 쓰지 않아 매칭 대상 없음) */
[data-overlay-family="v5"] .overlay-tag.empty {
  --stroke-color: #aaa;
  --fill-color: #eaeaea;

  stroke: var(--stroke-color);
  fill: var(--fill-color);

  cursor: default;

  &:hover {
    stroke: var(--stroke-color);
    fill: var(--fill-color);
  }
}

[data-overlay-family="v5"] .overlay-tag-text.empty {
  stroke: #aaa;
  fill: #555;
}

[data-overlay-family="v5"] .overlay-tag-anchor-line.empty {
  stroke: rgba(170, 170, 170, 0.7);
}

/* instruction overlay -- instruction-ui-v2/v3/non-destructive-test 전용
   (quiz-v1은 위치/크기 값이 달라 자기 파일에 로컬로 남김) */
@property --instruction-text-size {
  syntax: '<length>';
  inherits: false;
  initial-value: 1vw;
}

[data-overlay-family="v5"] .instruction-overlay {
  position: absolute;
  top: auto;
  left: 15%;
  width: 70%;
  bottom: calc(var(--seeker-bar-height) + 2%);
  height: 20%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  padding: 0;
  overflow: visible;
  border: clamp(1px, 0.3cqw, 3px) solid rgba(87, 248, 255, 1);
  border-radius: 5px;
  pointer-events: all;

  /* Three views the cycle-instruction button rotates through. "collapsed" is the
     class-less default above (short panel above the seeker bar); the other two
     are opt-in modifier classes toggled from instructionPanelView. */
  &.hidden {
    opacity: 0;
    pointer-events: none;
  }

  &.expanded {
    top: 16%;
    height: auto;
  }

  & > * {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    color: white;
    text-align: left;
    margin: 0;
    padding: 0;
  }
}

/* instruction-text -- {@html instructionHTML}로 삽입되는 콘텐츠 스타일링 */
@property --instruction-text-size {
  syntax: '<length>';
  inherits: false;
  initial-value: 16px;
}

[data-overlay-family="v5"] .instruction-overlay .instruction-text {
  --instruction-text-size: min(1.5vw, 24px);
  --instruction-indent-size: 2ch;
  --text-color: white;
  --dimmed-text-color: color-mix(in srgb, var(--text-color) 30%, transparent);
  font-family: "Liberation Sans", sans-serif;
  font-weight: 300;
  /* cbist: 지침 텍스트 크기 튜닝 유지 */
  font-size: clamp(16px, 1vw, 32px);
  line-height: 1.2em;
  scrollbar-width: thin;
  scrollbar-color: var(--dimmed-text-color) transparent;
  scrollbar-gutter: stable;

  /* default as dimmed color */
  color: var(--dimmed-text-color);

  & > h1 {
    all: unset;
    display: block;
    font-size: 1.0em;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
  }

  & > h2 {
    all: unset;
    display: block;
    font-size: 1.0em;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
  }

  ul {
    list-style-type: none;
    text-indent: 0ch;
    margin: 0;
    padding: 0;
  }

  li {
    margin-left: var(--instruction-indent-size, 2ch);
  }

  .highlight, .highlight * {
    color: var(--text-color);
  }

  .highlight, .clickable.highlight {
    background-color: rgba(200, 207, 243, 0.5);
  }

  .clickable {
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--text-color);
      background-color: rgba(228, 255, 73, 0.5);
    }
  }

  a {
    color: white;
    font-weight: bold;
    text-decoration: underline;

    &:hover {
      color: rgb(252, 92, 0);
    }
  }
}

/* minimap -- instruction-ui-v2/v3/non-destructive-test 전용 위치/크기.
   img 사이징 규칙만 quiz-v1의 자체 .minimap과도 공유(아래 별도 규칙). */
[data-overlay-family="v5"] .minimap {
  position: absolute;
  bottom: calc(var(--seeker-bar-height) + 2%);
  top: auto;
  left: 1%;
  width: 12%;
  height: 20%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  padding: 0;
  overflow: hidden;
  border: clamp(1px, 0.3cqw, 3px) solid rgba(87, 248, 255, 1);
  border-radius: 5px;
  pointer-events: all;

  .layers {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* quiz-v1의 .minimap(bottom-bar 안에 위치, 별도 크기 규칙)에도 그대로 적용되는
   이미지 채움 규칙 -- 두 레이아웃이 완전히 동일하게 쓰던 부분만 공유 */
[data-overlay-family="v5"] .minimap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@property --progress {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

/* task-header -- instruction-ui-v2/v3/non-destructive-test 전용 구조.
   --border-color 기본값은 instruction-ui-v2/non-destructive-test 기준(instruction-ui-v3는
   자기 파일에서 디버그용으로 로컬 override). quiz-v1은 구조 자체가 달라 별도 유지. */
[data-overlay-family="v5"] .task-header {
  position: absolute;
  top: 10px;
  left: 0%;
  width: 100%;
  height: 3em;
  z-index: 10;
  pointer-events: none;
  font-family: "Arial", sans-serif;
  font-size: 1.5vw;
  --border-color: rgb(59,187,227);
  --text-color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  & > * {
    color: var(--text-color);
    text-align: center;
  }

  .left-pad, .right-pad {
    flex: 0 1 15%;
    height: 100%;
    display: flex;
    align-items: center;

    hr {
      display: block;
      flex: 1;
      border: none;
      border: 2px solid var(--border-color);
      border-radius: 99px;
    }
  }


  .left-decoration, .right-decoration {
    flex: 0 0 2%;
    height: 100%;
    border: 2px solid var(--border-color);
    box-sizing: border-box;
  }

  .left-decoration {
    border-radius: 15px 0 0 15px;
    margin: 15px 0.5vw 15px 0.2vw; /* top right bottom left */
  }

  .right-decoration {
    border-radius: 0 15px 15px 0;
    margin: 15px 0.2vw 15px 0.5vw; /* top right bottom left */
  }

  .center {
    flex: 4 1 auto;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    overflow: clip;
    container-type: size;
  }

  h2 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  h3 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--progress);
    height: 100%;
    background-color: rgba(151, 151, 151, 0.7);
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* cbist: z-index 는 SeekerBar(30)보다 높고 서브태스크 목록(50)보다 낮아야 한다. 이 래퍼가
   stacking context 를 만들기 때문에 OverlayPopup 의 inline z-index(1000)는 그 안에서만 유효하다.
   30 으로 같으면 DOM 상 뒤에 오는 SeekerBar 가 팝업 위에 그려진다. */
[data-overlay-family="v5"] .overlay-popup-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;

  .overlay-popup {
    pointer-events: all;
  }
}

[data-overlay-family="v5"] .subtask-list-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* subtask-list의 bottom 위치는 seeker bar 유무에 따라 달라 로컬에서 override 가능하도록
   기본값만 지정(instruction-ui-v2/v3/non-destructive-test 전용, --seeker-bar-height 기준).
   `> .subtask-list` 직계 자식 셀렉터 필수 -- 자식 컴포넌트(default/SubtaskList.svelte)
   내부 목록이 예전에 같은 클래스를 써서 이 규칙에 걸려 position:absolute 되는 바람에
   .subtasklist-wrapper 가 컨테이너 역할을 못 했었다. */
[data-overlay-family="v5"] .subtask-list-layer > .subtask-list {
  position: absolute;
  bottom: var(--seeker-bar-height);
  right: 0;
  font-size: 1rem;
  width: max-content;
  height: 50%;
  pointer-events: all;
  z-index: 50;
}

/* cbist: 좌상단 홈 버튼 (Return to list 타이틀 대신) */
[data-overlay-family="v5"] .home-button {
  all: unset;
  pointer-events: all;
  box-sizing: border-box;

  position: absolute;
  top: 1%;
  left: 1%;
  width: 3%;
  height: 5.4%;
  border: none;
  border-radius: 50%;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgba(255, 255, 255, 0.7);

  &:hover {
    background-color: rgba(255, 255, 255, 1);
  }
}

/* Animation Effects -- instruction-ui-v2/v3/non-destructive-test/quiz-v1 공통 */
@keyframes v5-overlay-blink {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

[data-overlay-family="v5"] .blinking {
  animation: v5-overlay-blink 1s infinite;
}