Aislo/A00_Common/spreadsheet/spreadsheet_links.css

/* spreadsheet_links.css (주인 D) — 아래 알약 막대 · 연결 칸 세모 · 자재 고르기 창 */

.ss-links {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ss-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-4);
  padding: 2px 10px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-text-body);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ss-link small {
  color: var(--color-text-secondary);
}

.ss-link code {
  font-size: 11px;
  color: var(--color-accent);
}

/* 이은 알약 색(40-3) — 색상 = 알약 키(`--ss-link-h` · spreadsheet_link_color) · 밝기 · 옅기 = 테마 */
.ss {
  --ss-link-s: 70%;
  --ss-link-l: 31%;
  --ss-link-fill: 0.16;
}

:root[data-theme="dark"] .ss {
  --ss-link-l: 66%;
  --ss-link-fill: 0.26;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ss {
    --ss-link-l: 66%;
    --ss-link-fill: 0.26;
  }
}

/* 연결됨 — 알약 색 테두리 · 왼쪽 띠 · 옅은 배경(글은 본문 색 그대로 · 읽힘) */
.ss-link.is-linked {
  border-color: hsl(var(--ss-link-h, 0) var(--ss-link-s) var(--ss-link-l));
  background: hsl(var(--ss-link-h, 0) var(--ss-link-s) 50% / var(--ss-link-fill));
  box-shadow: inset 4px 0 0 hsl(var(--ss-link-h, 0) var(--ss-link-s) var(--ss-link-l));
}

.ss-link.is-linked code {
  color: inherit;
}

.ss-link[draggable="true"] {
  cursor: grab;
}

/* 이은 칸 — 알약 색 옅게(칸 글 위 · 누름은 칸으로 지나감) */
.ss-link-cell {
  position: absolute;
  z-index: 2;
  background: hsl(var(--ss-link-h, 0) var(--ss-link-s) 50% / var(--ss-link-fill));
  pointer-events: none;
}

/* 알약을 끌 때 놓일 칸 */
.ss-link-drop {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border: 2px dashed var(--color-accent);
  pointer-events: none;
}

.ss-link--add {
  border-style: dashed;
  color: var(--color-text-secondary);
}

/* 연결 칸 왼아래 세모(초록 오류 세모는 왼위 · 빨강 메모는 오른위) */
.ss-link-dot {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-left: 6px solid hsl(var(--ss-link-h, 0) var(--ss-link-s) var(--ss-link-l));
  pointer-events: none;
}

.ss-links__pick {
  position: absolute;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.ss-links__search {
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-text-body);
  font: inherit;
}

.ss-links__list {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow: auto;
}

.ss-links__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--spacing-8);
  padding: 4px 6px;
  border: none;
  background: none;
  color: var(--color-text-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ss-links__row:hover {
  background: var(--color-mist-violet);
}

.ss-links__note {
  padding: 4px 6px;
  color: var(--color-text-muted);
}

/* 알약으로 이동한 칸 — 굵은 테두리 + 채움 깜빡임(1.6초 · 끝나면 스스로 지워짐) */
.ss-link-flash {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border: 3px solid var(--color-accent);
  pointer-events: none;
  animation: ss-link-flash 1.6s ease-out 1 both;
}

@keyframes ss-link-flash {
  0%,
  40%,
  80% {
    background: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  20%,
  60% {
    background: transparent;
  }
  100% {
    background: transparent;
    opacity: 0;
  }
}

/* 칸 하나에 알약 여럿 — 오른위 작은 수(먼저 이은 알약 색) */
.ss-link-count {
  position: absolute;
  z-index: 3;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: hsl(var(--ss-link-h, 0) var(--ss-link-s) var(--ss-link-l));
  color: var(--color-canvas);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  transform: translate(-100%, 0);
  pointer-events: none;
}

/* 칸을 골랐을 때 그 칸의 알약 — 굵은 테두리 + 바깥 고리(칸이 바뀐 첫 그림만 한 번 반짝) */
.ss-link.is-here {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  font-weight: 600;
}

.ss-link.is-pop {
  animation: ss-link-pop 1.2s ease-out 1 both;
}

@keyframes ss-link-pop {
  0%,
  40%,
  80% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  20%,
  60%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* 일위대가에 없는 알약 — ⚠ + 점선 붉은 테두리 + [×] */
.ss-link.is-orphan {
  border: 1px dashed var(--color-danger);
  color: var(--color-danger);
}

.ss-link__x {
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 50%;
  font-weight: 700;
  cursor: pointer;
}

.ss-link__x:hover {
  background: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.ss-link-cell.is-orphan {
  outline: 1px dashed var(--color-danger);
  outline-offset: -2px;
}

/* 보낸 범위(도면 표) — 점선 테두리(채움 없음) + 왼위 이름표 */
.ss-link-range {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  border: 2px dashed var(--color-accent);
  pointer-events: none;
}

.ss-link-range__tag {
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 0 4px;
  border-radius: 3px 3px 0 0;
  background: var(--color-accent);
  color: var(--color-canvas);
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}