@charset "UTF-8";
/*
Theme Name: Cocoon Child Nook Luxe Edition
Description: 完全に洗練された高級デザイン。パフォーマンス最適化、レスポンシブ強化、視覚的洗練。
Template: cocoon-master
Version: 2.0.5 (Archive CSS Fixed)
Author: Skineko
Author URI: https://survive-2040.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cocoon-child-nook
*/

/* ==========================================
   1. Design Tokens & CSS Variables
   ========================================== */
:root {
    /* カラーパレット */
    --nook-gold: #C5A059;
    --nook-gold-light: #D4AF37;
    --nook-gold-dark: #B8860B;
    --nook-midnight: #0F172A;
    --nook-slate: #64748B;
    --nook-slate-light: #94A3B8;
    --nook-slate-dark: #475569;
    --nook-pearl: #FFFFFF;
    --nook-glass: rgba(255, 255, 255, 0.82);
    
    /* スペーシング */
    --nook-spacing-xs: 0.5rem;
    --nook-spacing-sm: 1rem;
    --nook-spacing-md: 2rem;
    --nook-spacing-lg: 4rem;
    --nook-spacing-xl: 8rem;
    
    /* トランジション */
    --nook-transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --nook-transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --nook-transition-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* シャドウ */
    --nook-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --nook-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --nook-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
    
    /* Z-index レイヤー */
    --z-base: 1;
    --z-nav: 10000;
    --z-modal: 20000;
}

/* ==========================================
   2. Base Styles & Typography
   ========================================== */
body {
    background-color: var(--nook-pearl);
    color: var(--nook-midnight);
    font-family: 'Noto Serif JP', serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt" 1;
}

/* フォントファミリー */
.font-orbitron { 
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 0.05em;
}

.font-mont { 
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: 0.025em;
}

.font-serif-jp {
    font-family: 'Noto Serif JP', serif !important;
}

/* ==========================================
   3. Luxury Components
   ========================================== */

/* ゴールドグラデーションテキスト */
.text-gold-gradient {
    background: linear-gradient(135deg, 
                var(--nook-gold-light) 0%, 
                var(--nook-gold) 50%, 
                var(--nook-gold-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(197, 160, 89, 0.15));
}

/* 高級シャドウ */
.ultra-shadow {
    box-shadow: 
        0 4px 12px rgba(15, 23, 42, 0.02),
        0 20px 40px -10px rgba(15, 23, 42, 0.04),
        0 40px 80px -20px rgba(15, 23, 42, 0.08);
}

/* ナビゲーションガラス効果 */
#nook-nav {
    background: transparent !important;
    transition: all var(--nook-transition-normal);
}

.nav-glass {
    background: var(--nook-glass) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.03);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
    transition: all var(--nook-transition-normal);
}

/* ヒーローマスク */
.hero-mask {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.92) 25%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.4) 75%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* ヒーローセクション強化 */
section[role="banner"] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

section[role="banner"] .container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* ==========================================
   4. Menu Styling
   ========================================== */

/* グローバルメニュー強制表示 */
#nook-nav ul[role="menubar"],
.nook-dynamic-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#nook-nav ul[role="menubar"] li,
.nook-dynamic-menu li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

#nook-nav ul[role="menubar"] a,
.nook-dynamic-menu a {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 10px !important;
    font-weight: bold !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: #2C3037 !important;
    text-decoration: none !important;
    transition: color var(--nook-transition-normal) !important;
    display: inline-block !important;
    padding: 0.5rem 0 !important;
}

#nook-nav ul[role="menubar"] a:hover,
.nook-dynamic-menu a:hover {
    color: #0F172A !important;
}

/* スクロール後のメニュー色 */
#nook-nav.nav-glass ul[role="menubar"] a,
#nook-nav.nav-glass .nook-dynamic-menu a {
    color: #475569 !important;
}

#nook-nav.nav-glass ul[role="menubar"] a:hover,
#nook-nav.nav-glass .nook-dynamic-menu a:hover {
    color: #C5A059 !important;
}

/* フッターメニュー */
.nook-footer-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nook-footer-menu .menu-item {
    margin-bottom: 1.5rem;
}

.nook-footer-menu .menu-item a {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    line-height: 1.8;
    text-decoration: none !important;
    color: var(--nook-slate) !important;
    transition: all var(--nook-transition-normal);
    display: inline-block;
    position: relative;
}

.nook-footer-menu .menu-item a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--nook-gold);
    transition: width var(--nook-transition-normal);
}

.nook-footer-menu .menu-item a:hover {
    color: var(--nook-gold) !important;
    transform: translateX(8px);
}

