/* PDFを軽くする(/compress/)専用。/style.css は読み込まず、ここだけで完結させる。 */
@import url('/task-info.css');
/* 本文は端末の書体で表示する(2026-09-27 ユーザー指示) */
:root{--ink:#203047;--primary:#253247;--primary-hover:#3c4b62;--soft:#f1f3f6;--soft-hover:#e9edf3;--muted:#74839a;--line:#d5dde8;--focus:#8171d3;--accent:#7e6bc0;--accent-bg:#f4f1fc;--good:#2f7a55;--warn-bg:#fff7e8;--warn-line:#f0d9a8;--error:#b23a3a;--error-bg:#fdf1f1}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:#fff;font:15px/1.7 Roboto,"Noto Sans JP",system-ui,sans-serif}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid transparent;border-radius:8px;background:transparent;padding:10px 18px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
button:disabled{opacity:.4;cursor:default}
button svg{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.primary{background:var(--primary);color:#fff;font-weight:600}
.primary:hover:not(:disabled){background:var(--primary-hover)}
.secondary{background:var(--soft);border-color:#e0e5ed}
.secondary:hover:not(:disabled){background:var(--soft-hover)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.compress-page{max-width:640px;margin:0 auto;padding:28px 20px 56px}
.compress-page h1{font-size:28px;font-weight:650;line-height:1.35;margin:8px 0 8px;letter-spacing:-.01em}
.lead{margin:0 0 24px;color:#4a5a70}

/* ファイルを選ぶ前 */
#drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:44px 20px 36px;border:2px dashed #c3ccda;border-radius:14px;background:var(--soft);transition:border-color .15s,background-color .15s}
#drop.dragover{border-color:var(--accent);border-style:solid;background:var(--accent-bg)}
#drop.dragover .drop-icon{color:var(--accent)}
.drop-icon{width:52px;height:52px;margin-bottom:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:#8a97ab}
#pick{font-size:16px;padding:13px 30px;min-height:50px;border-radius:10px}
.drop-hint{margin:10px 0 0;color:#4a5a70}
.drop-sub{margin:0;font-size:12.5px;color:var(--muted)}

/* 処理中 */
#working{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:40px 16px;border-radius:14px;background:var(--soft);font-weight:600}
.spinner{width:20px;height:20px;border:2.5px solid #cfd6e2;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

/* エラー */
#error{margin:0 0 16px;padding:12px 14px;border:1px solid #f0c9c9;border-radius:10px;background:var(--error-bg);color:var(--error);line-height:1.7;overflow-wrap:anywhere}
#error a{color:inherit;text-decoration:underline;font-weight:600}

/* 結果 */
#result{border:1px solid #e0e5ed;border-radius:14px;padding:22px 24px 24px}
.result-file{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-weight:600;min-width:0}
.result-file svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#result-name{min-width:0;overflow-wrap:anywhere}
.result-sizes{display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:18px 12px;border-radius:12px;background:var(--soft)}
.size{display:flex;flex-direction:column;align-items:center;margin:0;min-width:0}
.size-label{font-size:12px;color:var(--muted)}
.size-value{font-size:30px;font-weight:650;line-height:52px;font-variant-numeric:tabular-nums;white-space:nowrap}
.before .size-value{color:#6b7a90}
.after .size-value{font-size:38px;color:var(--ink)}
.size-arrow{flex:none;width:26px;height:26px;margin-bottom:13px;fill:none;stroke:#8a97ab;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#result-rate{margin:12px 0 0;text-align:center;font-size:17px;font-weight:650;color:var(--good)}
#result-rate:empty{display:none}
#nochange{margin:14px 0 0;padding:12px 14px;border:1px solid var(--warn-line);border-radius:10px;background:var(--warn-bg)}
#nochange p{margin:0}
.nochange-title{font-weight:650}
.nochange-reason{font-size:13px;color:#5b6679}

/* 強さ */
.levels{margin:22px 0 0;padding:0;border:0;min-width:0}
.levels legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:600;color:#4a5a70}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.level{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#fff;min-width:0}
.level:hover{border-color:#b7c1d0}
.level input{margin:0;accent-color:var(--accent);width:16px;height:16px;grid-row:1}
.level-name{font-weight:650}
.level-note{grid-column:1/-1;font-size:12px;line-height:1.5;color:var(--muted);margin-top:2px}
.level-size{grid-column:1/-1;margin-top:6px;font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;color:#203047;white-space:nowrap}
.level-rate{display:block;font-size:12px;font-weight:600;color:#2f7a4f}
.level-size.pending,.level-size.none{font-size:13px;font-weight:400;color:var(--muted)}
.level:has(input:disabled){cursor:default;opacity:.6}
.level:has(input:checked){border-color:var(--accent);background:var(--accent-bg);box-shadow:inset 0 0 0 1px var(--accent)}
.level:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.level input:focus-visible{outline:none}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#save{font-size:16px;padding:12px 32px;min-height:50px;border-radius:10px}
#again{min-height:50px}

/* 補足とリンク */
.notes{margin-top:36px;padding-top:20px}
.notes ul{margin:0;padding:0 0 0 1.2em;text-wrap:pretty;font-size:12.5px;line-height:1.8;color:var(--muted)}
.notes li+li{margin-top:4px}
.page-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:22px;font-size:13.5px}
.page-links a{display:inline-flex;align-items:center;min-height:44px;color:#3e4f68;text-decoration:none}
.page-links a:hover{text-decoration:underline}
.link-strong{font-weight:650;margin-left:.3em;color:var(--ink)}

@media (max-width:560px){
  .compress-page{padding:18px 16px 44px}
  .compress-page h1{font-size:24px}
  .lead{font-size:14px;margin-bottom:18px}
  #drop{padding:32px 16px 28px}
  #pick{width:100%;max-width:320px}
  #result{padding:18px 16px 20px}
  .result-sizes{gap:10px;padding:16px 8px}
  .size-value{font-size:22px;line-height:40px}
  .after .size-value{font-size:28px}
  .size-arrow{width:20px;height:20px;margin-bottom:10px}
  .levels{grid-template-columns:1fr}
  .level{grid-template-columns:auto auto 1fr;padding:10px 12px}
  .level-size{grid-column:auto;margin:0;text-align:right}
  .level-note{grid-column:1/-1;margin-top:2px}
  .actions{flex-direction:column}
  .actions button{width:100%}
  .page-links{flex-direction:column;gap:0}
}

/* 元の大きさはファイル名の横に小さく出す(前後の大きさの枠は 2026-09-23 に削除。選択肢に大きさが出るため) */
.file-size{margin-left:8px;font-size:13px;font-weight:400;color:var(--muted)}
/* 覚えている PDF を確かめ終わるまで、ファイルを選ぶ枠を見せない(compress-page.js が html に picker-ready を付ける) */
html:not(.picker-ready) #drop{visibility:hidden}
/* 2026-09-27 点検: 指で操作する端末では「ドラッグ＆ドロップ」を出さない(task-page.css と同じ)。ダウンロードを始めた知らせ(task-memory.js の noteDownload)。 */
@media (hover:none) and (pointer:coarse){.drop-hint{display:none}}
.download-note{margin:8px 0 0;font-size:13px;font-weight:600;line-height:1.6;color:#2f7a55;overflow-wrap:anywhere}