:root {
        --green: #06c755;
        --green-dark: #04a548;
        --orange: #ff8a3d;
        --pink: #ff5d8f;
        --blue: #3d9dff;
        --ink: #2b2b34;
        --muted: #6e7080;
        --bg: #fff9ef;
        --card: #ffffff;
        --line: #e6e2d8;
        --shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
      }

      * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Hiragino Sans",
          "Yu Gothic", sans-serif;
        font-size: 17px;
        line-height: 1.75;
        padding-bottom: 40px;
      }

      .page { max-width: 720px; margin: 0 auto; padding: 12px 14px 40px; }

      header.hero {
        background: var(--green);
        color: white;
        border-radius: 20px;
        padding: 10px 16px;
        text-align: center;
        box-shadow: var(--shadow);
      }
      header.hero h1 { margin: 0; font-size: 22px; letter-spacing: 0.02em; }
      header.hero p { margin: 2px 0 0; font-size: 13px; opacity: 0.95; }

      .whoami {
        display: flex; align-items: baseline; gap: 10px;
        margin-top: 8px; background: var(--card);
        border: 2px solid var(--line); border-radius: 14px; padding: 7px 12px;
      }
      .whoami .name { font-weight: 800; font-size: 16px; }
      .whoami .count { font-size: 14px; color: var(--muted); }

      /* 4つに増えたので、横に流して押しやすさを保つ */
      .steps {
        display: flex; gap: 8px; margin-top: 8px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding: 2px 2px 6px;
        scroll-snap-type: x proximity;
      }
      .steps::-webkit-scrollbar { display: none; }
      .step-tab {
        flex: 0 0 auto; min-width: 96px; scroll-snap-align: start;
        border: none; border-radius: 14px; padding: 9px 10px;
        font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
        background: #ece8de; color: var(--muted); box-shadow: var(--shadow);
        transition: transform 0.05s;
      }
      .step-tab .num {
        display: block; font-size: 12px; font-weight: 700; opacity: 0.8;
      }
      .step-tab.active { color: white; }
      .step-tab.active[data-step="create"] { background: var(--green); }
      .step-tab.active[data-step="edit"] { background: var(--orange); }
      .step-tab.active[data-step="grid"] { background: var(--pink); }
      .step-tab.active[data-step="finish"] { background: var(--blue); }
      .step-tab:active { transform: translateY(2px); }
      .step-tab:disabled { opacity: 0.45; cursor: not-allowed; }

      .card {
        background: var(--card); border: 2px solid var(--line);
        border-radius: 20px; padding: 14px 16px; margin-top: 10px;
      }
      .card.just-changed { animation: flash 0.7s ease-out; }
      @keyframes flash {
        0%   { border-color: var(--green); box-shadow: 0 0 0 6px rgba(6,199,85,0.22); }
        100% { border-color: var(--line);  box-shadow: 0 0 0 0 rgba(6,199,85,0); }
      }
      /* その画面が何を聞いているのかが、最初に目に入るようにする。
         押したタブと同じ色にして「いまここ」を結びつける。 */
      .card h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.35; }
      /* 人は数字に目がいく。何番目の作業かを見出しの頭に置く。 */
      .stepno {
        display: block; font-size: 13px; font-weight: 900;
        letter-spacing: 0.08em; opacity: 0.85; margin-bottom: 2px;
      }
      #panel-create h2 { color: var(--green-dark); }
      #panel-edit   h2 { color: #c2570f; }
      #panel-grid   h2 { color: #c2295c; }
      #panel-finish h2 { color: #1864ab; }
      .card .lead { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }

      textarea {
        width: 100%; min-height: 110px; border: 2px solid var(--line);
        border-radius: 14px; padding: 14px; font: inherit; font-size: 17px;
        line-height: 1.7; resize: vertical; background: #fffdf8; color: var(--ink);
      }
      textarea:focus { outline: 3px solid #bde5c8; border-color: var(--green); }

      .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
      .chip {
        border: 2px solid var(--line); background: #fffdf8; border-radius: 999px;
        padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer;
        color: var(--ink);
      }
      .chip:active { background: #f0ece2; }

      /* 小見出しがチップと同じ重さだと、どこからどこまでが一組か分からない。
         色の帯を付けて「ここから次のグループ」を目で追えるようにする。 */
      .builder .group { margin-top: 14px; }
      .builder .group:first-child { margin-top: 4px; }
      .builder .group > .g-label {
        display: flex; align-items: center; gap: 6px;
        font-size: 15px; font-weight: 900; margin-bottom: 6px;
        padding: 4px 10px; border-radius: 999px;
        background: #eef3ea; color: #2f4f39; width: fit-content;
      }
      .builder .group > .g-label .req {
        color: #fff; background: var(--pink); font-size: 11px; font-weight: 800;
        padding: 3px 8px; border-radius: 999px;
      }
      .builder .group > .g-label .opt { color: var(--muted); font-size: 11px; font-weight: 700; }
      /* スマホで縦に伸びすぎないよう、グループごとに横1行でスクロールさせる。
         右端でチップを半分見せて「まだ続く」と分かるようにする。 */
      .builder .row {
        display: flex; flex-wrap: nowrap; gap: 6px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding: 2px 26px 4px 2px;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
      }
      .builder .row::-webkit-scrollbar { display: none; }
      .builder .row button { flex: 0 0 auto; scroll-snap-align: start; }
      .builder .row button {
        border: 2px solid var(--line); background: #fffdf8; color: var(--ink);
        border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 15px;
        font-weight: 700; cursor: pointer;
      }
      .builder .row button.on {
        background: var(--green); border-color: var(--green); color: #fff;
      }
      /* 入力欄とボタンは画面の下に貼りつけて、いつでも見える・押せるようにする */
      /* 下に貼りつく操作バー。カードと同じ白にすると境目が分からず、
         上のチップが隠れていることにも気づけない。面をはっきり分ける。 */
      .dock {
        position: sticky; bottom: 0; z-index: 20;
        margin: 18px -16px -16px; padding: 10px 16px 12px;
        background: #eef4ec;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.08);
      }
      .dock-label {
        font-size: 13px; font-weight: 800; color: var(--green-dark); margin-bottom: 4px;
      }
      .dock-label span {
        font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 6px;
      }
      /* えらぶのが主で、ここは結果の確認。枠を強くしすぎない。 */
      /* 高さを固定すると2行目が切れる。3行ぶん確保して、
         それを超えたら中でスクロールさせる。 */
      .dock textarea {
        width: 100%; min-height: 84px; font-size: 16px;
        padding: 10px 12px; border-radius: 12px; line-height: 1.55;
        border-color: #cfe3d5; background: #fff; resize: none;
      }
      .dock .big-button { margin-top: 7px; padding: 13px; font-size: 18px; }

      /* 固定バーの下にチップが潜り込んだままにならないよう、逃げ場をつくる */
      #panel-create, #panel-edit, #panel-grid { padding-bottom: 4px; }
      .builder { padding-bottom: 8px; }

      .sheet-out {
        margin-top: 16px; padding: 14px; border-radius: 18px;
        background: #eef6ff; border: 2px solid #bcdcff;
      }
      .sheet-out h3 { margin: 0 0 8px; font-size: 17px; color: #1864ab; }
      .sheet-page + .sheet-page { margin-top: 16px; }
      .sheet-out img {
        width: 100%; display: block; border-radius: 12px; background: #fff;
        border: 1px solid #cfe3f7;
      }
      .sheet-save {
        display: block; margin-top: 10px; padding: 13px; border-radius: 14px;
        background: var(--blue); color: #fff; text-align: center;
        text-decoration: none; font-weight: 900; font-size: 16px;
      }
      .sheet-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

      .restart {
        display: block; width: 100%; margin-top: 14px; padding: 13px;
        border: 2px solid var(--line); border-radius: 16px; background: #fff;
        color: var(--muted); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
      }

      .picked-count {
        margin-top: 10px; font-size: 15px; font-weight: 800; color: var(--muted);
      }
      .picked-count b { font-size: 20px; color: var(--pink); }
      .picked-count.full b { color: var(--green); }

      .word-block {
        margin-top: 14px; padding: 12px; border-radius: 16px;
        background: #fff6ee; border: 2px solid #ffd9bd;
      }
      .word-label {
        display: block; font-size: 18px; font-weight: 900; color: #b45309;
      }
      .word-label span {
        display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 1px;
      }
      .word-chips {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-right: 24px;
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
      }
      .word-chips::-webkit-scrollbar { display: none; }
      .word-chips .chip { flex: 0 0 auto; }
      .word-input {
        width: 100%; margin-top: 6px; border: 2px solid var(--orange);
        border-radius: 14px; padding: 13px; font: inherit; font-size: 17px;
        background: #fffaf5; color: var(--ink);
      }
      .word-input:focus { outline: 3px solid #ffd9bd; }
      .word-chips { margin-top: 8px; }

      .big-button {
        width: 100%; margin-top: 14px; border: none; border-radius: 18px;
        padding: 18px; font: inherit; font-size: 21px; font-weight: 900;
        color: white; background: var(--green); cursor: pointer;
        box-shadow: 0 5px 0 var(--green-dark); transition: transform 0.05s;
      }
      .big-button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--green-dark); }
      .big-button:disabled { background: #b9b9c2; box-shadow: 0 5px 0 #9a9aa4; cursor: wait; }
      .big-button.orange { background: var(--orange); box-shadow: 0 5px 0 #d96c24; }
      .big-button.pink { background: var(--pink); box-shadow: 0 5px 0 #d94570; }

      /* お知らせ: 邪魔しない程度の帯。アプリの色味に合わせる */
      .msg {
        display: none; position: fixed; z-index: 40;
        top: 10px; left: 50%; transform: translateX(-50%);
        width: min(680px, calc(100vw - 24px));
        padding: 13px 16px; border-radius: 14px;
        font-size: 15px; font-weight: 800; text-align: center;
        background: var(--card); color: var(--ink);
        border: 2px solid var(--line);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
      }
      .msg.show { display: block; animation: slidein 0.3s cubic-bezier(.2,1.3,.5,1); }
      @keyframes slidein {
        from { transform: translate(-50%, -18px); opacity: 0; }
        to   { transform: translate(-50%, 0); opacity: 1; }
      }

      /* 大事な知らせ: 画面を止めて必ず読ませる */
      .alert-back {
        display: none; position: fixed; inset: 0; z-index: 60;
        background: rgba(20, 18, 14, 0.55);
        align-items: center; justify-content: center; padding: 20px;
      }
      .alert-back.show { display: flex; animation: fade 0.2s ease-out; }
      @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
      .alert-card {
        background: var(--card); border-radius: 22px; padding: 26px 22px 20px;
        width: min(420px, 100%); text-align: center;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        animation: pop 0.3s cubic-bezier(.2,1.4,.5,1);
      }
      @keyframes pop {
        from { transform: scale(0.88) translateY(10px); opacity: 0; }
        to   { transform: scale(1) translateY(0); opacity: 1; }
      }
      .alert-card .face { font-size: 46px; line-height: 1; }
      .alert-card p {
        margin: 12px 0 18px; font-size: 18px; font-weight: 800; line-height: 1.7;
        white-space: pre-line;
      }
      .alert-card button {
        width: 100%; border: none; border-radius: 16px; padding: 15px;
        font: inherit; font-size: 18px; font-weight: 900; color: #fff;
        background: var(--green); box-shadow: 0 4px 0 var(--green-dark); cursor: pointer;
      }
      .alert-card button.danger-btn { background: #c92a2a; box-shadow: 0 4px 0 #9f1f38; }
      .alert-card #alertCancel {
        margin-top: 10px; background: #fff; color: var(--muted);
        border: 2px solid var(--line); box-shadow: none;
      }

      .loading { display: none; margin-top: 14px; text-align: center; }
      .loading.show { display: block; }
      .loading .dots { font-size: 34px; letter-spacing: 4px; animation: blink 1.1s infinite; }
      @keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
      .loading p { margin: 4px 0 0; font-weight: 800; color: var(--muted); }
      .bar { height: 10px; background: #ece8de; border-radius: 999px; overflow: hidden; margin-top: 10px; }
      .bar span { display: block; height: 100%; width: 0%; background: var(--green); transition: width 0.4s linear; }

      /* 選んだ絵は「確認できればよい」ので、横に小さく置いて縦を節約する */
      .base-box {
        display: flex; align-items: center; gap: 14px;
        margin-top: 12px; padding: 12px;
        border: 2px solid var(--green); border-radius: 16px; background: #f4fff7;
      }
      .base-box img {
        width: 150px; height: 150px; object-fit: contain; flex: 0 0 auto;
        border-radius: 12px; background: #fff;
      }
      .base-box h3 { margin: 0 0 4px; font-size: 17px; color: var(--green-dark); }
      .base-box .sub { font-size: 14px; color: #55575f; line-height: 1.6; }
      @media (max-width: 420px) {
        .base-box { flex-direction: column; align-items: stretch; text-align: center; }
        .base-box img { width: 100%; height: 200px; }
      }

      /* auto-fit にすると、1枚のときは列がつぶれて横幅いっぱいに広がる */
      .gallery {
        display: grid; gap: 12px; margin-top: 14px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }
      .shot { border: 2px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
      .shot img { width: 100%; display: block; background: #f4f4f4; }
      .shot .tools { padding: 8px; }
      .shot .tools button, .shot .tools a {
        text-align: center; text-decoration: none; border: none;
        border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer;
      }

      /* きめる: この絵を採用するかどうか。いちばん目立たせる */
      .decide { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
      .decide .pick {
        background: var(--green); color: #fff; font-size: 15px; padding: 14px 4px;
        box-shadow: 0 3px 0 var(--green-dark);
      }
      .decide .redo {
        background: #fff; color: var(--muted); border: 2px solid var(--line) !important;
        font-size: 14px; padding: 14px 4px;
      }

      /* できること: 補助的な操作。控えめに */
      .util { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
      .util-label {
        font-size: 11px; color: var(--muted); font-weight: 700;
        margin: 10px 0 4px; padding-left: 2px;
      }
      .util button, .util a {
        background: #f1f0ea; color: var(--ink); font-size: 13px; padding: 11px 4px;
      }
      .util .save { background: var(--blue); color: #fff; }
      .util .slice { background: var(--pink); color: #fff; grid-column: 1 / -1; }
      .util .full { grid-column: 1 / -1; }

      .text-editor { display: none; padding: 0 8px 10px; }
      .text-editor.show { display: block; }
      .text-editor input {
        width: 100%; border: 2px solid var(--line); border-radius: 10px;
        padding: 10px; font: inherit; font-size: 16px; background: #fffdf8;
      }
      .text-editor .words { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
      .text-editor .words button {
        border: 2px solid var(--line); background: #fffdf8; color: var(--ink);
        border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px;
        font-weight: 700; cursor: pointer;
      }
      .text-editor .colors { display: flex; gap: 7px; margin-top: 8px; align-items: center; }
      .text-editor .colors button {
        width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff;
        box-shadow: 0 0 0 2px var(--line); cursor: pointer; padding: 0;
      }
      .text-editor .colors button.on { box-shadow: 0 0 0 3px var(--ink); }
      .text-editor .opt-row {
        display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap;
      }
      .text-editor .opt-row > span {
        font-size: 12px; font-weight: 800; color: var(--muted); min-width: 52px;
      }
      .text-editor .opt-row button {
        border: 2px solid var(--line); background: #fffdf8; color: var(--ink);
        border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px;
        font-weight: 800; cursor: pointer;
      }
      .text-editor .opt-row button.on { background: #e8590c; color: #fff; border-color: #e8590c; }
      .text-editor .clear {
        width: 100%; margin-top: 7px; border: 2px solid var(--line); border-radius: 10px;
        background: #fff; color: var(--muted); font: inherit; font-weight: 800;
        padding: 9px; cursor: pointer;
      }
      .text-editor .apply {
        width: 100%; margin-top: 9px; border: none; border-radius: 10px;
        background: #e8590c; color: #fff; font: inherit; font-weight: 800;
        padding: 11px; cursor: pointer;
      }
      /* 透過を確認しやすいように市松模様を敷く */
      .shot img.transparent {
        background-image:
          linear-gradient(45deg, #dcdce4 25%, transparent 25%),
          linear-gradient(-45deg, #dcdce4 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #dcdce4 75%),
          linear-gradient(-45deg, transparent 75%, #dcdce4 75%);
        background-size: 16px 16px;
        background-position: 0 0, 0 8px, 8px -8px, -8px 0;
      }
      .shot { position: relative; }
      .shot.is-base { border-color: var(--green); border-width: 3px; }
      .badge {
        display: none; position: absolute; top: 8px; left: 8px; z-index: 2;
        background: var(--green); color: #fff; font-size: 12px; font-weight: 900;
        padding: 5px 10px; border-radius: 999px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      }
      .shot.is-base .badge { display: block; }
      .shot .tools .danger { background: #ffe3e7; color: #9f1f38; }
      .shot .label { font-size: 14px; padding: 8px 10px 0; color: #55575f; line-height: 1.5; }
      .gallery:empty { display: none; }

      .hint { margin-top: 12px; background: #fff6e6; border-radius: 14px; padding: 12px 14px; font-size: 14px; color: #8a5a12; }
      .hint b { color: #6b430a; }

      .save-note { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }

      dialog {
        border: none; border-radius: 20px; padding: 0;
        width: min(420px, calc(100vw - 28px));
      }
      dialog::backdrop { background: rgba(0,0,0,0.45); }
      .modal { padding: 20px; }
      .modal h3 { margin: 0 0 4px; font-size: 21px; }
      .modal p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
      #codeInput {
        width: 100%; border: 2px solid var(--line); border-radius: 14px;
        padding: 14px; font: inherit; font-size: 22px; font-weight: 800;
        text-align: center; letter-spacing: 0.2em; background: #fffdf8;
      }
      .code-error {
        display: none; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
        background: #ffeef0; color: #c02a45; font-size: 14px;
      }
      .code-error.show { display: block; }

      @media (max-width: 400px) {
        .step-tab { font-size: 13px; }
      }