/*
Theme: Hatena Gear Theme (Agency Style)
Author: Antigravity AI
Description: A dark mode UL gear theme for Hatena Blog.
Responsive: yes
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@700;900&family=JetBrains+Mono&display=swap');

:root {
    --bg-main: #0a0f0b;
    --text-primary: #ffffff;
    --text-secondary: #64748b;
    --accent: #ff5f00;
    --border: rgba(255, 255, 255, 0.15);
    --line: rgba(255, 255, 255, 0.04);
}

/* --- 1. Base Reset --- */
* { box-sizing: border-box; }

html, body, body.page-index, body.page-entry, body.page-archive, body.page-about {
    background-color: var(--bg-main) !important;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body a { color: var(--accent) !important; text-decoration: none; transition: 0.2s; }
body a:hover { color: var(--text-primary) !important; text-decoration: underline; }

/* 便箋デザイン強制消去 */
body::before, body::after,
body #container::before, body #container::after,
body #wrapper::before, body #wrapper::after,
body #main::before, body #main::after,
body .entry::before, body .entry::after,
body .entry-inner::before, body .entry-inner::after,
body .entry-content::before, body .entry-content::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* --- 2. Layout Structure --- */
body #container {
    margin: 0 auto;
    padding: 0 15px;
    background: transparent !important;
}

@media (min-width: 768px) { body #container { width: 720px; } }
@media (min-width: 992px) { body #container { width: 940px; } }
@media (min-width: 1200px) { body #container { width: 1140px; } }

body #blog-title {
    margin: 0 0 2em;
    padding: 60px 0 !important;
    text-align: left;
    background: transparent !important;
    border-bottom: 2px solid var(--text-primary) !important;
}

body #title {
    margin: 0 0 10px 0;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(2.5rem, 8vw, 5.5rem) !important;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

body #title a { color: var(--text-primary) !important; }

body #blog-description {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--accent) !important;
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* --- 3. Main Content Layout --- */
body #content-inner {
    display: flex !important;
    flex-direction: column;
    background: transparent !important;
}

@media (min-width: 768px) {
    body #content-inner {
        flex-direction: row !important;
        justify-content: space-between;
    }
    body #wrapper { 
        width: 68% !important; 
        border-right: 1px solid var(--border);
        padding-right: 30px;
    }
    body #box2 { width: 28% !important; }
}

body #wrapper, body #main, body #main-inner, body #box2, body #box2-inner,
body .entry-inner, body .entry-content, body .entry-header, body .entry-footer,
body .hatena-module, body .hatena-module-inner {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- 横幅突き破り（詳細ページ崩れ）の完全防止 --- */
body .entry-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 画像・iframe・テーブル等がスマホ画面を突き破るのを防ぐ */
body .entry-content img, 
body .entry-content iframe, 
body .entry-content table, 
body .entry-content pre {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* 長いコードやURLも強制的に折り返す */
body .entry-content pre, 
body .entry-content code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

/* --- 4. Entry Design --- */
body #container .entry,
body #container .archive-entry {
    position: relative;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 0 40px !important;
    margin-bottom: 60px !important;
}

@media (max-width: 767px) {
    body #container .entry { padding: 0 0 25px !important; margin-bottom: 40px !important; }
}

body .entry-header { margin-bottom: 1.5em; padding-bottom: 0; border-bottom: none !important; }

body .entry-title {
    margin: 0 0 .5em;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    line-height: 1.2;
}

body .date {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.85rem !important;
    margin-bottom: 1em;
}

body .date a { color: var(--text-secondary) !important; }

body .categories a {
    background: transparent !important;
    padding: 4px 10px !important;
    border: 1px solid var(--border) !important;
    margin-right: 8px !important;
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    text-transform: uppercase;
}

/* --- 5. Article Content Decor --- */
body .entry-content, body .entry-content p, body .entry-title a { color: var(--text-primary) !important; }

body .entry-content h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.2rem !important;
    text-transform: uppercase;
    border: 1px solid var(--accent) !important;
    padding: 6px 15px !important;
    display: inline-block !important;
    margin: 2.5em 0 1.2em !important;
}

body .entry-content blockquote {
    border-left: 2px solid var(--text-primary) !important;
    padding: 15px 30px !important;
    margin: 2em 0 !important;
    font-size: 1.2rem;
    font-style: italic;
}

/* --- 6. Sidebar Styling --- */
body .hatena-module-title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
    margin-bottom: 15px !important;
}

body .hatena-module-title::before { content: "// "; color: var(--accent); }
body .hatena-module-title a { color: var(--text-secondary) !important; }

body .hatena-urllist li {
    font-size: 0.9rem !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Footer & Pager */
body #footer {
    margin-top: 4em;
    padding: 60px 0;
    text-align: left;
    border-top: 2px solid var(--text-primary) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.8rem;
}

body .pager { display: flex !important; justify-content: space-between; margin: 3em 0; }

body .pager a {
    padding: 10px 20px !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.9rem;
}