/* ============================================================
   Theme Settings — Toggle Switch / Dark Mode / Lightweight Mode
   ============================================================ */

/* ── メニュー内トグルセクション ── */
.MenuSettings {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.MenuSettingItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
    cursor: url("../Img/Cursor/Point.svg"), auto;
    user-select: none;
}

.MenuSettingItem:hover {
    background: rgba(255, 255, 255, 0.12);
}

.MenuSettingLabel {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    user-select: none;
}

.MenuSettingLabel .icon {
    font-size: 24px;
    margin-right: 0;
}

/* ── iOS スタイル トグルスイッチ ── */
.ToggleSwitch {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 32px;
    flex-shrink: 0;
    cursor: url("../Img/Cursor/Point.svg"), auto;
}

.ToggleSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ToggleSlider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #787880;
    border-radius: 32px;
    outline: solid 2px #FFFFFF;
    outline-offset: -2px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), outline-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ToggleSlider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1c5cff, #52e0ff);
    border-radius: 32px;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.ToggleSlider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 8px;
    bottom: 8px;
    background: #ffffff;
    border-radius: 32px;
    z-index: 2;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.4, 1), height 0.3s cubic-bezier(0.4, 0, 0.4, 1), left 0.34s cubic-bezier(0.4, 0, 0.4, 1), bottom 0.3s cubic-bezier(0.4, 0, 0.4, 1);
}

.ToggleSlider:active::before {
    /* background: #787880; */
    width: 32px;
    height: 32px;
    left: 1px;
    bottom: 0px;
}

.ToggleSwitch input:checked+.ToggleSlider {
    outline-color: transparent;
}

.ToggleSwitch input:checked+.ToggleSlider::after {
    opacity: 1;
}

.ToggleSwitch input:checked+.ToggleSlider::before {
    transform: translateX(24px);
    background: #ffffff;
    width: 30px;
    height: 24px;
    left: 0px;
    bottom: 4px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 2, 0.4, 1), height 0.3s cubic-bezier(0.6, 0, 0.2, 1), left 0.35s cubic-bezier(0.6, 0, 0.2, 1), bottom 0.3s cubic-bezier(0.6, 0, 0.2, 1);
}

