/*!
 * Smart Tooltip System - Frontend CSS
 * Version: 1.0.4
 * Author: SmartWeb
 * Website: https://www.smartweb.jp/
 * 修正: モバイル表示枠サイズと位置問題
 */

/* ==========================================================================
   ツールチップ基本スタイル
   ========================================================================== */

.tooltip-term {
    color: #2c5aa0;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: help;
    position: relative;
    display: inline;
    transition: color 0.2s ease;
    border-radius: 2px;
}

.tooltip-term:hover {
    text-decoration-style: solid;
}

.tooltip-term:focus {
    outline: 2px solid #2c5aa0;
    outline-offset: 2px;
}

/* ツールチップボックス - デスクトップ用 */
.tooltip {
    /* 基本配置 */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-bottom: 8px;
    
    /* 外観 */
    background-color: #333 !important;
    color: #ffffff !important;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.4;
    max-width: 250px;
    min-width: 120px;
    
    /* 完全に非表示にする */
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    
    /* z-indexを控えめに */
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, display 0s ease 0.3s;
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
    font-family: inherit;
    box-sizing: border-box;
}

/* ツールチップの矢印 */
.tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333 !important;
    pointer-events: none;
}

/* ホバー時の表示 - デスクトップのみ */
@media (hover: hover) and (pointer: fine) {
    .tooltip-term:hover .tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: translateX(-50%) translateY(0);
        transition-delay: 0s;
    }
}

/* フォーカス時の表示 */
.tooltip-term:focus .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

/* タッチデバイス用アクティブ表示 */
.tooltip-term.tooltip-active .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

/* ==========================================================================
   位置調整（画面端対応） - デスクトップ用
   ========================================================================== */

.tooltip.tooltip-right {
    left: auto;
    right: 0;
    transform: translateY(-10px);
}

.tooltip.tooltip-right::before {
    left: auto;
    right: 15px;
    transform: none;
}

.tooltip.tooltip-left {
    left: 0;
    transform: translateY(-10px);
}

.tooltip.tooltip-left::before {
    left: 15px;
    transform: none;
}

/* ==========================================================================
   モバイル表示 - 修正版
   ========================================================================== */

/* カスタムプロパティでモバイル位置を制御 */
:root {
    --mobile-tooltip-position: 50vh; /* デフォルト: 画面中央 */
    --mobile-tooltip-offset: 0px;   /* 追加オフセット */
}

@media (max-width: 768px) {
    .tooltip {
        /* 固定位置 - 正確な中央配置 */
        position: fixed !important;
        top: calc(var(--mobile-tooltip-position) - 100px) !important;
        left: 20px !important; /* 左端から20px */
        right: 20px !important; /* 右端から20px */
        bottom: auto !important;
        
        /* 幅と変形をリセット */
        width: auto !important; /* 自動幅 */
        max-width: none !important; /* 最大幅制限なし */
        min-width: 0 !important; /* 最小幅なし */
        transform: none !important; /* 変形なし */
        margin: 0 !important;
        
        /* z-indexを控えめに */
        z-index: 100 !important;
        
        /* 外観調整 */
        text-align: center !important;
        font-size: 0.9em !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
        
        /* 背景を少し透明に */
        background-color: rgba(51, 51, 51, 0.95) !important;
        backdrop-filter: blur(3px) !important;
        
        /* テキストの折り返しと表示 */
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .tooltip::before {
        display: none !important; /* 矢印を非表示 */
    }
    
    /* アクティブ時の表示 - アニメーション調整 */
    .tooltip-term.tooltip-active .tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: none !important; /* 変形なし */
        transition: opacity 0.3s ease !important;
    }
    
    /* 位置調整クラスをすべてリセット */
    .tooltip.tooltip-right,
    .tooltip.tooltip-left {
        top: calc(var(--mobile-tooltip-position) - 100px) !important;
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
        transform: none !important;
    }
    
    .tooltip-term.tooltip-active .tooltip.tooltip-right,
    .tooltip-term.tooltip-active .tooltip.tooltip-left {
        transform: none !important;
    }
}

/* さらに小さい画面での調整 */
@media (max-width: 480px) {
    .tooltip {
        top: calc(var(--mobile-tooltip-position) - 80px) !important;
        left: 15px !important;
        right: 15px !important;
        font-size: 0.85em !important;
        padding: 10px 14px !important;
    }
}

