/* ==========================================================================
   STATUS: DRAFT(代表確認前)
   Univo｜パッケージのページの共通の型（部品の見た目）（2026/10/08 site-unify-261008 項目2）
   読む順：univo-tokens.css → univo-site.css → このファイル。値は var() だけ（色コード・書体名を書かない）。
   HTML は lp_src/package/template.mjs が content/packages/<id>.json から書き出す（ページの中を手で直さない）。
   部品：表紙（.pkg-hero）・ページ内の目次（.pkg-toc）・番号つきのカード（.pkg-cards）・章の一覧（.pkg-list）・
   画面例（.pkg-shots）・領域の一覧（.pkg-domains）・項目の表（.pkg-spec）・料金（.pkg-price）・
   流れと期間（.pkg-steps）・まとめの札（.pkg-summary）・日付の目安（.pkg-calc）・よくある質問（.pkg-faq）・申込み（.pkg-contact）
   ========================================================================== */

/* ---- 表紙 ---- */
.pkg-hero { background: var(--surface); border-bottom: var(--stroke) solid var(--line); }
.pkg-hero-in { max-width: var(--max-w); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-8); }
@media (min-width: 64em) { .pkg-hero-in { padding-top: var(--space-8); padding-bottom: var(--space-12); } }
.pkg-crumbs ol { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: var(--fs-note); color: var(--muted); }
.pkg-crumbs li + li::before { content: "／"; margin-right: var(--space-2); color: var(--muted); }
.pkg-crumbs a { color: var(--ink); }
.pkg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 64em) { .pkg-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-8); align-items: start; } }
.pkg-name { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-heading); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--ink); font-feature-settings: "palt"; }
.pkg-tagline { margin-top: var(--space-4); font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-heading-s); line-height: var(--lh-head); color: var(--ink); font-feature-settings: "palt"; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.pkg-lead { margin-top: var(--space-4); max-width: var(--site-measure); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink); text-wrap: pretty; }
.pkg-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pkg-hero-note { margin-top: var(--space-4); max-width: var(--site-measure); font-size: var(--fs-note); color: var(--muted); }
.pkg-facts { margin: 0; border-top: var(--stroke-accent) solid var(--brand); }
.pkg-facts > div { padding: var(--space-4) 0; border-bottom: var(--stroke) solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.pkg-facts dt { font-size: var(--fs-note); color: var(--muted); }
.pkg-facts dd { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head); color: var(--ink); }
.pkg-facts .pkg-fact-note { display: block; margin-top: var(--space-1); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-note); line-height: var(--lh-body); color: var(--muted); }

/* ---- ページ内の目次（表紙の下）。広い画面では1行、狭い画面では折り返す ---- */
.pkg-toc { background: var(--surface); border-bottom: var(--stroke) solid var(--line); }
.pkg-toc-in { max-width: var(--max-w); margin: 0 auto; padding: var(--space-2) var(--gutter); }
.pkg-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.pkg-toc a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--site-tap); font-size: var(--fs-note); color: var(--ink); text-decoration: none; }
.pkg-toc a:hover { color: var(--brand-deep); text-decoration: underline; }
.pkg-toc-no { font-family: var(--font-mono); font-size: var(--fs-index); color: var(--brand-deep); }

/* ---- 章の頭 ---- */
.pkg-sec .site-sec-head .site-lead { margin-top: var(--space-4); }
.pkg-sec .site-h2 { max-width: 24em; }

/* ---- 文 ---- */
.pkg-text { max-width: var(--site-measure); }
.pkg-text p + p { margin-top: var(--space-3); }
.pkg-notes { margin-top: var(--space-6); max-width: var(--max-w-text); }
.pkg-notes p { font-size: var(--fs-note); line-height: var(--lh-body); color: var(--muted); }
.pkg-notes p + p { margin-top: var(--space-2); }
.pkg-block + .pkg-block { margin-top: var(--space-8); }
.pkg-block-h { margin: 0 0 var(--space-4); font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-heading-s); line-height: var(--lh-head); color: var(--ink); }

