/* 메모 속 유튜브 링크 → 수집 영상 (2026-10-18, mockups mock-memo-collect-1~4): the link mark and the sticky note. */
/* The play mark is a background on the first line of the address, so a long address never leaves it alone on a line. */
.myc-link {
  --myc-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Crect width='14' height='10' rx='3' fill='%23ff3b30'/%3E%3Cpath d='M5.6 2.6v4.8l3.8-2.4z' fill='white'/%3E%3C/svg%3E");
  display: inline;
  padding: 1px 3px 1px 21px;
  margin: 0 -3px;
  border-radius: 5px;
  background: var(--myc-mark) 3px 50% / 14px 10px no-repeat;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  color: color-mix(in srgb, var(--shared-memo-accent, #e11d48) 80%, #0f172a);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--shared-memo-accent, #e11d48) 38%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background-color .15s ease, text-decoration-color .15s ease;
}
.myc-link.is-on,
.myc-link:hover {
  background-color: color-mix(in srgb, var(--shared-memo-accent, #e11d48) 13%, white);
  text-decoration-color: currentColor;
}
.shared-memo-detail-text a.myc-link { color: color-mix(in srgb, var(--shared-memo-accent, #e11d48) 80%, #0f172a); }

.myc-pop {
  --myc-accent: #e11d48;
  --myc-arrow: 24px;
  position: fixed;
  z-index: 420;
  width: 292px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--myc-accent) 22%, #dfe5ec);
  border-top: 4px solid var(--myc-accent);
  border-radius: 12px;
  background: linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--myc-accent) 7%, #fff) 100%);
  box-shadow: 0 22px 48px rgba(17, 34, 55, .22), 0 3px 8px rgba(17, 34, 55, .08);
  color: #1e293b;
  font-family: inherit;
  transform: rotate(-.7deg);
  animation: mycIn .2s cubic-bezier(.2, .8, .3, 1);
}
.myc-pop[hidden] { display: none; }
.myc-pop::before {
  content: "";
  position: absolute;
  left: var(--myc-arrow);
  top: -10px;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--myc-accent);
  transform: rotate(45deg);
}
.myc-pop.is-above::before {
  top: auto;
  bottom: -7px;
  background: color-mix(in srgb, var(--myc-accent) 7%, #fff);
  border-right: 1px solid color-mix(in srgb, var(--myc-accent) 22%, #dfe5ec);
  border-bottom: 1px solid color-mix(in srgb, var(--myc-accent) 22%, #dfe5ec);
}
.myc-pop.is-docked { right: 22px; bottom: 22px; left: auto !important; top: auto !important; transform: none; }
.myc-pop.is-docked::before { display: none; }
@keyframes mycIn { from { opacity: 0; translate: 0 -4px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }

.myc-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 11px; align-items: center; }
.myc-th { aspect-ratio: 16 / 9; border-radius: 7px; background: #1b2741 center / cover no-repeat; box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }
.myc-tx { min-width: 0; }
.myc-tx b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.myc-tx small { display: block; margin-top: 3px; overflow: hidden; font-size: 11px; font-weight: 700; color: #8792a2; white-space: nowrap; text-overflow: ellipsis; }
.myc-skel { display: block; height: 10px; margin: 4px 0; border-radius: 5px; background: linear-gradient(90deg, #eef1f5, #f8fafc, #eef1f5); background-size: 200% 100%; animation: mycShine 1.2s linear infinite; }
.myc-skel.is-short { width: 55%; }
@keyframes mycShine { to { background-position: -200% 0; } }
.myc-chip {
  display: inline-flex;
  align-items: center;
  height: 19px;
  margin-top: 5px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--myc-accent) 10%, #fff);
  color: var(--myc-accent);
  font-size: 10.5px;
  font-weight: 900;
}

.myc-act { display: flex; gap: 6px; margin-top: 11px; }
.myc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: var(--myc-accent);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--myc-accent) 30%, transparent);
  cursor: pointer;
  transition: filter .15s ease, translate .15s ease;
}
.myc-btn:hover:not(:disabled) { filter: brightness(1.06); translate: 0 -1px; }
.myc-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--myc-accent) 60%, #fff); outline-offset: 2px; }
.myc-btn.is-ghost { flex: 0 0 auto; padding: 0 14px; border: 1px solid #e3e8ee; background: rgba(255, 255, 255, .85); color: #526075; box-shadow: none; }
.myc-btn.is-busy { background: color-mix(in srgb, var(--myc-accent) 65%, #334155); cursor: default; }
.myc-btn i { width: 11px; height: 11px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: mycSpin .8s linear infinite; }
@keyframes mycSpin { to { transform: rotate(360deg); } }
.myc-bar { height: 3px; margin-top: 9px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--myc-accent) 12%, #eef1f5); }
.myc-bar span { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--myc-accent); animation: mycSlide 1.3s ease-in-out infinite; }
@keyframes mycSlide { from { translate: -100% 0; } to { translate: 250% 0; } }
.myc-done { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; font-size: 12px; font-weight: 900; color: #0f8a4b; }
.myc-done span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #dcf5e7; font-size: 10px; }
.myc-fail { margin: 0 0 9px; font-size: 12px; font-weight: 800; color: #c2410c; }

@media (prefers-reduced-motion: reduce) {
  .myc-pop, .myc-skel, .myc-bar span, .myc-btn i { animation: none; }
}
@media (max-width: 520px) {
  .myc-pop { width: min(292px, calc(100vw - 16px)); }
}