/* ============================================================
   GLOBAL base
   ============================================================ */

body {
    margin: 0;
    padding: 0;
    background: #1a1b1e;
    color: #dcdcdc;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 1.3rem;
    line-height: 1.95;
}

/* CRT scanline */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.018) 0px,
        rgba(255,255,255,0.015) 2px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ============================================================
   HEADER
   ============================================================ */

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    background: #111113;
    border-bottom: 3px solid #8a00ff;
}

.header-logo img {
    max-width: 260px;
    height: auto;
    display: block;
}


.top-nav a {
    margin-left: 14px;
}

/* ============================================================
   MECHANICAL BUTTONS
   ============================================================ */

.btn-mech {
    display: inline-block;
    padding: 10px 22px;
    color: #00ffea;
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 0.05em;

    background: linear-gradient(#2c2c30, #1a1a1d);
    border: 3px solid #5f00a5;
    border-radius: 6px;

    box-shadow:
        inset 0 0 6px #0ef,
        inset 0 0 25px #3f00ff55,
        0 4px 0 #4a0077,
        0 6px 14px #15001f;

    text-shadow:
        1px 1px 0 #005,
        -1px -1px 0 #0ff,
        0 0 8px #00fff5cc;

    transition: all .15s ease;
}

.btn-mech:hover {
    background: linear-gradient(#3a3a3e, #1d1d21);
    color: #ff42ff;

    box-shadow:
        inset 0 0 12px #ff00ff,
        inset 0 0 30px #a500ff66,
        0 4px 0 #7a00ca,
        0 8px 20px #290045;

    transform: translateY(-2px);
}

.btn-mech:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 0 4px #00f6ff,
        inset 0 0 12px #00ffff33,
        0 2px 0 #33005a;
}

/* small variant (top nav) */
.btn-mech.small {
    padding: 6px 14px;
    font-size: 0.95rem;
}

/* ============================================================
   FIXED ARTICLE NAVIGATION
   ============================================================ */

.fixed-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #151518dd;
    padding: 12px 25px;
    border-bottom: 3px solid #7a00cf;
    backdrop-filter: blur(3px);
    display: flex;
    gap: 14px;
}

/* ============================================================
   CONTENT PANEL
   ============================================================ */

.content {
    margin: 60px auto;
    padding: 40px 50px;
    max-width: 1000px;

    background: #121215;
    border: 4px solid #6d00c7;

    box-shadow:
        inset 0 0 14px #130021,
        inset 0 0 40px #0d0014,
        0 0 20px #30004b,
        0 0 80px rgba(98,0,130,0.25);
}

/* ============================================================
   TITLES
   ============================================================ */

.site-title {
    font-size: 2.8rem;
    margin-bottom: 40px;
    color: #ff36ff;

    text-shadow:
        3px 3px 0 #00eaff,
        -3px -3px 0 #ff00ff,
        0 0 18px #ff00ffbb;
}

.content h1, .content h2 {
    color: #ff36ff;
    margin-top: 50px;
    margin-bottom: 18px;
    font-size: 1.9rem;

    border-left: 4px solid #00ffa5;
    padding-left: 14px;

    text-shadow:
        2px 2px 0 #00faff,
        -2px -2px 0 #ff00ffc6,
        0 0 10px #ff00ff88;
}

/* ============================================================
   LIST
   ============================================================ */

.post-item {
    margin-bottom: 25px;
    padding-left: 12px;
    border-left: 4px solid #00ff9d;
    font-size: 1.4rem;
}

.content a {
    color: #3dffe5;
    text-shadow:
        1px 1px 0 #003,
        -1px -1px 0 #39f,
        0 0 5px #00fff5aa;
}

.content a:hover {
    color: #ff60ff;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    text-align: center;
    padding: 35px 20px;
    color: #808080;

    background: #101014;
    border-top: 4px solid #6300a0;

    box-shadow:
        inset 0 6px 15px #0a0012,
        0 -4px 12px #26003eaa;
}

/* ============================================================
   Header Logo（画像サイズ＋スマホ調整）
   ============================================================ */

.header-icon {
    width: 240px;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 10px 0;
    filter: drop-shadow(0px 0px 4px #7400ff);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    margin-bottom: 20px; /* ← スマホでもPCでも自然に余白確保 */
}
/* ============================================================
   Article Navigation（記事ページの上部ナビ）
   ============================================================ */

.fixed-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #151518dd;
    padding: 12px 25px;
    border-bottom: 3px solid #7a00cf;
    backdrop-filter: blur(3px);
    display: flex;
    gap: 14px;
}