/* ---- 番号つきのカード ---- */
.pkg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 48em) { .pkg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pkg-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pkg-card { background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius); padding: var(--space-6) var(--space-4); }
@media (min-width: 40em) { .pkg-card { padding: var(--space-6); } }
.pkg-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.pkg-card-no { font-family: var(--font-mono); font-size: var(--fs-index); letter-spacing: var(--ls-label); color: var(--brand-deep); }
.pkg-card-h { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head); color: var(--ink); }
.pkg-card-v { margin-top: var(--space-1); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-lead); color: var(--ink); }
.pkg-card p { margin-top: var(--space-2); }
.pkg-card p + p { margin-top: var(--space-2); }
.pkg-card .pkg-card-note { font-size: var(--fs-note); color: var(--muted); }

/* ---- 章の一覧（番号つき・短い名前） ---- */
.pkg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--stroke) solid var(--line); }
@media (min-width: 48em) { .pkg-list.is-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
.pkg-list li { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--stroke) solid var(--line); }
.pkg-list-no { font-family: var(--font-mono); font-size: var(--fs-index); letter-spacing: var(--ls-label); color: var(--brand-deep); }
.pkg-list-k { font-weight: 600; color: var(--ink); }
.pkg-list-v { display: block; font-size: var(--fs-note); color: var(--muted); }
/* 一覧を囲む枠（届くもの＝JSON の list の frame: true・2026/10/09 site-motion-261009 項目3）。最終の姿＝--line の縁（閉合＝7つの章で1つの画面）。
   動くときだけ univo-site.js が同じ形の SVG を重ねて stroke-dashoffset で閉じ、閉じたら外す（その間だけ縁を透明に） */
.pkg-frame { position: relative; padding: var(--space-2) var(--space-4); border: var(--stroke) solid var(--line); border-radius: var(--radius); }
.pkg-frame > .pkg-list { border-top: 0; }
.pkg-frame > .pkg-list > li:last-child { border-bottom: 0; }
@media (min-width: 48em) { .pkg-frame > .pkg-list.is-cols > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
html.site-motion .pkg-frame.is-drawing { border-color: transparent; }

/* ---- 画面例 ---- */
.pkg-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 64em) { .pkg-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pkg-shot { margin: 0; }
.pkg-shot figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.pkg-shot-title { font-weight: 600; color: var(--ink); }
.pkg-shot img { display: block; width: 100%; height: auto; border: var(--stroke) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pkg-shot-note { margin-top: var(--space-2); font-size: var(--fs-note); color: var(--muted); }

/* ---- 領域の一覧（M01〜M12） ---- */
.pkg-domains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--stroke) solid var(--line); }
@media (min-width: 48em) { .pkg-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
@media (min-width: 80em) { .pkg-domains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pkg-domains li { display: grid; grid-template-columns: 3.25em minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--stroke) solid var(--line); }
.pkg-domain-code { font-family: var(--font-mono); font-size: var(--fs-index); letter-spacing: 0.04em; color: var(--brand-deep); }
.pkg-domain-seg { white-space: nowrap; } /* 領域の名前は「／」までの塊の間でだけ折り返す（型が塊に分ける） */

/* ---- 項目の表（見出し：中身） ---- */
.pkg-spec { margin: 0; border-top: var(--stroke) solid var(--line); max-width: var(--max-w-text); }
.pkg-spec > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-3) 0; border-bottom: var(--stroke) solid var(--line); }
@media (min-width: 48em) { .pkg-spec > div { grid-template-columns: 14em minmax(0, 1fr); gap: var(--space-6); } }
.pkg-spec dt { font-weight: 600; color: var(--ink); }
.pkg-spec dd { margin: 0; }

