/* ============================================================
   SCWORKS Templates — tool-page.css  v1.0.0
   ページごとに :root の CSS 変数を上書きすることで
   アクセントカラー・背景色・サーフェス色を変更できます
   ============================================================ */

/* デフォルト変数（PHPのinline styleで上書き可能） */
:root {
    --sct-accent:       #d4a843;
    --sct-accent-light: color-mix(in srgb, var(--sct-accent) 70%, white);
    --sct-bg:           #0f0f1a;
    --sct-surface:      #1a1a2e;
    --sct-border:       rgba(255,255,255,0.1);
    --sct-text:         #e8e8f0;
    --sct-text-muted:   #8888aa;
    --sct-radius:       12px;
    --sct-header-h:     56px;
    --sct-content-max:  860px;
}

/* ============================================================
   リセット & ベース
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body.sct-tool-body {
    background: var(--sct-bg);
    color: var(--sct-text);
    font-family: -apple-system, BlinkMacSystemFont,
        'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
        'Yu Gothic', sans-serif;
    line-height: 1.7;
    min-height: 100vh;

    /* テーマの余白・マージンをリセット */
    padding: 0 !important;
    margin: 0 !important;
}

/* WP管理バーがある場合のずれ補正 */
body.admin-bar .sct-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .sct-header {
        top: 46px;
    }
}

/* ============================================================
   ラッパー
   ============================================================ */
.sct-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.sct-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--sct-header-h);
    background: var(--sct-surface);
    border-bottom: 1px solid var(--sct-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sct-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sct-logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.sct-logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--sct-accent);
    letter-spacing: 0.04em;
}

/* ============================================================
   メインコンテンツ
   ============================================================ */
.sct-main {
    flex: 1;
    width: 100%;
    max-width: var(--sct-content-max);
    margin: 0 auto;
    padding: 32px 20px 64px;
}

/* テーマが付けがちな余計なスタイルをリセット */
.sct-main > * + * {
    margin-top: 0;
}

/* ============================================================
   テーマ干渉の打ち消し（SWELL・Cocoon・Lightning等対策）
   ============================================================ */
body.sct-tool-body #wpadminbar ~ * { /* 管理バー以外のテーマ出力を隔離 */ }

/* SWELL対策 */
body.sct-tool-body .l-header,
body.sct-tool-body .l-footer,
body.sct-tool-body .l-sidebar,
body.sct-tool-body .c-gnavi,
body.sct-tool-body #sidebar,
body.sct-tool-body .widget-area { display: none !important; }

/* Cocoon対策 */
body.sct-tool-body #header,
body.sct-tool-body #footer,
body.sct-tool-body .navi-in,
body.sct-tool-body .sidebar { display: none !important; }

/* Lightning（VK）対策 */
body.sct-tool-body .site-header,
body.sct-tool-body .site-footer,
body.sct-tool-body .vk-mobile-nav { display: none !important; }

/* Twenty系デフォルトテーマ対策 */
body.sct-tool-body .site-header,
body.sct-tool-body .site-footer,
body.sct-tool-body .widget-area,
body.sct-tool-body nav.navigation { display: none !important; }

/* ============================================================
   スクロールバー統一
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--sct-border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sct-accent);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 600px) {
    :root {
        --sct-header-h:     48px;
        --sct-content-max:  100%;
    }
    .sct-header { padding: 0 16px; }
    .sct-main   { padding: 20px 14px 48px; }
    .sct-logo-text { font-size: 15px; }
}