:root {
  --bg: #101116; --bg2: #171922;
  --panel: rgba(28, 29, 38, .92); --panel-head: rgba(255, 255, 255, .03);
  --line: #3d3a2e; --line-soft: #2c2e38;
  --text: #ece9df; --muted: #a49e8d; --faint: #aea691;
  --gold: #c9a86a; --gold-bright: #ecd29a; --gold-deep: #8a6d35;
  --blue: #88b0e0; --green: #8fce6e; --danger: #ee8968;
  --row: rgba(255, 255, 255, .025); --row-alt: rgba(255, 255, 255, .05);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html { scrollbar-color: #4a4636 var(--bg); }
/* モバイルChromeのテキスト自動拡大（フォントブースティング）を止める。
   有効だと再描画のたびに文字が一瞬大きく表示され、fitNames の縮小と競合する */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font-family: var(--sans);
  background:
    radial-gradient(1100px 500px at 50% -120px, rgba(201, 168, 106, .14), transparent 60%),
    radial-gradient(800px 400px at 90% 110%, rgba(80, 100, 160, .10), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 320px);
  background-color: var(--bg);
  min-height: 100vh;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #454136; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- ヘッダー ---------- */
header { padding: 34px 20px 10px; max-width: 1220px; margin: 0 auto; text-align: center; }
header .crest { color: var(--gold); font-size: 15px; letter-spacing: .6em; text-indent: .6em; }
h1 {
  font-family: var(--serif); font-weight: 600; font-size: 34px; margin: 8px 0 2px;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #fdf6dd 20%, var(--gold-bright) 55%, #b7985d 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
h1 .web { font-size: 20px; letter-spacing: .2em; }
header .rule { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 12px auto 4px; color: var(--gold); }
header .rule::before, header .rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep)); }
header .rule::after { background: linear-gradient(90deg, var(--gold-deep), transparent); }
.sub { color: var(--muted); font-size: 13px; margin: 6px 0 10px; letter-spacing: .04em; }

.header-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; }
#guideToggle { color: var(--gold-bright); border-color: var(--gold-deep); }
#guidePanel, #historyPanel { background: #1e1f28; color: var(--text); border: 1px solid var(--gold-deep);
  border-radius: 14px; max-width: 680px; width: 92vw; max-height: 86vh; overflow: auto;
  box-shadow: var(--shadow); padding: 20px 22px; text-align: left; }
#guidePanel::backdrop, #historyPanel::backdrop { background: rgba(5, 5, 10, .65); backdrop-filter: blur(2px); }
#guidePanel h2, #historyPanel h2 { margin-top: 0; font-size: 18px; font-family: var(--serif); letter-spacing: .05em; }
#guidePanel h3 { font-size: 15px; }
#guidePanel h3::before { content: none; }
.guide-panel p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.guide-panel a { color: var(--blue); }
#guideClose { margin-top: 8px; }
#historyClose { margin-top: 8px; }
.history-list { list-style: none; margin: 0 0 6px; padding: 0; font-size: 14px; line-height: 1.9; }
.history-list time { color: var(--gold-bright); margin-right: 8px; }
footer .linklike { background: none; border: none; border-radius: 0; padding: 0;
  font-size: 12px; color: var(--gold-bright); text-decoration: underline; box-shadow: none; letter-spacing: 0; }
footer .linklike:hover { transform: none; color: var(--gold-bright); border: none; }

/* ---------- レイアウト ---------- */
main { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 1440px; margin: 0 auto; padding: 10px 20px 24px; align-items: start; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } h1 { font-size: 27px; } }
#favPanel { grid-column: 1 / -1; padding: 7px 14px 9px; }
#favToggle { display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: none; padding: 3px 2px; text-align: left; }
#favToggle:hover { transform: none; border: none; }
#favToggle .favtitle { font-size: 14.5px; }
.favcount { color: var(--muted); font-size: 12.5px; }
.favchevron { margin-left: auto; color: var(--gold); font-size: 12.5px; white-space: nowrap; }
.favbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fav-heading { margin: 0; padding: 0; background: none; border: 0; }
.fav-heading::before { content: none; }
.favbar[hidden] { display: none; }
@media (min-width: 861px) {
  /* PCではお気に入りの折りたたみ自体をなくし、見出しと操作を1行に並べて常時開いておく */
  #favPanel { display: flex; align-items: center; gap: 14px; }
  #favBody { display: flex; flex: 1; flex-wrap: nowrap; margin-top: 0; }
  #favChevron { display: none; }
  #favToggle { pointer-events: none; width: auto; flex: none; }
  .favbar #favName { width: 130px; flex: none; }
  .favbar #favSel { min-width: 0; }
  .favbar button { white-space: nowrap; }
}
.favtitle { font-family: var(--serif); color: var(--gold-bright); letter-spacing: .08em;
  font-size: 14px; white-space: nowrap; margin-right: 2px; }
