/* =====================================================================
Panolabo Design System v1.0
=====================================================================
2-Layer Architecture:
Layer 1: Structure (grid, components, typography scale)
Layer 2: World (visual identity presets)
Usage:
Worlds: panolabo | corporate | playful
Schemes: light | dark (each world has both)
===================================================================== */
/* =====================================================================
LAYER 2: WORLD PRESETS
World = shape + font + density + shadow + accent
Scheme = light/dark color fill within a world
===================================================================== */
/* =====================================================================
CJK Typography Foundation
日本語UIタイポグラフィ基盤（awesome-design-md-jp 参考）
===================================================================== */
:root {
/* CJK font stacks — 欧文を先に指定し、和文にフォールバック */
--font-sans-jp: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont,
'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
'Yu Gothic', YuGothic, Meiryo, sans-serif;
--font-serif-jp: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro',
'Yu Mincho', YuMincho, 'BIZ UDPMincho', 'MS PMincho', serif;
--font-mono-jp: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', 'Menlo', monospace;
/* CJK line-height (Western 1.4-1.5 vs Japanese 1.5-2.0) */
--lh-tight: 1.25; /* 見出し */
--lh-normal: 1.6; /* UI本文 */
--lh-relaxed: 1.8; /* 読み物コンテンツ */
--lh-article: 2.0; /* 記事本文（note.com準拠） */
/* CJK letter-spacing */
--ls-heading: 0.04em; /* 見出し専用 */
--ls-label: 0.1em; /* ラベル・ナビゲーション */
--ls-body: normal; /* 本文は normal（note.com実測準拠） */
}
/* CJK base rules */
body {
font-feature-settings: 'palt' 1, 'kern' 1;
text-rendering: optimizeLegibility;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
/* 見出し専用: palt + letter-spacing */
h1, h2, h3 {
font-feature-settings: 'palt' 1, 'kern' 1;
letter-spacing: var(--ls-heading);
line-height: var(--lh-tight);
}
/* ---- World Tokens (shape, font, density, shadow character) ---- */
/* Panolabo — tech SaaS, dense, sharp-round hybrid */
[data-world="panolabo"] {
--w-radius: 10px;
--w-radius-sm: 6px;
--w-radius-pill: 100px;
--w-radius-btn: 8px;
--w-font: var(--font-sans-jp);
--w-font-mono: var(--font-mono-jp);
--w-font-size-xs: 11px;
--w-font-size-sm: 12px;
--w-font-size-base: 14px;
--w-font-size-lg: 16px;
--w-font-size-xl: 20px;
--w-font-size-stat: 28px;
--w-font-weight-normal: 400;
--w-font-weight-medium: 600;
--w-font-weight-bold: 700;
--w-font-weight-black: 800;
--w-line-height: 1.6;
--w-letter-spacing-label: 2px;
--w-gap: 12px;
--w-gap-lg: 16px;
--w-padding-card: 20px;
--w-padding-section: 28px;
--w-content-w: 960px;
--w-sidebar-w: 220px;
}
/* Corporate — formal, trustworthy, sharp edges */
[data-world="corporate"] {
--w-radius: 4px;
--w-radius-sm: 2px;
--w-radius-pill: 4px;
--w-radius-btn: 4px;
--w-font: 'Noto Serif JP', 'Georgia', 'Times New Roman', serif;
--w-font-mono: 'Courier New', monospace;
--w-font-size-xs: 11px;
--w-font-size-sm: 12px;
--w-font-size-base: 14px;
--w-font-size-lg: 17px;
--w-font-size-xl: 22px;
--w-font-size-stat: 30px;
--w-font-weight-normal: 400;
--w-font-weight-medium: 500;
--w-font-weight-bold: 700;
--w-font-weight-black: 900;
--w-line-height: 1.7;
--w-letter-spacing-label: 3px;
--w-gap: 14px;
--w-gap-lg: 20px;
--w-padding-card: 24px;
--w-padding-section: 32px;
--w-content-w: 960px;
--w-sidebar-w: 220px;
}
/* Playful — consumer app, rounded, bouncy */
[data-world="playful"] {
--w-radius: 18px;
--w-radius-sm: 12px;
--w-radius-pill: 100px;
--w-radius-btn: 14px;
--w-font: 'Rounded Mplus 1c', 'Noto Sans JP', -apple-system, sans-serif;
--w-font-mono: 'Fira Code', monospace;
--w-font-size-xs: 12px;
--w-font-size-sm: 13px;
--w-font-size-base: 15px;
--w-font-size-lg: 18px;
--w-font-size-xl: 24px;
--w-font-size-stat: 36px;
--w-font-weight-normal: 400;
--w-font-weight-medium: 500;
--w-font-weight-bold: 700;
--w-font-weight-black: 800;
--w-line-height: 1.8;
--w-letter-spacing-label: 1px;
--w-gap: 16px;
--w-gap-lg: 24px;
--w-padding-card: 28px;
--w-padding-section: 36px;
--w-content-w: 880px;
--w-sidebar-w: 240px;
}
/* ---- Color Schemes (per world) ---- */
/* Panolabo Dark */
[data-world="panolabo"][data-scheme="dark"],
[data-world="panolabo"]:not([data-scheme]) {
--c-bg: #0a0a0b;
--c-bg-card: #141416;
--c-bg-hover: rgba(255,255,255,0.04);
--c-bg-sidebar: #0a0a0b;
--c-border: #222225;
--c-text: #e5e5e7;
--c-text-muted: #888;
--c-text-dim: #555;
--c-primary: #e2953f;
--c-accent: #d9772f;
--c-shadow: 0 2px 12px rgba(0,0,0,0.4);
--c-shadow-card: 0 1px 3px rgba(0,0,0,0.2);
--c-input-bg: #0a0a0b;
--c-modal-backdrop: rgba(0,0,0,0.7);
--c-success: #22c55e;
--c-warning: #eab308;
--c-danger: #ef4444;
--c-success-bg: rgba(34,197,94,0.1);
--c-warning-bg: rgba(234,179,8,0.1);
--c-danger-bg: rgba(239,68,68,0.1);
--c-badge-muted: rgba(255,255,255,0.05);
color-scheme: dark;
}
/* Panolabo Light */
[data-world="panolabo"][data-scheme="light"] {
--c-bg: #fafafa;
--c-bg-card: #ffffff;
--c-bg-hover: rgba(0,0,0,0.03);
--c-bg-sidebar: #ffffff;
--c-border: #e5e5e5;
--c-text: #171717;
--c-text-muted: #737373;
--c-text-dim: #a3a3a3;
--c-primary: #b23616;
--c-accent: #c8541b;
--c-shadow: 0 2px 12px rgba(0,0,0,0.06);
--c-shadow-card: 0 1px 4px rgba(0,0,0,0.04);
--c-input-bg: #ffffff;
--c-modal-backdrop: rgba(0,0,0,0.4);
--c-success: #16a34a;
--c-warning: #ca8a04;
--c-danger: #dc2626;
--c-success-bg: rgba(22,163,74,0.08);
--c-warning-bg: rgba(202,138,4,0.08);
--c-danger-bg: rgba(220,38,38,0.08);
--c-badge-muted: rgba(0,0,0,0.04);
color-scheme: light;
}
/* Corporate Light (default) */
[data-world="corporate"][data-scheme="light"],
[data-world="corporate"]:not([data-scheme]) {
--c-bg: #f8f8f6;
--c-bg-card: #ffffff;
--c-bg-hover: rgba(15,23,42,0.03);
--c-bg-sidebar: #ffffff;
--c-border: #d4d4d0;
--c-text: #1c1917;
--c-text-muted: #57534e;
--c-text-dim: #a8a29e;
--c-primary: #1e3a5f;
--c-accent: #2563eb;
--c-shadow: none;
--c-shadow-card: 0 1px 2px rgba(0,0,0,0.05);
--c-input-bg: #ffffff;
--c-modal-backdrop: rgba(0,0,0,0.4);
--c-success: #15803d;
--c-warning: #a16207;
--c-danger: #b91c1c;
--c-success-bg: rgba(21,128,61,0.06);
--c-warning-bg: rgba(161,98,7,0.06);
--c-danger-bg: rgba(185,28,28,0.06);
--c-badge-muted: rgba(0,0,0,0.04);
color-scheme: light;
}
/* Corporate Dark */
[data-world="corporate"][data-scheme="dark"] {
--c-bg: #111111;
--c-bg-card: #1a1a1a;
--c-bg-hover: rgba(255,255,255,0.03);
--c-bg-sidebar: #111111;
--c-border: #2a2a2a;
--c-text: #d4d4d4;
--c-text-muted: #858585;
--c-text-dim: #525252;
--c-primary: #93c5fd;
--c-accent: #60a5fa;
--c-shadow: none;
--c-shadow-card: 0 1px 2px rgba(0,0,0,0.3);
--c-input-bg: #111111;
--c-modal-backdrop: rgba(0,0,0,0.7);
--c-success: #4ade80;
--c-warning: #fbbf24;
--c-danger: #f87171;
--c-success-bg: rgba(74,222,128,0.08);
--c-warning-bg: rgba(251,191,36,0.08);
--c-danger-bg: rgba(248,113,113,0.08);
--c-badge-muted: rgba(255,255,255,0.05);
color-scheme: dark;
}
/* Playful Light (default) */
[data-world="playful"][data-scheme="light"],
[data-world="playful"]:not([data-scheme]) {
--c-bg: #faf5ff;
--c-bg-card: #ffffff;
--c-bg-hover: rgba(168,85,247,0.04);
--c-bg-sidebar: #ffffff;
--c-border: #e9d5ff;
--c-text: #1e1b4b;
--c-text-muted: #6b21a8;
--c-text-dim: #a78bfa;
--c-primary: #8b5cf6;
--c-accent: #ec4899;
--c-shadow: 0 4px 16px rgba(139,92,246,0.08);
--c-shadow-card: 0 2px 8px rgba(139,92,246,0.06);
--c-input-bg: #ffffff;
--c-modal-backdrop: rgba(30,27,75,0.4);
--c-success: #10b981;
--c-warning: #f59e0b;
--c-danger: #f43f5e;
--c-success-bg: rgba(16,185,129,0.08);
--c-warning-bg: rgba(245,158,11,0.08);
--c-danger-bg: rgba(244,63,94,0.08);
--c-badge-muted: rgba(139,92,246,0.06);
color-scheme: light;
}
/* Playful Dark */
[data-world="playful"][data-scheme="dark"] {
--c-bg: #0c0a1a;
--c-bg-card: #1a1630;
--c-bg-hover: rgba(139,92,246,0.08);
--c-bg-sidebar: #0c0a1a;
--c-border: #2e2754;
--c-text: #ede9fe;
--c-text-muted: #a78bfa;
--c-text-dim: #6d5aad;
--c-primary: #a78bfa;
--c-accent: #f472b6;
--c-shadow: 0 4px 20px rgba(139,92,246,0.15);
--c-shadow-card: 0 2px 10px rgba(139,92,246,0.1);
--c-input-bg: #0c0a1a;
--c-modal-backdrop: rgba(0,0,0,0.7);
--c-success: #34d399;
--c-warning: #fbbf24;
--c-danger: #fb7185;
--c-success-bg: rgba(52,211,153,0.1);
--c-warning-bg: rgba(251,191,36,0.1);
--c-danger-bg: rgba(251,113,133,0.1);
--c-badge-muted: rgba(167,139,250,0.08);
color-scheme: dark;
}
/* =====================================================================
LAYER 1: STRUCTURAL COMPONENTS
Uses --w-* (world) and --c-* (color) tokens
HTML structure is identical across all worlds
===================================================================== */
/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--w-font);
font-size: var(--w-font-size-base);
line-height: var(--w-line-height);
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
}
/* ---- Layout ---- */
.ds-app {
display: flex;
min-height: 100vh;
}
.ds-sidebar {
width: var(--w-sidebar-w);
position: fixed;
top: 0; bottom: 0; left: 0;
background: var(--c-bg-sidebar);
border-right: 1px solid var(--c-border);
overflow-y: auto;
z-index: 40;
display: flex;
flex-direction: column;
}
.ds-main {
flex: 1;
margin-left: var(--w-sidebar-w);
}
.ds-topbar {
height: 52px;
border-bottom: 1px solid var(--c-border);
display: flex;
align-items: center;
padding: 0 var(--w-padding-section);
position: sticky;
top: 0;
background: var(--c-bg);
z-index: 30;
}
.ds-topbar-title {
font-size: var(--w-font-size-lg);
font-weight: var(--w-font-weight-bold);
}
.ds-topbar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--w-gap);
}
.ds-content {
max-width: var(--w-content-w);
margin: 0 auto;
padding: var(--w-padding-section);
}
/* ---- Sidebar Nav ---- */
.ds-sidebar-brand {
padding: 18px 16px 8px;
}
.ds-sidebar-brand-label {
font-size: var(--w-font-size-xs);
font-weight: var(--w-font-weight-bold);
letter-spacing: var(--w-letter-spacing-label);
text-transform: uppercase;
color: var(--c-primary);
margin-bottom: 2px;
}
.ds-sidebar-brand-name {
font-size: var(--w-font-size-base);
font-weight: var(--w-font-weight-black);
}
.ds-nav {
padding: 8px 8px;
flex: 1;
}
.ds-nav-label {
font-size: var(--w-font-size-xs);
font-weight: var(--w-font-weight-medium);
letter-spacing: var(--w-letter-spacing-label);
text-transform: uppercase;
color: var(--c-text-dim);
padding: 14px 10px 6px;
}
.ds-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--w-radius-sm);
font-size: var(--w-font-size-sm);
color: var(--c-text-muted);
cursor: pointer;
transition: background 0.12s, color 0.12s;
text-decoration: none;
}
.ds-nav-item:hover {
background: var(--c-bg-hover);
color: var(--c-text);
}
.ds-nav-item.active {
background: color-mix(in srgb, var(--c-primary) 12%, transparent);
color: var(--c-primary);
font-weight: var(--w-font-weight-medium);
}
.ds-nav-item svg {
width: 16px; height: 16px;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.ds-sidebar-footer {
padding: 12px 16px;
border-top: 1px solid var(--c-border);
font-size: var(--w-font-size-sm);
color: var(--c-text-muted);
}
.ds-sidebar-footer a {
color: var(--c-text-muted);
text-decoration: none;
}
.ds-sidebar-footer a:hover {
color: var(--c-text);
}
/* ---- Cards ---- */
.ds-card {
background: var(--c-bg-card);
border: 1px solid var(--c-border);
border-radius: var(--w-radius);
padding: var(--w-padding-card);
box-shadow: var(--c-shadow-card);
}
/* ---- KPI Cards ---- */
.ds-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--w-gap);
margin-bottom: var(--w-gap-lg);
}
.ds-kpi {
background: var(--c-bg-card);
border: 1px solid var(--c-border);
border-radius: var(--w-radius);
padding: 18px var(--w-padding-card);
box-shadow: var(--c-shadow-card);
}
.ds-kpi-label {
font-size: var(--w-font-size-xs);
font-weight: var(--w-font-weight-medium);
color: var(--c-text-muted);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
}
.ds-kpi-value {
font-size: var(--w-font-size-stat);
font-weight: var(--w-font-weight-black);
line-height: 1.2;
}
.ds-kpi-sub {
font-size: var(--w-font-size-sm);
color: var(--c-text-muted);
margin-top: 4px;
}
/* ---- Tables ---- */
.ds-table-wrap {
background: var(--c-bg-card);
border: 1px solid var(--c-border);
border-radius: var(--w-radius);
overflow: hidden;
box-shadow: var(--c-shadow-card);
margin-bottom: var(--w-gap-lg);
}
.ds-table-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--c-border);
}
.ds-table-title {
font-size: var(--w-font-size-base);
font-weight: var(--w-font-weight-bold);
}
.ds-table {
width: 100%;
border-collapse: collapse;
}
.ds-table thead th {
font-size: var(--w-font-size-xs);
font-weight: var(--w-font-weight-medium);
color: var(--c-text-muted);
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 16px;
text-align: left;
border-bottom: 1px solid var(--c-border);
}
.ds-table tbody td {
padding: 11px 16px;
font-size: var(--w-font-size-sm);
border-bottom: 1px solid var(--c-border);
}
.ds-table tbody tr:last-child td {
border-bottom: none;
}
.ds-table tbody tr:hover {
background: var(--c-bg-hover);
}
/* ---- Badges ---- */
.ds-badge {
display: inline-block;
padding: 2px 10px;
border-radius: var(--w-radius-pill);
font-size: var(--w-font-size-xs);
font-weight: var(--w-font-weight-medium);
}
.ds-badge-primary { background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary); }
.ds-badge-success { background: var(--c-success-bg); color: var(--c-success); }
.ds-badge-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.ds-badge-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.ds-badge-muted { background: var(--c-badge-muted); color: var(--c-text-muted); }
/* ---- Buttons ---- */
.ds-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: var(--w-radius-btn);
font-size: var(--w-font-size-sm);
font-weight: var(--w-font-weight-medium);
font-family: inherit;
cursor: pointer;
border: 1px solid var(--c-border);
background: none;
color: var(--c-text-muted);
transition: background 0.12s, border-color 0.12s, color 0.12s;
text-decoration: none;
}
.ds-btn:hover {
border-color: var(--c-text-muted);
color: var(--c-text);
}
.ds-btn-primary {
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
}
.ds-btn-primary:hover {
opacity: 0.9;
color: #fff;
}
.ds-btn-danger {
color: var(--c-danger);
border-color: color-mix(in srgb, var(--c-danger) 30%, transparent);
}
.ds-btn-danger:hover {
background: var(--c-danger-bg);
border-color: var(--c-danger);
}
/* ---- Form Inputs ---- */
.ds-input {
padding: 8px 14px;
border: 1px solid var(--c-border);
border-radius: var(--w-radius-sm);
background: var(--c-input-bg);
color: var(--c-text);
font-size: var(--w-font-size-sm);
font-family: inherit;
width: 100%;
transition: border-color 0.15s;
}
.ds-input::placeholder {
color: var(--c-text-dim);
}
.ds-input:focus {
outline: none;
border-color: var(--c-primary);
}
.ds-label {
display: block;
font-size: var(--w-font-size-sm);
font-weight: var(--w-font-weight-medium);
color: var(--c-text-muted);
margin-bottom: 6px;
}
/* ---- Section Grid ---- */
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--w-gap); }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-gap); }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--w-gap); }
/* ---- Utility ---- */
.ds-mono { font-family: var(--w-font-mono); }
.ds-muted { color: var(--c-text-muted); }
.ds-dim { color: var(--c-text-dim); }
.ds-primary { color: var(--c-primary); }
.ds-success { color: var(--c-success); }
.ds-warning { color: var(--c-warning); }
.ds-danger { color: var(--c-danger); }
.ds-text-xs { font-size: var(--w-font-size-xs); }
.ds-text-sm { font-size: var(--w-font-size-sm); }
.ds-text-lg { font-size: var(--w-font-size-lg); }
.ds-text-xl { font-size: var(--w-font-size-xl); }
.ds-text-stat { font-size: var(--w-font-size-stat); }
.ds-bold { font-weight: var(--w-font-weight-bold); }
.ds-black { font-weight: var(--w-font-weight-black); }
.ds-mb { margin-bottom: var(--w-gap); }
.ds-mb-lg { margin-bottom: var(--w-gap-lg); }
/* ---- Page visibility ---- */
.ds-page { display: none; }
.ds-page.active { display: block; }
/* ---- Loading / Empty ---- */
.ds-loading {
text-align: center;
padding: 40px;
color: var(--c-text-muted);
font-size: var(--w-font-size-sm);
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
/* サイドバーを消さず、上部のスクロール式ナビに切り替える（ナビ消失防止） */
.ds-app { flex-direction: column; }
.ds-sidebar {
position: static;
width: auto;
max-height: 42vh;
border-right: none;
border-bottom: 1px solid var(--c-border);
}
.ds-main { margin-left: 0; }
.ds-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
.ds-grid-2 { grid-template-columns: 1fr; }
.ds-content { padding: 20px 16px; }
}
@media (max-width: 480px) {
.ds-kpi-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
COMPONENT: Help Tooltip (.ds-help)
Usage: ?
===================================================================== */
.ds-help {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: var(--ds-border, rgba(255,255,255,0.15));
color: var(--ds-muted, #888); font-size: 10px; font-weight: 700;
cursor: help; position: relative; vertical-align: middle; margin-left: 2px;
transition: background 0.15s;
}
.ds-help:hover {
background: var(--ds-primary, #6366f1);
color: #fff;
}
.ds-help:hover::after {
content: attr(data-tooltip);
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: var(--ds-bg-card, #1a1a2e); color: var(--ds-text, #e8e8e8);
border: 1px solid var(--ds-border, rgba(255,255,255,0.15));
border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 400;
line-height: 1.6; width: 260px; white-space: normal; z-index: 100;
box-shadow: 0 4px 12px rgba(0,0,0,0.3); pointer-events: none;
}
/* Right-aligned variant (tooltip opens to the left) */
.ds-help--right:hover::after {
left: auto; right: 0; transform: none;
}
/* Left-aligned variant */
.ds-help--left:hover::after {
left: 0; transform: none;
}