/* 変換ツール共通（/audio/ /image/）。ページ側で --clr-app 系を上書きする */
.p-tool-hero { text-align: center; padding: 72px 24px 28px; }
.p-tool-hero__badge {
  display: inline-block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--clr-app); border: 1px solid var(--clr-app-border); background: var(--clr-app-bg);
  border-radius: 30px; padding: 4px 14px; margin-bottom: 18px; font-weight: 600;
}
.p-tool-hero__title { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.p-tool-hero__desc { max-width: 680px; margin: 0 auto; color: var(--clr-muted); line-height: 1.9; }
.p-tool-hero__safe { max-width: 680px; margin: 16px auto 0; padding: 10px 16px; border-radius: 10px; background: #eef8f0; border: 1px solid rgba(30,107,58,.25); color: #1e6b3a; font-size: .9rem; line-height: 1.75; text-align: left; }
.p-tool-hero__safe strong { font-weight: 700; }

.p-tool { max-width: 900px; margin: 0 auto; padding: 0 24px 72px; }
.p-tool__status { font-size: .9rem; color: var(--clr-muted); margin-bottom: 14px; }
.p-tool__status.is-ok { color: var(--clr-app); }
.p-tool__status.is-error { color: #c0262e; }

.p-tool__drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  padding: 36px 20px; border: 2px dashed var(--clr-border); border-radius: var(--radius); background: #fafafc; text-align: center;
}
.p-tool__drop:hover, .p-tool__drop.is-over { border-color: var(--clr-app); background: var(--clr-app-bg); }
.p-tool__drop input { display: none; }
.p-tool__drop-icon { font-size: 2rem; }
.p-tool__drop-text { font-size: 1rem; }
.p-tool__drop-sub { font-size: .85rem; color: var(--clr-muted); }

.p-tool__options { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 18px 0 6px; }
.p-tool__opt { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.p-tool__opt label { font-size: .85rem; color: var(--clr-muted); }
.p-tool__opt select, .p-tool__opt input[type="number"] {
  font: inherit; padding: 9px 12px; border: 1.5px solid var(--clr-border); border-radius: 10px; background: #fff; color: var(--clr-text);
}
.p-tool__opt select:focus, .p-tool__opt input:focus { outline: none; border-color: var(--clr-app); }

.p-tool__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 20px; }
.p-tool__btn {
  display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: 13px 26px; border-radius: 40px; background: var(--clr-app); color: #fff;
}
.p-tool__btn:hover { opacity: .9; }
.p-tool__btn:disabled { opacity: .45; cursor: default; }
.p-tool__btn--ghost { background: #fff; color: var(--clr-text); border: 1.5px solid var(--clr-border); font-weight: 600; }
.p-tool__btn--ghost:hover:not(:disabled) { border-color: var(--clr-app); color: var(--clr-app); opacity: 1; }

.p-tool__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p-tool__item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name meta" "bar bar" "result result";
  gap: 6px 12px; padding: 12px 16px; border: 1.5px solid var(--clr-border); border-radius: 12px; background: #fff;
}
.p-tool__item.is-error { border-color: #f0b4b8; background: #fff7f7; }
.p-tool__item-name { grid-area: name; font-weight: 600; word-break: break-all; }
.p-tool__item-meta { grid-area: meta; font-size: .85rem; color: var(--clr-muted); white-space: nowrap; }
.p-tool__item-bar { grid-area: bar; height: 6px; background: #eeedf3; border-radius: 3px; overflow: hidden; }
.p-tool__item-bar span { display: block; height: 100%; width: 0; background: var(--clr-app); transition: width .2s; }
.p-tool__item-result { grid-area: result; font-size: .9rem; color: var(--clr-muted); }
.p-tool__item-thumb { grid-area: result; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.p-tool__item-thumb img { max-height: 72px; max-width: 120px; border: 1px solid var(--clr-border); border-radius: 6px; background: #fff; }
.p-tool__dl { display: inline-block; color: var(--clr-app); font-weight: 700; text-decoration: none; }
.p-tool__dl:hover { text-decoration: underline; }

.p-tool__note {
  margin-top: 28px; padding: 16px 18px; background: #fafafc; border: 1.5px solid var(--clr-border); border-radius: var(--radius);
  font-size: .9rem; color: var(--clr-muted); line-height: 1.9;
}
.p-tool__note ul { margin: 6px 0 0 1.2em; padding: 0; }
.p-tool__table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 10px; }
.p-tool__table th, .p-tool__table td { border: 1px solid var(--clr-border); padding: 6px 8px; text-align: left; }
.p-tool__table th { background: #f3f2f8; }

@media (max-width: 600px) {
  .p-tool__item { grid-template-columns: 1fr; grid-template-areas: "name" "meta" "bar" "result"; }
  .p-tool__item-meta { white-space: normal; }
}

/* 共有URL（assets/js/share.js） */
.p-share { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.p-share.is-open { display: flex; }
.p-share__box { position: relative; background: #fff; border-radius: 14px; max-width: 560px; width: 100%; padding: 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow: auto; box-sizing: border-box; text-align: left; }
.p-share__close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 1.7rem; cursor: pointer; color: #888; line-height: 1; }
.p-share__title { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; }
.p-share__file { font-weight: 700; margin: 0 0 8px; word-break: break-all; }
.p-share__text { font-size: .92rem; line-height: 1.8; color: var(--clr-text, #262626); margin: 0 0 12px; }
.p-share__label { display: block; font-size: .85rem; color: var(--clr-muted, #6b6b6b); margin: 0 0 12px; }
.p-share__label select { display: block; margin-top: 4px; padding: 8px 10px; border: 1.5px solid var(--clr-border, #ddd); border-radius: 8px; font-size: .95rem; background: #fff; }
.p-share__terms { font-size: .82rem; color: var(--clr-muted, #6b6b6b); margin: 0 0 14px; }
.p-share__terms a { color: var(--clr-app, #c0268e); text-decoration: underline; }
.p-share__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.p-share__progress { margin-top: 14px; }
.p-share__bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.p-share__bar span { display: block; height: 100%; width: 0; background: var(--clr-app, #c0268e); transition: width .2s; }
.p-share__status { font-size: .85rem; color: var(--clr-muted, #6b6b6b); margin: 6px 0 0; }
.p-share__error { color: #c0392b; font-size: .9rem; margin: 10px 0 0; }
.p-share__url { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.p-share__urlbox { flex: 1 1 240px; padding: 10px 12px; border: 1.5px solid var(--clr-border, #ddd); border-radius: 8px; font-size: .95rem; }
.p-share__meta { font-size: .85rem; color: var(--clr-muted, #6b6b6b); margin: 0 0 10px; }
.p-share__qr { width: 140px; height: 140px; border: 1px solid var(--clr-border, #ddd); border-radius: 8px; display: block; margin: 0 0 12px; }
.p-share__qr:not([src]) { display: none; }
.p-share__delete { font-size: .82rem; word-break: break-all; margin: 0 0 12px; }
.p-share__delete a { color: var(--clr-muted, #6b6b6b); text-decoration: underline; }
.p-share-btn { margin-left: 8px; padding: 6px 12px; font-size: .85rem; }