/*
 * TRiNOV WEBLOG fixed shell glass + footer content — synchronized with
 * trinov.dev material pass 06 (approved pass-03 glass; light header tint =
 * light --bg-deep #d1d6d2, Sean 2026-10-05) and its current four-column footer.
 * 6 (2026-10-06): footer gains the moAI related-site link (same as trinov.dev
 * styles-moai-1.css), the narrow footer abbreviates earlier for three links,
 * post bodies get https links, and cover cards stack on phones.
 * 7 (2026-10-07): at 440px and below the centered W E B L O G title met the
 * theme button (the right 1fr column was narrower than the controls); there the
 * bar flows brand · title · controls with the title centered between them.
 */

:root {
  --footer-bar-height: 74px;
  --shell-header-surface: rgba(210, 213, 205, 0.1);
  --shell-footer-surface: rgba(210, 213, 205, 0.1);
  --shell-sheen:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.052) 0%,
      rgba(255, 255, 255, 0.014) 45%,
      rgba(255, 255, 255, 0) 72%);
  --shell-saturation: 1.08;
  --shell-highlight: rgba(255, 255, 255, 0.065);
  --shell-lowlight: rgba(0, 0, 0, 0.08);
  --shell-depth: rgba(0, 0, 0, 0.14);
}

html[data-theme="light"] {
  --shell-header-surface: rgba(209, 214, 210, 0.38);
  --shell-footer-surface: rgba(178, 186, 182, 0.27);
  --shell-sheen:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.065) 45%,
      rgba(255, 255, 255, 0) 72%);
  --shell-saturation: 1.03;
  --shell-highlight: rgba(255, 255, 255, 0.56);
  --shell-lowlight: rgba(20, 27, 23, 0.035);
  --shell-depth: rgba(33, 41, 36, 0.065);
}

.site-header.glass,
.site-footer.glass {
  z-index: 21;
  background-image: var(--shell-sheen);
  border-color: var(--line);
  backdrop-filter: blur(20px) saturate(var(--shell-saturation));
  -webkit-backdrop-filter: blur(20px) saturate(var(--shell-saturation));
}

.site-header.glass,
.site-header.glass.scrolled {
  top: 24px;
  background-color: var(--shell-header-surface);
  box-shadow:
    inset 0 1px 0 var(--shell-highlight),
    inset 0 -1px 0 var(--shell-lowlight),
    0 12px 34px var(--shell-depth);
}

.site-footer.glass {
  height: var(--footer-bar-height);
  background-color: var(--shell-footer-surface);
  box-shadow:
    inset 0 1px 0 var(--shell-highlight),
    inset 0 -1px 0 var(--shell-lowlight),
    0 -12px 34px var(--shell-depth);
}

.site-footer > .footer-copyright {
  display: block;
  color: var(--text-secondary, #aeb5b0);
  font-size: 8px;
  font-weight: 450;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.site-footer > .footer-tagline {
  font-size: 13px;
}

.footer-network {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-self: start;
  gap: 17px;
}

.site-footer .footer-network a {
  position: relative;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary, #aeb5b0);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.footer-network a + a::before {
  width: 1px;
  height: 18px;
  margin-right: 11px;
  background: var(--line);
  content: "";
}

.footer-lab96-logotype {
  display: inline-flex;
  width: 31px;
  height: 10px;
  align-items: center;
  font: 650 16px/1 "Pretendard", sans-serif;
  letter-spacing: -0.04em;
}

.footer-moble-logotype {
  display: inline-flex;
  width: 40px;
  height: 10px;
  align-items: center;
  font: 500 16px/1 "Pretendard", sans-serif;
  letter-spacing: -0.03em;
}

.footer-moai-logotype {
  display: inline-flex;
  width: 42px;
  height: 12px;
  align-items: center;
  font: 760 16px/1 "Pretendard", sans-serif;
  letter-spacing: -0.04em;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .footer-lab96-logotype,
  .footer-moble-logotype,
  .footer-moai-logotype {
    overflow: hidden;
    background-color: currentColor;
    text-indent: -999em;
  }

  .footer-lab96-logotype {
    -webkit-mask: url("/logo/lab96-milling-lockup-v1.svg") center / contain no-repeat;
    mask: url("/logo/lab96-milling-lockup-v1.svg") center / contain no-repeat;
  }

  .footer-moble-logotype {
    -webkit-mask: url("/logo/moble-wordmark-outline-v1.svg") center / contain no-repeat;
    mask: url("/logo/moble-wordmark-outline-v1.svg") center / contain no-repeat;
  }

  .footer-moai-logotype {
    -webkit-mask: url("/logo/moai-lockup-v1.svg") center / contain no-repeat;
    mask: url("/logo/moai-lockup-v1.svg") center / contain no-repeat;
  }
}

.footer-network i {
  font-size: 11px;
  font-style: normal;
  transition: transform 0.18s ease;
}

.footer-network a:hover,
.footer-network a:focus-visible {
  color: var(--ink);
}

.footer-network a:hover i,
.footer-network a:focus-visible i {
  transform: translate(2px, -2px);
}

.site-footer > a:last-child {
  color: var(--text-secondary, #aeb5b0);
}

@media (max-width: 900px) {
  .site-footer {
    grid-template-columns: 1fr auto;
    gap: 18px;
  }

  .site-footer > .footer-copyright {
    display: block;
  }

  .site-footer > .footer-tagline,
  .site-footer > a:last-child {
    display: none;
  }

  .footer-network {
    justify-self: end;
  }
}

@media (max-width: 600px) {
  .site-header.glass,
  .site-header.glass.scrolled {
    top: 14px;
  }

  .site-footer {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 0 16px;
  }

  .site-footer > .footer-copyright {
    font-size: 7px;
    letter-spacing: 0.06em;
  }

  .footer-network {
    gap: 11px;
  }

  .footer-network a {
    gap: 5px;
  }

  .footer-network a + a::before {
    margin-right: 7px;
  }

  .footer-lab96-logotype {
    width: 29px;
    height: 9.5px;
  }

  .footer-moble-logotype {
    width: 36.5px;
    height: 9.5px;
  }

  .footer-moai-logotype {
    width: 40px;
    height: 11.4px;
  }

  .post-card.has-cover {
    grid-template-columns: 1fr;
  }

  .post-card.has-cover .cover {
    order: -1;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 430px) {
  .site-footer .footer-rights {
    display: none;
  }
}

@media (max-width: 360px) {
  .footer-network i {
    display: none;
  }
}

.post-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.post-body a:hover,
.post-body a:focus-visible {
  color: var(--accent-text, var(--ink));
}

.post-body img {
  height: auto;
}

/* Portrait photos (sized image blocks taller than wide) stay within one screen. */
.post-body figure.is-portrait img {
  width: min(100%, 520px);
  margin-inline: auto;
}

/* Windows uses the same approved live glass; no reduced-transparency override. */

@media (max-width: 440px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .weblog-title {
    min-width: 0;
    overflow: hidden;
  }
}