/* ============================================================
   Mechanical Buttons for List and Pager
   ============================================================ */

.post-list a.btn-mech {
    display: inline-block !important;
    padding: 8px 18px;
    margin-bottom: 10px;
}

.pager-btn.btn-mech {
    display: inline-block !important;
    padding: 8px 18px;
}

/* ===========================
   TOP NAVIGATION（PC）
   =========================== */

.top-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* nav 内のボタンデザイン（PC） */
.top-nav .btn-mech {
    padding: 10px 22px;
    font-size: 1.1rem;
}

/* ===========================
   SMARTPHONE（600px 以下）
   =========================== */
@media (max-width: 600px) {

    /* ▼ ヘッダー画像とメニューの距離を広げる */
    .site-header {
        padding-top: 20px !important;
        padding-bottom: 30px !important;
        flex-direction: column;
        align-items: center;
        gap: 18px !important; /* ← ここが最重要！ */
    }

    /* ▼ header.png の調整 */
    .header-icon {
        width: 80% !important;
        max-width: 320px !important;
        margin-bottom: 12px !important;
    }

    /* ▼ メニューを縦並びにして大きく見やすく */
    .top-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px !important; /* ← これで画像としっかり距離が空く */
    }

    .top-nav .btn-mech {
        font-size: 1.25rem !important;
        padding: 14px 28px !important;
    }
}

/* ============================================================
   SMARTPHONE — Ultra Readability Mode（最大可読性）
   ============================================================ */
/* ============================================================
    PAGE SPECIFIC FONT TUNING
   ============================================================ */

/* ▼ ホームページ（index）… 少しだけ小さく */
@media (max-width: 600px) {
    body.home-page {
        font-size: 1.35rem !important;
        line-height: 2.0 !important;
    }

    /* 記事一覧のリンク */
    .home-page .post-list a {
        font-size: 1.35rem !important;
        padding: 6px 12px !important;
    }

    /* ホームのメニューボタンを小さく */
    .home-page .top-nav .btn-mech {
        font-size: 1.1rem !important;
        padding: 10px 18px !important;
    }
}


/* ▼ 記事ページ（post.php）… 本文を大きく */
@media (max-width: 600px) {
    body.post-page {
        font-size: 2.0rem !important;
        line-height: 2.6 !important;
    }

    .post-page .content {
        font-size: 2.0rem !important;
        padding: 30px 22px !important;
        line-height: 2.6 !important;
    }

    .post-page h1 {
        font-size: 2.6rem !important;
    }

    .post-page h2 {
        font-size: 2.2rem !important;
    }

    .post-page li {
        font-size: 2.0rem !important;
        margin-bottom: 14px !important;
    }

    .post-page a {
        font-size: 2.0rem !important;
    }

    .post-page pre,
    .post-page code {
        font-size: 1.8rem !important;
    }
}

/* ▼ スマホ時もメニューを横並びにする */
@media (max-width: 600px) {
    .top-nav {
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        gap: 18px;
    }

    .top-nav .btn-mech {
        font-size: 1.1rem !important;
        padding: 10px 22px !important;
    }
}

/* ============================================================
   HEADER — PCで横並び、スマホで縦並び
   ============================================================ */

.site-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    margin-bottom: 30px;
}

/* ロゴ画像を少し小さく */
.header-icon {
    width: 220px;
    height: auto;
    filter: drop-shadow(0px 0px 4px #7400ff);
}

/* メニューの横並び */
.top-nav {
    display: flex;
    gap: 18px;
}

/* ボタン少し小さく */
.top-nav .btn-mech.small {
    padding: 8px 18px;
    font-size: 1.0rem;
}

@media (max-width: 600px) {

    .site-header {
        flex-direction: column;
        gap: 18px; /* ロゴとボタンの距離確保 */
        padding-top: 22px;
        padding-bottom: 12px;
    }

    .header-icon {
        width: 70%;
        max-width: 260px;
    }

    .top-nav {
        flex-direction: row;
        justify-content: center;
        gap: 14px;
    }

    .top-nav .btn-mech.small {
        padding: 10px 20px;
        font-size: 1.05rem;
    }
}