/* ==========================================================================
   nav_menu.css — 左上のナビゲーションメニュー (placement.js の DropdownMenu)。全ページ共通。
   single.css が先頭で @import する (single.css を使うページはそれで読む)。single.css を使わない
   ページ (/tips) はテンプレートでこのファイルを直接読む。
   2026-10-27 ユーザー指示「サイトに合わせて洗練されたデザインに」で作り直した。ボタンはヘッダーの
   操作 (使い方・テーマ切替のピル) と同じ下地と枠の丸いボタン、開いた一覧は浮いたパネル。
   開いた一覧はライトでもダークテーマと同じ (2026-10-27 ユーザー指示): ダークのダイアログの地・
   文字・枠の色で、項目のホバーと開いているページの下地はアクセントの水色、影は濃い。
   ボタンはヘッダーの操作に揃え、テーマのあるページ (body.new_preuploader) では --np-* の値、
   無いページではライトの値。/tips の色は new_tips.css。
   CSP: style-src 'self' — keep all styles in this file, no inline styles.
   ========================================================================== */
.navigation_wrapper {
    --nav-button-bg: var(--np-row-bg, rgba(255, 255, 255, 0.06));
    --nav-button-border: var(--np-control-border, 1px solid #95b1df80);
    --nav-button-fg: var(--np-title, #093088);
    --nav-accent: var(--np-accent, #1764ff);
    --nav-accent-contrast: var(--np-accent-contrast, #ffffff);
    /* 一覧はダークの --np-dialog-bg / --np-dialog-text / --np-dialog-dim / --np-border-color /
       --np-accent の値 (テーマに関わらず同じ色にするので値をそのまま書く) */
    --nav-panel-bg: #131c2e;
    --nav-panel-text: #e2e8f0;
    --nav-panel-dim: #9fb0c8;
    --nav-panel-border: #273b58;
    --nav-panel-divider: #273b58;
    --nav-accent-text: #22d3ee;
    --nav-hover-bg: rgba(34, 211, 238, 0.08);
    --nav-current-bg: rgba(34, 211, 238, 0.14);
    --nav-focus-ring: #22d3ee;
    --nav-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    /* ボタンの外側の余白。以前のボタン (3.5rem 角の画像) と同じ大きさの枠の中央に置き、
       ヘッダーの高さやタイトルの位置を変えない */
    --nav-slot-gap: calc((3.5rem - 2.4rem - 2px) / 2);
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--nav-slot-gap) var(--nav-slot-gap) var(--nav-slot-gap) calc(1rem + var(--nav-slot-gap));
}
/* 大きさはヘッダーのトグル (アイコン 1.9rem + 余白 0.25rem × 2 + 枠) と同じ。
   開いている間はアクセント色で塗る (トグルの選択中と同じ) */
.navigation_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: var(--nav-button-bg);
    border: var(--nav-button-border);
    border-radius: 50%;
    color: var(--nav-button-fg);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.navigation_menu svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.navigation_menu[aria-expanded="true"] {
    background: var(--nav-accent);
    border-color: var(--nav-accent);
    color: var(--nav-accent-contrast);
}
.navigation_menu:focus-visible {
    outline: 2px solid var(--nav-accent);
    outline-offset: 2px;
}
/* 一覧はボタンの左端に揃えて 0.5rem 下に出す。幅は項目に合わせ、狭い画面では画面の幅に収める */
.dropdown_wrapper {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 50;
    box-sizing: border-box;
    width: max-content;
    min-width: 14rem;
    max-width: calc(100vw - 3rem);
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--nav-panel-bg);
    border: 1px solid var(--nav-panel-border);
    border-radius: 0.75rem;
    box-shadow: var(--nav-shadow);
    color: var(--nav-panel-text);
    text-align: left;
    animation: nav_menu_open 0.14s ease-out;
}
/* ボタンと一覧の間の隙間をホバーのまま渡れるよう、一覧の当たり判定を隙間まで広げる */
.dropdown_wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.5rem;
}
@keyframes nav_menu_open {
    from {
        opacity: 0;
        transform: translateY(-0.3rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .dropdown_wrapper {
        animation: none;
    }
}
.dropdown_list + .dropdown_list {
    margin-top: 0.1rem;
}
/* 3D を作る・見るページとそれ以外の間の区切り */
.dropdown_list.nav_group_start {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--nav-panel-divider);
}
.dropdown_list a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: auto;
    box-sizing: border-box;
    padding: 0.6rem 0.95rem 0.6rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--nav-panel-text);
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.12s, color 0.12s;
}
.dropdown_list .nav_icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--nav-panel-dim);
    transition: color 0.12s;
}
.dropdown_list a:hover,
.dropdown_list a:focus-visible {
    background: var(--nav-hover-bg);
}
.dropdown_list a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--nav-focus-ring);
}
.dropdown_list a:hover .nav_icon,
.dropdown_list a:focus-visible .nav_icon {
    color: var(--nav-accent-text);
}
/* 開いているページ */
.dropdown_list a[aria-current="page"] {
    background: var(--nav-current-bg);
    color: var(--nav-accent-text);
    font-weight: 600;
}
.dropdown_list a[aria-current="page"] .nav_icon {
    color: var(--nav-accent-text);
}