/* Auto-extracted site styles. HTML files contain structure only. */

/* ============================================================   introduce/create.html   page scope: .kb-page-introduce-create   ============================================================ */

    html.kb-page-introduce-create * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html.kb-page-introduce-create {
      color-scheme: light;
      --bg-primary: #f5f3ee;
      --bg-secondary: rgba(255, 255, 255, 0.86);
      --bg-tertiary: #fbfaf7;
      --card-bg: rgba(255, 255, 255, 0.9);
      --text-primary: #1d1d1f;
      --text-secondary: #6f6659;
      --text-muted: #9a8f80;
      --border-light: rgba(30, 22, 12, 0.10);
      --border-card: rgba(30, 22, 12, 0.07);
      --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.8), 0 18px 42px rgba(62, 44, 22, 0.08);
      --shadow-hover: 0 28px 64px rgba(62, 44, 22, 0.14);
      --link-color: #8a642f;
      --button-bg: rgba(30, 22, 12, 0.055);
      --button-hover: rgba(30, 22, 12, 0.10);
      --header-bg: rgba(245, 243, 238, 0.78);
      --scroll-track: rgba(30, 22, 12, 0.08);
      --scroll-thumb: rgba(138, 100, 47, 0.42);
      --timeline-line: rgba(138, 100, 47, 0.22);
      --gold: #b8965d;
      --gold-soft: rgba(184, 150, 93, 0.18);
      --gold-deep: #7c5726;
      --champagne: #e8d3a1;
      --black: #111113;
      --creative-soft: rgba(184, 150, 93, 0.16);
      --accent-gradient: linear-gradient(135deg, #1d1d1f 0%, #7b6a4e 100%);
      --creative-gradient: linear-gradient(135deg, #1d1d1f 0%, #7c5726 46%, #d7bd82 100%);
    }

    html.kb-page-introduce-create .dark-theme, html.kb-page-introduce-create.dark-theme {
      color-scheme: dark;
      --bg-primary: #000000;
      --bg-secondary: rgba(0, 0, 0, 0.84);
      --bg-tertiary: #111113;
      --card-bg: rgba(22, 22, 24, 0.88);
      --text-primary: #f5f5f7;
      --text-secondary: #b6ad9d;
      --text-muted: #8f8576;
      --border-light: rgba(232, 211, 161, 0.16);
      --border-card: rgba(232, 211, 161, 0.10);
      --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 42px rgba(0, 0, 0, 0.40);
      --shadow-hover: 0 28px 64px rgba(0, 0, 0, 0.62);
      --link-color: #d6b873;
      --button-bg: rgba(232, 211, 161, 0.08);
      --button-hover: rgba(232, 211, 161, 0.14);
      --header-bg: rgba(0, 0, 0, 0.78);
      --scroll-track: rgba(232, 211, 161, 0.10);
      --scroll-thumb: rgba(232, 211, 161, 0.40);
      --timeline-line: rgba(232, 211, 161, 0.20);
      --gold: #d6b873;
      --gold-soft: rgba(214, 184, 115, 0.14);
      --gold-deep: #9d7737;
      --champagne: #f0dca6;
      --black: #050506;
      --creative-soft: rgba(214, 184, 115, 0.12);
      --accent-gradient: linear-gradient(135deg, #f5f5f7 0%, #b6ad9d 100%);
      --creative-gradient: linear-gradient(135deg, #fff8df 0%, #d6b873 48%, #8d672d 100%);
    }

    html.kb-page-introduce-create {
      scroll-behavior: smooth;
    }

    body.kb-page-introduce-create {
      min-height: 100vh;
      background:
        radial-gradient(circle at 14% 0%, rgba(232, 211, 161, 0.24), transparent 30%),
        radial-gradient(circle at 86% 8%, rgba(124, 87, 38, 0.12), transparent 28%),
        radial-gradient(circle at 50% 18%, rgba(17, 17, 19, 0.055), transparent 36%),
        var(--bg-primary);
      font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: var(--text-primary);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transition: background-color 0.3s ease, color 0.2s ease;
    }

    html.kb-page-introduce-create .dark-theme body, html.kb-page-introduce-create.dark-theme body {
      background:
        radial-gradient(circle at 14% 0%, rgba(214, 184, 115, 0.14), transparent 30%),
        radial-gradient(circle at 86% 8%, rgba(141, 103, 45, 0.12), transparent 28%),
        radial-gradient(circle at 50% 18%, rgba(255, 248, 223, 0.035), transparent 36%),
        var(--bg-primary);
    }

    html.kb-page-introduce-create a {
      color: var(--link-color);
      text-decoration: none;
    }

    html.kb-page-introduce-create code {
      padding: 2px 6px;
      border-radius: 7px;
      background: var(--button-bg);
      color: var(--text-primary);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.92em;
    }

    html.kb-page-introduce-create .container, html.kb-page-introduce-create.container {
      width: min(1080px, calc(100% - 48px));
      margin: 0 auto;
    }

    html.kb-page-introduce-create .site-header, html.kb-page-introduce-create.site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 10px 0;
      background: var(--header-bg);
      backdrop-filter: saturate(180%) blur(22px);
      border-bottom: 0.5px solid var(--border-light);
      transition: background-color 0.3s ease, border-color 0.2s ease;
    }

    html.kb-page-introduce-create .navbar, html.kb-page-introduce-create.navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    html.kb-page-introduce-create .navbar strong, html.kb-page-introduce-create.navbar strong {
      font-size: 1.05rem;
      font-weight: 620;
      letter-spacing: -0.02em;
      background: var(--creative-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      white-space: nowrap;
    }

    html.kb-page-introduce-create .navbar nav, html.kb-page-introduce-create.navbar nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      flex-wrap: wrap;
      margin-left: auto;
    }

    html.kb-page-introduce-create .navbar nav a, html.kb-page-introduce-create.navbar nav a {
      color: var(--text-secondary);
      font-size: 0.86rem;
      font-weight: 450;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    html.kb-page-introduce-create .navbar nav a:hover, html.kb-page-introduce-create.navbar nav a:hover {
      color: var(--text-primary);
    }

    html.kb-page-introduce-create .theme-toggle, html.kb-page-introduce-create.theme-toggle {
      width: 38px;
      height: 30px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-light);
      border-radius: 999px;
      color: var(--text-primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.18s ease;
      flex: 0 0 auto;
    }

    html.kb-page-introduce-create .theme-toggle:hover, html.kb-page-introduce-create.theme-toggle:hover {
      background: var(--button-hover);
      transform: translateY(-1px);
    }

    html.kb-page-introduce-create .theme-toggle svg, html.kb-page-introduce-create.theme-toggle svg {
      width: 17px;
      height: 17px;
    }

    html.kb-page-introduce-create .theme-toggle .moon-icon, html.kb-page-introduce-create.theme-toggle .moon-icon,
html.kb-page-introduce-create .dark-theme .theme-toggle .sun-icon, html.kb-page-introduce-create.dark-theme .theme-toggle .sun-icon {
      display: none;
    }

    html.kb-page-introduce-create .dark-theme .theme-toggle .moon-icon, html.kb-page-introduce-create.dark-theme .theme-toggle .moon-icon {
      display: block;
    }

    html.kb-page-introduce-create .hero-map, html.kb-page-introduce-create.hero-map {
      position: relative;
      margin: -1px calc(-50vw + 50%) 0;
      width: 100vw;
      z-index: 1;
    }

    html.kb-page-introduce-create .hero-map-background, html.kb-page-introduce-create.hero-map-background {
      position: relative;
      min-height: clamp(390px, 58vw, 740px);
      background-attachment: fixed;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
    }

    html.kb-page-introduce-create .hero-map-background::before, html.kb-page-introduce-create.hero-map-background::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(245, 243, 238, 0.14), rgba(245, 243, 238, 0.04) 52%, var(--bg-primary) 100%),
        radial-gradient(circle at 56% 34%, transparent 0 25%, rgba(64, 42, 18, 0.16) 76%);
      pointer-events: none;
    }

    html.kb-page-introduce-create .dark-theme .hero-map-background::before, html.kb-page-introduce-create.dark-theme .hero-map-background::before {
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.14) 52%, var(--bg-primary) 100%),
        radial-gradient(circle at 56% 34%, transparent 0 25%, rgba(0, 0, 0, 0.62) 78%);
    }

    html.kb-page-introduce-create .hero-map-overlay, html.kb-page-introduce-create.hero-map-overlay {
      position: absolute;
      left: max(24px, calc((100vw - 1080px) / 2));
      bottom: 34px;
      z-index: 2;
      padding: 18px 20px;
      border-radius: 24px;
      background: rgba(255, 252, 244, 0.68);
      border: 0.5px solid rgba(232, 211, 161, 0.42);
      backdrop-filter: blur(20px) saturate(150%);
      box-shadow: 0 20px 46px rgba(0, 0, 0, 0.12);
    }

    html.kb-page-introduce-create .dark-theme .hero-map-overlay, html.kb-page-introduce-create.dark-theme .hero-map-overlay {
      background: rgba(14, 14, 16, 0.66);
      border-color: rgba(232, 211, 161, 0.16);
    }

    html.kb-page-introduce-create .hero-map-overlay h2, html.kb-page-introduce-create.hero-map-overlay h2 {
      color: var(--text-primary);
      font-size: 0.82rem;
      font-weight: 620;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    html.kb-page-introduce-create .hero-map-overlay p, html.kb-page-introduce-create.hero-map-overlay p {
      color: var(--text-secondary);
      font-size: 0.86rem;
      max-width: 420px;
    }

    html.kb-page-introduce-create .hero, html.kb-page-introduce-create.hero {
      text-align: center;
      padding: 76px 0 42px;
    }

    html.kb-page-introduce-create .eyebrow, html.kb-page-introduce-create.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text-secondary);
      font-size: 0.82rem;
      font-weight: 590;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    html.kb-page-introduce-create .eyebrow::before, html.kb-page-introduce-create.eyebrow::before,
