/* レイアウト：上に固定ヘッダー（検索＋タブ）、下に1列のカード。PCでは2列。 */
:root{
  --bg:#eef1f7; --panel:#ffffff; --panel2:#f5f7fc; --ink:#151b30; --muted:#59627f; --line:#d3d9e8;
  --accent:#2347c6; --accent-ink:#ffffff; --gold:#9a6b00; --gold-bg:#fff4d6;
  --ok:#17804a; --ok-bg:#e3f5ea; --ng:#b8322a; --ng-bg:#fde8e6; --old:#6b6f80; --old-bg:#eceef3;
  --win:#1b2450; --win-ink:#f4f6ff;
  --f-display:"DotGothic16","Hiragino Sans","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --fs:16px; --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0b1024; --panel:#121a38; --panel2:#18214a; --ink:#eef1fb; --muted:#a2acd0; --line:#2d3870;
  --accent:#86a4ff; --accent-ink:#0b1024; --gold:#f0c95a; --gold-bg:#3a3014;
  --ok:#6fdc9c; --ok-bg:#163a28; --ng:#ff8f86; --ng-bg:#43201e; --old:#a4a9bd; --old-bg:#262c47;
  --win:#060a1c; --win-ink:#f4f6ff; color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0b1024; --panel:#121a38; --panel2:#18214a; --ink:#eef1fb; --muted:#a2acd0; --line:#2d3870;
  --accent:#86a4ff; --accent-ink:#0b1024; --gold:#f0c95a; --gold-bg:#3a3014;
  --ok:#6fdc9c; --ok-bg:#163a28; --ng:#ff8f86; --ng-bg:#43201e; --old:#a4a9bd; --old-bg:#262c47;
  --win:#060a1c; --win-ink:#f4f6ff; color-scheme:dark; }
:root[data-font="s"]{--fs:14px} :root[data-font="l"]{--fs:18px} :root[data-font="xl"]{--fs:20px}

*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.65}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--win)}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ヘッダー：DQのウィンドウ風 */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--win);color:var(--win-ink);border-bottom:3px double rgba(255,255,255,.55)}
header.top .wrap{padding-block:10px 0;display:grid;gap:8px}
.brand{display:flex;align-items:center;gap:10px;justify-content:space-between}
.brand h1{font-family:var(--f-display);font-weight:400;font-size:1.3rem;margin:0;letter-spacing:.04em;line-height:1.2}
.brand small{display:block;font-family:var(--f-body);font-size:.7rem;opacity:.8;letter-spacing:0}
.tools{display:flex;gap:6px}
.iconbtn{white-space:nowrap;background:transparent;border:1.5px solid rgba(255,255,255,.6);color:var(--win-ink);border-radius:8px;min-width:40px;height:40px;padding:0 8px;cursor:pointer;font-size:.85rem}
.search{display:flex;gap:6px}
.search input{flex:1;min-width:0;height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.7);background:#fff;color:#151b30;padding:0 12px;font-size:16px}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:0;background:transparent;color:var(--win-ink);opacity:.8;padding:7px 12px;border-radius:999px;cursor:pointer;font-size:.88rem;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--win-ink);color:var(--win);opacity:1;font-weight:700}
.tab .n{font-size:.72rem;margin-left:4px;opacity:.75}
.tab:focus-visible,.btn:focus-visible,.chip:focus-visible,.iconbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

main.wrap{padding-block:16px 40px;display:grid;gap:14px}
.view{display:grid;gap:14px}
.view>h2{font-family:var(--f-display);font-weight:400;font-size:1.25rem;margin:4px 0 0;text-wrap:balance}
.lead{color:var(--muted);margin:0;font-size:.92rem}
.grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:820px){.grid.two{grid-template-columns:1fr 1fr}}
.grid>*{min-width:0}

