/* 日別slug詳細ページのスタイル */
.day-slug-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* ヘッダー部分 */
.day-slug-header {
    margin-bottom: 2rem;
}

/* タイトル */
.day-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.slug-title {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

/* ナビゲーション */
.day-navigation {
    margin: 1.5rem 0;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 0.75rem;
}

.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.day-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--primary-color);
    text-decoration: underline;
    border-radius: 4px;
}

.day-nav-link:hover {
    text-decoration: underline;
}

.nav-prev {
    flex: 0 0 auto;
}

.nav-next {
    flex: 0 0 auto;
}

.nav-center {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    justify-content: center;
}

.nav-separator {
    color: var(--text-secondary);
}

.nav-arrow {
    font-size: 1.2rem;
}

/* コンセプトナビゲーション */
.concept-navigation {
    margin: 1rem 0;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 0.5rem;
}

.concept-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.concept-nav-item {
    flex: 0 0 auto;
}

.concept-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 4px;
    background-color: var(--bg-primary);
}

.concept-nav-link:hover {
    background-color: var(--bg-hover);
}

.concept-nav-item.active .concept-nav-link {
    background-color: var(--primary-color);
    color: var(--bg-primary);
}

/* サブカテゴリナビゲーション */
.sub-category-navigation {
    margin: 1rem 0;
}

.sub-category-nav-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* モバイルデバイス（幅が狭い画面）では縦並び */
@media (max-width: 768px) {
    .sub-category-nav-list {
        grid-template-columns: 1fr;
    }
}

/* タブレット以上（幅が広い画面）では横並び */
@media (min-width: 769px) {
    .sub-category-nav-list {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        max-width: 1200px;
        margin: 0 auto;
    }
}

.sub-category-nav-item {
    display: block;
}

.sub-category-nav-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 8px;
    background-color: var(--bg-secondary);
    font-size: 0.95rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    text-align: center;
}

.sub-category-nav-link:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sub-category-nav-item.active .sub-category-nav-link {
    background-color: var(--primary-color);
    color: var(--bg-primary);
    font-weight: bold;
    border-color: var(--primary-color);
}

/* コンテンツエリア */
.day-content {
    margin: 2rem 0;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
}

/* アイテムグリッド */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* カード共通 */
.item-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1.5rem;
}

.item-card.featured {
    grid-column: 1 / -1;
    width: 100%;
}

/* 年表示 */
.event-year,
.birth-year,
.death-year {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.year-label {
    font-weight: bold;
}

/* 名前・タイトル */
.holiday-name,
.birth-name,
.death-name,
.drink-name,
.flower-name {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

/* ヘッダー部分 */
.birth-header,
.death-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.life-span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* テキスト */
.holiday-text,
.event-text,
.birth-text,
.death-text {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

/* 職業タグ */
.birth-jobs,
.death-jobs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.job-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #e6f2ff;
    border: 1px solid #4a90e2;
    color: #2c5aa0;
    border-radius: 16px;
    font-size: 0.85rem;
}

/* 説明文 */
.holiday-short-description,
.event-short-description,
.birth-short-description,
.death-short-description,
.holiday-description,
.event-description,
.birth-description,
.death-description {
    margin-bottom: 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* キーワード */
.holiday-keywords,
.event-keywords,
.birth-keywords,
.death-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.keyword-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: #f0f8ff;
    border: 1px solid #87ceeb;
    color: #4682b4;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* 誕生酒スタイル */
.drink-info,
.flower-characteristics {
    margin: 1rem 0;
}

.drink-description,
.drink-trivia,
.flower-trivia,
.flower-uses,
.flower-cautions,
.flower-toxicity {
    margin-top: 1.5rem;
}

.info-row,
.characteristic {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.info-row .label,
.characteristic .label {
    font-weight: bold;
    color: var(--text-secondary);
}

.info-row .value,
.characteristic .value {
    color: var(--text-primary);
}

.section-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 1rem 0 0.5rem;
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.25rem;
}

.drink-recipe,
.flower-language,
.flower-characteristics,
.flower-description,
.birth-meaning {
    margin-top: 1.5rem;
}

.ingredients ul,
.steps ol {
    margin: 0.5rem 0 0.5rem 1.5rem;
}

.ingredients li,
.steps li {
    background-color: #f8fbff;
    border: 1px solid #b3d4f5;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    list-style-position: inside;
}

.language-list {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
}

.language-list li {
    margin-bottom: 0.25rem;
    padding-left: 1rem;
    position: relative;
}

.language-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* 誕生花スタイル */
.scientific-name,
.flower-family {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.alternative-names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.alt-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.alt-name:not(:last-child):after {
    content: ",";
}

/* 誕生酒・誕生花の追加スタイル */
.drink-origin,
.drink-quotes {
    margin-top: 1.5rem;
}

.quotes-list {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
}

.quotes-list li {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    background-color: #f0f8ff;
    border-left: 4px solid var(--primary-color);
    border-radius: 4px;
    font-style: italic;
}

.drink-trivia ul,
.flower-trivia ul {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
}

.drink-trivia li,
.flower-trivia li {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    background-color: #f8fbff;
    border: 1px solid #b3d4f5;
    border-radius: 4px;
    position: relative;
    padding-left: 2rem;
}

.drink-trivia li:before,
.flower-trivia li:before {
    content: "•";
    position: absolute;
    left: 0.75rem;
    color: var(--primary-color);
    font-weight: bold;
}

/* 花の利用方法 */
.use-category {
    margin-bottom: 1rem;
}

.use-category h5 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.use-category ul {
    list-style: none;
    margin: 0 0 0 1rem;
    padding: 0;
}

.use-category li {
    margin-bottom: 0.25rem;
    position: relative;
    padding-left: 1rem;
}

.use-category li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* 注意事項 */
.caution-note {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: #fff9e6;
    border: 1px solid #ffd700;
    border-radius: 4px;
    font-size: 0.9rem;
}

.flower-cautions ul {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
}

.flower-cautions li {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    background-color: #fff9e6;
    border: 1px solid #ffd700;
    border-radius: 4px;
    position: relative;
    padding-left: 2rem;
}

.flower-cautions li:before {
    content: "⚠";
    position: absolute;
    left: 0.75rem;
    color: #ff9800;
}

/* 毒性情報 */
.toxicity-level {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    background-color: #ffebee;
    border: 1px solid #f44336;
    border-radius: 4px;
}

.flower-toxicity p {
    margin-bottom: 0.5rem;
}

/* データなし */
.no-data {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .day-slug-detail-container {
        padding: 1rem 0.5rem;
    }
    
    .day-title {
        font-size: 2rem;
    }
    
    .slug-title {
        font-size: 1.5rem;
    }
    
    .items-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .nav-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nav-center {
        order: -1;
        width: 100%;
    }
    
    .concept-nav-list {
        font-size: 0.9rem;
    }
    
    .concept-nav-link {
        padding: 0.375rem 0.75rem;
    }
}