/*  ましかく お試し版 ── 見た目（製品版「ましかく」の app.css を複製して、🔒 と製品版の案内の分を足したもの）
 *  配色は吉原ビジネスデザイン研究所のロゴに合わせたネイビー（#16386F）を基調にしています。
 *  スマホ（縦・幅360px）を前提に作り、広い画面では中央に寄せるだけです。
 */
:root{
  --navy:#16386F;
  --navy-dark:#0f2850;
  --blue:#2C5FA8;
  --orange:#E2761B;
  --ink:#15191f;
  --sub:#5d6875;
  --line:#dfe4ea;
  --bg:#f4f6f8;
  --card:#fff;
  --radius:12px;
}
*{box-sizing:border-box}

/*  ⚠ これを消さないこと。
    display を指定した要素は、hidden 属性だけでは消えません。ブラウザ既定の [hidden]{display:none}
    より、こちらの .toast{display:flex} などのほうが強いためです。
    2026-09-07、これが無かったせいで、中身が空のお知らせが「黒い楕円」として画面の下に
    出っぱなしになりました。hidden で出し入れしている要素（#start / #editor / #toast / #help /
    保存ボタン）に display を足すたびに同じことが起きるので、まとめてここで止めます。 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:contain;
}
button{font:inherit;color:inherit}

/* ---- 上のバー ---- */
.bar{
  display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--navy);color:#fff;
  position:sticky;top:0;z-index:20;
}
.bar h1{margin:0;font-size:17px;letter-spacing:.08em;font-weight:700;flex:1}
.bar .ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff}

