<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#6366f1">

    {% if seo_settings %}
    {% if seo_settings.search_console_id %}
    <meta name="google-site-verification" content="{{ seo_settings.search_console_id }}">
    {% endif %}
    <meta property="og:site_name" content="{{ seo_settings.og_site_name or site_name }}">
    {% endif %}

    {% block meta %}{% endblock %}
    <title>{% block title %}{{ site_name }}{% endblock %}</title>

    {% if site_json_ld %}{{ site_json_ld | safe }}{% endif %}

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="/css/theme.css">

    <style>
        /* Blog Theme */
        :root {
            --sidebar-width: 320px;
            --content-max: 720px;
            --accent: #ec4899;
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
        }

        /* Header */
        .site-header {
            background: var(--color-primary);
            color: white;
            border-bottom: none;
        }

        .site-header .container {
            padding: 1.5rem var(--space-lg);
        }

        .site-logo {
            color: white;
            font-size: 1.75rem;
        }

        .site-nav a {
            color: rgba(255,255,255,0.9);
        }

        .site-nav a:hover {
            color: white;
        }

        /* Category bar */
        .category-bar {
            background: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
            padding: 0.75rem 0;
        }

        .category-bar .container {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
        }

        .category-bar a {
            color: var(--color-text-muted);
            text-decoration: none;
            font-size: 0.9rem;
            white-space: nowrap;
            transition: color 0.2s;
        }

        .category-bar a:hover,
        .category-bar a.active {
            color: var(--color-primary);
        }

        /* Main layout */
        .site-main {
            padding: 2rem 0 3rem;
        }

        .main-container {
            display: grid;
            grid-template-columns: 1fr var(--sidebar-width);
            gap: 2.5rem;
        }

        /* Sidebar */
        .sidebar {
            width: auto;
        }

        .widget {
            background: white;
            border: 1px solid var(--color-border);
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .widget-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 3px solid var(--color-primary);
            display: inline-block;
        }

        .widget-content ul {
            list-style: none;
        }

        .widget-content li {
            padding: 0.625rem 0;
            border-bottom: 1px dashed var(--color-border);
        }

        .widget-content li:last-child {
            border-bottom: none;
        }

        .widget-content a {
            color: var(--color-text);
            text-decoration: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .widget-content a:hover {
            color: var(--color-primary);
        }

        .widget-count {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            background: var(--color-surface);
            padding: 0.125rem 0.5rem;
            border-radius: 1rem;
        }

        /* Post card */
        .post-card {
            display: flex;
            gap: 1.5rem;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--color-border);
        }

        .post-card:first-child {
            padding-top: 0;
        }

        .post-card-thumbnail {
            width: 200px;
            height: 140px;
            flex-shrink: 0;
            border-radius: 0.5rem;
            overflow: hidden;
            background: var(--color-surface);
        }

        .post-card-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .post-card-content {
            flex: 1;
            min-width: 0;
        }

        .post-card-category {
            font-size: 0.75rem;
            color: var(--color-primary);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .post-card h2 {
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 0.5rem;
        }

        .post-card h2 a {
            color: var(--color-text);
            text-decoration: none;
        }

        .post-card h2 a:hover {
            color: var(--color-primary);
        }

        .post-card-excerpt {
            color: var(--color-text-muted);
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 0.75rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .post-card-meta {
            font-size: 0.8rem;
            color: var(--color-text-muted);
        }

        /* Post detail */
        .post {
            max-width: var(--content-max);
        }

        .post-header {
            margin-bottom: 2rem;
        }

        .post-header h1 {
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 1rem;
        }

        .post-content {
            font-size: 1.0625rem;
            line-height: 1.9;
        }

        .post-content p {
            margin-bottom: 1.5rem;
        }

        .post-content h2 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-top: 3rem;
            margin-bottom: 1rem;
            padding-left: 1rem;
            border-left: 4px solid var(--color-primary);
        }

        .post-content h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-top: 2rem;
            margin-bottom: 0.75rem;
        }

        .post-content blockquote {
            background: var(--color-surface);
            border-left: 4px solid var(--accent);
            padding: 1rem 1.5rem;
            margin: 1.5rem 0;
            border-radius: 0 0.5rem 0.5rem 0;
        }

        .post-content pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 1.25rem;
            border-radius: 0.5rem;
            overflow-x: auto;
        }

        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--color-border);
        }

        .pagination a,
        .pagination span {
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            text-decoration: none;
        }

        .pagination a {
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }

        .pagination a:hover {
            background: var(--color-surface);
        }

        .pagination .current {
            background: var(--color-primary);
            color: white;
        }

        /* Footer */
        .site-footer {
            background: var(--color-surface);
            padding: 3rem 0 2rem;
        }

        .footer-widgets {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--color-border);
        }

        .footer-widgets .widget {
            background: transparent;
            border: none;
            padding: 0;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .main-container {
                grid-template-columns: 1fr;
            }

            .sidebar {
                order: 2;
            }
        }

        @media (max-width: 768px) {
            .post-card {
                flex-direction: column;
            }

            .post-card-thumbnail {
                width: 100%;
                height: 180px;
            }

            .footer-widgets {
                grid-template-columns: 1fr;
            }

            .post-header h1 {
                font-size: 1.5rem;
            }
        }

        {% block styles %}{% endblock %}
    </style>
</head>
<body>
    <header class="site-header">
        <div class="container">
            <a href="/" class="site-logo">{{ site_name }}</a>
            <nav class="site-nav">
                {% if menus and menus.header %}
                    {% for item in menus.header %}
                    <a href="{{ item.url }}">{{ item.label }}</a>
                    {% endfor %}
                {% endif %}
            </nav>
        </div>
    </header>

    {% if menus and menus.category_bar %}
    <nav class="category-bar">
        <div class="container">
            {% for item in menus.category_bar %}
            <a href="{{ item.url }}" {% if request.url.path == item.url %}class="active"{% endif %}>
                {{ item.label }}
            </a>
            {% endfor %}
        </div>
    </nav>
    {% endif %}

    <main class="site-main">
        <div class="container main-container">
            <div class="main-content">
                {% if widgets and widgets.before_content %}
                <div class="before-content">{{ widgets.before_content | safe }}</div>
                {% endif %}

                {% block content %}{% endblock %}

                {% if widgets and widgets.after_content %}
                <div class="after-content">{{ widgets.after_content | safe }}</div>
                {% endif %}
            </div>

            {% if widgets and widgets.sidebar %}
            <aside class="sidebar">
                {{ widgets.sidebar | safe }}
            </aside>
            {% endif %}
        </div>
    </main>

    <footer class="site-footer">
        <div class="container">
            {% if widgets and (widgets.footer_1 or widgets.footer_2 or widgets.footer_3) %}
            <div class="footer-widgets">
                <div>{{ widgets.footer_1 | safe }}</div>
                <div>{{ widgets.footer_2 | safe }}</div>
                <div>{{ widgets.footer_3 | safe }}</div>
            </div>
            {% endif %}

            {% if menus and menus.footer %}
            <nav class="footer-nav">
                {% for item in menus.footer %}
                <a href="{{ item.url }}">{{ item.label }}</a>
                {% endfor %}
            </nav>
            {% endif %}

            <p>&copy; {{ current_year }} {{ site_name }}</p>
        </div>
    </footer>

    {% block scripts %}{% endblock %}

    {% if seo_settings and seo_settings.ga4_id %}
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ seo_settings.ga4_id }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{{ seo_settings.ga4_id }}');
    </script>
    {% endif %}
</body>
</html>
