/* 感謝・信念で共有する見た目。thanks.html / creed.html から読む */
:root {
    --sumi:#14161B; --washi:#E5E2DB; --ai:#3B6EA5; --hi:#B24A3A;
    --bg:var(--washi); --bg-sunk:#DBD7CF; --bg-raised:#F0EEE9;
    --fg:var(--sumi); --fg-quiet:#5B6270; --line:#C7C2B8;
    --accent:var(--ai); --accent-fg:#fff; --mei:#806634;
    --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
    --gothic:"Yu Gothic","YuGothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
    --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:var(--sumi); --bg-sunk:#0E1015; --bg-raised:#1D212A;
      --fg:#E7E9ED; --fg-quiet:#97A0AF; --line:#2E3440;
      --accent:#7BA9DB; --accent-fg:#0E1015; --mei:#C9A85E;
    }
  }
  *{box-sizing:border-box}
  [hidden]{display:none!important}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--gothic);
       font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
  .wrap{max-width:760px;margin:0 auto;padding:clamp(24px,5vw,56px) clamp(16px,4vw,28px) 80px;
        display:flex;flex-direction:column;gap:32px}
  h1{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,5vw,40px);
     letter-spacing:.04em;margin:0;line-height:1.25}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
           text-transform:uppercase;color:var(--fg-quiet)}
  .lede{margin:0;max-width:60ch;color:var(--fg-quiet);font-style:italic}

  .card{background:var(--bg-raised);border:1px solid var(--line);padding:22px;
        display:flex;flex-direction:column;gap:16px}
  .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
         text-transform:uppercase;color:var(--fg-quiet)}
  textarea{font-family:var(--gothic);font-size:16px;color:var(--fg);background:var(--bg);
    border:1px solid var(--line);padding:12px 14px;width:100%;min-height:104px;resize:vertical}
  input:focus-visible,button:focus-visible,textarea:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px}
  .hint{margin:0;font-size:13px;color:var(--fg-quiet)}
  .count{font-family:var(--mono);font-size:11px;color:var(--fg-quiet);text-align:right}

  .btn{font-family:var(--gothic);font-size:15px;color:var(--accent-fg);
    background:var(--accent);border:1px solid var(--accent);padding:12px 22px;cursor:pointer}
  .btn[disabled]{opacity:.45;cursor:default}
  .btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}

  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{font-family:var(--gothic);font-size:14px;color:var(--fg);background:transparent;
    border:1px solid var(--line);padding:7px 13px;cursor:pointer;
    transition:background .12s,border-color .12s,color .12s}
  .chip:hover{border-color:var(--accent)}
  .chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

  .stage{background:var(--bg-sunk);border:1px solid var(--line);
    padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:22px}
  .tanzaku-row{display:flex;justify-content:center}
  .tanzaku{writing-mode:vertical-rl;text-orientation:upright;background:var(--bg-raised);
    border:1px solid var(--line);padding:34px 26px;min-height:340px;
    box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 28px rgba(0,0,0,.07)}
  .tanzaku .ja{font-family:var(--mincho);font-size:clamp(32px,6vw,46px);
    line-height:1.3;letter-spacing:.12em;font-weight:600}

  /* 確認の欄。**ここがこの商品の心臓。** 日本語だけ見せられても客には判断できない。
     元を見せずに戻した英語を並べ、合っているかを本人に決めてもらう。 */
  .check{border:1px solid var(--line);padding:16px 18px;display:flex;
    flex-direction:column;gap:8px;background:var(--bg-raised)}
  .check .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--fg-quiet)}
  .check .said{font-size:17px}
  .check .why{font-size:13px;color:var(--fg-quiet);font-style:italic}
  .check .warn{font-size:13px;color:var(--hi)}
  .row{display:flex;flex-direction:column;gap:5px}
  .row .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--fg-quiet)}
  .actions{display:flex;gap:10px;flex-wrap:wrap}

  .msg{border:1px solid var(--line);padding:14px;font-size:14px;color:var(--fg-quiet)}
  .msg.error{border-color:var(--hi);color:var(--hi)}
  .spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line);
    border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;
    vertical-align:-1px;margin-right:8px}
  @keyframes sp{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  footer{border-top:1px solid var(--line);padding-top:18px;color:var(--fg-quiet);
    font-size:13px;display:flex;flex-direction:column;gap:8px;font-style:italic}
  footer a{color:inherit}