fix(docs): 문서 사이트 배경 누락과 레이아웃·문구 정리

www/docs/components/badge.mdx

@@ -23,9 +23,9 @@ import '@sipe-team/badge/styles.css';
 Wrap the text you want to label. The badge sizes itself to its content.
 
 <Preview
-  code={`<Badge>사이프</Badge>`}
+  code={`<Badge>Sipe</Badge>`}
 >
-  <Badge>사이프</Badge>
+  <Badge>Sipe</Badge>
 </Preview>
 
 ## Examples

www/docusaurus.config.ts

@@ -13,6 +13,14 @@ const r = (p: string) => path.resolve(__dirname, '..', 'packages', p);
 // components that read `vars` resolve against it. Built once for the whole site, not per component.
 const tokensCss = r('tokens/dist/styles.css');
 
+const sideCodeTheme = {
+  ...prismThemes.vsDark,
+  plain: {
+    ...prismThemes.vsDark.plain,
+    backgroundColor: 'var(--side-color-background-subtle)',
+  },
+};
+
 const pretendardCss = require.resolve('pretendard/dist/web/static/pretendard-dynamic-subset.css');
 
 export default {
@@ -112,8 +120,11 @@ export default {
       copyright: `All rights reserved ⓒ SIPE ${new Date().getFullYear()}`,
     },
     prism: {
-      theme: prismThemes.vsDark,
-      darkTheme: prismThemes.vsDark,
+      // Docusaurus applies `plain.backgroundColor` as an inline style on the code block
+      // container, which outranks `--ifm-pre-background`. Feeding the token through the theme
+      // keeps the code surface on the design system instead of vsDark's hardcoded #1e1e1e.
+      theme: sideCodeTheme,
+      darkTheme: sideCodeTheme,
     },
   } satisfies Preset.ThemeConfig,
 } satisfies Config;

www/src/HomepageFeatures/index.module.css

@@ -5,6 +5,13 @@
   width: 100%;
 }
 
+/* Infima's grid columns carry horizontal padding but no vertical spacing, so the cards sit flush
+   against each other once they wrap into a single column. Matches the 32px the columns already
+   put between cards side by side; inert while they fit on one row. */
+.features :global(.row) {
+  row-gap: var(--side-spacing-layout-sm);
+}
+
 .card {
   height: 100%;
   padding: var(--side-spacing-component-xl);

www/src/custom.css

@@ -2,7 +2,10 @@
 html[data-theme="light"],
 html[data-theme="dark"] {
   --side-chrome-padding-horizontal: clamp(1rem, 2vw, 2rem);
-  --ifm-navbar-padding-horizontal: var(--side-chrome-padding-horizontal);
+
+  /* Aligns the navbar logo with the sidebar entries below it, which sit at a fixed 20px. A
+     viewport-scaled value would drift away from that edge as the window resizes. */
+  --ifm-navbar-padding-horizontal: 20px;
 
   --ifm-color-gray-0: var(--color-white);
   --ifm-color-gray-100: var(--color-gray-50);
@@ -55,7 +58,13 @@ html[data-theme="dark"] {
   --ifm-color-danger-contrast-background: var(--side-color-status-danger-background);
   --ifm-color-danger-contrast-foreground: var(--side-color-status-danger-foreground);
 
-  --ifm-background-color: var(--side-color-background-base);
+  /* `--side-color-background-default` is declared by the theme bridge but resolves to nothing:
+     the bridge points at `--color-background-default` while tokens.json defines the value as
+     `color.background.base`. Until that contract mismatch is fixed in @sipe-team/tokens, fall
+     back to the value layer directly — otherwise the page and navbar have no background at all
+     and content shows through the sticky navbar. The fallback drops out on its own once the
+     semantic token resolves. */
+  --ifm-background-color: var(--side-color-background-default, var(--color-background-base));
   --ifm-background-surface-color: var(--side-color-background-muted);
   --ifm-color-content: var(--side-color-foreground-default);
   --ifm-color-content-secondary: var(--side-color-foreground-subtle);
@@ -76,13 +85,13 @@ html[data-theme="dark"] {
   --ifm-link-color: var(--side-color-accent-default);
   --ifm-link-hover-color: var(--side-color-accent-hover);
   --ifm-menu-color-active: var(--side-color-accent-default);
-  --ifm-menu-color-background-active: var(--side-color-background-subtle);
+  --ifm-menu-color-background-active: var(--side-color-background-muted);
   --ifm-tabs-color-active: var(--side-color-accent-default);
   --ifm-tabs-color-active-border: var(--side-color-accent-default);
   --ifm-breadcrumb-color-active: var(--side-color-foreground-default);
   --ifm-pagination-nav-color-hover: var(--side-color-accent-default);
 
-  --ifm-navbar-background-color: var(--side-color-background-base);
+  --ifm-navbar-background-color: var(--side-color-background-default, var(--color-background-base));
   --ifm-navbar-link-hover-color: var(--side-color-accent-default);
   --ifm-navbar-search-input-background-color: var(--side-color-background-subtle);
   --ifm-navbar-search-input-color: var(--side-color-foreground-default);
@@ -101,7 +110,7 @@ html[data-theme="dark"] {
   --ifm-scrollbar-thumb-background-color: var(--side-color-border-default);
   --ifm-scrollbar-thumb-hover-background-color: var(--side-color-border-strong);
 
-  --ifm-button-color: var(--side-color-background-base);
+  --ifm-button-color: var(--side-color-background-default, var(--color-background-base));
 
   --ifm-global-radius: var(--side-radius-component-lg);
   --ifm-card-border-radius: var(--side-radius-component-xl);
@@ -132,11 +141,53 @@ html[data-theme="dark"] {
   height: 1.25rem;
 }
 
+/* The navbar shares the page background and casts no shadow, so without this the sidebar's
+   vertical rule starts in mid-air where the two should meet. */
+.navbar {
+  border-bottom: 1px solid var(--side-color-border-default);
+}
+
 :focus-visible {
   outline: 2px solid var(--side-color-border-focus);
   outline-offset: 2px;
 }
 
+/* Code blocks carry `--ifm-code-border-radius`, which is sized for inline code. Blocks are
+   surfaces and should match cards and previews instead. Qualified by tag because the theme's
+   own CSS module class has equal specificity and would otherwise win on load order. */
+div.theme-code-block {
+  border-radius: var(--side-radius-component-lg);
+}
+
+/* The sidebar shares the body font size, which flattens the hierarchy between navigation and
+   content. Step it down and mark the active entry with weight and an accent rule. */
+.menu__link {
+  font-size: var(--side-font-size-100);
+}
+
+.menu__link--active {
+  position: relative;
+  font-weight: var(--side-font-weight-semi-bold);
+}
+
+.menu__link--active::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 2px;
+  background-color: var(--side-color-accent-default);
+}
+
+/* Inline code in the table of contents renders as a filled box, which competes with the entries
+   around it. Strip the surface and keep only the monospace cue. */
+.table-of-contents code {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+}
+
 .footer .container {
   max-width: none;
   padding-left: var(--side-chrome-padding-horizontal);

www/src/pages/index.tsx

@@ -28,7 +28,7 @@ function HomepageHeader() {
         <Heading as="h1" className={styles.heroTitle}>
           Side
         </Heading>
-        <p className={styles.heroSubtitle}>Sipe 제품을 만드는 사람들을 위한 디자인 시스템</p>
+        <p className={styles.heroSubtitle}>The design system for Sipe products</p>
       </div>
     </header>
   );