/* てもとPDF — docs/design-spec.md に従う。
   色・余白・角丸・影はすべてここの変数経由で使う。 */
:root{
  /* Brand：赤（白文字 4.54:1） */
  --red:#e0302b; --red-700:#c52b27; --red-50:#fdeceb; --red-100:#f9d6d5;
  /* 道具アイコン：結合・分割・編成＝橙／JPG変換＝黄 */
  --ic-org:#ee6c4d; --ic-org-t:#f5c5b3;
  --ic-yel:#d6bf2d; --ic-yel-t:#fbefa8;
  /* Functional */
  --ok:#17804f; --ok-tx:#0f6b3d; --ok-bg:#e8f5ee; --warn:#975a00; --info:#1a62d6;
  /* Text */
  --tx-h:#33333b; --tx:#47474f; --tx2:#707078;
  /* Surface */
  --white:#ffffff; --bg:#f5f5fa; --line:#d6d6df; --line-s:#8b8b95;
  /* Shape（ボタン8px・大ボタン12px・カード16px） */
  --r-s:8px; --r-m:12px; --r-l:16px;
  /* Shadow */
  --sh-btn:0 3px 6px rgba(0,0,0,.14);
  --sh-low:0 2px 6px rgba(0,0,0,.08);
  --sh-mid:0 6px 15px rgba(0,0,0,.12);
  --sh-high:0 8px 20px rgba(0,0,0,.30);
  /* Space（4の倍数のみ） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  /* Type（見出し42/サブ22、スマホ24/16。カード名20、説明14） */
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,-apple-system,sans-serif;
  --t-d:42px; --t-sub:22px; --t-h2:24px; --t-card:20px; --t-l1:16px; --t-l2:14px; --t-l3:12px; --t-body:16px;
  --hd-h:60px; --top-h:var(--hd-h); --side-w:340px; --dur:200ms;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); font-size:var(--t-body); line-height:1.5;
  color:var(--tx); background:var(--bg);
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{margin:0; color:var(--tx-h); font-weight:600}
p{margin:0}
/* 中身が少なくてもフッターは画面の下に */
main{min-height:calc(100vh - var(--top-h))}
button{font-family:inherit; font-size:inherit; cursor:pointer; color:inherit}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--red); outline-offset:2px}

/* ================= Header（白・高さ60・下線1px） ================= */
/* ヘッダーを上に固定する */
.top{position:sticky; top:0; z-index:30}
.hd{
  height:var(--hd-h);
  background:var(--white); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--s6); padding:0 var(--s4);
}
@media(min-width:768px){ .hd{padding:0 var(--s6)} }
.logo{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; text-decoration:none; color:var(--tx-h);
  font-weight:700; font-size:22px; letter-spacing:.02em; line-height:1;
}
.logo-ic{width:32px; height:32px; border-radius:var(--r-s); flex:none}
.hd-link{color:var(--tx-h); text-decoration:none; font-size:var(--t-l2); min-height:44px; display:inline-flex; align-items:center}
.hd-link:hover{color:var(--red)}
.hd-sp{flex:1}
.badge{
  display:inline-flex; align-items:center; gap:var(--s1); white-space:nowrap;
  background:var(--ok-bg); color:var(--ok-tx); font-size:var(--t-l3); font-weight:600;
  padding:var(--s1) var(--s3); border-radius:999px;
}
@media(max-width:560px){ .hd-link{display:none} }

/* ================= Home ================= */
.home-hd{max-width:960px; margin:0 auto; padding:var(--s10) var(--s6) var(--s8); text-align:center}
.home-hd h1{font-size:var(--t-h2); line-height:1.3}
.home-hd p{font-size:var(--t-l1); margin-top:var(--s3)}
@media(min-width:768px){
  .home-hd{padding:var(--s12) var(--s6) var(--s10)}
  .home-hd h1{font-size:var(--t-d); line-height:1.24}
  .home-hd p{font-size:var(--t-sub); line-height:1.45; margin-top:var(--s4)}
}

