/* =======================
ページトップボタン
======================= */
#pageTopBtn {
position: fixed;
left: 20px;
bottom: 20px;
padding: 10px 14px;
background: #222;
color: #fff;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
z-index: 9999;
opacity: 0.8;
}
#pageTopBtn:hover {
opacity: 1;
}

/* =======================
共通セレクトボックス
======================= */
select {
background-color: #2b2f55;
color: #fff;
border: 1px solid #5560aa;
}
select option {
background-color: #1e203d;
color: #fff;
}

/* =======================
ルート変数・基本スタイル
======================= */
:root {
--bg: #071121;
--card: #0b1220;
--muted: #9aa6b2;
--accent: #60a5fa;
--glass: rgba(255, 255, 255, 0.03);
--radius: 12px;
font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', "Meiryo", sans-serif;
}

* { box-sizing: border-box; }
  body {
  margin: 0;
  padding: 24px;
  background: linear-gradient(180deg, #071227 0%, #081323 60%);
  color: #e6eef6;
  }

/* =======================
レイアウト・コンテナ
======================= */
.container {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 420px;
gap: 20px;
}
@media(max-width:980px) {
.container { grid-template-columns: 1fr; }
}
header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
header h1 { font-size: 1.1rem; margin: 0; }
.preview { position: sticky; top: 24px; }

/* =======================
カード・入力フォーム
======================= */
.card {
background: linear-gradient(180deg, var(--card), #071226);
padding: 16px;
border-radius: var(--radius);
box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6);
}
label {
display: block;
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
input[type=text], input[type=number], textarea, select {
width: 100%;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.06);
background: var(--glass);
color: inherit;
font-size: 14px;
}
textarea { min-height: 80px; resize: vertical; }
.row { display: flex; gap: 12px; }
.col { flex: 1; }

.tactic-block textarea {
  height: 60px; /* 他の戦術ブロックと統一 */
}

/* =======================
ステータスグリッド
======================= */
.stat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media(max-width:720px) {
.stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat {
background: rgba(255,255,255,0.02);
padding: 10px;
border-radius: 8px;
}
.stat label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }

/* =======================
ボタン
======================= */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
background: linear-gradient(90deg, var(--accent), #3b82f6);
border: none;
color: #04203a;
font-weight: 700;
cursor: pointer;
}
.btn.ghost {
background: transparent;
color: var(--accent);
border: 1px solid rgba(255,255,255,0.04);
}
#pageTopBtn {
position: fixed;
left: 0; /* 左端に配置 */
bottom: 20px;
padding: 10px 14px;
background: #8792f3;
color: #ffffff;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
z-index: 9999;
opacity: 0.8;
}
#pageTopBtn:hover {
opacity: 1;
}


/* =======================
フッター・小文字ノート
======================= */
footer { margin-top: 12px; color: var(--muted); font-size: 13px; }
.small-note { font-size: 12px; color: var(--muted); }

/* =======================
印刷用スタイル
======================= */
@media print {
body { background: white; color: black; }
.preview { position: static; }
button, input, textarea, select { display: none; }
}
.stat-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
.stat { display:flex; flex-direction:column; }

/* =======================
検索機能（Search Modal）
======================= */

/* モーダル背景 */
#searchModal {
    display: none; /* 初期は非表示。JSで 'flex' に変更 */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* モーダル本体 */
.search-modal-content {
    background-color: var(--card);
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 800px;
    border-radius: var(--radius);
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    max-height: 90vh; /* 画面の高さに合わせる */
    display: flex;
    flex-direction: column;
}

/* 閉じるボタン */
.close-btn {
    color: var(--muted);
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--accent);
}

/* 複合検索の動的入力欄コンテナ */
#searchInputsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass);
}

/* .search-input-group の修正 */
.search-input-group {
    /* 画面幅に合わせて均等に幅を分割 (例: 10pxの隙間を考慮した2列) */
    min-width: calc(50% - 5px); 
    max-width: calc(50% - 5px);
    
    /* 内部のレイアウトをFlexboxで縦方向に設定 */
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    margin-bottom: 5px; /* 要素間の下部のマージン */
}
.search-input-group label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.search-input-group input,
.search-input-group select {
    padding: 8px 10px; /* ★ 変更: 水平方向のパディング調整 */
    height: 36px;     /* ★ 追加: 高さ固定でサイズ統一 */
    border-radius: 4px;
    background-color: #2b2f55;
    border: 1px solid #5560aa;
    color: #fff;
    font-size: 14px;
}

