/* hub.css — home hub + tool-shell extras (drop zone, column picker).
   Loaded after tools.css, reuses its tokens. */

/* ---------- tool shell extras ---------- */
.drop{border:1.5px dashed var(--line-strong);border-radius:9px;background:#fbfaf7;
  padding:26px 18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--ink-3)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop-t{font-size:15px;font-weight:700;color:var(--ink)}
.drop-s{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.hint{font-size:12px;font-weight:400;color:var(--ink-3)}
.colbox{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fbfaf7;min-height:46px}
.colbox label{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:5px;cursor:pointer}
.colbox .drophint{font-size:12.5px}
#out .stat{margin-top:14px}

/* ---------- hub hero ---------- */
.hub-hero{padding:52px 0 28px;border-bottom:1px solid var(--line)}
.hub-hero h1{font-family:"Noto Serif JP",Georgia,serif;font-size:clamp(26px,3.8vw,40px);
  line-height:1.34;margin:0 0 14px;letter-spacing:-.01em;font-weight:600}
.hub-hero .lead{font-size:16px;color:var(--ink-2);margin:0 0 20px;max-width:72ch}
.hub-search{margin-bottom:14px}
.hub-search input{width:100%;max-width:520px;padding:10px 14px;font-size:14px;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{appearance:none;font-family:inherit;font-size:12.5px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  padding:5px 12px;border-radius:99px;transition:all .15s}
.chip b{font-weight:700;color:var(--ink-3);margin-left:4px}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.on b{color:rgba(255,255,255,.7)}

/* ---------- hub body ---------- */
.hub-tools{padding:26px 0 8px}
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:30px}
.feature-card{background:var(--accent-soft);border:1px solid #edc9bd;border-radius:12px;padding:18px 20px}
.fc-tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.fc-title{font-size:15.5px;font-weight:700;margin:4px 0 4px;line-height:1.5}
.fc-desc{font-size:12.5px;color:var(--ink-2);margin-bottom:12px;line-height:1.7}

.fam{margin-bottom:28px}
.fam-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.fam-head h2{font-family:inherit;font-size:14.5px;font-weight:700;margin:0}
.fam-n{font-size:11px;color:var(--ink-3);background:#f2efe8;border:1px solid var(--line);
  border-radius:99px;padding:1px 8px}
.grid-t{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px}
.tcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:13px 15px;color:inherit;transition:border-color .15s,transform .15s}
.tcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.tn{display:block;font-weight:700;font-size:14px;color:var(--ink);line-height:1.5}
.td{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.6}
.tcard.soon{opacity:.5;border-style:dashed}
.tcard.soon:hover{border-color:var(--line);transform:none}
.tcard.soon em{font-style:normal;font-size:10px;letter-spacing:.04em;background:#f2efe8;
  color:var(--ink-3);border-radius:99px;padding:1px 7px;margin-left:7px;vertical-align:1px}

.hub-guide{border-top:1px solid var(--line);padding:26px 0;background:var(--surface)}
.hub-guide h2{font-size:14.5px;font-weight:700;margin:0 0 12px}
.guide-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 18px;
  font-size:13.5px;line-height:1.9}

.hub-trust{border-top:1px solid var(--line);background:#f6f3ee;padding:22px 0}
.hub-trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.trust b{display:block;font-size:13px;color:var(--ink)}
.trust span{font-size:12px;color:var(--ink-3)}

@media (max-width:640px){
  .hub-hero{padding:34px 0 22px}
  .hub-search input{max-width:none}
  .grid-t{grid-template-columns:1fr 1fr}
  .tcard{padding:11px 12px}
  .tn{font-size:13px}
  .td{font-size:11.5px}
}