.tools{
  max-width:960px; margin:0 auto; padding:0 var(--s6);
  display:grid; gap:var(--s4); grid-template-columns:1fr;
}
@media(min-width:620px){ .tools{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .tools{grid-template-columns:repeat(4,1fr)} }
/* 道具のカード：白・枠線1px・角丸16・影なし。スマホはアイコンと名前を横並び、説明はその下 */
.tile{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s3); text-decoration:none; color:inherit;
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic n" "d d";
  align-items:center; column-gap:var(--s3); row-gap:var(--s2);
  transition:box-shadow var(--dur) ease-out, transform var(--dur) ease-out;
}
.tile:hover{box-shadow:var(--sh-mid)}
.tile:active{transform:scale(.98)}
.tile .tic{grid-area:ic; width:36px; height:36px}
.tile-n{grid-area:n; font-size:var(--t-l1); font-weight:600; color:var(--tx-h)}
.tile-d{grid-area:d; font-size:var(--t-l2); color:var(--tx2); line-height:1.5}
@media(min-width:620px){
  .tile{padding:var(--s6); grid-template-columns:1fr; grid-template-areas:"ic" "n" "d"; align-items:start; align-content:start; row-gap:0; min-height:234px}
  .tile .tic{width:48px; height:48px; margin-bottom:var(--s4)}
  .tile-n{font-size:var(--t-card); margin-bottom:var(--s2)}
}

/* 道具アイコン：奥の淡い四角＋手前の濃い四角＋白い記号（自作） */
.tic .b{fill:var(--ic-org-t)} .tic .f{fill:var(--ic-org)}
.tic.yel .b{fill:var(--ic-yel-t)} .tic.yel .f{fill:var(--ic-yel)}
.tic .g{fill:none; stroke:var(--white); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.tic .gf{fill:var(--white)}

.points{max-width:960px; margin:var(--s12) auto 0; padding:var(--s10) var(--s6); text-align:center}
.points h2{font-size:var(--t-h2); margin-bottom:var(--s8)}
.points-in{display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.point{display:flex; flex-direction:column; align-items:center; gap:var(--s2)}
.point svg{color:var(--red); margin-bottom:var(--s2)}
.point b{font-size:var(--t-l1); color:var(--tx-h); font-weight:600}
.point span{font-size:var(--t-l2); color:var(--tx2)}

/* ================= 道具画面：ファイルを入れる前 ================= */
.tool-top{max-width:960px; margin:0 auto; padding:var(--s10) var(--s6) var(--s12); text-align:center}
.tool-top h1{font-size:var(--t-h2); line-height:1.3}
.tool-lead{font-size:var(--t-l1); margin:var(--s3) 0 var(--s8)}
.drop-s{font-size:var(--t-l2); color:var(--tx2); margin-top:var(--s3)}
@media(min-width:768px){
  .tool-top{padding:var(--s12) var(--s6) 80px}
  .tool-top h1{font-size:var(--t-d)}
  .tool-lead{font-size:var(--t-sub)}
}
/* 大きな赤ボタン（330×80・24px・角丸12・薄い影） */
.btn-big{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-width:min(330px,100%); min-height:80px; padding:0 var(--s12);
  background:var(--red); color:var(--white); border:0; border-radius:var(--r-m);
  font-size:var(--t-h2); font-weight:600; box-shadow:var(--sh-btn);
  transition:background var(--dur) ease-out, transform var(--dur) ease-out;
}
.btn-big:hover:not(:disabled){background:var(--red-700)}
.btn-big:active:not(:disabled){transform:scale(.98)}
.btn-big:disabled{opacity:.45; cursor:not-allowed}
@media(max-width:560px){ .btn-big{min-height:64px; font-size:20px; padding:0 var(--s6); width:100%} }

.dropov{
  position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
  background:var(--red-50); border:4px dashed var(--red); color:var(--red);
  font-size:var(--t-h2); font-weight:600; pointer-events:none;
}
body.dragging .dropov{display:flex}

/* ================= Button ================= */
.btn{
  min-height:44px; padding:0 var(--s4); border-radius:var(--r-s);
  border:1px solid transparent; font-weight:600; font-size:var(--t-l2);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); white-space:nowrap;
  transition:background var(--dur) ease-out, transform var(--dur) ease-out;
}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-p,.btn-d{background:var(--red); color:var(--white); min-height:52px; font-size:var(--t-l1)}
.btn-p:hover:not(:disabled),.btn-d:hover:not(:disabled){background:var(--red-700)}
.btn-s{background:var(--white); color:var(--tx-h); border-color:var(--line-s)}
.btn-s:hover:not(:disabled){background:var(--bg)}
.btn-t{background:none; color:var(--tx-h); padding:0 var(--s3)}
.btn-t:hover:not(:disabled){background:var(--white); color:var(--red)}
/* 灰色の背景の上の赤い文字は #e0302b だと4.18:1で不足するため、一段濃い赤（約5.1:1） */
.btn-t.dg{color:var(--red-700)}
.btn-t.dg:hover:not(:disabled){background:var(--red-50)}

/* ================= 道具画面：ファイルを入れた後（左にページ・右に設定と実行ボタン） ================= */
.ws{display:grid; grid-template-columns:1fr; min-height:calc(100vh - var(--top-h))}
.ws-main{padding:var(--s4) var(--s4) 160px; min-width:0}
.ws-side{background:var(--white); border-top:1px solid var(--line); padding:var(--s6) var(--s4) 160px; display:flex; flex-direction:column; gap:var(--s4)}
@media(min-width:900px){
  .ws{grid-template-columns:1fr var(--side-w)}
  .ws-main{padding:var(--s6)}
  .ws-side{
    border-top:0; border-left:1px solid var(--line);
    position:sticky; top:var(--top-h); height:calc(100vh - var(--top-h)); overflow:auto;
    padding:var(--s6);
  }
}
.side-t{font-size:var(--t-h2); text-align:center; padding-bottom:var(--s4); border-bottom:1px solid var(--line)}
.opt{display:flex; flex-direction:column; gap:var(--s4)}
/* 右欄の使い方の説明 */
.side-hint{background:var(--bg); border-radius:var(--r-s); padding:var(--s3) var(--s4); font-size:var(--t-l2); color:var(--tx); line-height:1.6}
.fld{display:flex; flex-direction:column; gap:var(--s1); min-width:0}
.fld > label{font-size:var(--t-l2); font-weight:600; color:var(--tx-h)}
.fld > .hint{font-size:var(--t-l3); color:var(--tx2)}
input[type="text"],select{
  font-family:inherit; font-size:var(--t-body); width:100%;
  min-height:48px; padding:0 var(--s3);
  border:1px solid var(--line-s); border-radius:var(--r-s);
  background:var(--white); color:var(--tx-h);
}
.note{
  background:var(--bg); border-radius:var(--r-s); padding:var(--s3);
  font-size:var(--t-l2); border-left:4px solid var(--warn);
}

/* 右端は「＋」ボタンの場所として空けておく（重ならないように） */
.board-hd{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); align-items:center; margin-bottom:var(--s3); padding-right:56px}
.board-hd .cnt{font-weight:600; color:var(--tx-h); margin-right:var(--s2)}
.board{position:relative; min-height:240px; padding-top:var(--s2)}
.grid{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media(max-width:560px){ .grid{grid-template-columns:repeat(2,1fr); gap:var(--s3)} }
/* 「＋」ボタン（赤い丸・右上） */
.fab{
  position:absolute; top:calc(-1 * var(--s12)); right:0; z-index:2;
  width:48px; height:48px; border-radius:50%; border:0;
  background:var(--red); color:var(--white); box-shadow:var(--sh-btn);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) ease-out, transform var(--dur) ease-out;
}
.fab:hover:not(:disabled){background:var(--red-700)}
.fab:active:not(:disabled){transform:scale(.94)}
.fab:disabled{opacity:.45}