html.kb-page-introduce-create .eyebrow::after, html.kb-page-introduce-create.eyebrow::after {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--border-light);
    }

    html.kb-page-introduce-create .hero h1, html.kb-page-introduce-create.hero h1 {
      margin: 0 auto 18px;
      max-width: 940px;
      font-size: clamp(3.1rem, 8vw, 7.2rem);
      line-height: 0.94;
      font-weight: 620;
      letter-spacing: -0.055em;
      background: var(--creative-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    html.kb-page-introduce-create .hero p, html.kb-page-introduce-create.hero p {
      color: var(--text-secondary);
      font-size: clamp(1.05rem, 2vw, 1.45rem);
      line-height: 1.48;
      max-width: 720px;
      margin: 0 auto;
      font-weight: 430;
    }

    html.kb-page-introduce-create .hero-actions, html.kb-page-introduce-create.hero-actions {
      margin-top: 28px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    html.kb-page-introduce-create .button, html.kb-page-introduce-create.button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 18px;
      border-radius: 999px;
      border: 0.5px solid transparent;
      font-size: 0.92rem;
      font-weight: 510;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    html.kb-page-introduce-create .button:hover, html.kb-page-introduce-create.button:hover {
      transform: translateY(-1px);
    }

    html.kb-page-introduce-create .button-primary, html.kb-page-introduce-create.button-primary {
      color: #fff;
      background: linear-gradient(135deg, #141414 0%, #7c5726 52%, #d6b873 100%);
      box-shadow: 0 10px 26px rgba(124, 87, 38, 0.18);
    }

    html.kb-page-introduce-create .dark-theme .button-primary, html.kb-page-introduce-create.dark-theme .button-primary {
      color: #111113;
      background: linear-gradient(135deg, #fff8df 0%, #d6b873 56%, #8d672d 100%);
    }

    html.kb-page-introduce-create .button-secondary, html.kb-page-introduce-create.button-secondary {
      color: var(--link-color);
      background: var(--button-bg);
      border-color: var(--border-light);
    }

    html.kb-page-introduce-create .grid-4, html.kb-page-introduce-create.grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin: 34px 0 38px;
    }

    html.kb-page-introduce-create .stat-card, html.kb-page-introduce-create.stat-card,
html.kb-page-introduce-create .card, html.kb-page-introduce-create.card,
html.kb-page-introduce-create .landmark-item, html.kb-page-introduce-create.landmark-item,
html.kb-page-introduce-create .back-button, html.kb-page-introduce-create.back-button {
      border: 0.5px solid var(--border-light);
      box-shadow: var(--shadow-soft);
      transition: background-color 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.22s ease;
    }

    html.kb-page-introduce-create .stat-card, html.kb-page-introduce-create.stat-card {
      background: var(--card-bg);
      border-radius: 26px;
      padding: 22px 18px;
      text-align: center;
      backdrop-filter: blur(18px);
    }

    html.kb-page-introduce-create .stat-card:hover, html.kb-page-introduce-create.stat-card:hover,
html.kb-page-introduce-create .card:hover, html.kb-page-introduce-create.card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }

    html.kb-page-introduce-create .stat-card h3, html.kb-page-introduce-create.stat-card h3 {
      color: var(--text-muted);
      font-size: 0.76rem;
      font-weight: 590;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    html.kb-page-introduce-create .stat-card p, html.kb-page-introduce-create.stat-card p {
      color: var(--text-primary);
      font-size: 0.95rem;
      line-height: 1.42;
      font-weight: 450;
    }

    html.kb-page-introduce-create .card, html.kb-page-introduce-create.card {
      position: relative;
      z-index: 2;
      margin: 28px 0;
      padding: clamp(26px, 4vw, 42px);
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 34%),
        var(--card-bg);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    html.kb-page-introduce-create .card::before, html.kb-page-introduce-create.card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(232, 211, 161, 0.20), transparent 28%, transparent 72%, rgba(124, 87, 38, 0.08));
      opacity: 0.55;
    }

    html.kb-page-introduce-create .card > *, html.kb-page-introduce-create.card > * {
      position: relative;
      z-index: 1;
    }

    html.kb-page-introduce-create .card h2, html.kb-page-introduce-create.card h2,
html.kb-page-introduce-create .section-header h2, html.kb-page-introduce-create.section-header h2 {
      color: var(--text-primary);
      font-size: clamp(1.55rem, 3vw, 2.25rem);
      line-height: 1.12;
      font-weight: 620;
      letter-spacing: -0.035em;
      margin-bottom: 18px;
    }

    html.kb-page-introduce-create .card h3, html.kb-page-introduce-create.card h3 {
      color: var(--text-primary);
      font-weight: 590;
      letter-spacing: -0.02em;
    }

    html.kb-page-introduce-create .card p, html.kb-page-introduce-create.card p,
html.kb-page-introduce-create .card li, html.kb-page-introduce-create.card li {
      color: var(--text-secondary);
      line-height: 1.68;
      font-size: 0.98rem;
      font-weight: 430;
    }

    html.kb-page-introduce-create .card ul, html.kb-page-introduce-create.card ul,
html.kb-page-introduce-create .card ol, html.kb-page-introduce-create.card ol {
      padding-left: 1.45rem;
      margin: 14px 0;
    }

    html.kb-page-introduce-create .split-card, html.kb-page-introduce-create.split-card {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
      gap: 26px;
      align-items: center;
    }

    html.kb-page-introduce-create .creative-panel, html.kb-page-introduce-create.creative-panel {
      min-height: 290px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 76% 18%, rgba(232, 211, 161, 0.34), transparent 24%),
        radial-gradient(circle at 20% 26%, rgba(17, 17, 19, 0.10), transparent 24%),
        linear-gradient(145deg, var(--bg-tertiary), var(--card-bg));
      border: 0.5px solid var(--border-card);
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
    }

    html.kb-page-introduce-create .dark-theme .creative-panel, html.kb-page-introduce-create.dark-theme .creative-panel {
      background:
        radial-gradient(circle at 76% 18%, rgba(214, 184, 115, 0.20), transparent 24%),
        radial-gradient(circle at 20% 26%, rgba(255, 248, 223, 0.05), transparent 24%),
        linear-gradient(145deg, #050506, #161617);
    }

    html.kb-page-introduce-create .creative-panel::before, html.kb-page-introduce-create.creative-panel::before {
      content: "";
      width: 188px;
      height: 188px;
      border-radius: 44px;
      background:
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.16) 48% 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(255,255,255,0.16) 48% 52%, transparent 52%),
        linear-gradient(135deg, #111113 0 38%, #7c5726 38% 68%, #d6b873 68% 100%);
      transform: rotate(-9deg);
      box-shadow: 0 30px 70px rgba(62, 44, 22, 0.22);
    }

    html.kb-page-introduce-create .creative-panel::after, html.kb-page-introduce-create.creative-panel::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 211, 161, 0.18), transparent 68%);
      filter: blur(6px);
      pointer-events: none;
    }

    html.kb-page-introduce-create .feature-list, html.kb-page-introduce-create.feature-list {
      display: grid;
      gap: 12px;
      list-style: none;
      padding-left: 0 !important;
    }

    html.kb-page-introduce-create .feature-list li, html.kb-page-introduce-create.feature-list li {
      position: relative;
      padding: 14px 16px 14px 42px;
      border-radius: 18px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-card);
      list-style: none;
    }

    html.kb-page-introduce-create .feature-list li::before, html.kb-page-introduce-create.feature-list li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 22px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--gold);
      box-shadow: 0 0 0 4px var(--creative-soft);
    }

    html.kb-page-introduce-create .freedom-grid, html.kb-page-introduce-create.freedom-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 20px;
    }

    html.kb-page-introduce-create .freedom-item, html.kb-page-introduce-create.freedom-item {
      padding: 18px;
      border-radius: 22px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-card);
    }

    html.kb-page-introduce-create .freedom-item strong, html.kb-page-introduce-create.freedom-item strong {
      display: block;
      color: var(--text-primary);
      font-size: 1.05rem;
      letter-spacing: -0.02em;
      margin-bottom: 7px;
    }

    html.kb-page-introduce-create .freedom-item span, html.kb-page-introduce-create.freedom-item span {
      display: block;
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    html.kb-page-introduce-create .section-header, html.kb-page-introduce-create.section-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 14px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    html.kb-page-introduce-create .section-header h2, html.kb-page-introduce-create.section-header h2 {
      margin-bottom: 0;
    }

    html.kb-page-introduce-create .section-header p, html.kb-page-introduce-create.section-header p {
      color: var(--text-muted);
      font-size: 0.86rem;
      font-weight: 430;
    }

    html.kb-page-introduce-create .landmark-container, html.kb-page-introduce-create.landmark-container {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    html.kb-page-introduce-create .landmark-grid, html.kb-page-introduce-create.landmark-grid {
      display: flex;
      gap: 24px;
      padding: 8px 4px 16px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      flex: 1;
    }

    html.kb-page-introduce-create .landmark-grid::-webkit-scrollbar, html.kb-page-introduce-create.landmark-grid::-webkit-scrollbar {
      height: 4px;
    }

    html.kb-page-introduce-create .landmark-grid::-webkit-scrollbar-track, html.kb-page-introduce-create.landmark-grid::-webkit-scrollbar-track {
      background: var(--scroll-track);
      border-radius: 999px;
    }

    html.kb-page-introduce-create .landmark-grid::-webkit-scrollbar-thumb, html.kb-page-introduce-create.landmark-grid::-webkit-scrollbar-thumb {
      background: var(--scroll-thumb);
      border-radius: 999px;
    }

    html.kb-page-introduce-create .landmark-item, html.kb-page-introduce-create.landmark-item {
      position: relative;
      flex: 0 0 340px;
      min-width: 340px;
      overflow: hidden;
      border-radius: 26px;
      background: var(--bg-tertiary);
      cursor: pointer;
      scroll-snap-align: start;
      opacity: 0.72;
      transform: scale(0.965);
    }

    html.kb-page-introduce-create .landmark-item.active, html.kb-page-introduce-create.landmark-item.active {
      opacity: 1;
      transform: scale(1);
      border-color: color-mix(in srgb, var(--gold), transparent 42%);
      box-shadow: 0 18px 42px rgba(124, 87, 38, 0.16);
    }

    html.kb-page-introduce-create .landmark-item img, html.kb-page-introduce-create.landmark-item img {
      width: 100%;
      height: 190px;
      object-fit: cover;
      display: block;
      background:
        radial-gradient(circle at 75% 20%, rgba(232, 211, 161, 0.28), transparent 22%),
        linear-gradient(135deg, #171719, #e8d3a1);
    }

    html.kb-page-introduce-create .landmark-content, html.kb-page-introduce-create.landmark-content {
      padding: 20px;
      background: color-mix(in srgb, var(--bg-tertiary), transparent 8%);
    }

    html.kb-page-introduce-create .landmark-content h3, html.kb-page-introduce-create.landmark-content h3 {
      font-size: 1.15rem;
      margin-bottom: 8px;
    }

    html.kb-page-introduce-create .landmark-content p, html.kb-page-introduce-create.landmark-content p {
      font-size: 0.86rem;
      line-height: 1.55;
      margin: 5px 0;
    }

    html.kb-page-introduce-create .scroll-btn, html.kb-page-introduce-create.scroll-btn {
      width: 44px;
      height: 44px;
      border: 0.5px solid var(--border-light);
      border-radius: 999px;
      background: var(--card-bg);
      color: var(--text-primary);
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      font-size: 1.15rem;
      flex: 0 0 auto;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    html.kb-page-introduce-create .scroll-btn:hover, html.kb-page-introduce-create.scroll-btn:hover {
      background: var(--button-bg);
      transform: translateY(-1px);
    }

    html.kb-page-introduce-create .scroll-indicators, html.kb-page-introduce-create.scroll-indicators {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 22px;
    }

    html.kb-page-introduce-create .indicator, html.kb-page-introduce-create.indicator {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--text-muted);
      cursor: pointer;
      transition: width 0.2s ease, background 0.2s ease;
      opacity: 0.72;
    }

    html.kb-page-introduce-create .indicator.active, html.kb-page-introduce-create.indicator.active {
      width: 24px;
      background: var(--text-primary);
      opacity: 1;
    }

    html.kb-page-introduce-create .notice-grid, html.kb-page-introduce-create.notice-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 20px;
    }

    html.kb-page-introduce-create .notice-item, html.kb-page-introduce-create.notice-item {
      padding: 18px;
      border-radius: 22px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-card);
    }

    html.kb-page-introduce-create .notice-item strong, html.kb-page-introduce-create.notice-item strong {
      display: block;
      color: var(--text-primary);
      font-size: 1.05rem;
      letter-spacing: -0.02em;
      margin-bottom: 7px;
    }

    html.kb-page-introduce-create .notice-item span, html.kb-page-introduce-create.notice-item span {
      display: block;
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    html.kb-page-introduce-create .timeline, html.kb-page-introduce-create.timeline {
      display: grid;
      gap: 24px;
      margin-top: 18px;
    }

    html.kb-page-introduce-create .timeline-item, html.kb-page-introduce-create.timeline-item {
      display: flex;
      gap: 24px;
      position: relative;
    }

    html.kb-page-introduce-create .timeline-date, html.kb-page-introduce-create.timeline-date {
      flex: 0 0 104px;
      text-align: right;
      color: var(--text-muted);
      font-size: 0.9rem;
      font-weight: 590;
      padding-top: 4px;
    }

    html.kb-page-introduce-create .timeline-content, html.kb-page-introduce-create.timeline-content {
      flex: 1;
      border-left: 2px solid var(--timeline-line);
      padding-left: 24px;
      padding-bottom: 8px;
    }

    html.kb-page-introduce-create .timeline-content h3, html.kb-page-introduce-create.timeline-content h3 {
      font-size: 1.08rem;
      margin-bottom: 6px;
    }

    html.kb-page-introduce-create .timeline-content p, html.kb-page-introduce-create.timeline-content p {
      font-size: 0.92rem;
      line-height: 1.58;
    }

    html.kb-page-introduce-create .site-footer, html.kb-page-introduce-create.site-footer {
      margin-top: 48px;
      padding: 34px 0;
      border-top: 0.5px solid var(--border-light);
      color: var(--text-muted);
      text-align: center;
      font-size: 0.82rem;
    }

    html.kb-page-introduce-create .back-home, html.kb-page-introduce-create.back-home {
      display: flex;
      justify-content: center;
      margin: 34px 0 24px;
    }

    html.kb-page-introduce-create .back-button, html.kb-page-introduce-create.back-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 999px;
      background: var(--card-bg);
      color: var(--text-primary);
      font-size: 0.9rem;
      font-weight: 500;
      border: 0.5px solid var(--border-light);
      box-shadow: var(--shadow-soft);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    html.kb-page-introduce-create .back-button:hover, html.kb-page-introduce-create.back-button:hover {
      background: var(--button-bg);
      transform: translateY(-2px);
    }

    html.kb-page-introduce-create .back-button svg, html.kb-page-introduce-create.back-button svg {
      transition: transform 0.2s ease;
    }

    html.kb-page-introduce-create .back-button:hover svg, html.kb-page-introduce-create.back-button:hover svg {
      transform: translateX(-3px);
    }

    @media (max-width: 860px){
      html.kb-page-introduce-create .container, html.kb-page-introduce-create.container {
        width: min(100% - 40px, 1080px);
      }

      html.kb-page-introduce-create .navbar, html.kb-page-introduce-create.navbar {
        align-items: flex-start;
      }

      html.kb-page-introduce-create .navbar nav, html.kb-page-introduce-create.navbar nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 14px;
      }

      html.kb-page-introduce-create .grid-4, html.kb-page-introduce-create.grid-4,
html.kb-page-introduce-create .freedom-grid, html.kb-page-introduce-create.freedom-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      html.kb-page-introduce-create .split-card, html.kb-page-introduce-create.split-card {
        grid-template-columns: 1fr;
      }

      html.kb-page-introduce-create .timeline-item, html.kb-page-introduce-create.timeline-item {
        flex-direction: column;
        gap: 8px;
      }

      html.kb-page-introduce-create .timeline-date, html.kb-page-introduce-create.timeline-date {
        width: auto;
        text-align: left;
      }

      html.kb-page-introduce-create .timeline-content, html.kb-page-introduce-create.timeline-content {
        padding-left: 20px;
      }
    }

    @media (max-width: 680px){
      html.kb-page-introduce-create .container, html.kb-page-introduce-create.container {
        width: min(100% - 32px, 1080px);
      }

      html.kb-page-introduce-create .hero-map-background, html.kb-page-introduce-create.hero-map-background {
        min-height: 430px;
        background-attachment: scroll;
      }

      html.kb-page-introduce-create .hero-map-overlay, html.kb-page-introduce-create.hero-map-overlay {
        left: 16px;
        right: 16px;
        bottom: 18px;
      }

      html.kb-page-introduce-create .hero, html.kb-page-introduce-create.hero {
        padding: 56px 0 32px;
      }

      html.kb-page-introduce-create .grid-4, html.kb-page-introduce-create.grid-4,
html.kb-page-introduce-create .freedom-grid, html.kb-page-introduce-create.freedom-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      html.kb-page-introduce-create .card, html.kb-page-introduce-create.card {
        padding: 24px;
        border-radius: 24px;
      }

      html.kb-page-introduce-create .landmark-container, html.kb-page-introduce-create.landmark-container {
        gap: 8px;
      }

      html.kb-page-introduce-create .landmark-item, html.kb-page-introduce-create.landmark-item {
        flex-basis: 286px;
        min-width: 286px;
      }

      html.kb-page-introduce-create .landmark-item img, html.kb-page-introduce-create.landmark-item img {
        height: 172px;
      }

      html.kb-page-introduce-create .scroll-btn, html.kb-page-introduce-create.scroll-btn {
        width: 38px;
        height: 38px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      html.kb-page-introduce-create { scroll-behavior: auto; }
      html.kb-page-introduce-create *,
html.kb-page-introduce-create *::before,
html.kb-page-introduce-create *::after {
        transition: none !important;
      }
    }

/* Extracted inline styles from introduce/create.html */
html.kb-page-introduce-create .kb-page-introduce-create-inline-001 { background-image: url('../createimages/panorama.png'); }


/* ============================================================   introduce/index.html   page scope: .kb-page-introduce-index   ============================================================ */

    html.kb-page-introduce-index * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html.kb-page-introduce-index {
      color-scheme: light;
      --bg-primary: #f5f5f7;
      --bg-secondary: rgba(255, 255, 255, 0.86);
      --bg-tertiary: #fbfbfd;
      --card-bg: rgba(255, 255, 255, 0.9);
      --text-primary: #1d1d1f;
      --text-secondary: #6e6e73;
      --text-muted: #8e8e93;
      --border-light: rgba(0, 0, 0, 0.08);
      --border-card: rgba(0, 0, 0, 0.06);
      --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 42px rgba(0, 0, 0, 0.06);
      --shadow-hover: 0 26px 60px rgba(0, 0, 0, 0.10);
      --link-color: #0066cc;
      --button-bg: rgba(0, 0, 0, 0.05);
      --button-hover: rgba(0, 0, 0, 0.1);
      --header-bg: rgba(245, 245, 247, 0.78);
      --scroll-track: rgba(0, 0, 0, 0.08);
      --scroll-thumb: rgba(0, 0, 0, 0.26);
      --timeline-line: rgba(0, 0, 0, 0.12);
      --green: #8fb46d;
      --green-soft: rgba(143, 180, 109, 0.18);
      --accent-gradient: linear-gradient(135deg, #1d1d1f 0%, #6e6e73 100%);
    }

    html.kb-page-introduce-index .dark-theme, html.kb-page-introduce-index.dark-theme {
      color-scheme: dark;
      --bg-primary: #000000;
      --bg-secondary: rgba(0, 0, 0, 0.82);
      --bg-tertiary: #161617;
      --card-bg: rgba(28, 28, 30, 0.88);
      --text-primary: #f5f5f7;
      --text-secondary: #a1a1a6;
      --text-muted: #8e8e93;
      --border-light: rgba(255, 255, 255, 0.14);
      --border-card: rgba(255, 255, 255, 0.08);
      --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.34);
      --shadow-hover: 0 26px 60px rgba(0, 0, 0, 0.52);
      --link-color: #0a84ff;
      --button-bg: rgba(255, 255, 255, 0.08);
      --button-hover: rgba(255, 255, 255, 0.15);
      --header-bg: rgba(0, 0, 0, 0.78);
      --scroll-track: rgba(255, 255, 255, 0.10);
      --scroll-thumb: rgba(255, 255, 255, 0.32);
      --timeline-line: rgba(255, 255, 255, 0.18);
      --green-soft: rgba(143, 180, 109, 0.12);
      --accent-gradient: linear-gradient(135deg, #f5f5f7 0%, #a1a1a6 100%);
    }

    html.kb-page-introduce-index {
      scroll-behavior: smooth;
    }

    body.kb-page-introduce-index {
      min-height: 100vh;
      background:
        radial-gradient(circle at 18% 0%, rgba(143, 180, 109, 0.12), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(0, 102, 204, 0.07), transparent 30%),
        var(--bg-primary);
      font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: var(--text-primary);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transition: background-color 0.3s ease, color 0.2s ease;
    }

    html.kb-page-introduce-index a {
      color: var(--link-color);
      text-decoration: none;
    }

    html.kb-page-introduce-index code {
      padding: 2px 6px;
      border-radius: 7px;
      background: var(--button-bg);
      color: var(--text-primary);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.92em;
    }

    html.kb-page-introduce-index .container, html.kb-page-introduce-index.container {
      width: min(1080px, calc(100% - 48px));
      margin: 0 auto;
    }

    html.kb-page-introduce-index .site-header, html.kb-page-introduce-index.site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 10px 0;
      background: var(--header-bg);
      backdrop-filter: saturate(180%) blur(22px);
      border-bottom: 0.5px solid var(--border-light);
      transition: background-color 0.3s ease, border-color 0.2s ease;
    }

    html.kb-page-introduce-index .navbar, html.kb-page-introduce-index.navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    html.kb-page-introduce-index .navbar strong, html.kb-page-introduce-index.navbar strong {
      font-size: 1.05rem;
      font-weight: 620;
      letter-spacing: -0.02em;
      background: var(--accent-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      white-space: nowrap;
    }

    html.kb-page-introduce-index .navbar nav, html.kb-page-introduce-index.navbar nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      flex-wrap: wrap;
      margin-left: auto;
    }

    html.kb-page-introduce-index .navbar nav a, html.kb-page-introduce-index.navbar nav a {
      color: var(--text-secondary);
      font-size: 0.86rem;
      font-weight: 450;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    html.kb-page-introduce-index .navbar nav a:hover, html.kb-page-introduce-index.navbar nav a:hover {
      color: var(--text-primary);
    }

    html.kb-page-introduce-index .theme-toggle, html.kb-page-introduce-index.theme-toggle {
      width: 38px;
      height: 30px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-light);
      border-radius: 999px;
      color: var(--text-primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.18s ease;
      flex: 0 0 auto;
    }

    html.kb-page-introduce-index .theme-toggle:hover, html.kb-page-introduce-index.theme-toggle:hover {
      background: var(--button-hover);
      transform: translateY(-1px);
    }

    html.kb-page-introduce-index .theme-toggle svg, html.kb-page-introduce-index.theme-toggle svg {
      width: 17px;
      height: 17px;
    }

    html.kb-page-introduce-index .theme-toggle .moon-icon, html.kb-page-introduce-index.theme-toggle .moon-icon,
html.kb-page-introduce-index .dark-theme .theme-toggle .sun-icon, html.kb-page-introduce-index.dark-theme .theme-toggle .sun-icon {
      display: none;
    }

    html.kb-page-introduce-index .dark-theme .theme-toggle .moon-icon, html.kb-page-introduce-index.dark-theme .theme-toggle .moon-icon {
      display: block;
    }

    html.kb-page-introduce-index .hero-map, html.kb-page-introduce-index.hero-map {
      position: relative;
      margin: -1px calc(-50vw + 50%) 0;
      width: 100vw;
      z-index: 1;
    }

    html.kb-page-introduce-index .hero-map-background, html.kb-page-introduce-index.hero-map-background {
      position: relative;
      min-height: clamp(380px, 56vw, 720px);
      background-attachment: fixed;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
    }

    html.kb-page-introduce-index .hero-map-background::before, html.kb-page-introduce-index.hero-map-background::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(245, 245, 247, 0.10), rgba(245, 245, 247, 0.06) 52%, var(--bg-primary) 100%),
        radial-gradient(circle at 52% 28%, transparent 0 28%, rgba(0, 0, 0, 0.10) 72%);
      pointer-events: none;
    }

    html.kb-page-introduce-index .dark-theme .hero-map-background::before, html.kb-page-introduce-index.dark-theme .hero-map-background::before {
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.18) 52%, var(--bg-primary) 100%),
        radial-gradient(circle at 52% 28%, transparent 0 28%, rgba(0, 0, 0, 0.52) 76%);
    }

    html.kb-page-introduce-index .hero-map-overlay, html.kb-page-introduce-index.hero-map-overlay {
      position: absolute;
      left: max(24px, calc((100vw - 1080px) / 2));
      bottom: 34px;
      z-index: 2;
      padding: 18px 20px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.64);
      border: 0.5px solid rgba(255, 255, 255, 0.44);
      backdrop-filter: blur(20px) saturate(150%);
      box-shadow: 0 20px 46px rgba(0, 0, 0, 0.12);
    }

    html.kb-page-introduce-index .dark-theme .hero-map-overlay, html.kb-page-introduce-index.dark-theme .hero-map-overlay {
      background: rgba(28, 28, 30, 0.62);
      border-color: rgba(255, 255, 255, 0.12);
    }

    html.kb-page-introduce-index .hero-map-overlay h2, html.kb-page-introduce-index.hero-map-overlay h2 {
      color: var(--text-primary);
      font-size: 0.82rem;
      font-weight: 620;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    html.kb-page-introduce-index .hero-map-overlay p, html.kb-page-introduce-index.hero-map-overlay p {
      color: var(--text-secondary);
      font-size: 0.86rem;
      max-width: 420px;
    }

    html.kb-page-introduce-index .hero, html.kb-page-introduce-index.hero {
      text-align: center;
      padding: 76px 0 42px;
    }

    html.kb-page-introduce-index .eyebrow, html.kb-page-introduce-index.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text-secondary);
      font-size: 0.82rem;
      font-weight: 590;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    html.kb-page-introduce-index .eyebrow::before, html.kb-page-introduce-index.eyebrow::before,