/* ---- ボタン ---- */
.primary,.ghost{
  border-radius:999px;padding:9px 16px;cursor:pointer;
  border:1px solid transparent;background:var(--navy);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  -webkit-tap-highlight-color:transparent;
}
.primary.alt{background:var(--blue)}
.primary.big{padding:14px 32px;font-size:17px}
.primary:disabled{opacity:.45}
.ghost{background:#fff;border-color:var(--line);color:var(--ink);font-weight:600}
.ghost:active,.primary:active{transform:translateY(1px)}

/* ---- 最初の画面 ---- */
.start{padding:28px 16px;max-width:560px;margin:0 auto;text-align:center}
.drop{
  background:var(--card);border:2px dashed var(--line);border-radius:var(--radius);
  padding:40px 20px;transition:border-color .15s,background .15s;
}
.drop.over{border-color:var(--blue);background:#eef3fb}
.drop-icon{margin:0 0 10px;font-size:52px;line-height:1;color:var(--navy)}
.hint{color:var(--sub);font-size:13px;margin:16px 0 0}
.privacy{color:var(--sub);font-size:12.5px;margin:18px 0 0}

/* ---- 編集画面 ---- */
.editor{max-width:560px;margin:0 auto;padding:12px 12px 96px}
.stage{
  position:relative;width:100%;
  background:#cfd6dd;border-radius:var(--radius);overflow:hidden;padding:8px 0;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.stage canvas{
  display:block;max-width:100%;max-height:56vh;
  box-shadow:0 1px 6px rgba(0,0,0,.18);cursor:grab;
}
.stage canvas:active{cursor:grabbing}
.stage-hint{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0;
  font-size:11px;color:#fff;background:rgba(21,25,31,.62);border-radius:999px;
  padding:3px 12px;white-space:nowrap;pointer-events:none;transition:opacity .4s;
}
.stage-hint.gone{opacity:0}

/* ---- サムネイル ---- */
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 2px;-webkit-overflow-scrolling:touch}
.thumbs:empty{display:none}
.thumb{
  position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;background:#fff;padding:0;cursor:pointer;
}
.thumb.on{border-color:var(--navy)}
.thumb canvas{width:100%;height:100%;display:block}
.thumb .x{
  position:absolute;top:0;right:0;width:18px;height:18px;line-height:16px;
  background:rgba(21,25,31,.7);color:#fff;font-size:12px;border:0;border-radius:0 0 0 8px;padding:0;cursor:pointer;
}

/* ---- 操作パネル ---- */
.controls{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 4px;margin-top:10px}
.row{margin:0 0 12px}
.label{display:block;font-size:12px;color:var(--sub);font-weight:700;letter-spacing:.06em;margin-bottom:6px}
.label b{float:right;color:var(--ink);font-weight:700}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{
  flex:1 1 0;min-width:76px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:7px 6px;font-size:13.5px;font-weight:700;cursor:pointer;line-height:1.25;
}
.chips button small{display:block;font-size:10.5px;font-weight:400;color:var(--sub)}
.chips button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chips button.on small{color:rgba(255,255,255,.8)}

/* ---- 色見本 ---- */
.swatches{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sw{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line);padding:0;cursor:pointer;position:relative;
}
.sw.on{outline:2px solid var(--navy);outline-offset:2px}
.sw.blur{
  background:linear-gradient(135deg,#8fb4e8,#f0c48a 45%,#b9d3a4);
  font-size:9px;color:#15191f;font-weight:700;
}
.custom{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--sub);cursor:pointer}
.custom input[type=color]{width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}

/* ---- スライダー ---- */
.slider input[type=range]{width:100%;accent-color:var(--navy)}

.buttons{display:flex;gap:6px;flex-wrap:wrap}
.buttons .ghost{flex:1 1 auto;padding:8px 10px;font-size:13px;white-space:nowrap}

.more{border-top:1px solid var(--line);margin:0 -12px;padding:8px 12px 0}
.more summary{cursor:pointer;font-size:13px;color:var(--sub);font-weight:700;padding:4px 0 10px;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"＋ ";}
.more[open] summary::before{content:"− ";}
.size-note{font-size:12px;color:var(--sub);margin:0 0 12px}
.text{
  width:100%;padding:8px 10px;font:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
}
.text:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.hint-small{font-size:11.5px;color:var(--sub);margin:6px 0 0;line-height:1.5}
.hint-small b{color:var(--navy);font-weight:700}
.dest{display:flex;gap:6px;flex-wrap:wrap}
.dest .ghost{padding:8px 12px;font-size:13px}
.dest-now{font-size:12px;color:var(--sub);margin:8px 0 0}
.dest-now b{color:var(--ink)}

/* ---- 保存ボタン（画面下に固定） ---- */
.save{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;gap:8px;justify-content:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(244,246,248,.94);border-top:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.save .primary{flex:1 1 0;max-width:260px;padding:13px 10px;font-size:15px}

/* ---- お知らせ ---- */
/* ⚠ left:50% + transform で中央に置くと、右端までの幅（＝画面の半分）しか使えず、
   「保存しまし／た」のように折り返します。left/right:0 と margin:auto で中央に置くこと。 */
.toast{
  position:fixed;left:0;right:0;bottom:76px;margin:0 auto;width:max-content;z-index:40;
  background:rgba(21,25,31,.92);color:#fff;font-size:13px;
  padding:8px 10px 8px 16px;border-radius:999px;max-width:92vw;
  display:flex;align-items:center;gap:10px;
}
.toast:not(:has(button)){padding:9px 16px;text-align:center}
.toast button{
  flex:0 0 auto;background:#fff;color:var(--navy);border:0;border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;
}

/* ---- 使い方 ---- */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(21,25,31,.55);overflow:auto;padding:20px 12px}
.sheet-inner{
  background:#fff;border-radius:var(--radius);max-width:560px;margin:0 auto;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
}
.sheet h2{margin:0 0 12px;font-size:18px;color:var(--navy)}
.sheet h3{margin:20px 0 8px;font-size:14px;color:var(--navy)}
.how{margin:0;padding-left:1.3em;font-size:14px}
.how li{margin-bottom:9px}
.how-lead{margin:0 0 10px;font-size:13.5px;line-height:1.7}
.how-t{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 12px}
.how-t th,.how-t td{border-top:1px solid var(--line);padding:7px 2px;text-align:left;vertical-align:top;line-height:1.6}
.how-t th{width:34%;font-weight:700;color:var(--navy);white-space:nowrap;padding-right:8px}
.how-t tr:first-child th,.how-t tr:first-child td{border-top:0}
.sheet .primary{display:block;width:100%;margin-top:18px;padding:12px}

@media (min-width:600px){
  .stage canvas{max-height:60vh}
  .save{position:static;background:none;border:0;backdrop-filter:none;margin-top:12px}
  .editor{padding-bottom:24px}
}

/* ================================================================
   お試し版だけのもの
   ================================================================ */

/* 見出しの「お試し版」 */
.bar h1 .tag{
  display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;vertical-align:2px;
  background:var(--orange);color:#fff;font-size:11px;letter-spacing:.04em;
}

/* 🔒 製品版で使えるもの。押せる（押すと案内が出る）けれど、選べないことが分かる見た目にする */
.chips button.locked{background:#f4f6f8;color:#8a939d;border-style:dashed}
.chips button.locked small{color:#8a939d}
.sw-lock{
  height:34px;padding:0 12px;border-radius:8px;border:1px dashed var(--line);
  background:#f4f6f8;color:#6b7580;font-size:12.5px;font-weight:700;cursor:pointer;
}

/* 操作パネルのいちばん下の、製品版への一言 */
.pro-line{
  display:block;width:calc(100% + 24px);margin:0 -12px;padding:10px 12px;
  background:#fdf3ea;border:0;border-top:1px solid #f3dcc6;border-radius:0 0 var(--radius) var(--radius);
  color:#8a4a12;font-size:12.5px;text-align:center;cursor:pointer;
}
.pro-line b{color:var(--orange)}

/* 製品版でできること */
.pro-reason{margin:0 0 10px;padding:8px 12px;border-radius:8px;background:#fdf3ea;color:#8a4a12;font-size:13px;font-weight:700}
.pro-t th{width:1%;white-space:nowrap;font-size:12.5px}
.pro-t td{width:34%;padding-right:6px}
.pro-t td.pro{width:66%}
.pro-t td.h{font-weight:700;color:var(--sub);font-size:12px}
.pro-t td.pro{color:var(--ink);padding-right:0}
.pro-t td.h.pro{color:var(--orange)}
.pro-t td.pro b{color:var(--navy)}
.sheet .pro-go{display:block;text-align:center;text-decoration:none;margin-top:14px;padding:13px;background:var(--orange)}
.sheet-close{display:block;width:100%;margin-top:8px;padding:12px}