.pg{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--s2); position:relative; cursor:grab;
  transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out;
}
.pg:hover{box-shadow:var(--sh-mid)}
.pg.sel{outline:3px solid var(--red); outline-offset:-1px}
.pg.drag{opacity:.4}
.pg.over{transform:translateY(-4px); box-shadow:var(--sh-high)}
.pg-thumb{
  width:100%; aspect-ratio:1/1.414; background:var(--bg); border-radius:4px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--tx2); font-size:var(--t-l3);
}
.pg-thumb canvas,.pg-thumb img{max-width:100%; max-height:100%; display:block; box-shadow:var(--sh-low)}
.pg-no{font-size:var(--t-l2); font-weight:600; color:var(--tx-h); text-align:center; margin-top:var(--s2)}
.pg-no .rot{font-weight:400; color:var(--tx2); font-size:var(--t-l3)}
.pg-src{font-size:var(--t-l3); color:var(--tx2); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg-ops{display:flex; gap:var(--s1); justify-content:center; margin-top:var(--s2); flex-wrap:wrap}
.iconbtn{
  width:36px; height:36px; border-radius:50%; padding:0;
  border:1px solid var(--line); background:var(--white); color:var(--tx);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) ease-out, color var(--dur) ease-out;
}
.iconbtn:hover{background:var(--bg); color:var(--tx-h)}
.iconbtn:active{transform:scale(.94)}
.iconbtn.del:hover{background:var(--red-50); color:var(--red); border-color:var(--red)}
.pg-chk{
  position:absolute; top:var(--s3); left:var(--s3); z-index:1;
  width:24px; height:24px; border-radius:50%;
  background:var(--white); border:2px solid var(--line-s);
  display:flex; align-items:center; justify-content:center; color:transparent;
}
.pg.sel .pg-chk{background:var(--red); border-color:var(--red); color:var(--white)}

