/* 家族でつくる、わが子の子育て設計図（/uranai/kazoku/）の見た目
   2026-10-28 クロコの係（kazoku）。手作りの子育て設計図（家族版）の形に作り替えた時に、umare.css に頼らず、このファイルだけで見た目が決まるようにした
   （入力欄の部品は umare.css の um- と同じ形を uf- で持つ）。
   色・字・角丸はサイトの変数（site.css）と、2026-10-28 の垢抜け版 v2 の決まりに合わせる：
   文字 14/16/18/20・太さ 400/700・余白 4/8/12/16/24/32/48・角丸 4（札）/8（ボタン・選ぶ札）/12（箱）。押せる物は44px以上（主のボタンは48px以上）。
   グラデ・絵文字・斜体・英字の飾り・番号の飾り・片側だけの太い色線・丸い点の印・ピル型は使わない。箱の中に箱を作らない（開け閉めは線で区切った行）。
   家族の色（名前の前の小さな四角の印・ひと休みの札）：パパ＝空・ママ＝桃・子ども＝緑・橙・山吹・灰。色だけで伝えず、いつも名前を添える。
   家族の10年はサイトの時の線（.tl）をそのまま使う。class はすべて uf- で始める。 */

.uf-c-sky { --pc: var(--c-sky); --pt: var(--t-sky); }
.uf-c-pink { --pc: var(--c-pink); --pt: var(--t-pink); }
.uf-c-green { --pc: var(--c-green); --pt: var(--t-green); }
.uf-c-orange { --pc: var(--c-orange); --pt: var(--t-orange); }
.uf-c-yellow { --pc: var(--c-yellow); --pt: var(--t-yellow); }
.uf-c-gray { --pc: var(--ink-2); --pt: var(--surface-2); }
.uf-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 名前（前に家族の色の小さな四角の印） */
.uf-nm { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.uf-nm::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--pc, var(--accent)); }

/* ---------- 入力 ---------- */
.uf-form { padding: 24px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.uf-form-t { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5; }
.uf-p { margin: 24px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
/* 見出し（legend）は枠の線に重ねず、線の下に置く（float で fieldset の枠から外す） */
.uf-p-t { float: left; width: 100%; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; padding: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5; }
.uf-p-t + * { clear: both; }
.uf-p-t::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--pc, var(--accent)); }
.uf-kid-f { --pc: var(--accent); }
.uf-field { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.uf-lbl { display: block; margin: 0 0 8px; padding: 0; font-weight: 700; line-height: 1.5; }
.uf-lbl2 { display: block; margin: 0 0 4px; padding: 0; font-weight: 700; line-height: 1.5; }
.uf-in { box-sizing: border-box; display: block; width: 100%; min-height: 48px; margin: 0; padding: 8px 12px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.uf-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input.uf-in[type="date"], input.uf-in[type="time"] { -webkit-appearance: none; appearance: none; text-align: left; }
input.uf-in::-webkit-date-and-time-value { text-align: left; }
.uf-in-time { max-width: 240px; }
.uf-sel { position: relative; display: block; }
.uf-sel select { -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer; }
.uf-sel::after { content: ""; position: absolute; right: 16px; top: calc(50% - 6px); width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }
.uf-help { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.uf-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.uf-fs + .uf-fs { margin-top: 16px; }
.uf-check { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; line-height: 1.5; }
.uf-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.uf-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.uf-kids { margin: 0; }

/* 選ぶ札（性別・役割の表）：サイトの .chip と同じ形（角丸8px・淡い地）。選んだ札は塗り＋チェックの印で、色だけで伝えない */
.uf-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.uf-seg label { position: relative; display: inline-flex; }
.uf-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.uf-seg span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 8px; background: var(--surface-2); color: var(--ink); font-weight: 700; line-height: 1.5; pointer-events: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.uf-seg input:checked + span { background: var(--accent); color: var(--accent-ink); padding-left: 12px; }
.uf-seg input:checked + span::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; }
.uf-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .uf-seg input:not(:checked):hover + span { background: var(--accent-soft); } }
.uf-seg input:not(:checked):active + span { background: var(--accent-press); transition: none; }

/* 時刻・場所・細かい設定（開け閉め）：サイトの details.kl と同じ枠（1px・角丸8px） */
.uf-more { margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; }
.uf-opt { margin-top: 24px; }
.uf-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 16px; border-radius: 8px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.uf-more-in { padding: 0 16px 16px; }
.uf-more-in > .uf-field:first-child { margin-top: 0; }

/* 子どもを足す・消す：サイトの「もっと見る」と同じ（1pxの枠・角丸8px・墨の字） */
.uf-add, .uf-del { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 16px 0 0; padding: 8px 24px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; line-height: 1.5; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.uf-add { margin-top: 24px; padding-left: 16px; }
.uf-add::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--accent); -webkit-mask: var(--i-plus) center / 20px 20px no-repeat; mask: var(--i-plus) center / 20px 20px no-repeat; }
.uf-add[hidden], .uf-del[hidden] { display: none; }