html.kb-page-introduce-index .eyebrow::after, html.kb-page-introduce-index.eyebrow::after {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--border-light);
    }

    html.kb-page-introduce-index .hero h1, html.kb-page-introduce-index.hero h1 {
      margin: 0 auto 18px;
      max-width: 900px;
      font-size: clamp(3rem, 7.6vw, 6.8rem);
      line-height: 0.96;
      font-weight: 620;
      letter-spacing: -0.045em;
      background: var(--accent-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    html.kb-page-introduce-index .hero p, html.kb-page-introduce-index.hero p {
      color: var(--text-secondary);
      font-size: clamp(1.05rem, 2vw, 1.45rem);
      line-height: 1.48;
      max-width: 720px;
      margin: 0 auto;
      font-weight: 430;
    }

    html.kb-page-introduce-index .hero-actions, html.kb-page-introduce-index.hero-actions {
      margin-top: 28px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    html.kb-page-introduce-index .button, html.kb-page-introduce-index.button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 18px;
      border-radius: 999px;
      border: 0.5px solid transparent;
      font-size: 0.92rem;
      font-weight: 510;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    html.kb-page-introduce-index .button:hover, html.kb-page-introduce-index.button:hover {
      transform: translateY(-1px);
    }

    html.kb-page-introduce-index .button-primary, html.kb-page-introduce-index.button-primary {
      color: #fff;
      background: var(--link-color);
    }

    html.kb-page-introduce-index .button-secondary, html.kb-page-introduce-index.button-secondary {
      color: var(--link-color);
      background: var(--button-bg);
      border-color: var(--border-light);
    }

    html.kb-page-introduce-index .grid-4, html.kb-page-introduce-index.grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin: 34px 0 38px;
    }

    html.kb-page-introduce-index .stat-card, html.kb-page-introduce-index.stat-card,
html.kb-page-introduce-index .card, html.kb-page-introduce-index.card,
html.kb-page-introduce-index .landmark-item, html.kb-page-introduce-index.landmark-item,
html.kb-page-introduce-index .back-button, html.kb-page-introduce-index.back-button {
      border: 0.5px solid var(--border-light);
      box-shadow: var(--shadow-soft);
      transition: background-color 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.22s ease;
    }

    html.kb-page-introduce-index .stat-card, html.kb-page-introduce-index.stat-card {
      background: var(--card-bg);
      border-radius: 26px;
      padding: 22px 18px;
      text-align: center;
      backdrop-filter: blur(18px);
    }

    html.kb-page-introduce-index .stat-card:hover, html.kb-page-introduce-index.stat-card:hover,
html.kb-page-introduce-index .card:hover, html.kb-page-introduce-index.card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }

    html.kb-page-introduce-index .stat-card h3, html.kb-page-introduce-index.stat-card h3 {
      color: var(--text-muted);
      font-size: 0.76rem;
      font-weight: 590;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    html.kb-page-introduce-index .stat-card p, html.kb-page-introduce-index.stat-card p {
      color: var(--text-primary);
      font-size: 0.95rem;
      line-height: 1.42;
      font-weight: 450;
    }

    html.kb-page-introduce-index .card, html.kb-page-introduce-index.card {
      position: relative;
      z-index: 2;
      margin: 28px 0;
      padding: clamp(26px, 4vw, 42px);
      border-radius: 30px;
      background: var(--card-bg);
      backdrop-filter: blur(18px);
    }

    html.kb-page-introduce-index .card h2, html.kb-page-introduce-index.card h2,
html.kb-page-introduce-index .section-header h2, html.kb-page-introduce-index.section-header h2 {
      color: var(--text-primary);
      font-size: clamp(1.55rem, 3vw, 2.25rem);
      line-height: 1.12;
      font-weight: 620;
      letter-spacing: -0.035em;
      margin-bottom: 18px;
    }

    html.kb-page-introduce-index .card h3, html.kb-page-introduce-index.card h3 {
      color: var(--text-primary);
      font-weight: 590;
      letter-spacing: -0.02em;
    }

    html.kb-page-introduce-index .card p, html.kb-page-introduce-index.card p,
html.kb-page-introduce-index .card li, html.kb-page-introduce-index.card li {
      color: var(--text-secondary);
      line-height: 1.68;
      font-size: 0.98rem;
      font-weight: 430;
    }

    html.kb-page-introduce-index .card ul, html.kb-page-introduce-index.card ul,
html.kb-page-introduce-index .card ol, html.kb-page-introduce-index.card ol {
      padding-left: 1.45rem;
      margin: 14px 0;
    }

    html.kb-page-introduce-index .split-card, html.kb-page-introduce-index.split-card {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
      gap: 26px;
      align-items: center;
    }

    html.kb-page-introduce-index .feature-list, html.kb-page-introduce-index.feature-list {
      display: grid;
      gap: 12px;
      list-style: none;
      padding-left: 0 !important;
    }

    html.kb-page-introduce-index .feature-list li, html.kb-page-introduce-index.feature-list li {
      position: relative;
      padding: 14px 16px 14px 42px;
      border-radius: 18px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-card);
      list-style: none;
    }

    html.kb-page-introduce-index .feature-list li::before, html.kb-page-introduce-index.feature-list li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 22px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 4px var(--green-soft);
    }

    html.kb-page-introduce-index .mod-panel, html.kb-page-introduce-index.mod-panel {
      min-height: 280px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 78% 20%, rgba(143, 180, 109, 0.45), transparent 24%),
        radial-gradient(circle at 20% 20%, rgba(0, 102, 204, 0.14), transparent 24%),
        linear-gradient(145deg, var(--bg-tertiary), var(--card-bg));
      border: 0.5px solid var(--border-card);
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
    }

    html.kb-page-introduce-index .mod-panel::before, html.kb-page-introduce-index.mod-panel::before {
      content: "";
      width: 180px;
      height: 180px;
      border-radius: 38px;
      background:
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.18) 48% 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(255,255,255,0.18) 48% 52%, transparent 52%),
        linear-gradient(135deg, #8fb46d 0 48%, #92754d 48% 100%);
      transform: rotate(8deg);
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14);
    }

    html.kb-page-introduce-index .section-header, html.kb-page-introduce-index.section-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 14px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    html.kb-page-introduce-index .section-header h2, html.kb-page-introduce-index.section-header h2 {
      margin-bottom: 0;
    }

    html.kb-page-introduce-index .section-header p, html.kb-page-introduce-index.section-header p {
      color: var(--text-muted);
      font-size: 0.86rem;
      font-weight: 430;
    }

    html.kb-page-introduce-index .landmark-container, html.kb-page-introduce-index.landmark-container {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    html.kb-page-introduce-index .landmark-grid, html.kb-page-introduce-index.landmark-grid {
      display: flex;
      gap: 24px;
      padding: 8px 4px 16px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      flex: 1;
    }

    html.kb-page-introduce-index .landmark-grid::-webkit-scrollbar, html.kb-page-introduce-index.landmark-grid::-webkit-scrollbar {
      height: 4px;
    }

    html.kb-page-introduce-index .landmark-grid::-webkit-scrollbar-track, html.kb-page-introduce-index.landmark-grid::-webkit-scrollbar-track {
      background: var(--scroll-track);
      border-radius: 999px;
    }

    html.kb-page-introduce-index .landmark-grid::-webkit-scrollbar-thumb, html.kb-page-introduce-index.landmark-grid::-webkit-scrollbar-thumb {
      background: var(--scroll-thumb);
      border-radius: 999px;
    }

    html.kb-page-introduce-index .landmark-item, html.kb-page-introduce-index.landmark-item {
      position: relative;
      flex: 0 0 330px;
      min-width: 330px;
      overflow: hidden;
      border-radius: 26px;
      background: var(--bg-tertiary);
      cursor: pointer;
      scroll-snap-align: start;
      opacity: 0.72;
      transform: scale(0.965);
    }

    html.kb-page-introduce-index .landmark-item.active, html.kb-page-introduce-index.landmark-item.active {
      opacity: 1;
      transform: scale(1);
      border-color: color-mix(in srgb, var(--link-color), transparent 45%);
      box-shadow: 0 18px 42px rgba(0, 102, 204, 0.12);
    }

    html.kb-page-introduce-index .landmark-item img, html.kb-page-introduce-index.landmark-item img {
      width: 100%;
      height: 184px;
      object-fit: cover;
      display: block;
    }

    html.kb-page-introduce-index .landmark-content, html.kb-page-introduce-index.landmark-content {
      padding: 20px;
      background: color-mix(in srgb, var(--bg-tertiary), transparent 8%);
    }

    html.kb-page-introduce-index .landmark-content h3, html.kb-page-introduce-index.landmark-content h3 {
      font-size: 1.15rem;
      margin-bottom: 8px;
    }

    html.kb-page-introduce-index .landmark-content p, html.kb-page-introduce-index.landmark-content p {
      font-size: 0.86rem;
      line-height: 1.55;
      margin: 5px 0;
    }

    html.kb-page-introduce-index .scroll-btn, html.kb-page-introduce-index.scroll-btn {
      width: 44px;
      height: 44px;
      border: 0.5px solid var(--border-light);
      border-radius: 999px;
      background: var(--card-bg);
      color: var(--text-primary);
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      font-size: 1.15rem;
      flex: 0 0 auto;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    html.kb-page-introduce-index .scroll-btn:hover, html.kb-page-introduce-index.scroll-btn:hover {
      background: var(--button-bg);
      transform: translateY(-1px);
    }

    html.kb-page-introduce-index .scroll-indicators, html.kb-page-introduce-index.scroll-indicators {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 22px;
    }

    html.kb-page-introduce-index .indicator, html.kb-page-introduce-index.indicator {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--text-muted);
      cursor: pointer;
      transition: width 0.2s ease, background 0.2s ease;
      opacity: 0.72;
    }

    html.kb-page-introduce-index .indicator.active, html.kb-page-introduce-index.indicator.active {
      width: 24px;
      background: var(--text-primary);
      opacity: 1;
    }

    html.kb-page-introduce-index .timeline, html.kb-page-introduce-index.timeline {
      display: grid;
      gap: 24px;
      margin-top: 18px;
    }

    html.kb-page-introduce-index .timeline-item, html.kb-page-introduce-index.timeline-item {
      display: flex;
      gap: 24px;
      position: relative;
    }

    html.kb-page-introduce-index .timeline-date, html.kb-page-introduce-index.timeline-date {
      flex: 0 0 104px;
      text-align: right;
      color: var(--text-muted);
      font-size: 0.9rem;
      font-weight: 590;
      padding-top: 4px;
    }

    html.kb-page-introduce-index .timeline-content, html.kb-page-introduce-index.timeline-content {
      flex: 1;
      border-left: 2px solid var(--timeline-line);
      padding-left: 24px;
      padding-bottom: 8px;
    }

    html.kb-page-introduce-index .timeline-content h3, html.kb-page-introduce-index.timeline-content h3 {
      font-size: 1.08rem;
      margin-bottom: 6px;
    }

    html.kb-page-introduce-index .timeline-content p, html.kb-page-introduce-index.timeline-content p {
      font-size: 0.92rem;
      line-height: 1.58;
    }

    html.kb-page-introduce-index .site-footer, html.kb-page-introduce-index.site-footer {
      margin-top: 48px;
      padding: 34px 0;
      border-top: 0.5px solid var(--border-light);
      color: var(--text-muted);
      text-align: center;
      font-size: 0.82rem;
    }

    html.kb-page-introduce-index .back-home, html.kb-page-introduce-index.back-home {
      display: flex;
      justify-content: center;
      margin: 34px 0 24px;
    }

    html.kb-page-introduce-index .back-button, html.kb-page-introduce-index.back-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 999px;
      background: var(--card-bg);
      color: var(--text-primary);
      font-size: 0.9rem;
      font-weight: 500;
    }

    html.kb-page-introduce-index .back-button:hover, html.kb-page-introduce-index.back-button:hover {
      background: var(--button-bg);
      transform: translateY(-2px);
    }

    html.kb-page-introduce-index .back-button svg, html.kb-page-introduce-index.back-button svg {
      transition: transform 0.2s ease;
    }

    html.kb-page-introduce-index .back-button:hover svg, html.kb-page-introduce-index.back-button:hover svg {
      transform: translateX(-3px);
    }

    html.kb-page-introduce-index .hst-entry, html.kb-page-introduce-index.hst-entry {
      width: 40px;
      height: 40px;
      cursor: pointer;
      display: none;
      border-radius: 50%;
      object-fit: contain;
    }

    html.kb-page-introduce-index .hst-entry.visible, html.kb-page-introduce-index.hst-entry.visible {
      display: inline-block;
    }

    html.kb-page-introduce-index #docManagerLink {
      align-items: center;
      gap: 6px;
      color: #5856d6;
      font-weight: 500;
      line-height: 1;
    }

    html.kb-page-introduce-index .arg-special, html.kb-page-introduce-index.arg-special {
      transition: box-shadow 0.1s linear, transform 0.22s ease, opacity 0.22s ease;
      position: relative;
    }

    html.kb-page-introduce-index .arg-special:hover, html.kb-page-introduce-index.arg-special:hover {
      box-shadow: 0 0 12px rgba(255, 0, 100, 0.3);
    }

    html.kb-page-introduce-index .arg-special.reveal::before, html.kb-page-introduce-index.arg-special.reveal::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../images/hst.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 25;
      pointer-events: none;
      animation: fadeIn 0.8s ease forwards;
    }

    @keyframes fadeIn{
      from { opacity: 0; }
      to { opacity: 1; }
    }

    html.kb-page-introduce-index .arg-special.reveal .landmark-content, html.kb-page-introduce-index.arg-special.reveal .landmark-content {
      background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.5), rgba(0,0,0,0.3));
    }

    html.kb-page-introduce-index .arg-special.reveal .landmark-content h3, html.kb-page-introduce-index.arg-special.reveal .landmark-content h3,
