/* KB_FMT: grouped format picker (home) + /file-formats page */
.target-btns>.fp{flex:1 1 100%;min-width:0}
.fp{display:flex;flex-direction:column;gap:12px;text-align:left;max-width:760px;margin:0 auto;width:100%}
.fp-search{width:100%;box-sizing:border-box;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;font:500 1rem system-ui,sans-serif}
.fp-g{display:flex;flex-direction:column;gap:6px;min-width:0}
.fp-g[hidden]{display:none}
.fp-h{margin:0;font:700 .78rem system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#475569}
.fp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.fp .target{justify-content:flex-start;flex-wrap:wrap;row-gap:4px;min-width:0;padding:8px 12px;text-align:left}
.fp .target[hidden]{display:none}
/* KB_UX: wrap labels on whole words only ("Backgroun|d Remover" on 360px phones); a label that can't sit next to the badge drops under it */
.fp-n{flex:1 1 0;min-width:auto;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.25}
.fp-chip{margin-left:auto;font:600 .72rem system-ui,sans-serif;color:#4338ca;background:#eef2ff;border-radius:999px;padding:2px 8px;white-space:nowrap}
.fp-flag{margin-left:auto}
.fp-more{border-top:1px dashed var(--line);padding-top:8px}
.fp-more>summary{cursor:pointer;font:600 .95rem system-ui,sans-serif;color:#4338ca;padding:8px 0;min-height:24px}
.fp-more[open]>summary{margin-bottom:8px}
.fp-more .fp-g{margin-bottom:10px}
.fp-all{align-self:flex-start;font-weight:600;font-size:.92rem;color:#4338ca;padding:6px 0}
.fp-none[hidden]{display:none}
.fp-country{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px auto 0;max-width:760px;justify-content:center}
.fp-ch{font:700 .85rem system-ui,sans-serif;color:#334155;flex:1 1 100%;text-align:center}
.fp-cl{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;background:#fff;font-weight:600;font-size:.9rem;text-decoration:none;color:inherit;min-height:32px}
.fp-cl .badge{width:24px;height:24px;font-size:.62rem}
@media (max-width:420px){.fp-row{grid-template-columns:1fr 1fr}.fp .target{font-size:.92rem;padding:8px 10px;gap:6px}.fp .target .badge{width:26px;height:26px;font-size:.6rem;flex:none}}
/* /file-formats */
.ff-jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ff-jump a{border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:#fff;font-weight:600;font-size:.9rem;text-decoration:none}
.ff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:14px}
.ff-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;min-width:0}
.ff-card h3{margin:0 0 8px;font-size:1.02rem;overflow-wrap:anywhere}
.ff-ext{font-weight:500;font-size:.8rem}
.ff-tools{display:flex;flex-wrap:wrap;gap:6px}
.ff-tools a{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;border:1px solid var(--line);border-radius:10px;padding:4px 10px 4px 4px;text-decoration:none;color:inherit;min-height:32px;max-width:100%}
.ff-tools .badge{width:22px;height:22px;font-size:.55rem;flex:none}
.ff-more>summary,.ff-more-tools>summary{cursor:pointer;font-weight:600;color:#4338ca;padding:8px 0}
.ff-more-tools{margin-top:6px}
@media (max-width:340px){.fp .target{font-size:.84rem;padding:8px;gap:6px}} /* KB_UX: long German compounds fit on 320px phones */
/* KB_UX2: in-place "All formats (n)" / "Show fewer" accordion */
.fp-toggle{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin:2px 0 0;padding:8px 14px;border:1px solid #c7d2fe;border-radius:999px;background:#eef2ff;color:#3730a3;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s,border-color .2s}
.fp-toggle:hover{background:#e0e7ff}
.fp-toggle:focus-visible{outline:3px solid #6366f1;outline-offset:2px}
.fp-chev{display:inline-block;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.fp-toggle[aria-expanded=true] .fp-chev{transform:rotate(180deg)}
.fp-panel{display:flex;flex-direction:column;gap:12px}
.fp-panel[hidden]{display:none}
.fp-panel.is-anim{overflow:hidden;transition:height .45s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.fp-note{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#f1f5f9;color:#334155;font-size:.9rem;line-height:1.4}
@media (prefers-reduced-motion:reduce){.fp-chev,.fp-panel.is-anim{transition:none}}
html[lang|=ko] .fp-n,html[lang|=ko] .drop-title,html[lang|=ko] .file-ready,html[lang|=ko] .fp-note{word-break:keep-all} /* KB_UX2: Korean wraps on words, not syllables */