html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-weight: normal;
box-sizing: border-box;
}

/* --- ベーススタイル --- */
/*body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fcfcfc; padding: 20px; }*/
body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; background: #fcfcfc; padding: 20px; }
.search-wrapper { max-width: 470px; margin: 0 auto; position: relative; }

/* --- タブ --- */
.search-tabs { display: flex; margin-bottom: 0; border-bottom: 1px solid #ddd; }
.tab-btn { flex: 1; padding: 12px 0; border: none; background: none; cursor: pointer; color: #666; font-weight: normal; position: relative; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tab-btn.active { color: #356b64; }
.tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #356b64; }

/* 件数バッジ */
.badge { background: #eee; color: #555; font-size: 10px; padding: 2px 6px; border-radius: 10px; min-width: 14px; text-align: center; }
.tab-btn.active .badge { background: #356b64; color: white; }

/* --- ステータスバー --- */
.status-bar { background: #f8f8f8; padding: 8px 12px; font-size: 11px; color: #666; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; border-radius: 6px 6px 0 0; margin-top: 10px; }
.status-bar span strong { color: #333; }

/* --- 容量プログレスバー表示エリア (お気に入り用) --- */
.storage-info { padding: 10px 15px; background: #fff; border-bottom: 1px solid #eee; }
.storage-label { display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-bottom: 4px; }
.progress-track { width: 100%; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #0095f6; width: 0%; transition: width 0.3s ease, background-color 0.3s; }

/* 容量の色変化 */
.progress-fill.safe { background: #107c41; } /* 緑 */
.progress-fill.warn { background: #fca130; } /* 黄 */
.progress-fill.danger { background: #ed4956; } /* 赤 */

/* --- 検索窓 --- */
.search-box { position: relative; width: 100%; max-width: 470px; margin:15px 0 0 0; }
#inputSearch { color:#356b64; width: 100%; padding: 12px 15px 13px; margin:0 0 0 0; font-size: 14px; letter-spacing:0.3px; border-radius: 6px 6px 6px 6px; box-sizing: border-box; background: #fff; }
input[type="text"] {border: 1px solid #dbdbdb;}
.input-rounded-top { border-radius: 6px !important; }
input[type="text"]:focus {border: 1px solid #77a7a1; background-color: #dcf4ee; box-shadow: 0 0 5px rgba(0, 255, 183, 0.1); outline: none;}

/* --- 検索窓ローディング --- */
.spinner { display: none; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border: 1px solid rgba(0, 0, 0, 0.1); border-top-color: #356b64; border-radius: 50%; animation: spin 1.0s linear infinite; display: inline-block; margin-left: 10px; vertical-align: middle; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* --- リストエリア --- */
#information-list {width: 100%; background: white; border: 1px solid #dbdbdb; border-radius: 6px 6px 6px 6px; box-shadow: 0 4px 18px rgba(0,0,0,0.05); list-style: none; margin: 15px 0 0 0; padding: 0; min-height: 600px; max-height:600px; overflow-y: auto; z-index: 1000; display: block; }
/*一時的に削除*/ /*position: absolute; top: 100%; left: 0; */

/* --- アイテム行 --- */
/*.suggestion-item{ display: flex; align-items: center; padding: 10px 22px 10px; border-bottom: 1px solid #f0f0f0; height: 60px; position: relative; }*/
.suggestion-item{ position: relative; }
.suggestion-item a{ display: flex; align-items: center; padding: 9px 22px 9px; border-bottom: 1px solid #f0f0f0; height: 58px; text-decoration:none; position: relative; }
.item-link { flex-grow: 1; display: flex; align-items: center; }

.suggestion-item:hover { background-color: #fafafa; }
.item-icon { width: 40px; height: 40px; border-radius: 50%; background: #eee; margin-right: 12px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; overflow: hidden; font-weight: bold; color: #555;}
.item-icon img { width: 100%; height: 100%; object-fit: cover; }
.item-info { flex: 1; overflow: hidden; padding-right: 60px; }
.item-cat { font-size: 10px; color: #8e8e8e; display: flex; align-items: center; padding:0 0 2px 0; gap: 5px; color: #4a8565; font-weight: bold;}
.item-cat[data-cat="Excel"] { color: #107c41; font-weight: bold; }
.folder-tag { background: #eef; color: #448; padding: 1px 4px; border-radius: 3px; font-size: 9px; cursor: pointer; }
.item-title { color:#2d615a; font-size: 13px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 操作ボタン群 --- */
.action-area { position: absolute; right: 18px; bottom:21px; display: flex; gap: 8px; align-items: center; z-index: 10;}
.edit-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #bbb; cursor: pointer; border-radius: 4px; font-size: 14px; }
.edit-btn:hover { background: #eee; color: #555; }
.fav-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #ccc; cursor: pointer; transition: transform 0.1s, color 0.2s; }
.fav-btn:active { transform: scale(0.9); }
.fav-btn.active { color: #ed4956; }

/* --- 花火エフェクト --- */
.sparkle { position: absolute; pointer-events: none; border-radius: 50%; opacity: 0; z-index: 1001; }
@keyframes sparkle-anim {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* --- モーダル & フィルタ --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: none; justify-content: center; align-items: center; }
.modal-box { background: white; padding: 20px; border-radius: 8px; width: 300px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.modal-title { font-size: 16px; margin: 0 0 15px 0; font-weight: bold; }
.modal-group { margin-bottom: 15px; }
.modal-select, .modal-input { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 5px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 10px; }
.btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; font-size: 13px; }
.btn-cancel { background: #eee; color: #333; }
.btn-save { background: #0095f6; color: white; }

/* フィルタバー */
.filter-bar { padding: 10px; background: #f8f8f8; border-bottom: 1px solid #eee; display: flex; gap: 8px; align-items: center; }
.filter-select { flex: 1; padding: 6px; border: 1px solid #ddd; border-radius: 4px; }
.rename-btn { padding: 6px 10px; background: white; border: 1px solid #ddd; border-radius: 4px; color: #666; cursor: pointer; font-size: 11px; white-space: nowrap; }