/* パネル */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
.panel h3{margin:0 0 6px;font-size:1.08rem;line-height:1.35}
.panel h4{margin:10px 0 4px;font-size:.92rem;color:var(--muted)}
.filters{display:grid;gap:10px}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.frow label{font-size:.85rem;color:var(--muted)}
select,.input{height:42px;border-radius:8px;border:1.5px solid var(--line);background:var(--panel);padding:0 10px;max-width:100%}
textarea.input{height:auto;min-height:90px;padding:8px 10px;width:100%}
input.input{min-width:0}

/* チップ */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:var(--panel2);border-radius:999px;padding:3px 10px;font-size:.82rem;line-height:1.5;cursor:default}
button.chip{cursor:pointer;min-height:34px}
button.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.chip.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.chip.ng{background:var(--ng-bg);border-color:transparent;color:var(--ng);font-weight:700}
.chip.dmg{background:var(--gold-bg);border-color:transparent;color:var(--gold)}
.chip.me{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.chip.free{border-style:dashed}
.badge{display:inline-block;font-size:.72rem;padding:1px 8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.old{background:var(--old-bg);color:var(--old);border-color:transparent}
.badge.new{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.badge.warn{background:var(--gold-bg);color:var(--gold);border-color:transparent}

/* カード */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px;min-width:0}
.card.done{opacity:.72}
.card-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.card-h h3{margin:0;font-size:1.1rem;line-height:1.35}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem;color:var(--muted)}
.kv{margin:0;display:grid;grid-template-columns:6.2em 1fr;gap:4px 8px;font-size:.9rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0}
.party{border-top:1px dashed var(--line);padding-top:8px;display:grid;gap:4px}
.party.hit{background:var(--panel2);border-radius:8px;padding:8px;border-top:0}
.party .note{font-size:.82rem;color:var(--muted)}
.party .borrow{font-size:.85rem}
.tips{font-size:.9rem;background:var(--panel2);border-radius:8px;padding:8px 10px}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.btn{border:1.5px solid var(--line);background:var(--panel);border-radius:8px;min-height:38px;padding:4px 12px;cursor:pointer;font-size:.85rem}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn[aria-pressed="true"]{background:var(--gold-bg);border-color:var(--gold);color:var(--gold);font-weight:700}
.src{font-size:.75rem;color:var(--muted)} .src a{color:var(--muted)}
details>summary{cursor:pointer;font-weight:700;font-size:.9rem;padding:4px 0}
.empty{text-align:center;color:var(--muted);padding:24px 10px}

/* 表 */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.88rem;background:var(--panel)}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--panel2);font-weight:700;white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* メンバー（レベル上げ） */
.members{display:grid;gap:6px}
.member{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:8px;border-radius:8px;background:var(--panel2)}
.member .slot{grid-row:span 2;font-family:var(--f-display);width:1.8em;height:1.8em;display:grid;place-items:center;border-radius:6px;background:var(--win);color:var(--win-ink);font-size:.9rem}
.member b{font-size:.92rem} .member span{font-size:.84rem;color:var(--muted)}
.member .d{grid-column:2;font-size:.84rem}
ol.steps{margin:0;padding-left:1.4em;font-size:.9rem}

/* チェックリスト */
.check{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--line)}
.check input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.check label{flex:1;min-width:0}
.check.on label{text-decoration:line-through;color:var(--muted)}
.check .x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;min-width:32px;min-height:32px}

/* ゼルメア */
.zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:420px}
.zcell{aspect-ratio:1;max-width:100%;border-radius:8px;border:2px solid var(--line);background:var(--panel2);display:grid;place-items:center;font-family:var(--f-display);font-size:1.1rem;cursor:pointer;user-select:none}
.zcell.open{border-color:var(--ok);background:var(--ok-bg)}
.zcell.down{border-color:var(--gold);background:var(--gold-bg)}
.zcell.boss{border-color:var(--ng);background:var(--ng-bg)}

