/**
 * iRinBlog (akemierin.com / blog.irinwind.com) — Sakura Glass Design System
 * Style B: Refined Literary & Digital Garden
 * 100% Unified with irinwind.com & newsboard Design Standards
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&family=JetBrains+Mono:wght@400;500;600&family=LINE+Seed+JP:wght@400;700;800&family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {
  --font-heading: 'Noto Serif SC', 'Noto Serif JP', 'Source Han Serif SC', serif;
  --font-heading-ja: 'Noto Serif JP', 'Noto Serif SC', 'Source Han Serif JP', serif;
  --font-body-zh: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", serif;
  --font-body-ja: 'LINE Seed JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
  --font-body-en: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --main-gradient: linear-gradient(135deg, rgba(244, 114, 182, 0.20), rgba(129, 140, 248, 0.12)) !important;
  --strong-gradient: linear-gradient(135deg, #f472b6 0%, #c084fc 50%, #818cf8 100%) !important;
  --theme-transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Design System Color Tokens: DARK THEME (Default: #0d0f1a)
   ========================================================================== */
.theme-dark {
  --background-primary: #0d0f1a !important;
  --background-primary-alt: #090a12 !important;
  --background-secondary: rgba(19, 22, 39, 0.72) !important;
  --background-secondary-alt: #131627 !important;
  --background-trans: rgba(244, 114, 182, 0.08) !important;
  --skeleton-bg: rgba(255, 255, 255, 0.06) !important;
  --skeleton-hl: rgba(244, 114, 182, 0.14) !important;

  --text-bright: #f8fafc !important;
  --text-normal: #cbd5e1 !important;
  --text-accent: #f472b6 !important;
  --text-sub-accent: #a78bfa !important;
  --text-dim: #94a3b8 !important;
  --text-faint: #64748b !important;

  --text-title-h1: #f8fafc !important;
  --text-title-h2: #f1f5f9 !important;
  --text-title-h3: #f1f5f9 !important;
  --text-title-h4: #e2e8f0 !important;
  --text-title-h5: #e2e8f0 !important;
  --text-link: #f472b6 !important;
  --text-a: #f472b6 !important;
  --text-a-hover: #fb7185 !important;

  --bg-accent-55: rgba(244, 114, 182, 0.55) !important;
  --bg-sub-accent-55: rgba(129, 140, 248, 0.55) !important;
  --bg-accent-05: rgba(244, 114, 182, 0.06) !important;

  --accent-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 0 20px rgba(244, 114, 182, 0.14) !important;
  --sub-accent-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 0 20px rgba(129, 140, 248, 0.14) !important;
}

/* ==========================================================================
   Design System Color Tokens: LIGHT THEME (#faf7f5)
   ========================================================================== */