.favbar #favName { width: 150px; padding: 6px 9px; }
.favbar #favSel { flex: 1; min-width: 150px; padding: 6px 9px; }
.favbar button { padding: 6px 11px; }
.favsep { width: 1px; align-self: stretch; background: var(--line-soft); margin: 2px 2px; }
.rmf-preview {
  margin-top: 10px; padding: 12px; border: 1px solid var(--gold-deep);
  border-radius: 10px; background: var(--bg2); font-size: 13px;
}
.rmf-preview h3, .rmf-preview h4 { margin: 0; color: var(--gold-bright); }
.rmf-preview p { margin: 8px 0; }
.rmf-issues { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.rmf-issues > div { flex: 1 1 240px; min-width: 0; }
.rmf-issues ul {
  max-height: 12rem; overflow-y: auto; overflow-wrap: anywhere;
  margin: 4px 0 0; padding-inline-start: 22px;
}
.rmf-actions { margin-bottom: 0; }
#rmfConfirm { border-color: var(--gold-deep); color: var(--gold-bright); }
.unresolved {
  margin: 8px 0; padding: 9px 11px; border: 1px solid var(--danger);
  border-radius: 10px; background: rgba(217, 108, 108, .07); font-size: 12.5px;
}
.unresolved-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.unresolved-row span { flex: 1; min-width: 0; }
.unresolved-row button { padding: 2px 10px; font-size: 12px; }
header, footer { max-width: 1440px; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 18px 16px; box-shadow: var(--shadow); overflow: hidden;
  backdrop-filter: blur(4px);
}
h2 {
  font-family: var(--serif); font-size: 17px; letter-spacing: .12em; margin: 0 -18px 14px;
  padding: 11px 18px 9px; background: var(--panel-head);
  border-bottom: 1px solid var(--line); color: var(--gold-bright);
}
h2::before { content: "◆" / ""; color: var(--gold); font-size: 11px; margin-right: 9px; vertical-align: 2px; }
h3 { font-size: 14px; margin: 18px 0 7px; letter-spacing: .06em; color: var(--gold-bright); }
h3::before { content: "▸" / ""; color: var(--gold); margin-right: 6px; }

/* ---------- フォーム ---------- */
.row { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
.row label { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.row.radios label { color: var(--text); cursor: pointer; }
select, input[type="search"], input[type="text"] {
  background: #1b1c24; color: var(--text); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 8px 10px; font-size: 14px;
  transition: border-color .15s, box-shadow .15s; }
select:focus, input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 168, 106, .18); }
input::placeholder { color: var(--muted); opacity: 1; }
input[type="search"] { flex: 1; min-width: 170px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
button {
  background: linear-gradient(180deg, #33343f, #26272f); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 13px;
  /* all にすると font-size までアニメーションし、fitNames の計測と競合して名前が揺れ続ける。
     対象はホバー演出のプロパティだけに限定する */
  font-size: 13px; cursor: pointer; letter-spacing: .03em;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s, filter .15s; }
.filebtn { font-family: inherit; }
button:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.danger:hover { border-color: var(--danger); color: var(--danger); }
#copyBtn {
  background: linear-gradient(180deg, #d8ba7c, #a9853f); color: #241b05; font-weight: 700;
  border-color: var(--gold-deep); }
.copyrow { margin-top: 0; flex-wrap: nowrap; }
.copyrow button { flex: 1; }
#copyBtn:hover { color: #000; filter: brightness(1.07); }
.count { color: var(--faint); font-size: 12px; margin: 8px 0 4px; }

/* ---------- 検索結果 ---------- */
.results { list-style: none; margin: 0; padding: 0; max-height: 580px; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: 10px; }
.results li { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft); font-size: 14px; transition: background .12s; }
.results li:last-child { border-bottom: none; }
.results li:nth-child(odd) { background: var(--row); }
.results li:hover { background: rgba(201, 168, 106, .09); }
.results .rname { flex: 1; cursor: pointer; min-width: 0; }
.results .meta {
  color: var(--gold-bright); background: rgba(201, 168, 106, .12);
  border: 1px solid rgba(201, 168, 106, .35); border-radius: 999px;
  font-size: 11px; padding: 2px 9px; white-space: nowrap; }
.results .addbtn {
  background: linear-gradient(180deg, #d8ba7c, #a9853f); color: #241b05; font-weight: 700;
  border-color: var(--gold-deep); padding: 4px 12px; font-size: 15px; }
.results .addbtn:hover { color: #000; filter: brightness(1.08); }
.results .infobtn { padding: 4px 9px; color: var(--blue); font-size: 12px; }

/* ---------- テーブル ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: .06em; }
th, td { padding: 6px; border-bottom: 1px solid var(--line-soft); text-align: left; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }
th.num, td.num { text-align: right; width: 88px; font-variant-numeric: tabular-nums; }
th.chk, td.chk { width: 30px; text-align: center; }
th.ops, td.ops { width: 122px; text-align: right; }
td.ops button { padding: 2px 9px; margin-left: 3px; }
td.num { color: var(--gold-bright); font-weight: 600; }
td input.qty { width: 58px; background: #1b1c24; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 6px; text-align: right; }
td input.qty:focus { border-color: var(--gold); }
tr.done td.name { color: var(--faint); text-decoration: line-through; }
tr.done td.num { color: var(--faint); }
.empty { color: var(--faint); font-size: 13px; border: 1px dashed var(--line-soft);
  border-radius: 8px; padding: 12px; text-align: center; }
.progress { color: var(--green); font-size: 12px; margin-left: 6px; }
.bar { height: 6px; background: #1b1c24; border: 1px solid var(--line-soft);
  border-radius: 999px; overflow: hidden; margin: 2px 0 8px; }
.bar > div { height: 100%; width: 0;
  background: linear-gradient(90deg, #6da34e, var(--green));
  transition: width .3s ease; }
.note { color: var(--faint); font-size: 12px; line-height: 1.6; }

/* ---------- 製作ツリー ---------- */
.tree:empty { display: none; }
.troot { border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px 10px 8px;
  background: rgba(0, 0, 0, .18); margin-bottom: 10px; }
.troot > .tnode > .trow.root {
  border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 4px; }
td.num.extra { color: var(--blue); font-weight: 400; }
td.num.total { color: var(--gold-bright); }
#crystalTable th.num, #crystalTable td.num { width: 62px; }
.tkids { margin-left: 13px; padding-left: 14px; border-left: 1px solid var(--line-soft); }
.trow { display: flex; align-items: center; gap: 7px; padding: 4px 4px; font-size: 13.5px;
  border-radius: 6px; }
.trow:hover { background: rgba(201, 168, 106, .07); }
.trow.root { font-weight: 700; }
.ttoggle { width: 26px; padding: 2px 0; font-size: 10px; color: var(--gold);
  background: transparent; border: 1px solid transparent; flex: none; }
.ttoggle:not(:disabled):hover { border-color: var(--gold); }
.ttoggle:disabled { color: var(--faint); cursor: default; }
.ttoggle:disabled:hover { transform: none; }
.tname { flex: 1; min-width: 0; }
button.tname, button.tname:hover {
  padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; text-align: left; transform: none;
}
.tcrafter, td .crafter { color: var(--gold); font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.csel { background: #1b1c24; color: var(--gold-bright); border: 1px solid var(--gold-deep);
  border-radius: 6px; padding: 2px 5px; font-size: 12px; margin-left: 8px; cursor: pointer; flex: none; }
td .csel { margin-left: 8px; padding: 1px 4px; }
.tinfo { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbadge { font-size: 10.5px; padding: 1.5px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.tbadge.craft { color: var(--blue); border-color: rgba(127, 168, 217, .5); background: rgba(127, 168, 217, .1); }
.tbadge.raw { color: var(--muted); border-color: var(--line-soft); background: rgba(255, 255, 255, .04); }
button.tbadge { font: inherit; font-size: 10.5px; cursor: pointer; }
button.tbadge:hover { filter: brightness(1.35); }

/* ---------- 詳細ダイアログ ---------- */
#detailDialog { background: #1e1f28; color: var(--text); border: 1px solid var(--gold-deep);
  border-radius: 14px; max-width: 540px; width: 92vw; box-shadow: var(--shadow); padding: 20px 22px; }
#detailDialog::backdrop { background: rgba(5, 5, 10, .65); backdrop-filter: blur(2px); }
#detailDialog h2, #detailDialog h3 { margin-top: 0; font-size: 17px; font-family: var(--serif); letter-spacing: .05em; }
#detailDialog h2 { margin: 0 0 7px; padding: 0; border: 0; background: none; }
#detailDialog h2::before, #detailDialog h3::before { content: none; }
#detailDialog table { margin: 6px 0; }
#detailDialog .kv { color: var(--muted); font-size: 13px; line-height: 1.8; }
#detailDialog a { color: var(--blue); }
#detailDialog form { text-align: right; margin-top: 12px; }

/* ---------- 入手方法 ---------- */
.source-button {
  font-size: 10.5px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--faint); cursor: pointer; white-space: nowrap; vertical-align: middle;
}
.source-button:hover { color: var(--gold-bright); border-color: var(--gold-deep); background: rgba(255, 255, 255, .05); transform: none; }
#sourceDialog {
  background: #1e1f28; color: var(--text); border: 1px solid var(--gold-deep);
  border-radius: 14px; max-width: 820px; width: 94vw; max-height: 88vh; overflow: auto;
  box-shadow: var(--shadow); padding: 20px 22px;
}
#sourceDialog::backdrop { background: rgba(5, 5, 10, .65); backdrop-filter: blur(2px); }
#sourceDialog h2, #sourceDialog h3 { font-family: var(--serif); letter-spacing: .05em; }
#sourceDialog h2 { margin: 0 0 10px; padding: 0; border: 0; background: none; font-size: 18px; }
#sourceDialog h2::before, #sourceDialog h3::before { content: none; }
#sourceDialog h3 { margin: 15px 0 5px; font-size: 15px; }
#sourceDialog .kv { color: var(--muted); font-size: 13px; }
#sourceDialog a { color: #9bc9ff; }
#sourceDialog form { text-align: right; margin-top: 14px; }
.source-table-wrap { overflow-x: auto; }
#sourceDialog table { min-width: 430px; font-size: 13px; }
#sourceDialog th { white-space: nowrap; }
#sourceDialog td { vertical-align: top; line-height: 1.5; }

/* ---------- その他 ---------- */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  background: #2c2e28; color: var(--text); border: 1px solid var(--gold);
  padding: 11px 20px; border-radius: 10px; font-size: 14px; opacity: 0;
  pointer-events: none; transition: all .25s; max-width: 92vw; white-space: pre-line;
  box-shadow: var(--shadow); z-index: 50; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
footer { max-width: 1440px; margin: 0 auto; padding: 6px 20px 30px;
  color: var(--faint); font-size: 12px; line-height: 1.8; text-align: center; }

/* 左パネルのタブ（レシピ検索／おまかせパック） */
.tabs { display: flex; gap: 6px; margin: 0 -18px 14px; padding: 8px 18px 0;
  background: var(--panel-head); border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: none; border-bottom: 2px solid transparent;
  font-family: var(--serif); font-size: 16px; letter-spacing: .1em; color: var(--muted);
  padding: 6px 10px 8px; cursor: pointer; box-shadow: none; }
.tab:hover { transform: none; color: var(--text); }
.tab.active { color: var(--gold-bright); border-bottom-color: var(--gold); }
#searchBody[hidden], #packBody[hidden] { display: none; }

/* おまかせパック */
.packnote { font-size: 12px; color: var(--muted); margin: 2px 0 4px; line-height: 1.6; }
.packtitle { font-weight: normal; padding: 0; border: 0; background: none; font-family: var(--serif); color: var(--gold-bright); letter-spacing: .06em;
  font-size: 14.5px; margin: 10px 0 4px; }
.packtitle:first-child { margin-top: 2px; }
.packgroup { margin: 2px 0 10px; }
.packrole { font-weight: normal; color: var(--gold); font-size: 12.5px; letter-spacing: .08em; margin: 8px 0 5px;
  border-left: 3px solid var(--gold-deep); padding-left: 8px; }
.packtitle::before, .packrole::before { content: none; }
.packgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 6px; }
.packgrid .packbtn { text-align: center; }
.packbtn { border: 1px solid var(--gold-deep); background: rgba(201, 162, 39, .08);
  color: var(--gold-bright); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer;
  white-space: nowrap; }
.packbtn:hover { background: rgba(201, 162, 39, .22); }
/* 作りたいもの見出し横の全消去ボタン */
button.thbtn { font-size: 11.5px; padding: 2px 9px; margin-left: 10px; vertical-align: 1px; }
/* 統合ビュー: 頂点の個数操作 */
.tops { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }
.tops input.qty { width: 58px; background: #1b1c24; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 6px; font-size: 13px; }
.tops input.qty:focus { border-color: var(--gold); }
.tops button { padding: 2px 9px; }
/* 詳細モーダルのアイコン（公式CDN直リンク。失敗時は onerror で除去） */
.dicon { width: 44px; height: 44px; border-radius: 8px; vertical-align: -13px; margin-right: 10px; }
.micon { width: 22px; height: 22px; border-radius: 5px; vertical-align: -6px; margin-right: 7px; }

/* ---------- 案2: 右パネルを画面内に収め、ツリーと素材を内側スクロール ---------- */
@media (min-width: 861px) {
  #createPanel { position: sticky; top: 12px; display: flex; flex-direction: column;
    max-height: calc(100vh - 24px); }
  #tree { flex: 1 1 auto; min-height: 80px; overflow-y: auto; }
  #matZone { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
}
@media (max-width: 860px) {
  #tree { max-height: 55vh; overflow-y: auto; }
}

/* ---------- スマホ版: 行を2段組みにしてアイテム名の幅を確保 ---------- */
@media (max-width: 860px) {
  /* ツリー行: 行全体をトグル幅ぶんインデントし、トグルだけ負マージンで戻す。
     名前が1段目を広く使い、職・情報・バッジ・個数操作は名前の下（2段目）へ回る */
  .trow { flex-wrap: wrap; row-gap: 3px; padding-left: 37px; }
  .ttoggle { margin-left: -33px; }
  .tname, button.tname { flex: 1 1 140px; font-size: 14px; }
  .tops input.qty { width: 50px; }

  /* 検索結果: 名前と＋ボタンを1段目、メタ情報と詳細ボタンは2段目へ */
  .results li { flex-wrap: wrap; }
  .results .rname { flex: 1 1 calc(100% - 56px); order: 1; }
  .results .addbtn { order: 2; }
  .results .meta { order: 3; }
  .results .infobtn { order: 4; margin-left: auto; }

  /* 素材テーブル: 見出し行は読み上げ用に残し、個数列を詰めて名前の幅を広げる。
     名前セル内の職プルダウンは、幅が足りなければ名前の下へ自然に回る */
  #materialTable thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  #materialTable th.num, #materialTable td.num { width: 46px; }
  /* スマホも固定レイアウトにする。列幅を内容で決めないので、再構築中の暫定描画で名前が広がらない */
  body #materialTable th.tools, body #materialTable td.mtools { width: 92px; }
  /* スマホでは行のコピーボタンを出さず、名前列に幅を寄せる。職プルダウンは名前の下へ回す */
  #materialTable .namecopy { display: none; }
  #materialTable .namerow { flex-wrap: wrap; }

  /* テーブル全般を少し詰め、クリスタル表の個数列も細くする */
  th, td { padding: 5px 4px; }
  #crystalTable th.num, #crystalTable td.num { width: 46px; }
  #crystalTable { font-size: 12.5px; }
}

/* ---------- スマホ版 第2段: 余白を圧縮し、名前は改行させず自動で縮小 ---------- */
@media (max-width: 860px) {
  main { padding: 10px 10px 24px; }
  .panel { padding: 0 12px 14px; }
  #favPanel { padding: 7px 10px 9px; }
  .troot { padding: 6px 8px 8px; }
  .tkids { margin-left: 7px; padding-left: 9px; }
  .trow { padding-left: 35px; }
  .ttoggle { margin-left: -31px; }
  .tname, button.tname { font-size: 13.5px; }
  table { font-size: 13.5px; }
  .packgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- アイテム名は全幅で改行しない（PC・スマホ共通） ---------- */
/* 入りきらない名前は fitNames() がフォントを縮小し、下限でも溢れる場合のみ欄内で横スクロール */
.tname { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.mname { display: inline-block; max-width: 100%; overflow-x: auto; white-space: nowrap;
  vertical-align: bottom; scrollbar-width: none; }
.results .rname { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.tname::-webkit-scrollbar, .mname::-webkit-scrollbar,
.results .rname::-webkit-scrollbar { display: none; }
/* 名前欄は1行固定: 名前が縮み、職ラベルや済表示は同じ行に残る */
.namerow { display: flex; align-items: center; flex-wrap: nowrap; }
.namerow .mname { flex: 0 1 auto; min-width: 0; }
.namerow .crafter, .namerow .csel, .namerow .got { flex: none; }

/* ---------- スクロールバーの出現で画面がズレないよう溝を常時確保 ---------- */
html { scrollbar-gutter: stable; }
#tree, #matZone, .results { scrollbar-gutter: stable; }
/* 初回表示は、名前の縮小計算が済むまでツリーと素材表を見せない（一瞬だけ大きく見えるのを防ぐ） */
body.pre-fit #tree, body.pre-fit #matZone { visibility: hidden; }

/* ---------- 広い画面: ツリーと素材を横並びにして1画面に収める ---------- */
@media (min-width: 1500px) {
  main { max-width: 1860px; grid-template-columns: .85fr 1.6fr; }
  header, footer { max-width: 1860px; }
  #createPanel { display: grid; grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 18px; }
  #createPanel > h2 { grid-column: 1 / -1; }
  #createPanel > .row.buttons { grid-column: 1 / -1; }
  #tree { grid-column: 1; grid-row: 3; min-height: 0; overflow-y: auto; }
  #createEmpty { grid-column: 1; grid-row: 3; }
  #createPanel > .note { grid-column: 1; grid-row: 4; }
  #matZone { grid-column: 2; grid-row: 3 / 5; min-height: 0; overflow-y: auto; }
}

/* ---------- 未収集のみ表示・済み表示・名前コピー ---------- */
.onlyremain { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--muted); cursor: pointer; margin: 3px 0 5px; }
.onlyremain input { accent-color: var(--gold); width: 15px; height: 15px; margin: 0; }
.got { color: var(--gold-bright); font-size: 11px; margin-left: 6px; white-space: nowrap; }
.namecopy { margin-left: 8px; font-size: 10.5px; padding: 1px 7px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--faint); cursor: pointer; white-space: nowrap; }
.namecopy:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.mtools { white-space: nowrap; }
.mtools .namecopy { margin-left: 0; }
.mtools .source-button { margin-left: 6px; }
/* 素材表は固定レイアウト: 列幅を行の内容で変動させない（バッジは1行、名前側が伸縮する） */
#materialTable { table-layout: fixed; }
#materialTable th.tools, #materialTable td.mtools { width: 148px; }
#materialTable th.num, #materialTable td.num { width: 64px; }
#materialTable tbody tr, #crystalTable tbody tr { transition: background .35s; }
#materialTable tbody tr.flash, #crystalTable tbody tr.flash { background: rgba(201, 162, 39, .22); }

/* ---------- アクセシビリティ ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
:is(button, input, select, a, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 2px;
}
:where(#matZone, .results) :is(button, select):focus-visible { outline-offset: -2px; }
.results .addbtn:focus-visible, #copyBtn:focus-visible {
  outline-color: #241b05; outline-offset: -4px;
}
.gather-target { position: relative; }
@media (max-width: 860px) {
  :is(.ttoggle:not(:disabled), .tops button, .namecopy, .source-button, .unresolved-row button, button.thbtn, .onlyremain, button.tbadge) {
    position: relative;
  }
  :is(.ttoggle:not(:disabled), .tops button, .namecopy, .source-button, .unresolved-row button, button.thbtn, .onlyremain, button.tbadge)::after {
    content: ""; position: absolute; inset-inline: 0; top: 50%; height: 24px;
    transform: translateY(-50%);
  }
  .gather-target { display: inline-block; }
  .gather-target::after {
    content: ""; position: absolute; inset: 50% auto auto 50%; width: 24px; height: 24px;
    transform: translate(-50%, -50%); cursor: pointer;
  }
}
@media (forced-colors: active) {
  h1 { -webkit-text-fill-color: currentColor; }
  .tab.active { border-bottom-color: Highlight; }
  :is(button, input, select, a, [tabindex]):focus-visible,
  .results .addbtn:focus-visible, #copyBtn:focus-visible { outline-color: Highlight; }
}