/*
Theme Name: Stamp Maker
Theme URI: https://otto858.com/
Author: Otto's BOX
Author URI: https://otto858.com/
Description: スタンプメーカー専用テーマ。予定カレンダーのマスに置けるオリジナルスタンプを作れます。管理画面からフォントと色を自由に追加・編集・削除できます。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stamp-maker
*/

  :root{
    --pink:#ff6fa5;
    --pink-deep:#e84d87;
    --pink-mid:#ff8fc0;
    --pink-soft:#ffd3e6;
    --pink-pale:#ffeaf3;
    --pink-line:#f0c5d8;
    --cream:#fff7fb;
    --paper:#ffffff;
    --ink:#3a2f36;
    --ink-soft:#b78aa0;
    --blue:#5b87c4;
    --shadow:rgba(232,77,135,.4);
    --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{
    font-family:"Zen Maru Gothic",sans-serif;
    touch-action:manipulation;
    background:
      radial-gradient(circle at 15% 10%, #ffe3ef 0%, transparent 40%),
      radial-gradient(circle at 85% 90%, #ffeef6 0%, transparent 45%),
      #fff;
    color:var(--ink);
    min-height:100vh;
    line-height:1.7;
    padding:24px 16px 60px;
  }
  .wrap{ max-width:520px; margin:0 auto; }

  /* ---------- header ---------- */
  header.hero{ text-align:center; margin-bottom:22px; }
  h1{
    font-family:"Kaisei Decol",serif;
    font-size:1.55rem; font-weight:700;
    letter-spacing:.02em; line-height:1.4;
    color:var(--pink-deep);
  }
  .lead{ margin-top:6px; color:var(--ink-soft); font-size:.82rem; }

  /* ---------- card ---------- */
  .card{
    background:#fff;
    border:1.5px solid var(--pink-line);
    border-radius:18px;
    box-shadow:0 8px 24px -14px var(--shadow);
    padding:18px;
    margin-bottom:16px;
  }
  .card-title{
    font-weight:700;
    font-size:.92rem;
    color:var(--pink-deep);
    display:flex; align-items:center; gap:7px;
    margin-bottom:12px;
  }
  .card-title .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--pink); flex:none;
  }
  .card-note{ color:var(--ink-soft); font-size:.78rem; margin-bottom:14px; line-height:1.5; }

  /* ---------- preview ---------- */
  .stage{ text-align:center; }
  .canvas-frame{
    position:relative;
    width:100%;
    max-width:360px;
    margin:4px auto 0;
    aspect-ratio:1/1;
    border-radius:16px;
    overflow:hidden;
    background:
      repeating-conic-gradient(#ffe1ee 0% 25%, #fff4f9 0% 50%) 50%/22px 22px;
    box-shadow:inset 0 0 0 2px var(--pink-line);
  }
  #stampCanvas, #stampCanvas2{ display:block; width:100%; height:100%; }
  .drop-hint{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:8px; color:var(--ink-soft);
    font-size:.88rem; text-align:center; padding:20px;
    pointer-events:none;
  }
  .drop-hint .ico{ font-size:2.2rem; }
  .drop-hint.hide{ display:none; }

  .stage-actions{ display:flex; gap:10px; max-width:360px; margin:16px auto 0; }

  /* かんたん調整スライダー */
  .quick-controls{
    text-align:left;
  }
  .quick-controls .qc-group{ margin-bottom:14px; padding-bottom:14px; border-bottom:1.5px dashed var(--pink-line); }
  .quick-controls .qc-group:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
  .quick-controls .qc-head{
    font-size:.74rem; font-weight:700; color:var(--pink-deep);
    margin-bottom:8px; display:flex; align-items:center; gap:6px;
  }
  .quick-controls .qc-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .quick-controls .qc-row:last-child{ margin-bottom:0; }
  .quick-controls .qc-lbl{ font-size:.72rem; color:#a07a8c; font-weight:700; min-width:64px; flex:none; }
  .btn{
    flex:1;
    font-family:"Zen Maru Gothic",sans-serif;
    font-weight:700;
    font-size:.95rem;
    border:none;
    border-radius:13px;
    padding:13px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, background .2s, opacity .2s;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{
    background:linear-gradient(135deg,var(--pink) 0%, var(--pink-deep) 100%);
    color:#fff;
    box-shadow:0 8px 18px -7px var(--pink-deep);
  }
  .btn-primary:hover{ filter:brightness(1.04); }
  .btn-ghost{
    background:#fff;
    color:var(--pink-deep);
    border:2px solid var(--pink-line);
  }
  .btn-ghost:hover{ background:var(--pink-pale); }

  /* ---------- fields ---------- */
  .field{ margin-bottom:14px; }
  .field:last-child{ margin-bottom:0; }
  label.lbl{
    display:block; font-size:.78rem; color:#a07a8c;
    margin-bottom:5px; font-weight:700;
  }
  input[type=text]{
    width:100%; font-family:inherit; font-size:16px;
    padding:9px 11px; border:1.5px solid var(--pink-line);
    border-radius:13px; background:var(--cream); color:var(--ink);
  }
  input[type=text]::placeholder{ color:#d6a9bd; }
  input[type=text]:focus{ outline:none; border-color:var(--pink); background:#fff; }

  select{
    width:100%; font-family:inherit; font-size:16px;
    padding:9px 11px; border:1.5px solid var(--pink-line);
    border-radius:13px; background:var(--cream); color:var(--ink); cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23e84d87' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
    padding-right:34px;
  }
  select:focus{ outline:none; border-color:var(--pink); background-color:#fff; }

  /* upload */
  .upload-zone{
    border:2px dashed var(--pink-line);
    border-radius:13px; padding:16px; text-align:center;
    cursor:pointer; transition:.15s; background:var(--cream);
    font-size:.9rem; color:var(--pink-deep); font-weight:700;
  }
  .upload-zone:hover,.upload-zone.drag{ border-color:var(--pink); background:#fff; }
  .upload-zone .ico{ font-size:1.8rem; display:block; margin-bottom:6px; }
  .upload-zone .sub{ display:block; font-size:.76rem; color:var(--ink-soft); font-weight:500; margin-top:4px; }


  /* position grid */
  .pos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  .pos-btn{
    font-family:inherit; font-weight:700; font-size:.86rem;
    border:2px solid var(--pink-line); background:var(--pink-pale); color:var(--ink-soft);
    border-radius:12px; padding:13px 4px; cursor:pointer; transition:.15s;
  }
  .pos-btn:hover{ border-color:var(--pink-mid); background:#fff; }
  .pos-btn.on{
    background:linear-gradient(135deg,var(--pink) 0%, var(--pink-deep) 100%);
    color:#fff; border-color:var(--pink);
  }
  .pos-btn .sub{ display:block; font-size:.68rem; font-weight:500; opacity:.9; margin-top:2px; }
  .pos-spacer{ visibility:hidden; }

  /* sliders */
  .range-row{ display:flex; align-items:center; gap:12px; }
  input[type=range]{
    flex:1; -webkit-appearance:none; appearance:none; height:8px;
    border-radius:99px; background:var(--pink-soft); cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
    background:var(--pink); border:3px solid #fff;
    box-shadow:0 2px 6px -1px var(--pink-deep);
  }
  input[type=range]::-moz-range-thumb{
    width:22px; height:22px; border-radius:50%;
    background:var(--pink); border:3px solid #fff;
  }
  .range-val{ font-size:.82rem; color:var(--pink-deep); min-width:48px; text-align:right; font-weight:700; }

  /* colors / toggles */
  input[type=color]{
    -webkit-appearance:none; appearance:none; width:44px; height:36px; border:2px solid var(--pink-line);
    border-radius:10px; background:#fff; cursor:pointer; padding:3px;
  }
  input[type=color]::-webkit-color-swatch{ border:none; border-radius:6px; }
  input[type=color]::-moz-color-swatch{ border:none; border-radius:6px; }
  .toggle{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--ink); cursor:pointer; font-weight:700; }
  .toggle input{ accent-color:var(--pink); width:17px; height:17px; }

  .divider{ border:none; border-top:1.5px dashed var(--pink-line); margin:18px 0; }

  footer{
    text-align:center; margin-top:8px;
    color:var(--ink-soft); font-size:.78rem; letter-spacing:.06em;
  }