.home-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.home-links button{text-align:left;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;min-height:64px}
.home-links b{display:block;font-size:.95rem}.home-links span{font-size:.75rem;color:var(--muted)}
.notice{border-left:4px solid var(--gold);background:var(--gold-bg);color:var(--ink);padding:10px 12px;border-radius:6px;font-size:.88rem}
footer{border-top:1px solid var(--line);padding-block:20px 40px;font-size:.78rem;color:var(--muted)}
footer p{margin:4px 0}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--win);color:var(--win-ink);padding:10px 16px;border-radius:10px;z-index:50;font-size:.9rem;max-width:90vw}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:520px){.brand small{display:none}.brand h1{font-size:1.15rem}header.top .wrap{gap:6px;padding-block:8px 0}.search input{height:40px}}
.fabs{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:25}
.fab{border:2px solid rgba(255,255,255,.7);background:var(--win);color:var(--win-ink);border-radius:999px;min-height:46px;padding:0 16px;font-size:.92rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.fab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
main.wrap{padding-bottom:110px}
.equip{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:8px 10px;background:var(--panel2)}
.equip h4{margin:0 0 6px}
.equip .kv{grid-template-columns:7.2em 1fr}
.hint{color:var(--muted);font-size:.85em}
details.acts summary{cursor:pointer;font-weight:700}
details.acts ul{margin:6px 0 0;padding-left:1.2em;font-size:.9rem}
details.acts li{margin:2px 0}
details.guide{border:1px dashed var(--line);border-radius:8px;padding:6px 10px}
details.guide summary{cursor:pointer;font-weight:700}
details.guide .chips{margin:6px 0}
details.guide .kv{grid-template-columns:7.2em 1fr}
.quick{border:2px solid var(--accent);border-radius:10px;padding:10px;display:grid;gap:10px;background:var(--panel)}
.quick h4{margin:0 0 4px;font-size:.95rem}
.qrow{display:flex;gap:8px;align-items:flex-start;margin:3px 0}
.qrow .chips{margin:0}
.qtext{font-size:.92rem;margin:0;line-height:1.5}
.tier{flex:0 0 auto;min-width:2.2em;text-align:center;font-weight:700;border-radius:6px;padding:1px 6px;font-size:.85rem;background:var(--panel2);white-space:nowrap}
.tier.t0{background:var(--ok);color:#fff}.tier.t1{background:var(--accent);color:#fff}.tier.t2{background:var(--panel2)}.tier.t3{background:var(--ng);color:#fff}
.mine{margin:0 0 4px;font-size:.92rem}
details.more summary,details.roles summary{cursor:pointer;font-weight:700}
@media (min-width:900px){.quick{grid-template-columns:1fr}}
details.sapo{border:1px solid var(--line,#ccd);border-radius:12px;padding:8px 12px;margin:8px 0;background:var(--panel2)}
details.sapo>summary{font-weight:700;cursor:pointer}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.sapo-t{border-collapse:collapse;width:100%;font-size:.88em;margin:6px 0}
table.sapo-t th,table.sapo-t td{border-bottom:1px solid var(--line,#ccd);padding:4px 6px;text-align:left;vertical-align:top}
table.sapo-t tbody th{white-space:nowrap}
ul.sapo-l{list-style:none;padding:0;margin:4px 0}
ul.sapo-l>li{border-top:1px dashed var(--line);padding:6px 0}
ul.sapo-l .kv{margin:2px 0 0}
details.sapo{min-width:0}
/* スマホで募集文などのフォームがはみ出さないように */
.panel.filters,.frow{min-width:0;max-width:100%}
.frow>select,.frow>.input,.frow>textarea{min-width:0;max-width:100%}
#r-con,#r-want,#r-cmt{width:100%}
textarea.input{width:100%;box-sizing:border-box}
.grid>*{min-width:0}
.card{min-width:0;overflow-wrap:anywhere}
.card>*,.quick>*,.qsec>*{min-width:0}
.badge{max-width:100%;white-space:normal}
/* パソコン・タブレットの広い画面ではタブを折り返して全部表示 */
@media (min-width:768px){ .tabs{flex-wrap:wrap;overflow-x:visible} }

.joborb ul{margin:.3em 0 .3em 1.2em;padding:0}.joborb .badge{margin-bottom:.2em}