/* 実行ボタン：PCは右欄の下、スマホは画面下に固定 */
.actbar{margin-top:auto; display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s4)}
.actbar .sum{font-size:var(--t-l2); color:var(--tx2); text-align:center}
.btn-run{width:100%; min-width:0; min-height:64px; font-size:20px; padding:0 var(--s4)}
.btn-run::after{
  content:""; width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0302b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
}
@media(max-width:899px){
  .actbar{
    position:fixed; left:0; right:0; bottom:0; z-index:20; margin:0;
    background:var(--white); box-shadow:0 -2px 6px rgba(0,0,0,.08);
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    gap:var(--s2);
  }
  .actbar .sum{font-size:var(--t-l3)}
  .btn-run{min-height:56px; font-size:18px}
}
.prog{display:flex; align-items:center; gap:var(--s3); width:100%; min-height:56px; flex-wrap:wrap; justify-content:center}
.prog-bar{flex:1; min-width:120px; height:8px; background:var(--bg); border-radius:999px; overflow:hidden}
.prog-bar > i{display:block; height:100%; width:0; background:var(--red); transition:width var(--dur) ease-out}
.prog-tx{font-size:var(--t-l2); font-weight:600; color:var(--tx-h); white-space:nowrap}

/* ================= 確認（Half sheet／PCでは中央のダイアログ） ================= */
.sheet-bg{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.4);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity var(--dur) ease-out;
}
.sheet-bg.on{opacity:1}
.sheet{
  width:100%; max-width:480px; background:var(--white);
  border-radius:var(--r-l) var(--r-l) 0 0; box-shadow:var(--sh-high);
  padding:var(--s6) var(--s6) calc(var(--s4) + env(safe-area-inset-bottom));
  transform:translateY(24px); transition:transform var(--dur) ease-out;
}
.sheet-bg.on .sheet{transform:translateY(0)}
.sheet h2{font-size:18px; margin-bottom:var(--s2)}
.sheet p{font-size:var(--t-l2); color:var(--tx2); margin-bottom:var(--s6)}
.sheet-btns{display:flex; flex-direction:column; gap:var(--s2)}
.sheet-btns .btn{width:100%}
@media(min-width:768px){ .sheet-bg{align-items:center} .sheet{border-radius:var(--r-l); padding-bottom:var(--s6)} }

/* ================= Toast ================= */
.toast{
  position:fixed; left:50%; bottom:calc(120px + env(safe-area-inset-bottom)); z-index:50;
  transform:translateX(-50%) translateY(8px);
  background:var(--white); box-shadow:var(--sh-high); border-radius:var(--r-s);
  padding:var(--s3) var(--s4); font-size:var(--t-l2); font-weight:600; max-width:calc(100% - 32px);
  opacity:0; pointer-events:none; transition:opacity var(--dur) ease-out, transform var(--dur) ease-out;
}
@media(min-width:900px){ .toast{left:calc(50% - var(--side-w) / 2); bottom:var(--s8)} }
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.ok{color:var(--ok)} .toast.ng{color:var(--red)}

/* ================= Footer ================= */
.ft{padding:var(--s6) var(--s4) var(--s10); text-align:center; color:var(--tx2); font-size:var(--t-l3); border-top:1px solid var(--line); background:var(--white)}
.ft details{margin:var(--s3) auto 0; text-align:left; max-width:760px}
.ft summary{cursor:pointer; min-height:44px; display:flex; align-items:center; justify-content:center}
.ft pre{
  white-space:pre-wrap; word-break:break-word; font-size:11px; line-height:1.5;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-s);
  padding:var(--s3); max-height:320px; overflow:auto;
}
/* 道具画面でファイルを入れた後は、フッターを出さない（右欄と実行ボタンに集中させる） */
body.working .ft{display:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .btn:active:not(:disabled),.btn-big:active:not(:disabled),.tile:active,.iconbtn:active,.fab:active{transform:none}
}