/* =============================================================================
   📝 TYPOGRAPHY COMPONENTS - 汎用タイポグラフィコンポーネント
   ============================================================================= */

/* 🔧🔧🔧 【メインタイトル】グラデーション装飾付きタイトル 🔧🔧🔧 */
.title {
    text-align: center;
    font-size: 2.5em;
    margin: 2rem 0;
    background: linear-gradient(45deg, #ffb6c1, #add8e6, #90ee90, #ffdab9, #dda0dd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: colorChange 8s infinite;
}

/* 🔧🔧🔧 【サブタイトル】シンプルなサブタイトル 🔧🔧🔧 */
.subtitle {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 3rem;
    color: #666;
}

/* 🔧🔧🔧 【見出しバリエーション】階層別見出し 🔧🔧🔧 */

/* 大見出し */
.heading-xl {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

/* 中見出し */
.heading-lg {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    color: #2c3e50;
}

/* 小見出し */
.heading-md {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: #2c3e50;
}

/* 最小見出し */
.heading-sm {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    color: #2c3e50;
}

/* 🔧🔧🔧 【本文テキスト】読みやすさ重視 🔧🔧🔧 */

/* 標準本文 */
.text-body {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1rem;
}

/* 大きな本文 */
.text-body-lg {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.25rem;
}

/* 小さな本文 */
.text-body-sm {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #666;
    margin-bottom: 0.75rem;
}

/* 🔧🔧🔧 【装飾テキスト】特殊効果付き 🔧🔧🔧 */

/* グラデーションテキスト */
.text-gradient {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 影付きテキスト */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 光るテキスト */
.text-glow {
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
    color: #4ecdc4;
}

/* 🔧🔧🔧 【テキスト配置】位置制御 🔧🔧🔧 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* 🔧🔧🔧 【フォントウェイト】太さ制御 🔧🔧🔧 */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* 🔧🔧🔧 【テキストカラー】色バリエーション 🔧🔧🔧 */
.text-primary { color: #4ecdc4; }
.text-secondary { color: #7bb3ff; }
.text-success { color: #2ecc71; }
.text-warning { color: #ff9f43; }
.text-danger { color: #e74c3c; }
.text-muted { color: #666; }
.text-dark { color: #2c3e50; }
.text-light { color: #ecf0f1; }

/* 🔧🔧🔧 【リスト】カスタマイズされたリスト 🔧🔧🔧 */
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    gap: 1rem;
}

.list-spaced li {
    margin-bottom: 0.5rem;
}

/* 🔧🔧🔧 【リンク】リンクスタイル 🔧🔧🔧 */
.link-unstyled {
    text-decoration: none;
    color: inherit;
}

.link-primary {
    color: #4ecdc4;
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-primary:hover {
    color: #44a08d;
    text-decoration: underline;
}