.nook-footer-menu .menu-item a:hover::after {
    width: 100%;
}

/* ==========================================
   5. Animations
   ========================================== */

/* オーディオビジュアライザー */
@keyframes v-pulse {
    0%, 100% {
        height: 4px;
        opacity: 0.3;
    }
    50% {
        height: 100%;
        opacity: 1;
    }
}

.v-bar {
    width: 3px;
    background: var(--nook-gold);
    border-radius: 4px;
    transition: all var(--nook-transition-fast);
}

.v-bar.playing {
    animation: v-pulse 1s infinite ease-in-out alternate;
}

/* フェードイン */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s var(--nook-transition-normal) forwards;
}

/* パルス */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* スピン */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ==========================================
   6. Scrollbar Styling
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: var(--nook-gold);
    border-radius: 10px;
    transition: background var(--nook-transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--nook-gold-dark);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nook-gold) #f8fafc;
}

/* ==========================================
   7. Responsive Design
   ========================================== */

/* スマホ（640px未満） */
@media (max-width: 640px) {
    :root {
        --nook-spacing-lg: 2rem;
        --nook-spacing-xl: 4rem;
    }
    
    body {
        font-size: 15px;
        line-height: 1.75;
    }
    
    h2 {
        font-size: 2.5rem !important;
        line-height: 1.15 !important;
    }
    
    h3 {
        font-size: 1.75rem !important;
    }
    
    h4 {
        font-size: 1.5rem !important;
    }
    
    .py-52 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    
    .py-40 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .rounded-\[5rem\] {
        border-radius: 2.5rem;
    }
    
    .rounded-\[4rem\] {
        border-radius: 2rem;
    }
    
    .rounded-\[3rem\] {
        border-radius: 1.5rem;
    }
    
    .hero-mask {
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 1) 40%,
            rgba(255, 255, 255, 0.85) 70%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    
    .gap-40 {
        gap: 2rem;
    }
    
    .gap-20 {
        gap: 1.5rem;
    }
}

/* タブレット（641px〜1024px） */
@media (min-width: 641px) and (max-width: 1024px) {
    h2 {
        font-size: 4rem !important;
    }
    
    .py-52 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    
    .gap-40 {
        gap: 3rem;
    }
}

/* PC（1025px以上） */
@media (min-width: 1025px) {
    .container {
        max-width: 1600px;
    }
}

/* 大画面（1600px以上） */
@media (min-width: 1600px) {
    body {
        font-size: 17px;
    }
}

/* ==========================================
   8. Accessibility Enhancements
   ========================================== */

/* フォーカススタイル */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--nook-gold);
    outline-offset: 4px;
}

/* 視覚的フィードバック */
button:active {
    transform: scale(0.98);
}

/* リンクのアンダーライン（キーボードナビゲーション用） */
a:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--nook-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* スクリーンリーダー専用テキスト */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================
   9. Print Styles
   ========================================== */
@media print {
    .nook-wrapper {
        background: white;
    }
    
    nav,
    footer,
    #audio,
    .no-print {
        display: none !important;
    }
    
    a {
        color: var(--nook-midnight) !important;
        text-decoration: none !important;
    }
    
    .ultra-shadow {
        box-shadow: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
}

/* ==========================================
   10. Performance Optimizations
   ========================================== */

/* GPU加速 */
.nav-glass,
.ultra-shadow,
.group:hover,
.v-bar.playing {
    will-change: transform;
}

/* レイアウトシフト防止 */
img {
    max-width: 100%;
    height: auto;
}

/* フォント読み込み最適化 */
@font-face {
    font-display: swap;
}

/* ==========================================
   11. Utility Classes
   ========================================== */

/* テキスト切り詰め */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hiddenクラス */
.hidden {
    display: none !important;
}

/* 画像のオブジェクトフィット */
.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

/* ==========================================
   12. Loading States
   ========================================== */

/* スケルトンローダー */
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.05) 0%,
        rgba(15, 23, 42, 0.1) 50%,
        rgba(15, 23, 42, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* ローディングスピナー */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(197, 160, 89, 0.3);
    border-radius: 50%;
    border-top-color: var(--nook-gold);
    animation: spin 1s linear infinite;
}

/* ==========================================
   13. Dark Mode Support (Future)
   ========================================== */

@media (prefers-color-scheme: dark) {
    /* 将来的なダークモード対応用 */
    /* 現在は無効 */
}

/* ==========================================
   14. Browser-Specific Fixes
   ========================================== */

/* Safari対応 */
@supports (-webkit-touch-callout: none) {
    .nav-glass {
        -webkit-backdrop-filter: blur(30px) saturate(180%);
    }
}