/* メインのキーワード検索欄 */
#searchInput {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background-color: var(--card);
    color: white;
    font-size: 16px;
}

/* 検索結果エリア */
#searchResults {
    flex-grow: 1;
    overflow-y: auto; /* スクロール可能にする */
    margin-top: 10px;
    padding-right: 10px; /* スクロールバーのための余白 */
}

/* 個別検索結果 */
.search-result-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--accent);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.search-result-item p {
    margin: 4px 0;
    font-size: 14px;
}

.search-result-item strong {
    color: var(--accent);
    font-weight: 600;
}

/* 効果テキスト */
.result-effect {
    white-space: pre-wrap; /* 効果の改行を保持 */
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px !important;
    padding: 5px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* モバイル対応 */
@media (max-width: 768px) {
    .search-modal-content {
        width: 95%;
        margin: 20px auto;
    }
    
    .search-input-group {
        min-width: calc(50% - 5px); /* 2列レイアウト */
    }
}
@media (max-width: 500px) {
    .search-input-group {
        min-width: 100%; /* 1列レイアウト */
    }
}

/* =======================
検索機能（Search Modal）
======================= */
/* 検索ボタンを右下に固定する */
#searchButton {
    /* FIXED POSITIONING */
    position: fixed; /* 常に画面に追従 */
    right: 20px;     /* 右端から20pxの位置に変更 */
    bottom: 20px;    /* ページトップボタン（bottom: 20px）の上に配置 */
    z-index: 9998;   /* 他の要素の上に表示 */
    
    /* VISUALS (色などを指定) */
    background: #f36b17; 
    color: rgb(255, 255, 255);
    font-weight: bold;
    border: none;
    padding: 15px 20px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* style.css の末尾などに追加 */
#searchResultWrapper {
    /* スクロールバーの色を調整 (Webkit系ブラウザ) */
    scrollbar-color: #5560aa #0b1220;
    scrollbar-width: thin;
}

#searchResultWrapper::-webkit-scrollbar {
    width: 8px;
}

#searchResultWrapper::-webkit-scrollbar-thumb {
    background-color: #5560aa;
    border-radius: 10px;
}

#searchResultWrapper::-webkit-scrollbar-track {
    background: #0b1220;
}

#searchInputsContainer {
    display: flex; /* Flexboxを有効にする */
    flex-wrap: wrap; /* 画面幅が狭くなったら折り返す */
    gap: 10px; /* 項目間の隙間 */
    margin-bottom: 15px;
}

#searchInputsContainer input[type="text"],
#searchInputsContainer input[type="number"],
#searchInputsContainer select {
    width: 100%; /* 親要素 (search-input-group) の幅いっぱいに広げる */
    box-sizing: border-box; /* paddingやborderを幅に含める */
}

/* =======================
検索機能 - 入力欄のコンパクト化
======================= */

/* 入力グループ全体をFlexコンテナとし、折り返しを許可 */
#searchInputsContainer {
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; /* 要素間の縦横の隙間 */
    margin-bottom: 15px; /* 下部に少しスペースを追加 */
}

/* デスクトップで2列表示を設定 */
.search-input-group {
    width: calc(50% - 5px); /* 50%幅からgap(10px)の半分を引いて調整 */
    box-sizing: border-box;
    margin-bottom: 0; /* 垂直方向の隙間をなくす */
}

/* モーダルの全体的な最大幅を少し広げて、2列をより見やすくする (任意) */
.search-modal-content {
    max-width: 700px; 
}


/* =======================
プレビューエリアの長文折り返し設定
======================= */
/* プレビュー内の長文要素（パッシブ、戦術、E.G.O、メモなど）を対象 */
#pPassives,
#pSupport,
#pDeathPassive,
#pTactics,
#pUniqueItems,
#pEgo,
#pItems,
#pOwnedPersonas,
#pBodyEnhance,
#pOwnedEgo,
#pOwnedSupportPassives,
#pOwnedSpirits,
#pFreeNote1,
#pFreeNote2,
#pMindEffect {
    /* * white-space: pre-wrap; 
     * フォームで入力した改行（\n）を保持しつつ、長い行は自動で折り返す
     */
    white-space: pre-wrap; 
    
    /* * word-wrap: break-word; / overflow-wrap: break-word;
     * 非常に長い単語やURLなど、通常では折り返せない箇所を強制的に折り返す
     */
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    /* 念のため、親要素の幅を超えないように指定 */
    max-width: 100%; 
}