/* 共通設定 */
* {    margin: 0;    padding: 0;    box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {font-family: sans-serif; background: black; }
header {background: #fff; }
main{background:#eee;padding: 0 0.5em;}
/* */
.header-inner { 
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
/* header > navi */
.breadcrumbs{padding-left: 0.5em;}
.breadcrumbs nav {font-size: 14px;}
.breadcrumb {display: flex;flex-wrap: wrap;list-style: none;padding: 0;margin: 0;}
.breadcrumb-item {display: flex;align-items: center;}/* 各リストアイテムの基本設定 */
.breadcrumb-item + .breadcrumb-item::before {content: ">";display: inline-block;padding: 0 8px;color: #666;}/* 2番目以降のアイテムの前に 「>」 を挿入する */
.breadcrumb-item a {color: #0066cc;text-decoration: none;}/* リンクやテキストのスタイル調整 */
.breadcrumb-item a:hover {text-decoration: underline;}
.breadcrumb-current {color: #333;}

/* */
.section-group { display: flex; align-items: center; gap: 4px; border: 1px solid #ccc; padding: 5px; border-radius: 4px; }
#recipeArea{display: none;}

.filter-bar { display: flex; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; }
button {cursor: pointer; padding: 6px 12px; border: 1px solid #999; border-radius: 4px; background: #eee; font-size: 13px; font-weight: bold; }
button.active { background: var(--primary); color: white; border-color: var(--primary); }
button:hover { background: #ddd; }
button:active { background: #ccc; }

#executeBtn { background: #28a745; color: white; border: none; padding: 8px 8px; font-size: 14px; }
#executeBtn:hover { background: #218838; }

/* フィルタバー */
.filter{ padding: 5px; border: 1px solid #ddd; background: #fff; border-radius: 4px; margin-bottom: 10px;}
.filter-btn { padding: 4px 10px; border-radius: 15px; border: 1px solid #bbb; background: #fff; font-size: 12px; }
.filter-btn.active { background: #333; color: #fff; border-color: #333; }

/* メインリスト */
#materialList { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; user-select: none;}
.item-card { 
    background: #fff; border: 1px solid #ddd; padding: 4px; border-radius: 4px; 
    text-align: center; font-size: 12px; cursor: pointer;
}
.item-card:hover { border-color: #999; }
.item-card.main-selected { background: #007bff; color: white; border-color: #0056b3; }
.item-card.sub-selected { background: #e0f7fa; border-color: #00bcd4; }

.sub-controls { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 5px; }
.sub-btn { pointer-events: auto; padding: 4px 10px; font-size: 14px; background: #fff; }

/* 個数入力 */
input[type="number"][name="items"] {
    border: none;
    outline: none;
    background: transparent;
}




#copyright{background-color: black;color: white;font-size: 12px;padding: 1em;text-align: center;}

/* 結果表示エリア */
#resultOutput { background: #333; color: #0f0; font-family: monospace; padding: 4px; border-radius: 4px; word-break: break-all; margin-bottom: 4px; }

/* 結果add */
:root { --primary: #2563eb; --bg: #f8fafc; --text: #1e293b; }
/**/
#weaponFilter{background-color: white;border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 4px;padding: 4px;}
.card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 4px; overflow: hidden;}
.card-header { padding: 4px; display: grid; grid-template-columns: 80px 80px 6em 9em 80px 1fr; cursor: pointer; align-items: center; transition: background-color 0.5s ;}
.card-header:hover {background-color: #f7b799;}
.card-content { display: none; padding: 15px; background: #fdfdfd; font-size: 0.9em; border-top: 1px solid #e2e8f0; }
.card.open .card-content { display: block; }
.inbox {display: grid;grid-template-columns: 1fr; gap: 16px;}
@media (min-width: 600px) {.inbox {display: grid;grid-template-columns: 15em 1fr; gap: 16px;} }

/* table */
.base-table {width: 100%;border-collapse: collapse;table-layout: fixed;}
.base-table th,.base-table td {border: 1px solid #333;padding: 4px;text-align: center;}
.base-table th {background-color: #ccc;}