.uf-err { margin: 24px 0 0; padding: 12px 16px; border-radius: 8px; background: var(--t-pink); color: var(--c-pink); font-weight: 700; line-height: 1.6; }
.uf-err[hidden] { display: none; }
.uf-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 24px 0 0; padding: 8px 24px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 18px; font-weight: 700; line-height: 1.5; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.uf-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-align: center; }

/* ---------- 結果の共通 ---------- */
.uf-out:empty { display: none; }
.uf-sec > * + * { margin-top: 16px; }
.uf-sec h2:focus { outline: none; }
.uf-sec h2:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.uf-sec p { line-height: 1.75; }
.uf-who { font-weight: 700; line-height: 1.6 !important; }
/* 小さな見出しの言葉（こう関わる・毎日やること など） */
.uf-k { font-size: 14px; font-weight: 700; line-height: 1.5 !important; color: var(--ink-2); }
/* 根拠（かっこの中の専門の言葉）：小さく薄く */
.uf-basis { font-size: 14px; line-height: 1.6 !important; color: var(--ink-2); }
.uf-g { display: block; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
/* 小さな札（伸ばす所・避けたい・言い換え など）：サイトの分類の札と同じ形（高さ24px・角丸4px・淡い地＋濃い字）。ラベルと中身は2段にする */
.uf-tag, .uf-avoid-k, .uf-ph-k { display: flex; align-items: center; width: max-content; max-width: 100%; height: 24px; margin: 0 0 4px; padding: 0 8px 1px; border-radius: 4px; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.uf-tag { background: var(--t-green); color: var(--c-green); }
.uf-avoid-k { background: var(--t-pink); color: var(--c-pink); }
.uf-ph-k { background: var(--surface-2); color: var(--ink-2); }
.uf-ph-ok .uf-ph-k, .uf-say .uf-ph-k { background: var(--t-green); color: var(--c-green); }

/* 線で区切った行の一覧（核・柱・毎日・言い換え・場面・きょうだい・そろえること・家族） */
.body .uf-fam, .body .uf-cores, .body .uf-pls, .body .uf-daily, .body .uf-ph, .body .uf-scenes, .body .uf-sib, .body .uf-align { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.body .uf-fam > li, .body .uf-cores > li, .body .uf-pls > li, .body .uf-daily > li, .body .uf-ph > li, .body .uf-scenes > li, .body .uf-sib > li, .body .uf-align > li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.body .uf-cores > li { padding: 16px 0; }
.uf-fam li > * + *, .uf-pls li > * + *, .uf-daily li > * + *, .uf-scenes li > * + *, .uf-align li > * + *, .uf-sib li > * + * { margin-top: 4px; }

/* 家族のひとこと */
.uf-fam-n { line-height: 1.5 !important; }
.uf-fam-d { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5 !important; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.uf-fam-s { color: var(--ink-2); }
.uf-key { padding: 16px; border-radius: 12px; background: var(--surface-2); }

/* 子どもごとの設計図 */
.uf-one { font-size: 18px; line-height: 1.7 !important; }
.uf-core > * + * { margin-top: 8px; }
.uf-core-t, .uf-pl-t { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5 !important; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.uf-core > .uf-k { margin-top: 12px; }
.uf-core > ul { margin-top: 4px; }
.uf-avoid { margin-top: 12px !important; }
.uf-daily-t, .uf-scene-t, .uf-align-t { font-weight: 700; line-height: 1.5 !important; }
.uf-ph-ng { color: var(--ink-2); }
.uf-ph-ok { margin-top: 8px; font-weight: 700; }
.uf-say { margin-top: 8px !important; font-weight: 700; }

/* 子が2人以上：子ごとに開け閉め（線で区切った行。箱にはしない） */
.uf-fold { border-top: 1px solid var(--line); }
.uf-fold:last-of-type { border-bottom: 1px solid var(--line); }
.uf-sec > .uf-fold + .uf-fold { margin-top: 0; }
.uf-fold > summary, .uf-det > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 8px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.uf-fold-h { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.uf-fold-d { font-weight: 400; line-height: 1.6; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.uf-fold-in { padding: 8px 0 32px; }
.uf-fold-in > * + *, .uf-det-in > * + * { margin-top: 16px; }

/* 開け閉めの共通（印は下向きの山形。開くと上向き） */
.uf-more > summary::-webkit-details-marker, .uf-fold > summary::-webkit-details-marker, .uf-det > summary::-webkit-details-marker { display: none; }
.uf-more > summary::after, .uf-fold > summary::after, .uf-det > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 auto; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.uf-more[open] > summary::after, .uf-fold[open] > summary::after, .uf-det[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.uf-more > summary:focus-visible, .uf-fold > summary:focus-visible, .uf-det > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
@media (hover: hover) { .uf-more > summary:hover, .uf-fold > summary:hover, .uf-det > summary:hover { background: var(--accent-soft); } }
.uf-more > summary:active, .uf-fold > summary:active, .uf-det > summary:active { background: var(--accent-press); transition: none; }

/* 箱（似ている所・ぶつかりやすい所・持ち味が出やすい役・親も休む）：淡いグレーの地・角丸12px */
.uf-box { padding: 16px; border-radius: 12px; background: var(--surface-2); }
.uf-box > * + * { margin-top: 8px; }
.uf-box-t { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5 !important; }
.uf-two { display: grid; gap: 12px; }
@media (min-width: 640px) { .uf-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* きょうだい：1人ずつの「ラベル／中身」（スマホは2段、広い画面は横に並べる） */
.uf-dl { margin: 8px 0 0; }
.uf-dl > div { padding: 4px 0; }
.uf-dl dt { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.uf-dl dd { margin: 0; line-height: 1.6; }
@media (min-width: 640px) { .uf-dl > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; align-items: baseline; } }

/* 役割の表（2人で選んで書きこむ） */
.uf-roles { border-top: 1px solid var(--line); }
.uf-rl { margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.uf-rl-t { float: left; width: 100%; padding: 0; font-weight: 700; line-height: 1.5; }
.uf-rl-t + * { clear: both; }
.uf-rl-h { font-size: 14px; line-height: 1.6 !important; color: var(--ink-2); }
.uf-rl .uf-seg { margin-top: 8px; }

/* 家族の10年：サイトの時の線（.tl）。年の列を少し細く */
.uf-ten { --tld: 5.5em; }
.uf-ten .tl-d { display: flex; flex-direction: column; align-items: flex-start; }
.uf-ten .tl-e { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.uf-now { display: inline-flex; align-items: center; height: 24px; margin-top: 4px; padding: 0 8px 1px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700; line-height: 1; }
.uf-ten-a { line-height: 1.7; }
.uf-ten-ev { font-weight: 700; line-height: 1.6; }
.uf-ten-no { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--ink-2); }
.uf-rests { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.uf-rest { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 1px; border-radius: 4px; background: var(--pt); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1; }
.uf-rest::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--pc); }

/* 冷蔵庫に貼る1枚 */
.uf-fr { padding: 24px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.uf-sec > .uf-fr + .uf-fr { margin-top: 24px; }
.uf-fr > * + * { margin-top: 8px; }
.uf-fr > .uf-k { margin-top: 16px; }
.uf-fr-t { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.4 !important; }
.body .uf-fr-pl { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.body .uf-fr-pl > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.uf-fr-pl b { display: inline-flex; align-items: center; height: 24px; padding: 0 8px 1px; border-radius: 4px; background: var(--t-green); color: var(--c-green); font-size: 14px; font-weight: 700; line-height: 1; }
.uf-fr-pl span { line-height: 1.6; }
.uf-fr > .uf-btn { margin-top: 16px; }

/* くわしく（命式と読みの元）：線で区切った行の開け閉め＋命式の表 */
.uf-det { border-top: 1px solid var(--line); }
.uf-det:last-of-type { border-bottom: 1px solid var(--line); }
.uf-sec > .uf-det + .uf-det { margin-top: 0; }
.uf-det-in { padding: 8px 0 24px; }
.uf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.uf-ms { width: 100%; min-width: 320px; border-collapse: collapse; table-layout: fixed; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.uf-ms th, .uf-ms td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.uf-ms thead th { background: var(--surface-2); font-weight: 700; }
.uf-ms thead th:first-child { width: 76px; }
.uf-ms tbody th { padding-left: 8px; text-align: left; font-weight: 700; }
.uf-ms tr:last-child th, .uf-ms tr:last-child td { border-bottom: 0; }
.uf-gz { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.4; }

/* ボタン（主＝緑の地／ほか＝1pxの枠）。角丸8px */
.uf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.uf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 24px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; line-height: 1.5; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.uf-btn-2 { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.uf-btn[hidden] { display: none; }
.uf-go:focus-visible, .uf-btn:focus-visible, .uf-add:focus-visible, .uf-del:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) {
  .uf-go:hover, .uf-btn:not(.uf-btn-2):hover { background: var(--accent-hover); }
  .uf-btn-2:hover, .uf-add:hover, .uf-del:hover { background: var(--surface-2); }
}
.uf-go:active, .uf-btn:not(.uf-btn-2):active { background: var(--accent-hover); transition: none; }
.uf-btn-2:active, .uf-add:active, .uf-del:active { background: var(--accent-press); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .uf-seg span, .uf-more > summary, .uf-fold > summary, .uf-det > summary, .uf-add, .uf-del, .uf-go, .uf-btn { transition: none; }
}

/* 印刷：入力とボタンを外し、開け閉めは開いて出す（JS が印刷の前に開く）。
   「〇〇の1枚を印刷する」の時は、JS がその枠以外に .uf-ph を付けて外す（画面の見た目は変えない） */
@media print {
  .uf-form, .uf-actions, .uf-btn, #uf-app noscript { display: none !important; }
  .uf-ph { display: none !important; }
  .uf-fold > summary::after, .uf-det > summary::after { display: none; }
  .uf-core, .uf-box, .uf-rl, .uf-fam > li, .uf-pls > li, .uf-daily > li, .uf-ph > li, .uf-scenes > li, .uf-sib > li, .tl li, .uf-ms { break-inside: avoid; }
  .uf-fr { break-inside: avoid; break-before: page; }
  html.uf-pr1 .uf-fr { break-before: auto; border: 0; padding: 0; }
  .uf-nm::before, .uf-p-t::before, .uf-tag, .uf-avoid-k, .uf-ph-k, .uf-rest, .uf-rest::before, .uf-now, .uf-fr-pl b, .uf-seg span, .uf-box, .uf-key {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}