@media (max-width: 360px) {
    .tooltip {
        top: calc(var(--mobile-tooltip-position) - 60px) !important;
        left: 10px !important;
        right: 10px !important;
        font-size: 0.8em !important;
        padding: 8px 12px !important;
    }
}

/* ==========================================================================
   位置設定クラス - 設定画面から制御
   ========================================================================== */

/* 上部配置 */
.tooltip-position-top {
    --mobile-tooltip-position: 25vh;
}

/* 中央上部配置 */
.tooltip-position-center-top {
    --mobile-tooltip-position: 35vh;
}

/* 中央配置（デフォルト） */
.tooltip-position-center {
    --mobile-tooltip-position: 50vh;
}

/* 中央下部配置 */
.tooltip-position-center-bottom {
    --mobile-tooltip-position: 65vh;
}

/* 下部配置 */
.tooltip-position-bottom {
    --mobile-tooltip-position: 75vh;
}

/* 画面上部固定 */
.tooltip-position-fixed-top {
    --mobile-tooltip-position: 120px;
}

@media (max-width: 768px) {
    .tooltip-position-fixed-top .tooltip {
        top: 120px !important;
    }
}

/* カスタム位置（JavaScript から制御） */
.tooltip-custom-position .tooltip {
    top: var(--mobile-tooltip-offset) !important;
}

/* ==========================================================================
   ランドスケープモード対応
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .tooltip {
        top: calc(var(--mobile-tooltip-position) - 60px) !important;
        font-size: 0.8em !important;
        padding: 8px 12px !important;
        max-height: 50vh !important; /* 高さ制限を追加 */
        overflow-y: auto !important;
        left: 10px !important;
        right: 10px !important;
    }
}

/* ==========================================================================
   Safari iOS 固有の調整
   ========================================================================== */

/* Safari iOS でのビューポート問題を修正 */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .tooltip {
            /* iOS Safari での position: fixed 問題を回避 */
            position: fixed !important;
            left: 5vw !important;
            right: 5vw !important;
            width: 90vw !important;
            box-sizing: border-box !important;
        }
    }
    
    @media (max-width: 480px) {
        .tooltip {
            left: 4vw !important;
            right: 4vw !important;
            width: 92vw !important;
        }
    }
    
    @media (max-width: 360px) {
        .tooltip {
            left: 3vw !important;
            right: 3vw !important;
            width: 94vw !important;
        }
    }
}

/* ==========================================================================
   テーマ対応とアクセシビリティ
   ========================================================================== */

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .tooltip-term {
        color: #5a9bdc;
    }
    
    @media (max-width: 768px) {
        .tooltip {
            background-color: rgba(26, 26, 26, 0.95) !important;
            color: #ffffff !important;
            border: 1px solid #333 !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
        }
    }
}

/* ハイコントラストモード */
@media (prefers-contrast: high) {
    @media (max-width: 768px) {
        .tooltip {
            background-color: #000000 !important;
            color: #ffffff !important;
            border: 2px solid #ffffff !important;
        }
    }
}

/* アニメーション削減設定 */
@media (prefers-reduced-motion: reduce) {
    .tooltip {
        transition: none !important;
    }
}

/* ==========================================================================
   印刷対応
   ========================================================================== */

@media print {
    .tooltip-term {
        color: inherit !important;
        text-decoration: none !important;
    }
    
    .tooltip {
        display: none !important;
    }
    
    .tooltip-term::after {
        content: " (" attr(data-tooltip) ")";
        font-size: 0.9em;
        color: #666;
    }
}

/* ==========================================================================
   デバッグ・開発用
   ========================================================================== */

/* モバイル表示のデバッグ用スタイル */
.tooltip-debug-mobile .tooltip {
    border: 2px solid red !important;
    background-color: rgba(255, 0, 0, 0.3) !important;
}

/* パフォーマンス最適化 */
.tooltip {
    will-change: opacity, visibility;
}

/* GPU加速は変形がない場合は無効化 */
@media (min-width: 769px) {
    .tooltip {
        will-change: opacity, visibility, transform;
    }
    
    .tooltip-term:hover .tooltip,
    .tooltip-term:focus .tooltip {
        transform: translateX(-50%) translateY(0) translateZ(0);
    }
}