/* IE11対応（フォールバック） */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .nav-glass {
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

/* ==========================================
   15. Debug Utilities (Development Only)
   ========================================== */

/* デバッグモード（本番環境では削除推奨） */
.debug-outline * {
    outline: 1px solid red;
}

.debug-grid {
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ==========================================
   16. Menu Display Fix (メニュー表示修正)
   ========================================== */

/* グローバルナビゲーションメニューの強制表示 */
#nook-nav ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 2.5rem !important;
}

#nook-nav ul li {
    display: inline-block !important;
    margin: 0 !important;
}

#nook-nav ul li a {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.3em !important;
    font-weight: bold !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
}

#nook-nav ul li a:hover {
    color: #0F172A !important;
}

/* スクロール後のガラスエフェクト適用時の色 */
.nav-glass ul li a {
    color: #64748B !important;
}

.nav-glass ul li a:hover {
    color: #C5A059 !important;
}

/* ナビゲーション右側のコンテナ */
#nook-nav .lg\\:flex {
    display: none !important;
}

@media (min-width: 1024px) {
    #nook-nav .lg\\:flex {
        display: flex !important;
        align-items: center !important;
        gap: 3rem !important;
    }
}

/* ==========================================
   17. The Archive 専用スタイル (v2.0.4追加)
   ========================================== */

/* ドロップダウンメニューの強制非表示 */
#category-dropdown,
#tag-dropdown,
#date-dropdown,
#sort-dropdown {
    display: none !important;
}

/* ドロップダウンが開いている状態 */
#category-dropdown.show,
#tag-dropdown.show,
#date-dropdown.show,
#sort-dropdown.show {
    display: block !important;
}

/* リスト表示の初期非表示 */
.post-card .list-view {
    display: none !important;
}

/* リスト表示がアクティブな時 */
.post-card .list-view.active {
    display: block !important;
}

/* グリッド表示の初期表示 */
.post-card .grid-view {
    display: block !important;
}

/* グリッド表示が非アクティブな時 */
.post-card .grid-view.inactive {
    display: none !important;
}

/* The Archive フィルターセクション */
#filters-section {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* フィルターボタンのホバー効果 */
#filters-section button {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#filters-section button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.15);
}

/* ドロップダウンメニューのアニメーション */
#category-dropdown,
#tag-dropdown,
#date-dropdown,
#sort-dropdown {
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 記事カードのフェードインアニメーション */
.post-card {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* スタガードアニメーション（順次表示） */
.post-card:nth-child(1) { animation-delay: 0s; }
.post-card:nth-child(2) { animation-delay: 0.1s; }
.post-card:nth-child(3) { animation-delay: 0.2s; }
.post-card:nth-child(4) { animation-delay: 0.3s; }
.post-card:nth-child(5) { animation-delay: 0.4s; }
.post-card:nth-child(6) { animation-delay: 0.5s; }
.post-card:nth-child(7) { animation-delay: 0.6s; }
.post-card:nth-child(8) { animation-delay: 0.7s; }
.post-card:nth-child(9) { animation-delay: 0.8s; }
.post-card:nth-child(10) { animation-delay: 0.9s; }
.post-card:nth-child(11) { animation-delay: 1.0s; }
.post-card:nth-child(12) { animation-delay: 1.1s; }

/* Back to Top ボタン */
#back-to-top {
    box-shadow: 0 8px 24px rgba(197, 160, 89, 0.3);
}

#back-to-top:hover {
    box-shadow: 0 12px 32px rgba(197, 160, 89, 0.4);
    transform: translateY(-2px);
}

/* ページネーション */
.page-numbers {
    min-width: 48px;
    min-height: 48px;
}

.page-numbers.current {
    pointer-events: none;
}

/* The Archive レスポンシブ対応 */
@media (max-width: 768px) {
    #filters-section {
        position: relative !important;
        top: 0 !important;
    }
    
    #filters-section .flex {
        flex-direction: column;
        align-items: stretch;
    }
    
    #filters-section button {
        width: 100%;
        justify-content: space-between;
    }
    
    .list-view .flex {
        flex-direction: column;
    }
    
    .list-view .w-64 {
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #posts-container[data-view-mode="grid"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* アクセシビリティ: フォーカス表示 */
#filters-section button:focus,
.page-numbers:focus {
    outline: 2px solid var(--nook-gold);
    outline-offset: 4px;
}

/* プリント用スタイル */
@media print {
    #filters-section,
    #back-to-top,
    nav.pagination {
        display: none !important;
    }
    
    .post-card {
        break-inside: avoid;
    }
}