/* うちのこ撫でマップ：サイトの枠（ヘッダー・パンくず・見出し）の中に入る部分の見た目。
   色・字・角の丸みはサイトの style.css の値（--ink・--line・--accent-deep など）をそのまま使う。
   吹き出しの4色（--love など）だけは、できあがる画像と同じ色。
   手元の確認用 index.html では、サイトの style.css も読んで本番に近くしてある。 */
.nm {
  max-width: 560px; margin: 0 auto; color: var(--ink);
  --love: #FF9CBB; --love-d: #D6457A;
  --like: #FFCB8E; --like-d: #C8741C;
  --hate: #A3CEFF; --hate-d: #3C78C0;
  --punch: #C9ADF2; --punch-d: #7447C0;
}
.nm [hidden] { display: none !important; }
.nm button, .nm input { font: inherit; color: inherit; letter-spacing: inherit; }
.nm button { cursor: pointer; }

.nm-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.95; color: var(--ink-soft); }
.nm-hero { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }

/* ボタン（サイトのほかのあそびと同じ、丸い黒と白） */
.nm .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px;
  border: 1px solid var(--ink); border-radius: 999px; padding: 10px 18px; font-size: 14px; letter-spacing: .12em;
  background: var(--bg-soft); color: var(--ink); text-decoration: none; transition: background .3s var(--ease); }
.nm .btn:hover { background: var(--silver-1); }
.nm .btn.primary { background: var(--ink); color: #fff; }
.nm .btn.primary:hover { background: #3d3d47; }
.nm .btn + .btn, .nm .btns > * + * { margin-top: 10px; }
.nm .note { font-size: 12px; line-height: 1.9; color: var(--muted); margin: 14px 2px 0; }

/* 作る画面 */
.nm .stage { position: relative; }
.nm #cv { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line);
  touch-action: pan-y; background: #fff; }
.nm .busy { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(42, 42, 49, .88); color: #fff;
  border-radius: 999px; padding: 8px 16px; font-size: 13px; letter-spacing: .06em; white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.nm .busy button { border: 0; background: #fff; color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.nm .bar { width: 80px; height: 6px; border-radius: 3px; background: #ffffff44; overflow: hidden; }
.nm .bar i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }
.nm .hint { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 14px; }

.nm .field { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.nm .field label { white-space: nowrap; font-size: 14px; letter-spacing: .08em; }
.nm .field input[type=text] { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 4px 2px; font-size: 17px; background: transparent; outline: none; }
.nm .field input[type=text]:focus { border-color: var(--accent-deep); }
.nm .field .suffix { color: var(--muted); white-space: nowrap; font-size: 14px; }

.nm .parts { list-style: none; margin: 0; padding: 0; }
.nm .part { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px;
  margin-bottom: 10px; transition: box-shadow .3s; }
.nm .part.flash { box-shadow: 0 0 0 2px var(--accent-deep); }
.nm .phead { display: flex; align-items: center; gap: 10px; }
.nm .sw { display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: .06em; }
.nm .sw input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.nm .miss { font-size: 12px; line-height: 1.6; color: var(--muted); }
.nm .part.off .chips, .nm .part.off .free { display: none; }
.nm .part.off .sw span { color: var(--muted); }
.nm .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nm .chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px;
  letter-spacing: .04em; color: var(--ink-soft); }
.nm .chip.on { color: #fff; border-color: transparent; }
.nm .chip[data-v="すごい好き"].on { background: var(--love-d); }
.nm .chip[data-v="好き"].on { background: var(--like-d); }
.nm .chip[data-v="嫌い"].on { background: var(--hate-d); }
.nm .chip[data-v="殴る"].on { background: var(--punch-d); }
.nm .chip[data-v^="auto"].on, .nm .chip[data-v="free"].on { background: var(--ink); }
.nm .free { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.nm .free input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 16px;
  outline: none; background: #fff; }
.nm .free input:focus { border-color: var(--accent-deep); }
.nm .tones { display: flex; gap: 5px; }
.nm .tone { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); padding: 0; }
.nm .tone.on { box-shadow: 0 0 0 2px var(--ink); }
.nm .row2 { display: flex; gap: 10px; align-items: center; margin: 4px 0 16px; }
.nm .row2 .btn { flex: 1; min-height: 44px; padding: 8px 10px; font-size: 13px; letter-spacing: .06em; }
.nm .row2 + .btn { margin-top: 0; }
.nm .check { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.nm .check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }

/* 保存・シェア（画面いっぱいに重ねる。サイトのヘッダーより上） */
.nm .sheet { position: fixed; inset: 0; background: rgba(42, 42, 49, .8); display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 1000; }
.nm .sheet .box { background: var(--bg); border-radius: var(--radius); padding: 14px; width: 100%; max-width: 480px; max-height: 100%; overflow: auto; }
.nm .sheet img { display: block; width: 100%; border-radius: 12px; }
.nm .sheet p { font-size: 12px; color: var(--muted); margin: 8px 2px 12px; text-align: center; }
.nm .sheet .xhint { margin: 6px 4px 0; }

.nm .credit { font-size: 11px; color: var(--muted); margin: 28px 0 0; line-height: 1.8; }
.nm .credit a { color: inherit; text-decoration: underline; }
.nm .nm-lang { margin-top: 28px; }