/* v2 public site — custom classes ported from the React prototype
 * (D:\humanweb\src\index.css). Plain CSS on purpose: these are not Tailwind
 * utilities, so they work whether the page is styled by the Tailwind browser
 * runtime or by a future Vite build.
 */

[x-cloak] {
  display: none !important;
}

/* Font pin.
 *
 * Tailwind is present twice on a v2 page: the browser runtime in base.html and
 * the Vite bundle (main.css + daisyUI) imported by main.js. The Vite sheet is
 * injected after this file and re-declares :root{--font-sans}, so overriding
 * that variable — or using the `font-sans` utility — does not survive. Pinning
 * font-family on body.v2-root does, and every descendant inherits it because
 * no v2 element carries a font-family utility.
 *
 * Use pretendard.min.css (family "Pretendard"), NOT pretendard-gov.min.css,
 * whose family is "Pretendard GOV" and would not match this stack.
 */
body.v2-root {
  font-family:
    'Pretendard Variable',
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    'Segoe UI',
    'Malgun Gothic',
    sans-serif !important;
}

body {
  word-break: keep-all;
  overflow-x: hidden;
}

.keep-all {
  word-break: keep-all;
}

.font-display-strong {
  letter-spacing: -0.04em;
  font-weight: 800;
}

/* ---- scrollbars ---- */
.v2-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.v2-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.v2-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.v2-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ---- surfaces ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.shadow-soft {
  box-shadow:
    0 10px 30px -5px rgba(0, 0, 0, 0.05),
    0 4px 12px -2px rgba(0, 0, 0, 0.02);
}

.shadow-glow {
  box-shadow: 0 0 20px rgba(58, 166, 76, 0.3);
}

.shadow-glow-blue {
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
}

/* ---- animations ---- */
@keyframes v2PulseRing {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  80% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.node-pulse::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #0ea5e9;
  opacity: 0;
  animation: v2PulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes v2DashFlow {
  to {
    stroke-dashoffset: -16;
  }
}

.flow-line {
  stroke-dasharray: 8 8;
  animation: v2DashFlow 2s linear infinite;
}

@keyframes v2PingPongLeft {
  0%,
  100% {
    transform: translateX(-14px);
  }
  50% {
    transform: translateX(14px);
  }
}

@keyframes v2PingPongRight {
  0%,
  100% {
    transform: translateX(14px);
  }
  50% {
    transform: translateX(-14px);
  }
}

.animate-ping-pong {
  animation: v2PingPongLeft 2.4s ease-in-out infinite;
}

.animate-ping-pong-reverse {
  animation: v2PingPongRight 2.4s ease-in-out infinite;
}

@keyframes v2InfiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 0.75rem));
  }
}

.animate-infinite-carousel {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: v2InfiniteScroll 35s linear infinite;
}

.animate-infinite-carousel:hover {
  animation-play-state: paused;
}

@keyframes v2FadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: v2FadeIn 0.2s ease-out both;
}

@keyframes v2ScaleUp {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scaleUp {
  animation: v2ScaleUp 0.2s ease-out both;
}

/* Growth bars in the modality / settlement infographics. The React version
 * flipped a boolean on mount; here the width is driven by an inline custom
 * property and Alpine toggles the `is-animated` class.
 */
.grow-bar {
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.grow-bar.is-animated {
  width: var(--bar-width, 0%);
}

@media (prefers-reduced-motion: reduce) {
  .animate-infinite-carousel,
  .animate-ping-pong,
  .animate-ping-pong-reverse,
  .flow-line,
  .node-pulse::after {
    animation: none;
  }
  .grow-bar {
    transition: none;
  }
}

/* ---- rich text from the admin (Summernote) ----
 * The `prose` utility needs @tailwindcss/typography, which this project does
 * not load, so prose-* classes are a no-op: headings render at body size and
 * lists lose their markers. WebBlog.content is authored as real HTML, so it
 * needs these rules to read correctly.
 */
.v2-content {
  color: #374151;
  line-height: 1.75;
}

.v2-content > * + * {
  margin-top: 1em;
}

.v2-content h1,
.v2-content h2,
.v2-content h3,
.v2-content h4 {
  color: #111827;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

.v2-content h1 { font-size: 1.6em; }
.v2-content h2 { font-size: 1.35em; }
.v2-content h3 { font-size: 1.15em; }
.v2-content h4 { font-size: 1.05em; }

.v2-content > :first-child {
  margin-top: 0;
}

.v2-content ul,
.v2-content ol {
  padding-left: 1.4em;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

.v2-content ul { list-style: disc; }
.v2-content ol { list-style: decimal; }
.v2-content ul ul { list-style: circle; }

.v2-content li {
  margin-top: 0.35em;
  padding-left: 0.2em;
}

.v2-content li::marker {
  color: #3aa64c;
}

.v2-content a {
  color: #2c853c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.v2-content strong,
.v2-content b {
  font-weight: 700;
  color: #111827;
}

.v2-content em,
.v2-content i {
  font-style: italic;
}

.v2-content blockquote {
  border-left: 3px solid #aee0b7;
  background: #f8fafc;
  padding: 0.75em 1em;
  border-radius: 0 0.75rem 0.75rem 0;
  color: #4b5563;
}

.v2-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.v2-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925em;
}

.v2-content th,
.v2-content td {
  border: 1px solid #e5e7eb;
  padding: 0.5em 0.75em;
  text-align: left;
}

.v2-content th {
  background: #f8fafc;
  font-weight: 700;
  color: #111827;
}

.v2-content hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1.8em 0;
}

.v2-content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1em;
  border-radius: 0.75rem;
  overflow-x: auto;
  font-size: 0.875em;
}