/* ------------------------------------------------------------------ *
 * サイト共通グローバルナビ（kt-nav）
 *
 * 2026-08-20 追加。AdSense「有用性の低いコンテンツ」対策の第2弾。
 * 公式チェックリスト（support.google.com/adsense/answer/7299563）の
 * 3項目のうち「操作が簡単でわかりやすくなっているか＝ナビゲーション
 * バー」だけが未達だった。実測（2026-08-20）:
 *   承認済み line-of-action 44本 / tinywow 90本 / tool-taro 64本 /
 *            t-kameyama 27本 / drawabox 25本 ※いずれも全ページ同一
 *   当サイト 0〜8本で9パターンに分裂。とくに /poseMirror は0本、
 *            /anatomy は1本（English のみ）で回遊の起点が無かった。
 *
 * 方針:
 *  - 子リンクは常にHTMLへ出力する（CSSで畳むだけ）。クロール対象を減らさない
 *  - ページ側CSSに依存させない。site-footer.css と同じ考え方
 *  - スマホはハンバーガー。開いたら全グループを展開表示（開閉JSはバーガーのみ）
 * ------------------------------------------------------------------ */

/* position: fixed で全幅にする。
   sticky + width:100vw + 負マージンでも全幅にはできるが、100vw は
   スクロールバー幅を含むため必ず横に溢れる（実測: nav 1422px に対し
   表示領域 1405px で横スクロールが発生した）。html に overflow-x: clip
   を掛けても Chrome ではビューポートへ伝播せず解決しない。
   fixed はスクロールバーを除いた領域に対して left/right が効くので溢れない。
   流し込み位置は直後の .kt-nav__spacer で確保する。 */
.kt-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: #fff;
    border-bottom: 1px solid #e3e6ea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: left;
    box-sizing: border-box;
}

.kt-nav__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
}

/* 固定バーの高さぶんを本文の流し込みから空ける。
   ページ側の body に padding-top があれば、それがそのままバーと本文の
   余白になる（打ち消す必要は無い）。 */
.kt-nav__spacer {
    height: 53px;
    margin-bottom: 24px;
}

.kt-nav__brand {
    font-weight: bold;
    color: #222;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.kt-nav__brand:hover { color: #4a90e2; }

.kt-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.kt-nav__item { position: relative; }

.kt-nav__top {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 15px 12px;
    color: #444;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.kt-nav__top:hover,
.kt-nav__item:hover .kt-nav__top,
.kt-nav__item:focus-within .kt-nav__top {
    color: #4a90e2;
    border-bottom-color: #4a90e2;
}

.kt-nav__caret {
    font-size: 0.65em;
    opacity: 0.55;
    transform: translateY(1px);
}

/* ---- ドロップダウン（PC） ---- */
.kt-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 208px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    /* visibility で畳む。display:none にしないのは、
       検索エンジンに「隠しリンク」と見なされにくくするため */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
}

.kt-nav__item:hover .kt-nav__menu,
.kt-nav__item:focus-within .kt-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kt-nav__menu a {
    padding: 8px 16px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
}

.kt-nav__menu a:hover { background: #f2f7fd; color: #2c5d96; }

/* ---- 3階層目（例: ツール ＞ PoseMirror ＞ アプリ/ポーズ集/使い方） ---- */
.kt-nav__group {
    font-weight: bold;
    color: #333 !important;
}

.kt-nav__sub {
    display: flex;
    flex-direction: column;
    margin: 0 0 4px 16px;
    border-left: 2px solid #e8ebef;
}

.kt-nav__sub a {
    padding: 6px 16px 6px 14px;
    font-size: 0.86rem;
}

/* ---- 右端の言語切替 ---- */
.kt-nav__lang {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.kt-nav__lang a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}

.kt-nav__lang a:hover { text-decoration: underline; }

/* ---- ハンバーガー ---- */
.kt-nav__burger {
    display: none;
    margin-left: auto;
    padding: 8px 10px;
    background: none;
    border: 1px solid #dfe3e8;
    border-radius: 7px;
    font-size: 1.05rem;
    line-height: 1;
    color: #444;
    cursor: pointer;
}

.kt-nav__burger:hover { border-color: #4a90e2; color: #4a90e2; }

@media (max-width: 820px) {
    .kt-nav__burger { display: block; }
    .kt-nav__inner { flex-wrap: wrap; gap: 0; }

    .kt-nav__list {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding: 4px 0 12px;
        border-top: 1px solid #eef0f2;
    }

    /* 5グループを全部展開すると 700px 近くなり画面を埋めるので上限を付ける */
    .kt-nav.is-open .kt-nav__list {
        display: flex;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        /* grid の子がわずかに溢れて横スクロールバーが出ていたので殺す */
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .kt-nav__top {
        padding: 10px 4px 4px;
        font-weight: bold;
        color: #222;
        border-bottom: none;
    }

    .kt-nav__caret { display: none; }

    /* スマホでは畳まず全部見せる（開閉JSを持たせない） */
    .kt-nav__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0 0 4px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0 8px;
    }

    .kt-nav__menu a { padding: 6px 4px 6px 14px; font-size: 0.86rem; }

    /* 入れ子はグリッドの1行を丸ごと使う（列に割れると階層が読めない） */
    .kt-nav__sub {
        grid-column: 1 / -1;
        margin: 0 0 6px 20px;
    }

    .kt-nav__sub a { padding: 5px 4px 5px 12px; }

    .kt-nav__lang {
        width: 100%;
        margin: 0;
        padding: 8px 4px 4px;
        border-top: 1px solid #eef0f2;
        display: none;
    }

    .kt-nav.is-open .kt-nav__lang { display: flex; }
}

/* skeleton-check / bustStudio はダークテーマなので端末設定に追従させる */
@media (prefers-color-scheme: dark) {
    .kt-nav { background: #1b1f24; border-bottom-color: #3a3f45; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
    .kt-nav__brand { color: #e6e9ec; }
    .kt-nav__top { color: #c3c9d0; }
    .kt-nav__menu { background: #22272e; border-color: #3a3f45; }
    .kt-nav__menu a { color: #b9c0c8; }
    .kt-nav__menu a:hover { background: #2c333b; color: #7db4f0; }
    .kt-nav__group { color: #e6e9ec !important; }
    .kt-nav__sub { border-left-color: #3a3f45; }
    .kt-nav__burger { color: #c3c9d0; border-color: #3a3f45; }
    @media (max-width: 820px) {
        .kt-nav__top { color: #e6e9ec; }
        .kt-nav__list, .kt-nav__lang { border-top-color: #2e3238; }
    }
}