html.kb-page-introduce-index .arg-special.reveal .landmark-content p, html.kb-page-introduce-index.arg-special.reveal .landmark-content p {
      animation: glitchWithGarbled 0.25s infinite steps(1);
      position: relative;
    }

    @keyframes glitchWithGarbled{
      0% { transform: translate(0, 0); color: #fff; text-shadow: 0 0 0 #ff0000; opacity: 1; }
      10% { transform: translate(-2px, 1px); color: #f0f; text-shadow: -1px 0 #ff0000; }
      20% { transform: translate(2px, -1px); color: #0ff; text-shadow: 1px 0 #00ff00; }
      30% { transform: translate(-1px, 2px); color: #ffcc00; text-shadow: 0 -1px #ff0000; }
      40% { transform: translate(1px, -2px); color: #ff00cc; text-shadow: 0 1px #00ff00; }
      50% { transform: translate(-3px, 1px); color: #0f0; text-shadow: -1px 0 #0000ff; }
      60% { transform: translate(2px, 2px); color: #ff5555; text-shadow: 1px 1px #ff00aa; }
      70% { transform: translate(-1px, -1px); color: #55ff55; text-shadow: -1px -1px #aa00ff; }
      80% { transform: translate(1px, -1px); color: #ffff55; text-shadow: 1px -1px #ff5500; }
      90% { transform: translate(-2px, 2px); color: #ff55ff; text-shadow: -2px 0 #55ff55; }
      100% { transform: translate(0, 0); color: #fff; text-shadow: none; }
    }

    html.kb-page-introduce-index .arg-card-hst, html.kb-page-introduce-index.arg-card-hst {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      display: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 26;
      background: rgba(0,0,0,0.5);
      border-radius: 8px;
      padding: 4px;
      object-fit: contain;
    }

    html.kb-page-introduce-index .arg-card-hst.visible, html.kb-page-introduce-index.arg-card-hst.visible {
      display: block;
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;
    }

    @media (max-width: 860px){
      html.kb-page-introduce-index .container, html.kb-page-introduce-index.container {
        width: min(100% - 40px, 1080px);
      }

      html.kb-page-introduce-index .navbar, html.kb-page-introduce-index.navbar {
        align-items: flex-start;
      }

      html.kb-page-introduce-index .navbar nav, html.kb-page-introduce-index.navbar nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 14px;
      }

      html.kb-page-introduce-index .grid-4, html.kb-page-introduce-index.grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }

      html.kb-page-introduce-index .split-card, html.kb-page-introduce-index.split-card {
        grid-template-columns: 1fr;
      }

      html.kb-page-introduce-index .timeline-item, html.kb-page-introduce-index.timeline-item {
        flex-direction: column;
        gap: 8px;
      }

      html.kb-page-introduce-index .timeline-date, html.kb-page-introduce-index.timeline-date {
        width: auto;
        text-align: left;
      }

      html.kb-page-introduce-index .timeline-content, html.kb-page-introduce-index.timeline-content {
        padding-left: 20px;
      }
    }

    @media (max-width: 680px){
      html.kb-page-introduce-index .container, html.kb-page-introduce-index.container {
        width: min(100% - 32px, 1080px);
      }

      html.kb-page-introduce-index .hero-map-background, html.kb-page-introduce-index.hero-map-background {
        min-height: 430px;
        background-attachment: scroll;
      }

      html.kb-page-introduce-index .hero-map-overlay, html.kb-page-introduce-index.hero-map-overlay {
        left: 16px;
        right: 16px;
        bottom: 18px;
      }

      html.kb-page-introduce-index .hero, html.kb-page-introduce-index.hero {
        padding: 56px 0 32px;
      }

      html.kb-page-introduce-index .grid-4, html.kb-page-introduce-index.grid-4 {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      html.kb-page-introduce-index .card, html.kb-page-introduce-index.card {
        padding: 24px;
        border-radius: 24px;
      }

      html.kb-page-introduce-index .landmark-container, html.kb-page-introduce-index.landmark-container {
        gap: 8px;
      }

      html.kb-page-introduce-index .landmark-item, html.kb-page-introduce-index.landmark-item {
        flex-basis: 282px;
        min-width: 282px;
      }

      html.kb-page-introduce-index .landmark-item img, html.kb-page-introduce-index.landmark-item img {
        height: 168px;
      }

      html.kb-page-introduce-index .scroll-btn, html.kb-page-introduce-index.scroll-btn {
        width: 38px;
        height: 38px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      html.kb-page-introduce-index { scroll-behavior: auto; }
      html.kb-page-introduce-index *,
html.kb-page-introduce-index *::before,
html.kb-page-introduce-index *::after {
        transition: none !important;
      }
    }

/* Extracted inline styles from introduce/index.html */
html.kb-page-introduce-index .kb-page-introduce-index-inline-001 { display: none; margin-left: auto; text-decoration: none; font-size: 0.9rem; }
html.kb-page-introduce-index .kb-page-introduce-index-inline-002 { background-image: url('../images/all_map.png'); }
html.kb-page-introduce-index .kb-page-introduce-index-inline-003 { font-size: 0.75rem; opacity: 0.7; margin-top: 8px; }


/* ============================================================   introduce/rule.html   page scope: .kb-page-introduce-rule   ============================================================ */

        html.kb-page-introduce-rule * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html.kb-page-introduce-rule {
            --bg-primary: #f5f5f7;
            --container-bg: #ffffff;
            --text-primary: #1d1c1f;
            --text-secondary: #6e6d73;
            --text-muted: #86868b;
            --border-light: #e9e9ed;
            --border-card: #efeff4;
            --shadow: rgba(0, 0, 0, 0.05);
            --warning-bg: #fff7f0;
            --warning-text: #b34e1a;
            --button-bg: #f5f5f7;
            --button-hover: #ffffff;
        }

        html.kb-page-introduce-rule .dark-theme, html.kb-page-introduce-rule.dark-theme {
            --bg-primary: #000000;
            --container-bg: #1c1c1e;
            --text-primary: #ffffff;
            --text-secondary: #8e8e93;
            --text-muted: #98989d;
            --border-light: #38383a;
            --border-card: #2c2c2e;
            --shadow: rgba(0, 0, 0, 0.4);
            --warning-bg: rgba(179, 78, 26, 0.15);
            --warning-text: #ff6b4a;
            --button-bg: #2c2c2e;
            --button-hover: #3a3a3c;
        }

        body.kb-page-introduce-rule {
            background-color: var(--bg-primary);
            font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "BlinkMacSystemFont", "Segoe UI", Roboto, sans-serif;
            line-height: 1.5;
            color: var(--text-primary);
            padding: 2rem 1.5rem;
            transition: background-color 0.3s ease, color 0.2s ease;
        }

        html.kb-page-introduce-rule .theme-toggle, html.kb-page-introduce-rule.theme-toggle {
            position: fixed;
            top: 24px;
            right: 24px;
            background: var(--button-bg);
            border: 0.5px solid var(--border-light);
            border-radius: 30px;
            padding: 8px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            color: var(--text-primary);
            z-index: 100;
        }
        html.kb-page-introduce-rule .theme-toggle:hover, html.kb-page-introduce-rule.theme-toggle:hover {
            background: var(--button-hover);
        }
        html.kb-page-introduce-rule .theme-toggle .moon-icon, html.kb-page-introduce-rule.theme-toggle .moon-icon { display: none; }
        html.kb-page-introduce-rule .dark-theme .theme-toggle .sun-icon, html.kb-page-introduce-rule.dark-theme .theme-toggle .sun-icon { display: none; }
        html.kb-page-introduce-rule .dark-theme .theme-toggle .moon-icon, html.kb-page-introduce-rule.dark-theme .theme-toggle .moon-icon { display: block; }

        html.kb-page-introduce-rule .apple-container, html.kb-page-introduce-rule.apple-container {
            max-width: 980px;
            margin: 0 auto;
            background-color: var(--container-bg);
            border-radius: 28px;
            box-shadow: 0 12px 30px var(--shadow), 0 4px 8px var(--shadow);
            overflow: hidden;
            transition: background-color 0.3s ease;
        }

        html.kb-page-introduce-rule .content-panel, html.kb-page-introduce-rule.content-panel {
            padding: 2.5rem 2.2rem 3rem 2.2rem;
        }

        html.kb-page-introduce-rule .title-section, html.kb-page-introduce-rule.title-section {
            text-align: center;
            margin-bottom: 2rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-light);
        }

        html.kb-page-introduce-rule .server-name, html.kb-page-introduce-rule.server-name {
            font-size: 2rem;
            font-weight: 590;
            letter-spacing: -0.3px;
            background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            margin-bottom: 0.25rem;
        }

        html.kb-page-introduce-rule .subhead, html.kb-page-introduce-rule.subhead {
            font-size: 1rem;
            font-weight: 400;
            color: var(--text-secondary);
            margin-top: 0.3rem;
        }

        html.kb-page-introduce-rule .intro-text, html.kb-page-introduce-rule.intro-text {
            font-size: 1rem;
            color: var(--text-secondary);
            background-color: var(--border-card);
            padding: 0.8rem 1rem;
            border-radius: 18px;
            margin-bottom: 2rem;
            text-align: center;
            font-weight: 430;
            border: 0.5px solid var(--border-light);
        }

        html.kb-page-introduce-rule .rules-list, html.kb-page-introduce-rule.rules-list {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        html.kb-page-introduce-rule .rule-item, html.kb-page-introduce-rule.rule-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            font-size: 0.95rem;
            line-height: 1.45;
            padding: 0.5rem 0;
            border-bottom: 0.5px solid var(--border-light);
        }

        html.kb-page-introduce-rule .rule-num, html.kb-page-introduce-rule.rule-num {
            min-width: 2.4rem;
            font-weight: 500;
            color: var(--text-muted);
            font-feature-settings: "tnum";
            font-size: 0.9rem;
            letter-spacing: -0.2px;
        }

        html.kb-page-introduce-rule .rule-text, html.kb-page-introduce-rule.rule-text {
            flex: 1;
            color: var(--text-primary);
            font-weight: 430;
        }

        html.kb-page-introduce-rule .rule-item.important-warning .rule-text, html.kb-page-introduce-rule.rule-item.important-warning .rule-text {
            background: var(--warning-bg);
            padding: 0.2rem 0.5rem;
            margin: -0.2rem -0.5rem;
            border-radius: 12px;
            color: var(--warning-text);
            font-weight: 480;
        }

        html.kb-page-introduce-rule .kill-group .rule-item, html.kb-page-introduce-rule.kill-group .rule-item {
            border-bottom: none;
        }

        html.kb-page-introduce-rule .kill-group .rule-item:last-of-type, html.kb-page-introduce-rule.kill-group .rule-item:last-of-type {
            border-bottom: 0.5px solid var(--border-light);
        }

        html.kb-page-introduce-rule .footer-note, html.kb-page-introduce-rule.footer-note {
            margin-top: 2rem;
            padding-top: 1.2rem;
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-muted);
            border-top: 1px solid var(--border-light);
            letter-spacing: 0.2px;
        }

        html.kb-page-introduce-rule .back-home, html.kb-page-introduce-rule.back-home {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
            margin-bottom: 0.5rem;
        }

        html.kb-page-introduce-rule .back-button, html.kb-page-introduce-rule.back-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: var(--button-bg);
            padding: 0.65rem 1.5rem;
            border-radius: 40px;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-primary);
            transition: all 0.2s ease;
            border: 0.5px solid var(--border-light);
        }

        html.kb-page-introduce-rule .back-button:hover, html.kb-page-introduce-rule.back-button:hover {
            background-color: var(--button-hover);
            border-color: var(--border-light);
            transform: scale(1.02);
            box-shadow: 0 4px 12px var(--shadow);
        }

        html.kb-page-introduce-rule .back-button svg, html.kb-page-introduce-rule.back-button svg {
            width: 18px;
            height: 18px;
            stroke: var(--text-primary);
            stroke-width: 2;
            fill: none;
            transition: transform 0.2s ease;
        }

        html.kb-page-introduce-rule .back-button:hover svg, html.kb-page-introduce-rule.back-button:hover svg {
            transform: translateX(-3px);
        }

        @media (max-width: 680px){
            body.kb-page-introduce-rule {
                padding: 1rem;
            }
            html.kb-page-introduce-rule .content-panel, html.kb-page-introduce-rule.content-panel {
                padding: 1.8rem 1.2rem 2rem 1.2rem;
            }
            html.kb-page-introduce-rule .server-name, html.kb-page-introduce-rule.server-name {
                font-size: 1.7rem;
            }
            html.kb-page-introduce-rule .rule-item, html.kb-page-introduce-rule.rule-item {
                gap: 0.6rem;
                font-size: 0.88rem;
            }
            html.kb-page-introduce-rule .rule-num, html.kb-page-introduce-rule.rule-num {
                min-width: 2.1rem;
            }
            html.kb-page-introduce-rule .back-button, html.kb-page-introduce-rule.back-button {
                padding: 0.5rem 1.2rem;
                font-size: 0.85rem;
            }
        }

        html.kb-page-introduce-rule b,
html.kb-page-introduce-rule strong {
            font-weight: 560;
            color: inherit;
        }

        html.kb-page-introduce-rule span[lang="EN-US"] {
            font-weight: inherit;
        }

        html.kb-page-introduce-rule .rule-text p, html.kb-page-introduce-rule.rule-text p,
html.kb-page-introduce-rule .rule-text span, html.kb-page-introduce-rule.rule-text span {
            display: inline;
        }


/* ============================================================   introduce/void.html   page scope: .kb-page-introduce-void   ============================================================ */

    html.kb-page-introduce-void * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html.kb-page-introduce-void {
      color-scheme: light;
      --bg-primary: #f5f5f7;
      --bg-secondary: rgba(255, 255, 255, 0.86);
      --bg-tertiary: #fbfbfd;
      --card-bg: rgba(255, 255, 255, 0.9);
      --text-primary: #1d1d1f;
      --text-secondary: #667085;
      --text-muted: #8a94a6;
      --border-light: rgba(15, 23, 42, 0.10);
      --border-card: rgba(15, 23, 42, 0.07);
      --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.8), 0 18px 42px rgba(15, 23, 42, 0.08);
      --shadow-hover: 0 28px 64px rgba(15, 23, 42, 0.14);
      --link-color: #0a63c8;
      --button-bg: rgba(15, 23, 42, 0.055);
      --button-hover: rgba(15, 23, 42, 0.10);
      --header-bg: rgba(245, 245, 247, 0.78);
      --timeline-line: rgba(66, 87, 122, 0.22);
      --void: #0b1020;
      --void-soft: rgba(47, 75, 125, 0.16);
      --blue: #6ea8ff;
      --blue-deep: #1e3a8a;
      --silver: #d7dde8;
      --accent-gradient: linear-gradient(135deg, #1d1d1f 0%, #5e6a7d 100%);
      --void-gradient: linear-gradient(135deg, #111827 0%, #1e3a8a 50%, #d7dde8 100%);
    }

    html.kb-page-introduce-void .dark-theme, html.kb-page-introduce-void.dark-theme {
      color-scheme: dark;
      --bg-primary: #000000;
      --bg-secondary: rgba(0, 0, 0, 0.84);
      --bg-tertiary: #0b0d12;
      --card-bg: rgba(18, 20, 27, 0.88);
      --text-primary: #f5f5f7;
      --text-secondary: #a7b0c0;
      --text-muted: #7f8898;
      --border-light: rgba(215, 221, 232, 0.14);
      --border-card: rgba(215, 221, 232, 0.09);
      --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 42px rgba(0, 0, 0, 0.40);
      --shadow-hover: 0 28px 64px rgba(0, 0, 0, 0.62);
      --link-color: #7ab7ff;
      --button-bg: rgba(215, 221, 232, 0.08);
      --button-hover: rgba(215, 221, 232, 0.14);
      --header-bg: rgba(0, 0, 0, 0.78);
      --timeline-line: rgba(215, 221, 232, 0.18);
      --void: #05060a;
      --void-soft: rgba(110, 168, 255, 0.10);
      --blue: #7ab7ff;
      --blue-deep: #1d4ed8;
      --silver: #e2e8f0;
      --accent-gradient: linear-gradient(135deg, #f5f5f7 0%, #a7b0c0 100%);
      --void-gradient: linear-gradient(135deg, #f5f5f7 0%, #7ab7ff 50%, #1e3a8a 100%);
    }

    html.kb-page-introduce-void {
      scroll-behavior: smooth;
    }

    body.kb-page-introduce-void {
      min-height: 100vh;
      background:
        radial-gradient(circle at 14% 0%, rgba(110, 168, 255, 0.20), transparent 30%),
        radial-gradient(circle at 86% 8%, rgba(15, 23, 42, 0.10), transparent 28%),
        radial-gradient(circle at 50% 18%, rgba(215, 221, 232, 0.18), transparent 36%),
        var(--bg-primary);
      font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: var(--text-primary);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transition: background-color 0.3s ease, color 0.2s ease;
    }

    html.kb-page-introduce-void .dark-theme body, html.kb-page-introduce-void.dark-theme body {
      background:
        radial-gradient(circle at 14% 0%, rgba(110, 168, 255, 0.12), transparent 30%),
        radial-gradient(circle at 86% 8%, rgba(30, 58, 138, 0.12), transparent 28%),
        radial-gradient(circle at 50% 18%, rgba(215, 221, 232, 0.035), transparent 36%),
        var(--bg-primary);
    }

    html.kb-page-introduce-void a {
      color: var(--link-color);
      text-decoration: none;
    }

    html.kb-page-introduce-void code {
      padding: 2px 6px;
      border-radius: 7px;
      background: var(--button-bg);
      color: var(--text-primary);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.92em;
    }

    html.kb-page-introduce-void .container, html.kb-page-introduce-void.container {
      width: min(1080px, calc(100% - 48px));
      margin: 0 auto;
    }

    html.kb-page-introduce-void .site-header, html.kb-page-introduce-void.site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 10px 0;
      background: var(--header-bg);
      backdrop-filter: saturate(180%) blur(22px);
      border-bottom: 0.5px solid var(--border-light);
      transition: background-color 0.3s ease, border-color 0.2s ease;
    }

    html.kb-page-introduce-void .navbar, html.kb-page-introduce-void.navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    html.kb-page-introduce-void .navbar strong, html.kb-page-introduce-void.navbar strong {
      font-size: 1.05rem;
      font-weight: 620;
      letter-spacing: -0.02em;
      background: var(--void-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      white-space: nowrap;
    }

    html.kb-page-introduce-void .navbar nav, html.kb-page-introduce-void.navbar nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      flex-wrap: wrap;
      margin-left: auto;
    }

    html.kb-page-introduce-void .navbar nav a, html.kb-page-introduce-void.navbar nav a {
      color: var(--text-secondary);
      font-size: 0.86rem;
      font-weight: 450;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    html.kb-page-introduce-void .navbar nav a:hover, html.kb-page-introduce-void.navbar nav a:hover {
      color: var(--text-primary);
    }

    html.kb-page-introduce-void .theme-toggle, html.kb-page-introduce-void.theme-toggle {
      width: 38px;
      height: 30px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-light);
      border-radius: 999px;
      color: var(--text-primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.18s ease;
      flex: 0 0 auto;
    }

    html.kb-page-introduce-void .theme-toggle:hover, html.kb-page-introduce-void.theme-toggle:hover {
      background: var(--button-hover);
      transform: translateY(-1px);
    }

    html.kb-page-introduce-void .theme-toggle svg, html.kb-page-introduce-void.theme-toggle svg {
      width: 17px;
      height: 17px;
    }

    html.kb-page-introduce-void .theme-toggle .moon-icon, html.kb-page-introduce-void.theme-toggle .moon-icon,
html.kb-page-introduce-void .dark-theme .theme-toggle .sun-icon, html.kb-page-introduce-void.dark-theme .theme-toggle .sun-icon {
      display: none;
    }

    html.kb-page-introduce-void .dark-theme .theme-toggle .moon-icon, html.kb-page-introduce-void.dark-theme .theme-toggle .moon-icon {
      display: block;
    }

    html.kb-page-introduce-void .void-visual, html.kb-page-introduce-void.void-visual {
      position: relative;
      margin: -1px calc(-50vw + 50%) 0;
      width: 100vw;
      min-height: clamp(390px, 58vw, 720px);
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 38%, rgba(110, 168, 255, 0.24), transparent 26%),
        radial-gradient(circle at 22% 24%, rgba(215, 221, 232, 0.12), transparent 18%),
        radial-gradient(circle at 82% 18%, rgba(110, 168, 255, 0.14), transparent 22%),
        linear-gradient(180deg, #10182b 0%, #07101f 54%, var(--bg-primary) 100%);
      z-index: 1;
    }

    html.kb-page-introduce-void .void-visual::before, html.kb-page-introduce-void.void-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 8% 14%, rgba(255,255,255,0.72) 0 1.4px, transparent 2px),
        radial-gradient(circle at 18% 34%, rgba(255,255,255,0.54) 0 1.2px, transparent 2px),
        radial-gradient(circle at 32% 18%, rgba(255,255,255,0.62) 0 1.4px, transparent 2px),
        radial-gradient(circle at 48% 28%, rgba(255,255,255,0.50) 0 1.1px, transparent 2px),
        radial-gradient(circle at 62% 12%, rgba(255,255,255,0.66) 0 1.4px, transparent 2px),
        radial-gradient(circle at 74% 30%, rgba(255,255,255,0.48) 0 1.1px, transparent 2px),
        radial-gradient(circle at 88% 16%, rgba(255,255,255,0.70) 0 1.5px, transparent 2px);
      opacity: 0.78;
      pointer-events: none;
    }

    html.kb-page-introduce-void .void-visual::after, html.kb-page-introduce-void.void-visual::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 86px;
      width: min(680px, 78vw);
      height: 68px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(110, 168, 255, 0.26), rgba(110, 168, 255, 0.08) 36%, transparent 72%);
      filter: blur(14px);
      pointer-events: none;
    }

    html.kb-page-introduce-void .void-platform, html.kb-page-introduce-void.void-platform {
      position: absolute;
      left: 50%;
      bottom: 130px;
      width: min(520px, 70vw);
      height: 150px;
      transform: translateX(-50%) perspective(520px) rotateX(58deg) rotateZ(-6deg);
      border-radius: 34px;
      background:
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.10) 48% 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(255,255,255,0.10) 48% 52%, transparent 52%),
        linear-gradient(135deg, rgba(215, 221, 232, 0.92), rgba(92, 110, 138, 0.82) 44%, rgba(21, 31, 52, 0.94));
      box-shadow: 0 50px 90px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255,255,255,0.18);
      opacity: 0.88;
    }

    html.kb-page-introduce-void .void-block, html.kb-page-introduce-void.void-block {
      position: absolute;
      bottom: 240px;
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(215, 221, 232, 0.92), rgba(74, 92, 122, 0.92));
      box-shadow: 0 24px 48px rgba(0,0,0,0.22);
      opacity: 0.82;
    }

    html.kb-page-introduce-void .void-block.one, html.kb-page-introduce-void.void-block.one { left: 21%; transform: rotate(14deg); }
    html.kb-page-introduce-void .void-block.two, html.kb-page-introduce-void.void-block.two { right: 24%; bottom: 318px; transform: rotate(-11deg); width: 42px; height: 42px; }
    html.kb-page-introduce-void .void-block.three, html.kb-page-introduce-void.void-block.three { left: 63%; bottom: 188px; transform: rotate(21deg); width: 34px; height: 34px; opacity: 0.6; }

    html.kb-page-introduce-void .void-visual-overlay, html.kb-page-introduce-void.void-visual-overlay {
      position: absolute;
      left: max(24px, calc((100vw - 1080px) / 2));
      bottom: 34px;
      z-index: 2;
      padding: 18px 20px;
      border-radius: 24px;
      background: rgba(245, 247, 252, 0.68);
      border: 0.5px solid rgba(215, 221, 232, 0.42);
      backdrop-filter: blur(20px) saturate(150%);
      box-shadow: 0 20px 46px rgba(0, 0, 0, 0.12);
    }

    html.kb-page-introduce-void .dark-theme .void-visual-overlay, html.kb-page-introduce-void.dark-theme .void-visual-overlay {
      background: rgba(10, 13, 20, 0.68);
      border-color: rgba(215, 221, 232, 0.14);
    }

    html.kb-page-introduce-void .void-visual-overlay h2, html.kb-page-introduce-void.void-visual-overlay h2 {
      color: var(--text-primary);
      font-size: 0.82rem;
      font-weight: 620;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    html.kb-page-introduce-void .void-visual-overlay p, html.kb-page-introduce-void.void-visual-overlay p {
      color: var(--text-secondary);
      font-size: 0.86rem;
      max-width: 420px;
    }

    html.kb-page-introduce-void .hero, html.kb-page-introduce-void.hero {
      text-align: center;
      padding: 76px 0 42px;
    }

    html.kb-page-introduce-void .eyebrow, html.kb-page-introduce-void.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text-secondary);
      font-size: 0.82rem;
      font-weight: 590;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    html.kb-page-introduce-void .eyebrow::before, html.kb-page-introduce-void.eyebrow::before,
html.kb-page-introduce-void .eyebrow::after, html.kb-page-introduce-void.eyebrow::after {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--border-light);
    }

    html.kb-page-introduce-void .hero h1, html.kb-page-introduce-void.hero h1 {
      margin: 0 auto 18px;
      max-width: 940px;
      font-size: clamp(3.1rem, 8vw, 7.2rem);
      line-height: 0.94;
      font-weight: 620;
      letter-spacing: -0.055em;
      background: var(--void-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    html.kb-page-introduce-void .hero p, html.kb-page-introduce-void.hero p {
      color: var(--text-secondary);
      font-size: clamp(1.05rem, 2vw, 1.45rem);
      line-height: 1.48;
      max-width: 720px;
      margin: 0 auto;
      font-weight: 430;
    }

    html.kb-page-introduce-void .hero-actions, html.kb-page-introduce-void.hero-actions {
      margin-top: 28px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    html.kb-page-introduce-void .button, html.kb-page-introduce-void.button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 18px;
      border-radius: 999px;
      border: 0.5px solid transparent;
      font-size: 0.92rem;
      font-weight: 510;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    html.kb-page-introduce-void .button:hover, html.kb-page-introduce-void.button:hover {
      transform: translateY(-1px);
    }

    html.kb-page-introduce-void .button-primary, html.kb-page-introduce-void.button-primary {
      color: #fff;
      background: linear-gradient(135deg, #111827 0%, #1e3a8a 56%, #6ea8ff 100%);
      box-shadow: 0 10px 26px rgba(30, 58, 138, 0.18);
    }

    html.kb-page-introduce-void .dark-theme .button-primary, html.kb-page-introduce-void.dark-theme .button-primary {
      color: #05060a;
      background: linear-gradient(135deg, #f5f5f7 0%, #7ab7ff 54%, #1e3a8a 100%);
    }

    html.kb-page-introduce-void .button-secondary, html.kb-page-introduce-void.button-secondary {
      color: var(--link-color);
      background: var(--button-bg);
      border-color: var(--border-light);
    }

    html.kb-page-introduce-void .grid-4, html.kb-page-introduce-void.grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin: 34px 0 38px;
    }

    html.kb-page-introduce-void .stat-card, html.kb-page-introduce-void.stat-card,
html.kb-page-introduce-void .card, html.kb-page-introduce-void.card,
html.kb-page-introduce-void .back-button, html.kb-page-introduce-void.back-button {
      border: 0.5px solid var(--border-light);
      box-shadow: var(--shadow-soft);
      transition: background-color 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.22s ease;
    }

    html.kb-page-introduce-void .stat-card, html.kb-page-introduce-void.stat-card {
      background: var(--card-bg);
      border-radius: 26px;
      padding: 22px 18px;
      text-align: center;
      backdrop-filter: blur(18px);
    }

    html.kb-page-introduce-void .stat-card:hover, html.kb-page-introduce-void.stat-card:hover,
html.kb-page-introduce-void .card:hover, html.kb-page-introduce-void.card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }

    html.kb-page-introduce-void .stat-card h3, html.kb-page-introduce-void.stat-card h3 {
      color: var(--text-muted);
      font-size: 0.76rem;
      font-weight: 590;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    html.kb-page-introduce-void .stat-card p, html.kb-page-introduce-void.stat-card p {
      color: var(--text-primary);
      font-size: 0.95rem;
      line-height: 1.42;
      font-weight: 450;
    }

    html.kb-page-introduce-void .card, html.kb-page-introduce-void.card {
      position: relative;
      z-index: 2;
      margin: 28px 0;
      padding: clamp(26px, 4vw, 42px);
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 34%),
        var(--card-bg);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    html.kb-page-introduce-void .card::before, html.kb-page-introduce-void.card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(110, 168, 255, 0.14), transparent 28%, transparent 72%, rgba(15, 23, 42, 0.08));
      opacity: 0.58;
    }

    html.kb-page-introduce-void .card > *, html.kb-page-introduce-void.card > * {
      position: relative;
      z-index: 1;
    }

    html.kb-page-introduce-void .card h2, html.kb-page-introduce-void.card h2 {
      color: var(--text-primary);
      font-size: clamp(1.55rem, 3vw, 2.25rem);
      line-height: 1.12;
      font-weight: 620;
      letter-spacing: -0.035em;
      margin-bottom: 18px;
    }

    html.kb-page-introduce-void .card h3, html.kb-page-introduce-void.card h3 {
      color: var(--text-primary);
      font-weight: 590;
      letter-spacing: -0.02em;
    }

    html.kb-page-introduce-void .card p, html.kb-page-introduce-void.card p,
html.kb-page-introduce-void .card li, html.kb-page-introduce-void.card li {
      color: var(--text-secondary);
      line-height: 1.68;
      font-size: 0.98rem;
      font-weight: 430;
    }

    html.kb-page-introduce-void .card ul, html.kb-page-introduce-void.card ul,
html.kb-page-introduce-void .card ol, html.kb-page-introduce-void.card ol {
      padding-left: 1.45rem;
      margin: 14px 0;
    }

    html.kb-page-introduce-void .split-card, html.kb-page-introduce-void.split-card {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
      gap: 26px;
      align-items: center;
    }

    html.kb-page-introduce-void .void-panel, html.kb-page-introduce-void.void-panel {
      min-height: 290px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 50% 24%, rgba(110, 168, 255, 0.20), transparent 26%),
        radial-gradient(circle at 76% 18%, rgba(215, 221, 232, 0.20), transparent 24%),
        linear-gradient(145deg, var(--void), var(--bg-tertiary));
      border: 0.5px solid var(--border-card);
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
    }

    html.kb-page-introduce-void .void-panel::before, html.kb-page-introduce-void.void-panel::before {
      content: "";
      width: 190px;
      height: 66px;
      border-radius: 30px;
      background:
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.12) 48% 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(255,255,255,0.12) 48% 52%, transparent 52%),
        linear-gradient(135deg, rgba(215, 221, 232, 0.88), rgba(66, 87, 122, 0.92));
      transform: perspective(320px) rotateX(58deg) rotateZ(-6deg);
      box-shadow: 0 36px 70px rgba(0, 0, 0, 0.26);
    }

    html.kb-page-introduce-void .void-panel::after, html.kb-page-introduce-void.void-panel::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(110, 168, 255, 0.16), transparent 68%);
      filter: blur(6px);
      pointer-events: none;
    }

    html.kb-page-introduce-void .feature-list, html.kb-page-introduce-void.feature-list {
      display: grid;
      gap: 12px;
      list-style: none;
      padding-left: 0 !important;
    }

    html.kb-page-introduce-void .feature-list li, html.kb-page-introduce-void.feature-list li {
      position: relative;
      padding: 14px 16px 14px 42px;
      border-radius: 18px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-card);
      list-style: none;
    }

    html.kb-page-introduce-void .feature-list li::before, html.kb-page-introduce-void.feature-list li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 22px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 0 0 4px var(--void-soft);
    }

    html.kb-page-introduce-void .notice-grid, html.kb-page-introduce-void.notice-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 20px;
    }

    html.kb-page-introduce-void .notice-item, html.kb-page-introduce-void.notice-item {
      padding: 18px;
      border-radius: 22px;
      background: var(--button-bg);
      border: 0.5px solid var(--border-card);
    }

    html.kb-page-introduce-void .notice-item strong, html.kb-page-introduce-void.notice-item strong {
      display: block;
      color: var(--text-primary);
      font-size: 1.05rem;
      letter-spacing: -0.02em;
      margin-bottom: 7px;
    }

    html.kb-page-introduce-void .notice-item span, html.kb-page-introduce-void.notice-item span {
      display: block;
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    html.kb-page-introduce-void .timeline, html.kb-page-introduce-void.timeline {
      display: grid;
      gap: 24px;
      margin-top: 18px;
    }

    html.kb-page-introduce-void .timeline-item, html.kb-page-introduce-void.timeline-item {
      display: flex;
      gap: 24px;
      position: relative;
    }

    html.kb-page-introduce-void .timeline-date, html.kb-page-introduce-void.timeline-date {
      flex: 0 0 104px;
      text-align: right;
      color: var(--text-muted);
      font-size: 0.9rem;
      font-weight: 590;
      padding-top: 4px;
    }

    html.kb-page-introduce-void .timeline-content, html.kb-page-introduce-void.timeline-content {
      flex: 1;
      border-left: 2px solid var(--timeline-line);
      padding-left: 24px;
      padding-bottom: 8px;
    }

    html.kb-page-introduce-void .timeline-content h3, html.kb-page-introduce-void.timeline-content h3 {
      font-size: 1.08rem;
      margin-bottom: 6px;
    }

    html.kb-page-introduce-void .timeline-content p, html.kb-page-introduce-void.timeline-content p {
      font-size: 0.92rem;
      line-height: 1.58;
    }

    html.kb-page-introduce-void .site-footer, html.kb-page-introduce-void.site-footer {
      margin-top: 48px;
      padding: 34px 0;
      border-top: 0.5px solid var(--border-light);
      color: var(--text-muted);
      text-align: center;
      font-size: 0.82rem;
    }

    html.kb-page-introduce-void .back-home, html.kb-page-introduce-void.back-home {
      display: flex;
      justify-content: center;
      margin: 34px 0 24px;
    }

    html.kb-page-introduce-void .back-button, html.kb-page-introduce-void.back-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 999px;
      background: var(--card-bg);
      color: var(--text-primary);
      font-size: 0.9rem;
      font-weight: 500;
      border: 0.5px solid var(--border-light);
      box-shadow: var(--shadow-soft);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    html.kb-page-introduce-void .back-button:hover, html.kb-page-introduce-void.back-button:hover {
      background: var(--button-bg);
      transform: translateY(-2px);
    }

    html.kb-page-introduce-void .back-button svg, html.kb-page-introduce-void.back-button svg {
      transition: transform 0.2s ease;
    }

    html.kb-page-introduce-void .back-button:hover svg, html.kb-page-introduce-void.back-button:hover svg {
      transform: translateX(-3px);
    }

    @media (max-width: 860px){
      html.kb-page-introduce-void .container, html.kb-page-introduce-void.container {
        width: min(100% - 40px, 1080px);
      }

      html.kb-page-introduce-void .navbar, html.kb-page-introduce-void.navbar {
        align-items: flex-start;
      }

      html.kb-page-introduce-void .navbar nav, html.kb-page-introduce-void.navbar nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 14px;
      }

      html.kb-page-introduce-void .grid-4, html.kb-page-introduce-void.grid-4,
html.kb-page-introduce-void .notice-grid, html.kb-page-introduce-void.notice-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      html.kb-page-introduce-void .split-card, html.kb-page-introduce-void.split-card {
        grid-template-columns: 1fr;
      }

      html.kb-page-introduce-void .timeline-item, html.kb-page-introduce-void.timeline-item {
        flex-direction: column;
        gap: 8px;
      }

      html.kb-page-introduce-void .timeline-date, html.kb-page-introduce-void.timeline-date {
        width: auto;
        text-align: left;
      }

      html.kb-page-introduce-void .timeline-content, html.kb-page-introduce-void.timeline-content {
        padding-left: 20px;
      }
    }

    @media (max-width: 680px){
      html.kb-page-introduce-void .container, html.kb-page-introduce-void.container {
        width: min(100% - 32px, 1080px);
      }

      html.kb-page-introduce-void .void-visual, html.kb-page-introduce-void.void-visual {
        min-height: 430px;
      }

      html.kb-page-introduce-void .void-visual-overlay, html.kb-page-introduce-void.void-visual-overlay {
        left: 16px;
        right: 16px;
        bottom: 18px;
      }

      html.kb-page-introduce-void .hero, html.kb-page-introduce-void.hero {
        padding: 56px 0 32px;
      }

      html.kb-page-introduce-void .grid-4, html.kb-page-introduce-void.grid-4,
html.kb-page-introduce-void .notice-grid, html.kb-page-introduce-void.notice-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      html.kb-page-introduce-void .card, html.kb-page-introduce-void.card {
        padding: 24px;
        border-radius: 24px;
      }

      html.kb-page-introduce-void .void-platform, html.kb-page-introduce-void.void-platform {
        width: 72vw;
        bottom: 148px;
      }

      html.kb-page-introduce-void .void-block.one, html.kb-page-introduce-void.void-block.one { left: 12%; }
      html.kb-page-introduce-void .void-block.two, html.kb-page-introduce-void.void-block.two { right: 12%; }
    }

    @media (prefers-reduced-motion: reduce){
      html.kb-page-introduce-void { scroll-behavior: auto; }
      html.kb-page-introduce-void *,
html.kb-page-introduce-void *::before,
html.kb-page-introduce-void *::after {
        transition: none !important;
      }
    }