/* 名前の画数でみる運勢（/uranai/namae/）の見た目。2026-10-27 作成（堺さやま子育て帖）。2026-10-28 第2弾：表にない字の知らせ・流派の4通りの表・候補のカード・お気に入り・使いたい字
   2026-10-28 第3弾：結果を「名前の子育て設計図」に（下の「第3弾」の段。生まれた日の占い umare.css の設計図と同じ形：題・ひとことで・持ち味・避けたい・読みの元）
   class はすべて nm- で始める（ほかのページ・ツールとぶつけない）。色・字体・角丸はサイトの部品（site.css の変数）だけを使う。
   文字 14/16/18/20/24/32・太さ 400/500/700・余白 4/8/12/16/24/32/48・角丸 8/12/16 と丸い札・押せる所は48px以上。
   2026-10-28 第4弾：選ぶ札（.nm-seg・.nm-tabs）と入力欄は、生まれた日の占い（umare.css の .um-seg・.um-in）と同じ形（選んだ方は塗りの緑と✓・字は16px）。
   「もっと見る」ボタンは .nm-sgmore（前は .nm-more で、読みの元の details と class がぶつかっていた）。点数の札（.nm-cc-good）と分け方の色の札（.nm-tag）はやめた。 */

.nm { --nm-gap: 24px; }
.nm-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nm button { -webkit-tap-highlight-color: transparent; }

/* ---------- 入力 ---------- */
.nm-form { display: grid; gap: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.nm-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.nm-form legend { padding: 0; }
.nm-field { display: grid; gap: 8px; min-width: 0; }
.nm-lbl { display: block; font-weight: 700; line-height: 1.5; }
.nm-help { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.nm-lbl + .nm-help { margin-top: -4px; }
.nm-in { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; border: 1px solid var(--field); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.nm-in::placeholder { color: var(--ink-2); opacity: 1; font-weight: 400; }
.nm-in:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.nm-cands-list { display: grid; gap: 12px; }
.nm-cand { display: grid; gap: 4px; min-width: 0; }
.nm-sub { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.nm-inrow { display: flex; gap: 8px; min-width: 0; }
.nm-inrow .nm-in { flex: 1; }
/* 消す・候補を足す・もっと見る・くわしく見る・お気に入り：白地に緑の枠の札（行動のボタンの塗りの緑は使わない＝送る物ではないため） */
.nm-del, .nm-add, .nm-sgmore, .nm-go, .nm-favb { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 1px solid var(--field); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; cursor: pointer; transition: background-color .15s cubic-bezier(.2, 0, 0, 1); }
.nm-add { justify-self: start; margin-top: 12px; color: var(--accent); border-color: var(--accent); }
.nm-add::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-plus) center / 16px 16px no-repeat; mask: var(--i-plus) center / 16px 16px no-repeat; }
.nm-add[hidden] { display: none; }
.nm-sgmore { width: 100%; margin-top: 16px; color: var(--accent); border-color: var(--accent); }
.nm-go, .nm-favb { color: var(--accent); border-color: var(--accent); }
/* お気に入りに入っている時：選んだ札と同じ形（淡い緑の面と✓） */
.nm-favb.is-on { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -2px; }
.nm-favb.is-on::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
@media (hover: hover) { .nm-del:hover, .nm-add:hover, .nm-sgmore:hover, .nm-go:hover, .nm-favb:not(.is-on):hover { background: var(--surface-2); } }
.nm-del:active, .nm-add:active, .nm-sgmore:active, .nm-go:active, .nm-favb:active { background: var(--accent-press); transition: none; }
.nm-del:focus-visible, .nm-add:focus-visible, .nm-sgmore:focus-visible, .nm-go:focus-visible, .nm-favb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 2つ・3つから選ぶ札（ラジオ） */
.nm-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-top: 8px; }
.nm-seg label, .nm-seg button, .nm-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; text-align: center; cursor: pointer; transition: background-color .15s cubic-bezier(.2, 0, 0, 1); word-break: keep-all; overflow-wrap: anywhere; }
.nm-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nm-seg label:has(input:checked), .nm-seg button[aria-pressed="true"], .nm-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); padding-left: 12px; }
.nm-seg label:has(input:checked)::before, .nm-seg button[aria-pressed="true"]::before, .nm-tabs button[aria-pressed="true"]::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-check) center / 16px 16px no-repeat; mask: var(--i-check) center / 16px 16px no-repeat; }
.nm-seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.nm-seg button:focus-visible, .nm-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .nm-seg label:not(:has(input:checked)):hover, .nm-seg button[aria-pressed="false"]:hover, .nm-tabs button[aria-pressed="false"]:hover { background: var(--accent-soft); } }
.nm-seg label:not(:has(input:checked)):active, .nm-seg button[aria-pressed="false"]:active, .nm-tabs button[aria-pressed="false"]:active { background: var(--accent-press); transition: none; }
.nm-seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nm-seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nm-seg4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nm-seg3 label, .nm-seg3 button, .nm-seg4 button { padding: 8px 4px; gap: 4px; letter-spacing: 0; }
.nm-seg3 label:has(input:checked), .nm-seg3 button[aria-pressed="true"], .nm-seg4 button[aria-pressed="true"] { padding-left: 4px; }
.nm-part + .nm-seg { margin-top: 8px !important; }
.nm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-tabs button { flex: 1 1 128px; }