/* ── ダークモード アクティブ時のトグル色 ── */
html[data-theme="dark"] .ToggleSwitch input:checked+.ToggleSlider::after {
    background: linear-gradient(135deg, #1c5cff, #52e0ff);
}

/* ============================================================
   ダークモード
   ── 使用色: #FFFFFF / #AAAAAA / #2A2A2A / #1B1B1B / #64B5F6 ──
   ============================================================ */

/* ────── 画像差し替え ────── */
html[data-theme="dark"] body::before {
    background-image: url("../Img/nikkunWOW_dark.webp");
    opacity: 0.5;
    /* 0.8から0.5に下げて、ライトモードと同等のブレンドコストに調整 */
}

html[data-theme="dark"] .Minithumbnail {
    background-image: url("../Img/MiniThumbnail_dark.webp");
}

/* ────── 背景色: #1B1B1B ────── */
html[data-theme="dark"] {
    background-color: #1B1B1B;

    /* Material Web Components (フォーム部品) のダークモード対応 */
    color-scheme: dark;
    /* ブラウザ標準のUIパーツをダークに強制 */
}

/* コンポーネント内部の計算を確実に上書きするための広域変数設定 */
html[data-theme="dark"] * {
    --md-sys-color-on-surface: #FFFFFF !important;
    --md-sys-color-on-surface-variant: #AAAAAA !important;
    --md-sys-color-surface: #1B1B1B !important;
    --md-sys-color-outline: rgba(255, 255, 255, 0.3) !important;

    /* ドロップダウン（Menu）の背景を決定する全ての Surface Container 変数を固定 */
    --md-sys-color-surface-tint: #1B1B1B !important;
    /* 透明ではなく背景色を指定して不具合を防止 */
    --md-sys-color-surface-container-lowest: #2A2A2A !important;
    --md-sys-color-surface-container-low: #2A2A2A !important;
    --md-sys-color-surface-container: #2A2A2A !important;
    --md-sys-color-surface-container-high: #2A2A2A !important;
    --md-sys-color-surface-container-highest: #2A2A2A !important;

    /* Menu / Select 固有のコンテナ設定とハイライト調整 */
    --md-menu-container-color: #2A2A2A !important;
    --md-menu-item-container-color: #2A2A2A !important;
    --md-outlined-select-menu-container-color: #2A2A2A !important;
    --md-outlined-select-container-color: #2A2A2A !important;
    --md-outlined-field-container-color: #2A2A2A !important;
    --md-menu-item-selected-container-color: rgba(255, 255, 255, 0.12) !important;
    --md-menu-item-focus-container-color: rgba(255, 255, 255, 0.12) !important;
    --md-menu-item-hover-container-color: rgba(255, 255, 255, 0.08) !important;

    /* 入力フィールドのテキスト色を確実に白く保つ設定 */
    --md-outlined-field-input-text-color: #FFFFFF !important;
    --md-outlined-field-label-text-color: #AAAAAA !important;
    --md-outlined-field-focus-label-text-color: #AAAAAA !important;
    --md-outlined-field-outline-color: rgba(255, 255, 255, 0.3) !important;
    --md-outlined-field-focus-outline-color: #FFFFFF !important;
    --md-outlined-select-field-input-text-color: #FFFFFF !important;
}

/* ::part セレクタを使用して Shadow DOM 内部を直接塗りつぶす */
html[data-theme="dark"] md-outlined-select::part(menu),
html[data-theme="dark"] md-select-option::part(list-item) {
    background-color: #2A2A2A !important;
}

html[data-theme="dark"] md-outlined-select,
html[data-theme="dark"] md-select-option {
    background-color: #2A2A2A !important;
}

/* スロット要素（Light DOM）の直接上書き */
html[data-theme="dark"] [slot="headline"],
html[data-theme="dark"] [slot="supporting-text"],
html[data-theme="dark"] [slot="leading-icon"],
html[data-theme="dark"] [slot="trailing-icon"] {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .ButtonBigArrowBox,
html[data-theme="dark"] .ModalContent,
html[data-theme="dark"] .MenuButton,
html[data-theme="dark"] footer,
html[data-theme="dark"] .ModalBody {
    background-color: #1B1B1B;
}

html[data-theme="dark"] #site-loader {
    background-color: rgba(27, 27, 27, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ────── ローディングバー（ダークモード） ────── */
html[data-theme="dark"] .loader-track {
    stroke: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .loader-progress {
    stroke: #FFFFFF !important;
    filter: none;
}

html[data-theme="dark"] .loader-bubble {
    background-color: #2A2A2A;
    color: #FFFFFF;
}

html[data-theme="dark"] .loader-bubble::after {
    border-top-color: #2A2A2A;
}

html[data-theme="dark"] .loader-text {
    color: #FFFFFF;
}

html[data-theme="dark"] footer {
    filter: none;
}

html[data-theme="dark"] .logo-white {
    display: block !important;
}

/* ────── 背景色: #2A2A2A ────── */
html[data-theme="dark"] .AboutContainer,
html[data-theme="dark"] .MyChip,
html[data-theme="dark"] .WorksContainer,
html[data-theme="dark"] .WorldContainer,
html[data-theme="dark"] .OtherContent,
html[data-theme="dark"] .OtherMiniContent,
html[data-theme="dark"] .AllViewContainer,
html[data-theme="dark"] .ModalBox,
html[data-theme="dark"] .Detail,
html[data-theme="dark"] .ButtonBig,
html[data-theme="dark"] .ButtonMini,
html[data-theme="dark"] .SlideItem,
html[data-theme="dark"] .InfoWrapper,
html[data-theme="dark"] .MyFriendsContainer,
html[data-theme="dark"] md-outlined-text-field,
html[data-theme="dark"] md-outlined-select,
html[data-theme="dark"] .TimelineDot {
    background-color: #2A2A2A;
}

html[data-theme="dark"] .AllViewContainer {
    background-image: none;
}

html[data-theme="dark"] .animated-details summary .InfoText {
    color: #FFFFFF !important;
    background-color: #2A2A2A;
}

/* ────── 背景色: transparent ────── */
html[data-theme="dark"] .BlockContainer {
    background-color: transparent;
}

/* ────── 背景色: UI要素（半透明） ────── */
html[data-theme="dark"] .NavContainer,
html[data-theme="dark"] .ModalLoader {
    background: rgba(42, 42, 42, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .ScrollButton {
    background: rgba(42, 42, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .MenuButton:hover {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .ScrollButton:hover {
    background: rgba(42, 42, 42, 1);
}

/* ────── テキスト色: #FFFFFF ────── */
html[data-theme="dark"] .AboutText,
html[data-theme="dark"] .Name,
html[data-theme="dark"] .Introduction,
html[data-theme="dark"] .CategoryCreationBigTitle,
html[data-theme="dark"] .CategoryOtherBigTitle,
html[data-theme="dark"] .CategoryWorksBigTitle,
html[data-theme="dark"] .WhatDoYouAimFor,
html[data-theme="dark"] .PickupTitle,
html[data-theme="dark"] .PickupTitleVideo,
html[data-theme="dark"] .PickupTitleGame,
html[data-theme="dark"] .PickupTitleOther,
html[data-theme="dark"] .ChipMainText,
html[data-theme="dark"] .ChipAchievementMainText,
html[data-theme="dark"] .WorksContainerTitle,
html[data-theme="dark"] .CreationAIContainerTitle,
html[data-theme="dark"] .Pickup,
html[data-theme="dark"] .Contact,
html[data-theme="dark"] .AllViewContainerText,
html[data-theme="dark"] .CategoryInfo_NoTopPadding,
html[data-theme="dark"] .PolicyTitle,
html[data-theme="dark"] .PolicyText,
html[data-theme="dark"] .PolicyContactText,
html[data-theme="dark"] .PolicyOKTitle,
html[data-theme="dark"] .CreationTitleText,
html[data-theme="dark"] .CreationText,
html[data-theme="dark"] .WorldText,
html[data-theme="dark"] .HeroText,
html[data-theme="dark"] .HeroSubText,
html[data-theme="dark"] .HeroDescription,
html[data-theme="dark"] .InfoText,
html[data-theme="dark"] .Info,
html[data-theme="dark"] .DetailTitle,
html[data-theme="dark"] .DetailDescription,
html[data-theme="dark"] .TimelineContent,
html[data-theme="dark"] .FeatureText,
html[data-theme="dark"] .FeatureText h3,
html[data-theme="dark"] .ButtonBigText,
html[data-theme="dark"] .ButtonMiniText,
html[data-theme="dark"] .ButtonIcon,
html[data-theme="dark"] .ButtonIcon-Top,
html[data-theme="dark"] .MenuButton span,
html[data-theme="dark"] .ScrollButton span,
html[data-theme="dark"] .loader-percentage,
html[data-theme="dark"] .MenuText,
html[data-theme="dark"] .ItemTitle,
html[data-theme="dark"] .ItemText,
html[data-theme="dark"] .CreationTitle,
html[data-theme="dark"] .MyFriendsName,
html[data-theme="dark"] .NotFoundMenuText {
    color: #FFFFFF;
}

/* ────── テキスト色: #AAAAAA ────── */
html[data-theme="dark"] .ProfileText,
html[data-theme="dark"] .ProfileSubText,
html[data-theme="dark"] .ChipSubText,
html[data-theme="dark"] .ChipAchievementSubText,
html[data-theme="dark"] .Location,
html[data-theme="dark"] .PickupText,
html[data-theme="dark"] .PolicyOKText,
html[data-theme="dark"] .loader-text,
html[data-theme="dark"] .MyFriendsProfileText,
html[data-theme="dark"] .CategoryInfo,
html[data-theme="dark"] .Copyright,
html[data-theme="dark"] .PickupDayTime,
html[data-theme="dark"] .CreationContainerTime,
html[data-theme="dark"] .WorksContainerTime,
html[data-theme="dark"] .ModalTimeDisplay,
html[data-theme="dark"] .UseTool-Achievement,
html[data-theme="dark"] .WorksContainerText,
html[data-theme="dark"] .NotFoundTitle,
html[data-theme="dark"] .Quote,
html[data-theme="dark"] .TimelineDate,
html[data-theme="dark"] .NotFoundText,
html[data-theme="dark"] .CategoryInfo_NoTopPadding,
html[data-theme="dark"] .ModalLoaderPercentage,
html[data-theme="dark"] .ModalLoaderPercentUnit {
    color: #dedede;
}

/* ────── テキスト色: #64B5F6（リンク） ────── */
html[data-theme="dark"] .LinkText {
    color: #64B5F6;
}

/* ────── ボーダー色 ────── */
html[data-theme="dark"] .Copyright {
    border-top-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .CategoryCreationBigTitle:before,
html[data-theme="dark"] .CategoryCreationBigTitle:after,
html[data-theme="dark"] .CategoryOtherBigTitle:before,
html[data-theme="dark"] .CategoryOtherBigTitle:after,
html[data-theme="dark"] .CategoryWorksBigTitle:before,
html[data-theme="dark"] .CategoryWorksBigTitle:after {
    border-top-color: #FFFFFF;
}

html[data-theme="dark"] .SeparatorLine {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .ButtonBig,
html[data-theme="dark"] .ButtonMini {
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .TimelineContainer::before {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ────── フィルター反転解除 ────── */
html[data-theme="dark"] .SNS1,
html[data-theme="dark"] .SNS2 {
    filter: none;
}

html[data-theme="dark"] .CreatedbynikkunIcon {
    filter: invert(1);
    will-change: filter;
}

html[data-theme="dark"] .ContactSvg {
    content: url("../Img/Contact_White.svg");
}

/* 送信ボタンなどの無効状態スタイル */
.ButtonBig:disabled,
.ButtonMini:disabled {
    opacity: 0.6;
    background-image: none !important;
    background-color: #cecece !important;
    color: #cecece !important;
    cursor: url("../Img/Cursor/Block.svg"), auto !important;
}

html[data-theme="dark"] .ButtonBig:disabled,
html[data-theme="dark"] .ButtonMini:disabled {
    background-color: #333333 !important;
    color: #333333 !important;
}

/* 無効ボタン内のアイコン単色化 */
.ButtonBig:disabled .ButtonIcon,
.ButtonBig:disabled .ButtonIcon-Top,
.ButtonMini:disabled .ButtonMiniIcon {
    background-image: none !important;
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
    cursor: inherit !important;
}

html[data-theme="dark"] .PolicyOK {
    filter: invert(1) hue-rotate(180deg);
    will-change: filter;
}


/* ============================================================
   軽量モード (Lightweight Mode)
   ============================================================ */

/* ── 背景アニメーション停止 ── */
html[data-lightweight="true"] body::before {
    animation: none !important;
}

/* ── Square 粒子を非表示 ── */
html[data-lightweight="true"] .Square {
    display: none !important;
}

[data-lightweight="true"] .NavContainer,
[data-lightweight="true"] .ModalLoader {
    background: #E6E6E6 !important;
}

[data-lightweight="true"] .FloatingNav.is-open .NavContainer,
html[data-theme="dark"][data-lightweight="true"] .NavContainer,
html[data-theme="dark"][data-lightweight="true"] .FloatingNav.is-open .NavContainer,
html[data-theme="dark"][data-lightweight="true"] .ModalLoader {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #1B1B1B !important;
}

html[data-theme="dark"][data-lightweight="true"] .FloatingNav.is-open .MenuButton {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #2A2A2A !important;
}

html[data-lightweight="true"] #site-loader {
    background-color: #F8F8F8 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"][data-lightweight="true"] #site-loader {
    background-color: #1B1B1B !important;
}

html[data-lightweight="true"] .NavOverlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

html[data-lightweight="true"] .ScrollButton {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* ── box-shadow 削減 ── */
html[data-lightweight="true"] .AboutContainer,
html[data-lightweight="true"] .MyChip,
html[data-lightweight="true"] .WorksContainer,
html[data-lightweight="true"] .OtherContent,
html[data-lightweight="true"] .OtherMiniContent,
html[data-lightweight="true"] .NavContainer,
html[data-lightweight="true"] .ModalLoader,
html[data-lightweight="true"] .ScrollButton,
html[data-lightweight="true"] .PickupContainerGame,
html[data-lightweight="true"] .PickupContainerOther {
    box-shadow: none !important;
}

/* ── drop-shadow 削減 ── */
html[data-lightweight="true"] .thumbnail,
html[data-lightweight="true"] .Minithumbnail,
html[data-lightweight="true"] footer {
    filter: none !important;
}

/* ── モーダルの blur 無効化 ── */
html[data-lightweight="true"] .ModalOverlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-lightweight="true"] .WorksModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-lightweight="true"] #works-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.7);
}

html[data-lightweight="true"] .WorksModal .ModalOverlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

html[data-lightweight="true"] .control-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #1B1B1B !important;
}

/* ── 軽量 + ダーク 併用時 ── */
html[data-theme="dark"][data-lightweight="true"] .MenuButton {
    background-color: #1B1B1B;
}

html[data-theme="dark"][data-lightweight="true"] .NavContainer,
html[data-theme="dark"][data-lightweight="true"] .ModalLoader {
    background: #2A2A2A !important;
}

html[data-theme="dark"][data-lightweight="true"] .ScrollButton {
    background: rgba(50, 50, 50, 0.95) !important;
}

/* ────── ローディングバー（デフォルト） ────── */
.loader-track {
    stroke: rgba(0, 0, 0, 0.1);
}

.loader-progress {
    stroke: #1B1B1B;
}

html[data-theme="dark"] .FloatingNav .logo-white {
    opacity: 1;
}

html[data-theme="dark"] .FloatingNav .logo-black {
    opacity: 0;
}

html[data-lightweight="true"] .NavContainer {
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.4s ease,
        backdrop-filter 0.4s ease,
        border-radius 0.2s ease;
}