.theme-light {
  --background-primary: #faf7f5 !important;
  --background-primary-alt: #f3efe9 !important;
  --background-secondary: rgba(255, 255, 255, 0.88) !important;
  --background-secondary-alt: #ffffff !important;
  --background-trans: rgba(219, 39, 119, 0.06) !important;
  --skeleton-bg: rgba(0, 0, 0, 0.05) !important;
  --skeleton-hl: rgba(219, 39, 119, 0.10) !important;

  --text-bright: #0f172a !important;
  --text-normal: #334155 !important;
  --text-accent: #db2777 !important;
  --text-sub-accent: #7c3aed !important;
  --text-dim: #64748b !important;
  --text-faint: #94a3b8 !important;

  --text-title-h1: #0f172a !important;
  --text-title-h2: #1e293b !important;
  --text-title-h3: #1e293b !important;
  --text-title-h4: #334155 !important;
  --text-title-h5: #334155 !important;
  --text-link: #db2777 !important;
  --text-a: #db2777 !important;
  --text-a-hover: #be185d !important;

  --bg-accent-55: rgba(219, 39, 119, 0.55) !important;
  --bg-sub-accent-55: rgba(124, 58, 237, 0.55) !important;
  --bg-accent-05: rgba(219, 39, 119, 0.05) !important;

  --accent-shadow: 0 12px 28px -6px rgba(219, 39, 119, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
  --sub-accent-shadow: 0 12px 28px -6px rgba(124, 58, 237, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   Global Typography & Layout Baseline
   ========================================================================== */
html, body, #App-Wrapper {
  font-family: var(--font-body-zh) !important;
  background-color: var(--background-primary) !important;
  color: var(--text-normal) !important;
  line-height: 1.72 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Language font-family overrides */
html[data-lang="ja"], body[data-lang="ja"], [data-lang="ja"] {
  font-family: var(--font-body-ja) !important;
}

html[data-lang="en"], body[data-lang="en"], [data-lang="en"] {
  font-family: var(--font-body-en) !important;
}

/* Headings always use Noto Serif */
h1, h2, h3, h4, h5, h6,
.article-title,
.site-header,
.sub-title,
.sidebar-box .title {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.015em !important;
}

html[data-lang="ja"] h1,
html[data-lang="ja"] h2,
html[data-lang="ja"] h3,
html[data-lang="ja"] h4,
html[data-lang="ja"] h5,
html[data-lang="ja"] .article-title {
  font-family: var(--font-heading-ja) !important;
}

/* Monospace elements */
code, pre, .font-mono, .code-toolbar {
  font-family: var(--font-mono) !important;
}

/* Soft ambient background overlay matching irinwind.com */
#App-Wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 600px;
  background: radial-gradient(circle at 50% -80px, rgba(244, 114, 182, 0.14) 0%, rgba(129, 140, 248, 0.06) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.theme-light #App-Wrapper::before {
  background: radial-gradient(circle at 50% -80px, rgba(219, 39, 119, 0.08) 0%, rgba(124, 58, 237, 0.04) 45%, transparent 70%);
}

/* Hide harsh legacy background banner */
.app-banner-screen {
  display: none !important;
}

.app-banner-image {
  opacity: 0.10 !important;
  filter: blur(50px) saturate(140%) !important;
}

/* ==========================================================================
   Header Navbar: Floating Sakura Glass Pill (1:1 with irinwind.com)
   ========================================================================== */
.header-container {
  position: sticky !important;
  top: 14px !important;
  z-index: 100 !important;
  padding: 0 1rem !important;
  margin-bottom: 2rem !important;
}

.header-container .site-header {
  background: rgba(19, 22, 39, 0.75) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  border: 1px solid rgba(244, 114, 182, 0.22) !important;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(244, 114, 182, 0.12) !important;
  border-radius: 9999px !important;
  padding: 0.40rem 1.4rem !important;
  margin: 0 auto !important;
  max-width: 1280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-light .header-container .site-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(219, 39, 119, 0.18) !important;
  box-shadow: 0 12px 30px -8px rgba(219, 39, 119, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Hide legacy oversized logo watermark */
.logo-image {
  display: none !important;
}

/* Brand Monogram in Logo */
.site-header .logo-monogram-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: rgba(244, 114, 182, 0.14);
  border: 1px solid rgba(244, 114, 182, 0.35);
  color: #f472b6;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.site-header:hover .logo-monogram-pill {
  transform: rotate(6deg) scale(1.05);
}

.theme-light .site-header .logo-monogram-pill {
  background: rgba(219, 39, 119, 0.10);
  border-color: rgba(219, 39, 119, 0.25);
  color: #db2777;
}

/* Site Brand Text in Header */
.site-header .flex.items-start.self-stretch {
  display: flex !important;
  align-items: center !important;
}

.site-header .flex.flex-col.relative.py-4 {
  padding: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.site-header .flex.flex-col.relative.py-4 > span:first-child {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-bright) !important;
  display: block !important;
}

.site-header .logo-domain-sub {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-dim) !important;
  line-height: 1.2 !important;
  display: block !important;
}

.site-header .flex.flex-col.relative.py-4 > span.font-extrabold {
  display: none !important;
}

/* Horizontal Single-line Navigation Menu */
.site-header nav {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  justify-content: center !important;
}

.site-header nav ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-header nav ul li {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.nav-link {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  color: var(--text-normal) !important;
  padding: 0.35rem 0.80rem !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.nav-link:hover {
  color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.12) !important;
}

.theme-light .nav-link:hover {
  color: #db2777 !important;
  background: rgba(219, 39, 119, 0.08) !important;
}

/* Header Controls (Language / Theme / Search) */
.header-controls {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 1rem !important;
}

.header-controls span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(244, 114, 182, 0.20) !important;
  color: var(--text-normal) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.header-controls span:hover {
  border-color: rgba(244, 114, 182, 0.45) !important;
  color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.12) !important;
  opacity: 1 !important;
}

.theme-light .header-controls span {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(219, 39, 119, 0.18) !important;
  color: var(--text-normal) !important;
}

.theme-light .header-controls span:hover {
  border-color: rgba(219, 39, 119, 0.35) !important;
  color: #db2777 !important;
  background: rgba(219, 39, 119, 0.08) !important;
}

/* ==========================================================================
   Article Cards & Hero Grid: Sakura Glass Panels
   ========================================================================== */
.article-container {
  background: rgba(19, 22, 39, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(244, 114, 182, 0.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 2rem !important;
}

.theme-light .article-container {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(219, 39, 119, 0.14) !important;
  box-shadow: 0 10px 24px -8px rgba(219, 39, 119, 0.08) !important;
}

.article-container:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(244, 114, 182, 0.45) !important;
  box-shadow: 0 16px 36px -10px rgba(244, 114, 182, 0.20) !important;
}

.theme-light .article-container:hover {
  border-color: rgba(219, 39, 119, 0.35) !important;
  box-shadow: 0 16px 32px -10px rgba(219, 39, 119, 0.15) !important;
}

/* Article Card Title */
.article-title {
  font-family: var(--font-heading) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  color: var(--text-bright) !important;
  transition: color 0.18s ease;
}

.article-container:hover .article-title {
  color: #f472b6 !important;
}

.theme-light .article-container:hover .article-title {
  color: #db2777 !important;
}

/* Article Excerpt */
.article-content-main {
  color: var(--text-normal) !important;
  font-size: 14.5px !important;
  line-height: 1.72 !important;
  opacity: 0.90;
}

/* Category & Tag Pills */
.article-content span > b,
.article-content span > ul > li > em {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: rgba(244, 114, 182, 0.10) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(244, 114, 182, 0.25) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-style: normal !important;
}

.theme-light .article-content span > b,
.theme-light .article-content span > ul > li > em {
  background: rgba(219, 39, 119, 0.08) !important;
  color: #db2777 !important;
  border-color: rgba(219, 39, 119, 0.20) !important;
}

/* Editor's Selection Neon Border replaced with Sakura Glass */
.ob-gradient-cut-plate {
  background: rgba(19, 22, 39, 0.75) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(244, 114, 182, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.55), 0 0 20px rgba(244, 114, 182, 0.10) !important;
}

.theme-light .ob-gradient-cut-plate {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(219, 39, 119, 0.18) !important;
  box-shadow: 0 14px 30px -10px rgba(219, 39, 119, 0.10) !important;
}

/* ==========================================================================
   Sidebar: Author Profile & Widgets
   ========================================================================== */
.sidebar-box {
  background: rgba(19, 22, 39, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(244, 114, 182, 0.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.8rem !important;
}

.theme-light .sidebar-box {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(219, 39, 119, 0.14) !important;
  box-shadow: 0 10px 24px -8px rgba(219, 39, 119, 0.08) !important;
}

/* ==========================================================================
   Footer: Exact Replica of irinwind.com System
   ========================================================================== */
#footer {
  margin-top: 4rem !important;
  padding-top: 2.5rem !important;
  padding-bottom: 3.5rem !important;
  border-top: 1px solid rgba(244, 114, 182, 0.15) !important;
  background: transparent !important;
}

.theme-light #footer {
  border-top-color: rgba(219, 39, 119, 0.12) !important;
}

.ib-footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.ib-footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ib-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ib-footer-brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-bright);
  letter-spacing: -0.02em;
}

.ib-footer-brand-domain {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.ib-footer-slogan {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.015em;
}

.ib-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  gap: 0.35rem;
}

.ib-footer-node-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ib-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}

.ib-footer-copyright {
  font-size: 0.72rem;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .ib-footer-container {
    flex-direction: column;
    text-align: center;
  }
  .ib-footer-left,
  .ib-footer-right {
    align-items: center;
    text-align: center;
  }
}