/* ---------- 結果 ---------- */
.nm-out { margin-top: 32px; }
.nm-out > * + * { margin-top: 16px; }
.nm-out > h3 { margin-top: 48px; }
.nm-out > h3:first-child, .nm-out > .nm-tabs + h3 { margin-top: 32px; }
.nm-out > .nm-tabs:first-child { margin-top: 0; }
.nm-empty { padding: 16px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); line-height: 1.7; }
.nm-cap { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.nm-out p { line-height: 1.8; }
.nm-part { font-weight: 700; line-height: 1.5; }
.nm-out > .nm-part + .nm-chars { margin-top: 8px; }
.nm-sum { padding: 12px 16px; border-radius: 12px; background: var(--t-green); font-weight: 700; line-height: 1.7; }
.nm-sum.nm-warn { background: var(--warn-bg); color: var(--warn-ink); }
.nm-warn { color: var(--warn-ink); font-weight: 700; }
.nm-use { color: var(--ink-2); }
.nm-memo { padding: 12px 16px; border-radius: 12px; background: var(--surface-2); line-height: 1.8; }

/* 1字ずつの画数：行の一覧（.links と同じ枠・区切り線） */
.nm-chars { list-style: none; margin: 0; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.nm-chars li { margin: 0 !important; }
.nm-ch { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; }
.nm-ch + .nm-ch { border-top: 1px solid var(--line); }
.nm-ch.is-fixed { background: var(--surface-2); }
.nm-ch.is-miss { background: var(--warn-bg); }
.nm-ch.is-miss .nm-ch-d { color: var(--warn-ink); }
.nm-ch-c { display: grid; justify-items: center; font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 1.25; }
.nm-ch-o { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.nm-ch-d { min-width: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.nm-ch-d .nm-warn { font-size: 14px; }
.nm-cnt { display: grid; justify-items: center; align-content: center; min-width: 64px; min-height: 56px; padding: 4px 8px; border: 1px solid var(--field); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: background-color .15s cubic-bezier(.2, 0, 0, 1); }
.nm-cnt b { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.nm-cnt span { font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: nowrap; }
@media (hover: hover) { .nm-cnt:hover { background: var(--surface-2); } }
.nm-cnt:active { background: var(--accent-press); transition: none; }
.nm-cnt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nm-fixbox { display: flex; align-items: center; gap: 4px; }
.nm-fixbox input { -webkit-appearance: none; appearance: none; width: 64px; min-height: 48px; padding: 8px; border: 2px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-display); font-size: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.nm-fixbox input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nm-fixu { font-size: 16px; color: var(--ink-2); }
.nm-back { display: flex; align-items: center; min-height: 48px; margin: 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nm-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 五格の図：左に天格・地格、まん中に名字と名前（縦）、右に人格と外格、下に総格 */
.nm-fig { padding: 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.nm-grid { display: grid; grid-template-columns: minmax(56px, 1fr) 76px 72px 56px; row-gap: 4px; max-width: 400px; margin: 0 auto; }
.nm-g-ch { grid-column: 2; display: flex; align-items: center; gap: 4px; min-width: 0; }
.nm-g-box { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1; }
.nm-g-n { font-size: 16px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.nm-g-rei .nm-g-box { border-style: dashed; color: var(--ink-2); font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.nm-g-br { position: relative; display: flex; align-items: center; min-width: 0; }
.nm-g-br::before { content: ""; position: absolute; top: 23px; bottom: 23px; width: 12px; border: 2px solid var(--ink-2); }
.nm-g-l { position: relative; display: grid; justify-items: start; line-height: 1.3; background: var(--surface); }
.nm-g-l span { font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.nm-g-l b { font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 左（天格・地格）：かっこは字のすぐ左。数は左に右寄せ */
.nm-g-lt { grid-column: 1; justify-content: flex-end; }
.nm-g-lt::before { right: 4px; border-right: 0; border-radius: 8px 0 0 8px; }
.nm-g-lt .nm-g-l { justify-items: end; margin-right: 24px; }
/* 右（人格）：かっこは字のすぐ右 */
.nm-g-rt { grid-column: 3; }
.nm-g-rt::before { left: 0; border-left: 0; border-radius: 0 8px 8px 0; }
.nm-g-rt .nm-g-l { margin-left: 24px; }
/* 右の外側（外格）：腕は人格の列をまたいで字まで届く（腕の高さは人格の行と重ならない） */
.nm-g-out { grid-column: 3 / span 2; justify-content: flex-end; }
.nm-g-out::before { left: 0; right: 40px; width: auto; border-left: 0; border-radius: 0 8px 8px 0; }
.nm-g-out .nm-g-l { width: 36px; justify-items: start; }
.nm-g-sou { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.nm-g-sou span { font-weight: 700; color: var(--ink-2); }
.nm-g-sou b { font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-g-sou .nm-g-s2 { font-size: 14px; font-weight: 400; }

/* 五格の数と意味 */
.nm-kaku { display: grid; gap: 16px; }
.nm-kc { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.nm-kc > * + * { margin-top: 4px; }
.nm-kc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nm-kc-n { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.5; }
.nm-kc-v { font-weight: 700; }
.nm-kc-v b { font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-kc-w { margin-top: 8px !important; }
.nm-kc-how { font-size: 14px; line-height: 1.6 !important; color: var(--ink-2); }
.nm-kc-k { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5 !important; }
.nm-lab { margin-top: 12px !important; font-size: 14px; font-weight: 700; line-height: 1.5 !important; color: var(--ink-2); }

/* 三才 */
.nm-ss-sum { font-family: var(--font-display); font-size: 18px; line-height: 1.5 !important; }
.nm-ss { list-style: none; margin: 16px 0 0; padding: 0 !important; }
.nm-ss li { margin: 0 !important; }
.nm-ss-node { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.nm-ss-k { font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-ss-g { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.4; }
.nm-ss-d { font-size: 14px; color: var(--ink-2); }
.nm-ss-link { margin-left: 24px; padding: 12px 0 12px 24px; border-left: 2px solid var(--ink-2); line-height: 1.7; }
.nm-ss-r { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.5; }

/* 陰陽 */
.nm-iy { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.nm-iy li { margin: 0 !important; display: grid; justify-items: center; gap: 4px; min-width: 56px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.nm-iy li.is-mei { margin-left: 16px !important; }
.nm-iy-c { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.25; }
.nm-iy-n { font-size: 14px; color: var(--ink-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.nm-iy-m { min-width: 32px; padding: 0 8px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.7; text-align: center; }
.is-yo .nm-iy-m { border: 1px solid var(--ink-2); background: var(--surface); color: var(--ink); }
.is-in .nm-iy-m { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }

/* 名字に合う画数の組み合わせ */
.nm-sg { list-style: none; margin: 0; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.nm-sg li { margin: 0 !important; padding: 12px 16px; }
.nm-sg li + li { border-top: 1px solid var(--line); }
.nm-sg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-family: var(--font-display); line-height: 1.5 !important; }
.nm-sg-p b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-sg-plus { color: var(--ink-2); padding: 0 4px; }
.nm-sg-k { font-size: 14px; line-height: 1.6 !important; color: var(--ink-2); }
.nm-sg-e { display: grid; gap: 4px; margin-top: 8px; }
.nm-sg-ex { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.nm-sg-exn { font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.5; padding-top: 4px; word-break: keep-all; overflow-wrap: anywhere; }

/* 81の数の一覧（開け閉め）。出典の箱（.srcbox）と同じ形 */
.nm-acc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.nm-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; }
.nm-acc summary::-webkit-details-marker { display: none; }
.nm-acc summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-top: -4px; }
.nm-acc[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
@media (hover: hover) { .nm-acc summary:hover { background: var(--surface-2); } }
.nm-acc summary:active { background: var(--accent-press); }
.nm-acc summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
.nm-81 { list-style: none; margin: 0; padding: 0 16px 8px !important; }
.nm-81 li { margin: 0 !important; padding: 12px 0; border-top: 1px solid var(--line); }
.nm-81 li > * + * { margin-top: 4px; }
.nm-81-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: 700; line-height: 1.5; }
.nm-81-h b { min-width: 32px; font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.nm-81 p { line-height: 1.7; }
.nm-81-t { color: var(--ink-2); }
/* 2026-10-28 第4弾：ページの「画数の数え方（くわしく）」の畳み（どんな字でも・流派・名付けの手伝い・数え方の決まり・数の見方を1つに） */
.nm-acc-in { padding: 0 16px 16px; }
.nm-acc-in > * + * { margin-top: 16px; }
.nm-acc-in > h3 { margin-top: 32px; }
.nm-acc-in > h3:first-child { margin-top: 8px; }
.nm-acc-in h4 { margin-top: 24px; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 名字に合う画数（これから名前を決める方へ）の畳みの中 */
.nm-sgd .nm-opt-in > * + * { margin-top: 16px; }

/* ---------- 2026-10-28 第2弾 ---------- */
.nm-out > h3[tabindex]:focus { outline: none; }
.nm-out > h3[tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* 画数の表にない字の知らせ（注意の色の箱。トップの注意の箱と同じ色） */
.nm-miss { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--warn-line); border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); }
.nm-miss p { line-height: 1.8; }
.nm-miss .nm-cap { color: var(--warn-ink); }
.nm-miss-h { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5 !important; }
.nm-miss .nm-go { justify-self: start; margin-top: 4px; background: var(--surface); }

/* 結果のまとめの行とお気に入りの札 */
.nm-sumrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nm-sumrow .nm-sum { flex: 1 1 240px; min-width: 0; }

/* 流派で比べる（4通りの表）。小さな画面でも横にはみ出さないよう、列の幅を決める */
.nm-ry { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.nm-ry table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.nm-ry th, .nm-ry td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; word-break: keep-all; overflow-wrap: anywhere; }
.nm-ry tr:last-child th, .nm-ry tr:last-child td { border-bottom: 0; }
.nm-ry thead th { background: var(--t-green); font-size: 14px; font-weight: 700; line-height: 1.4; }
.nm-ry thead th:first-child, .nm-ry tbody th { width: 56px; }
.nm-ry tbody th { font-weight: 700; color: var(--ink-2); }
.nm-ry .nm-ry-c { display: block; }
.nm-ry .nm-ry-now { display: block; margin-top: 4px; color: var(--accent); }
.nm-ry th.is-cur { box-shadow: inset 0 -3px 0 var(--accent); }
.nm-ry td.is-cur { background: var(--accent-soft); }
.nm-ry td.is-cur .nm-k-x { color: var(--ink); }
.nm-ry td b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-ry tr.is-diff th { color: var(--ink); }
.nm-ry-d { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--c-orange); }
.nm-ry-sum { font-weight: 500; }
.nm-ry2 th, .nm-ry2 td { text-align: left; padding: 8px; }
.nm-ry2 thead th:first-child, .nm-ry2 tbody th { width: 48px; text-align: center; }
.nm-ry2 thead th:nth-child(2), .nm-ry2 thead th:nth-child(3) { width: 64px; }
.nm-ry2 tbody th { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.nm-ry2 td { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.nm-ry2 td b { font-size: 18px; color: var(--ink); }

/* 流派の表の「画数を入れると出ます」 */
.nm-k { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.nm-k-x { color: var(--ink-2); font-weight: 500; }

/* 候補をくらべる：1つずつのカード（4つの格は同じ位置に並べ、上下で見比べやすく） */
.nm-ccs { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 16px; }
.nm-ccs > li { margin: 0 !important; }
.nm-cc { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.nm-cc.is-cur { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }
.nm-cc-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.nm-cc-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; font-family: var(--font-display); line-height: 1.4 !important; overflow-wrap: anywhere; }
.nm-cc-sei { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.nm-cc-mei { font-size: 24px; font-weight: 700; }
.nm-cc-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nm-cc-now { display: flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 14px; font-weight: 700; color: var(--accent); line-height: 1.5 !important; }

/* お気に入り・名字に合う画数（結果の下の区切り） */
.nm-sec { margin-top: 48px; }
.nm-sec[hidden], .nm-wpos[hidden] { display: none; }
.nm-sec > * + * { margin-top: 16px; }
.nm-sec p { line-height: 1.8; }
.nm-favs { list-style: none; margin: 0; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.nm-favs > li { margin: 0 !important; display: grid; gap: 4px; padding: 12px 16px; }
.nm-favs > li + li { border-top: 1px solid var(--line); }
.nm-fav-n { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.5 !important; overflow-wrap: anywhere; }
.nm-fav-i { font-size: 14px; line-height: 1.6 !important; color: var(--ink-2); }
.nm-fav-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nm-fav-all { display: grid; gap: 8px; justify-items: start; }
.nm-want-f { margin-top: 24px !important; }
.nm-in.nm-want { max-width: 160px; }
.nm-wpos .nm-seg { margin-top: 8px; }
.nm-sg-w { padding: 0 4px; border-radius: 4px; background: var(--mark); font-weight: 700; }

/* 決まりの表（静的な本文） */
.nm-rule-c { font-family: var(--font-display); font-size: 20px; font-weight: 700; }

/* ---------- 2026-10-28 第3弾：名前の子育て設計図 ----------
   本文は平たい言葉。姓名判断の言葉は、かっこの中（.nm-tm）と「読みの元」（.nm-basis）と、畳んだ「読みの元（画数のくわしい計算）」の中だけ */
.nm-form-t { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5; }
.nm-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.nm-pf { display: grid; gap: 4px; min-width: 0; align-content: start; }
.nm-sub2 { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.nm-cands-list { gap: 16px; }
.nm-cand { gap: 8px; }
.nm-cand + .nm-cand { padding-top: 16px; border-top: 1px solid var(--line); }
.nm-cand-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 開け閉め（細かい設定・読みの元）：生まれた日の占いの「細かい設定」と同じ形 */
.nm-opt { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.nm-opt summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 16px; border-radius: 12px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; }
.nm-opt summary::-webkit-details-marker { display: none; }
.nm-opt summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.nm-opt[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.nm-opt summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (hover: hover) { .nm-opt summary:hover { background: var(--accent-soft); } }
.nm-opt summary:active { background: var(--accent-press); }
.nm-opt-in { padding: 0 16px 16px; }
.nm-set .nm-opt-in { display: grid; gap: 24px; }
.nm-more .nm-opt-in > * + * { margin-top: 16px; }
.nm-more .nm-opt-in > h3 { margin-top: 32px; }
.nm-more .nm-opt-in > h3:first-child { margin-top: 16px; }
.nm-more .nm-opt-in > .nm-part + .nm-chars { margin-top: 8px; }
.nm-more h3[tabindex]:focus { outline: none; }

/* 結果の段（h2） */
.nm-out > .nm-sec:first-child, .nm-out > .nm-tabs + .nm-sec, .nm-out > .nm-miss + .nm-sec { margin-top: 32px; }
.nm-sec h2:focus { outline: none; }
.nm-sec h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.nm-who { font-weight: 700; line-height: 1.6 !important; }
.nm-small { font-size: 14px; line-height: 1.7 !important; color: var(--ink-2); }
.nm-tm { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.nm-one p { line-height: 1.75 !important; }
.nm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-basis { display: block; font-size: 14px; line-height: 1.6 !important; color: var(--ink-2); }

/* 持ち味（3〜5つ）：題（h3）・文・こう関わる・避けたい・読みの元 */
.nm-core > * + * { margin-top: 12px; }
.nm-core > p { line-height: 1.75 !important; }
.nm-core > .nm-lab + *, .nm-avoid > .nm-lab + *, .nm-yurai > .nm-lab + *, .nm-wi-b > .nm-lab + *, .nm-diff > .nm-lab + * { margin-top: 4px; }
.nm-avoid { padding: 12px 16px; border-radius: 12px; background: var(--surface-2); }
.nm-avoid > .nm-lab:first-child, .nm-yurai > .nm-lab:first-child, .nm-diff > .nm-lab:first-child { margin-top: 0 !important; }
.nm-avoid p { line-height: 1.75 !important; }

/* 願いと関わり方のヒント：字ごとの行（左に大きな字） */
.nm-wish { list-style: none; margin: 0; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.nm-wish > li { margin: 0 !important; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 16px; padding: 16px; }
.nm-wish > li + li { border-top: 1px solid var(--line); }
.nm-wi-c { font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 1.25; text-align: center; }
.nm-wi-kana .nm-wi-c { font-size: 20px; line-height: 1.5; overflow-wrap: anywhere; }
.nm-wi-b { min-width: 0; }
.nm-wi-b > * + * { margin-top: 4px; }
.nm-wi-b p { line-height: 1.75; }
.nm-wi-m { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5 !important; }
.nm-wi-m .nm-small { display: block; font-family: var(--font-body); font-weight: 400; }
.nm-yurai { padding: 16px; border: 2px solid var(--accent); border-radius: 16px; background: var(--surface); }
.nm-yurai > * + * { margin-top: 8px; }
.nm-yurai-t { font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.8 !important; }

/* 名前の響き：見出し・大きな字・説明の行 */
.nm-hb { list-style: none; margin: 0; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.nm-hb > li { margin: 0 !important; display: grid; gap: 4px; padding: 12px 16px; }
.nm-hb > li + li { border-top: 1px solid var(--line); }
.nm-hb-k { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.nm-hb-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; font-family: var(--font-display); line-height: 1.4; overflow-wrap: anywhere; }
.nm-hb-v b { font-size: 24px; font-weight: 700; }
.nm-hb-s { font-family: var(--font-body); font-size: 14px; color: var(--ink-2); }
.nm-hb-d { line-height: 1.75; }

/* 画数のバランス：題（平たい言葉）と数、その下に数の名前・持ち味・関わり方のヒント・読みの元。題は1行を広く使う（375pxでも折れにくく） */
.nm-bal { list-style: none; margin: 0; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.nm-bal > li { margin: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k n" "t t" "d d" "h h" "b b"; align-items: center; gap: 4px 12px; padding: 16px; }
.nm-bal > li + li { border-top: 1px solid var(--line); }
.nm-bal-k { grid-area: k; min-width: 0; font-weight: 700; line-height: 1.5; }
.nm-bal-k .nm-tm { display: block; }
.nm-bal-n { grid-area: n; font-weight: 700; white-space: nowrap; }
.nm-bal-n b { font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; }
.nm-bal-t { grid-area: t; margin-top: 4px; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5 !important; }
.nm-bal-d { grid-area: d; line-height: 1.75 !important; }
.nm-bal-x .nm-bal-d { font-size: 14px; color: var(--ink-2); }
.nm-bal-h { grid-area: h; margin-top: 8px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); }
.nm-bal-h .nm-lab { margin-top: 0 !important; }
.nm-bal-h .nm-lab + p { margin-top: 4px; line-height: 1.75 !important; }
.nm-bal > li > .nm-basis { grid-area: b; margin-top: 8px; }

/* 候補をくらべる（平たい言葉のカード）と違いのまとめ */
.nm-cc > .nm-lab { margin-top: 0 !important; }
.nm-cc > .nm-lab + * { margin-top: -8px; }
.nm-cc-yomi { font-size: 14px; line-height: 1.5 !important; color: var(--ink-2); }
.nm-cc-one { font-weight: 700; line-height: 1.7 !important; }
.nm-cc-list { margin: 0; }
.nm-cc-list li { line-height: 1.6; }
.nm-diff { padding: 16px; border-radius: 12px; background: var(--surface-2); }
.nm-diff > * + * { margin-top: 8px; }
.nm-diff p { line-height: 1.8; }
.nm-fav-y { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--ink-2); align-self: center; }

/* ---------- 2026-10-28 第4弾：3つの柱・毎日やること・声かけ・育つ流れ・冷蔵庫に貼る1枚（生まれた日の占い umare.css と同じ形） ---------- */
.body .nm-pl { list-style: none; padding: 0 !important; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.body .nm-pl > li { margin: 0 !important; padding: 16px; }
.body .nm-pl > li + li { border-top: 1px solid var(--line); }
.nm-pl-k { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.nm-pl-t { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.4; }
.nm-pl-d { display: block; margin-top: 8px; line-height: 1.75; }
.nm-pl .nm-basis { margin-top: 8px; }
.nm-out .tbl td { word-break: normal; line-break: strict; }
.nm-out .tbl ul { margin: 0; }
.nm-out .tbl td:first-child { font-weight: 700; }
.nm-g-sub { display: block; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.nm-ng { font-weight: 400; color: var(--ink-2); }
.nm-ok { font-weight: 700; color: var(--ink); }
@media (min-width: 640px) {
  .nm-daily td:first-child { width: 30%; }
  .nm-phr td { width: 50%; }
  .nm-grow td:first-child { width: 160px; }
}
.nm-diff-h { margin-top: 12px !important; font-weight: 700; }
.nm-diff-h + ul { margin-top: 4px; }
.nm-fridge { padding: 24px 16px; border: 2px solid var(--accent); border-radius: 16px; background: var(--surface); }
.nm-fridge > * + * { margin-top: 12px; }
.nm-fridge > .nm-lab { margin-top: 24px !important; }
.nm-fridge > .nm-lab + * { margin-top: 4px; }
.nm-fr-h { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.4 !important; }
.nm-fr-y { font-size: 14px; line-height: 1.7 !important; color: var(--ink-2); }
.body .nm-fr-pl { list-style: none; padding: 0 !important; border-top: 1px solid var(--line); }
.body .nm-fr-pl > li { margin: 0 !important; padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 1.6; }
.nm-fr-pl b { display: block; font-size: 18px; font-weight: 700; line-height: 1.4; }
.nm-fridge > p { line-height: 1.6; }
.nm-fridge > .nm-fr-n { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7 !important; color: var(--ink-2); }
.nm-fr-sec .nm-pr { margin-top: 16px; }
@media (min-width: 640px) { .nm-fridge { padding: 24px; } }
@media screen { #nm-pone { display: none; } }

@media print {
  html.nm-pf body > :not(#nm-pone) { display: none !important; }
  html.nm-pf #nm-pone { margin: 0; }
  .nm-sec.nm-fr-sec { break-before: page; }
  .nm-fridge { padding: 16px; border-color: #333; }
  .body .nm-fr-pl > li { padding: 8px 0; }
  .nm-pl > li, .nm-out .tbl tr, .nm-fridge, .nm-bal-h { break-inside: avoid; }
  .nm-out .tbl { overflow: visible; }
  .nm-form, .nm-favw, .nm-sgw, .nm-tabs, .nm-acts, .nm-cc-b, .nm-seg { display: none !important; }
  .nm-core, .nm-avoid, .nm-wish > li, .nm-hb > li, .nm-bal > li, .nm-cc, .nm-yurai { break-inside: avoid; }
  .body h2, .body h3 { break-after: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-del, .nm-add, .nm-sgmore, .nm-go, .nm-favb, .nm-seg label, .nm-seg button, .nm-tabs button, .nm-cnt { transition: none; }
}
@media (min-width: 560px) {
  .nm-seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nm-ry th, .nm-ry td { padding: 8px; }
  .nm-ry thead th:first-child, .nm-ry tbody th { width: 72px; }
}
@media (min-width: 760px) {
  .nm-form { padding: 24px; }
  .nm-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .nm-ccs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}