/* ---- 料金 ---- */
.pkg-price { display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-4); background: var(--surface); border: var(--stroke) solid var(--line); border-top: var(--stroke-accent) solid var(--brand); border-radius: var(--radius-sm); max-width: 40rem; }
@media (min-width: 40em) { .pkg-price { padding: var(--space-6); } }
.pkg-price-label { font-size: var(--fs-note); color: var(--muted); }
.pkg-price-amount { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-heading); line-height: var(--lh-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.pkg-price-amount small { font-size: var(--fs-lead); font-weight: 400; }
.pkg-price-when { font-size: var(--fs-body); color: var(--ink); }

/* ---- 流れと期間（番号つきの段・段の間に期間の札） ---- */
.pkg-steps { list-style: none; margin: 0; padding: 0; max-width: var(--max-w-text); }
.pkg-step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--space-4); }
.pkg-step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-index); color: var(--ink);
}
.pkg-step-body { padding: var(--space-2) 0 var(--space-4); }
.pkg-step-h { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head); color: var(--ink); }
.pkg-step-sub { display: block; margin-top: var(--space-1); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-note); color: var(--muted); }
.pkg-step-body p { margin-top: var(--space-2); max-width: var(--site-measure); }
/* 段と段の間（期間）：縦の線と札（段の li の中の最後の行） */
.pkg-gap { grid-column: 1 / -1; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--space-4); align-items: center; margin-bottom: var(--space-2); }
.pkg-gap::before { content: ""; justify-self: center; width: var(--stroke-accent); height: 100%; min-height: var(--space-8); background: var(--brand); }
.pkg-gap-tag {
  justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2);
  padding: var(--space-1) var(--space-3); border: var(--stroke) solid var(--brand-deep); border-radius: var(--radius-sm); background: var(--surface);
  font-size: var(--fs-note); line-height: var(--lh-head); color: var(--ink);
}
.pkg-gap-tag b { font-weight: 600; color: var(--brand-deep); }
.pkg-gap-tag small { font-size: var(--fs-note); color: var(--muted); }
.pkg-summary { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pkg-summary li { padding: var(--space-2) var(--space-4); border: var(--stroke) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pkg-summary b { color: var(--ink); font-weight: 600; }

/* ---- 日付の目安（JS が動くときだけ出す） ---- */
.pkg-calc { margin-top: var(--space-8); padding: var(--space-6) var(--space-4); background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius); max-width: var(--max-w-text); }
@media (min-width: 40em) { .pkg-calc { padding: var(--space-6); } }
.pkg-calc-h { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head); color: var(--ink); }
.pkg-calc-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.pkg-calc-form label { display: grid; gap: var(--space-1); font-size: var(--fs-note); color: var(--ink); }
.pkg-calc-form input {
  min-height: var(--site-tap); padding: 0 var(--space-3); border: var(--stroke) solid var(--muted); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); font-variant-numeric: tabular-nums;
}
.pkg-calc-out { margin: var(--space-4) 0 0; border-top: var(--stroke) solid var(--line); }
.pkg-calc-out > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-6); padding: var(--space-2) 0; border-bottom: var(--stroke) solid var(--line); }
@media (min-width: 40em) { .pkg-calc-out > div { grid-template-columns: 16em minmax(0, 1fr); } }
.pkg-calc-out dt { color: var(--ink); }
.pkg-calc-out dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pkg-calc-out dd small { display: block; font-weight: 400; font-size: var(--fs-note); color: var(--muted); }
.pkg-calc-note { margin-top: var(--space-3); font-size: var(--fs-note); color: var(--muted); }

/* ---- よくある質問（details＝JS 不要） ---- */
.pkg-faq { border-top: var(--stroke) solid var(--line); max-width: var(--max-w-text); }
.pkg-faq details { border-bottom: var(--stroke) solid var(--line); }
.pkg-faq summary { display: flex; align-items: baseline; gap: var(--space-3); min-height: var(--site-tap); padding: var(--space-3) 0; cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.pkg-faq summary::-webkit-details-marker { display: none; }
.pkg-faq summary::after { content: "＋"; margin-left: auto; color: var(--brand-deep); }
.pkg-faq details[open] summary::after { content: "－"; }
.pkg-faq-a { padding: 0 0 var(--space-4); max-width: var(--site-measure); }

/* ---- 申込み ---- */
.pkg-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 64em) { .pkg-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: start; } }
.pkg-contact-form { min-width: 0; }
.pkg-contact-info { margin-top: var(--space-6); display: grid; gap: var(--space-1); }
.pkg-contact-info dl { margin: 0; display: grid; gap: var(--space-1); }
.pkg-contact-info dl > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-3); }
.pkg-contact-info dt { color: var(--muted); }
.pkg-contact-info dd { margin: 0; }
#contact-form-wrap { color-scheme: light; color: var(--ink); }

@media print {
  .pkg-toc, .pkg-actions, .pkg-calc, .pkg-contact-form { display: none !important; }
  .pkg-hero, .pkg-card, .pkg-price { background: none; }
}