/* xconcierge-service-v6.css — このページ独自の v6 の層（決裁 I-29）。site-v6.css（下層共通の v6）の後に読む。?design=v4 では読まない。
   色は site-v6.css の役割の名前だけを使う（直値は :root の宣言だけ・check_colors.py）。文字の大きさは 11 段の --t-* だけ（check_type.py）。 */
/* =====================================================================================
   X Concierge サービス詳細 — 型「仕様書・トレース」（参考: Apple の技術仕様ページの整列と罫、jitter.video の図の明快さ）
   親の X Concierge（建物の断面で見せる）に対して、ここは細部を読むページ。明るい面と罫だけで、落ち着いた仕様書として見せる。
     ・ページ全体を 3 等分の格子に揃える。左の 1 列＝項目（グループ名・セクションの見出し）、右の 2 列＝中身（表・トレース）
     ・「項目名と値」の型を一貫させる: 項目名は small・--text-3、値は body・--text-1。表の頭は --text-1 の罫、行の間は --line
     ・実行区分のバッジは色の役割で 3 通り: 自動＝--ok の輪郭、承認＝--text-1 の塗り（人が裁可する＝このページのいちばんの区別）、委譲＝灰の輪郭。
       赤は CV と「いまここ」の印だけ（I-19）なので、v4 の赤い「承認」は黒の塗りに替える
     ・トレースは縦の 1 本の線に、時刻 → 手順 01〜04 → 監査チェーンの記録（四角の終点）を並べる
   HTML に足したのは v6 用の hidden 要素だけ（ヒーローの親子のピル、2 つのセクションの日本語のピル）。v4 の HTML は変えていない
   ===================================================================================== */

/* ---------- 格子（3 等分。左の 1 列が項目、右の 2 列が中身） ---------- */
:root main{--xs-g:clamp(24px,3.4vw,48px); --xs-stick:96px}   /* 列の間／張り付く位置（固定ヘッダー 59px の下） */
:root :where(.sub-hero,.sub-hero+section,#trace,#physical,.sub-sec:last-child)>.wrap{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--xs-g)}
:root :where(.sub-hero,.sub-hero+section,#trace,#physical,.sub-sec:last-child)>.wrap>*{grid-column:1/-1; min-width:0}   /* :where で弱く（下の個別の置き場所が勝つ） */

/* ---------- ヒーロー: 親（X Concierge）とのつながりと「サービス詳細」 ---------- */
:root .sub-hero .crumb{margin-bottom:28px}
:root .sub-hero .idx{display:none}                          /* [ X CONCIERGE — SERVICE ] は v6 では親子のピルに（飾りの英字ラベル。I-8 と同じ） */
:root .v6-xs-pill[hidden]{display:inline-flex}
:root .v6-xs-pill{justify-self:start; align-items:stretch; margin:0 0 28px; overflow:hidden;
  border:1px solid var(--glass-line); border-radius:8px; background:var(--fill); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-family:var(--disp); font-weight:800; font-size:var(--t-h6); line-height:1.5; letter-spacing:.02em; font-feature-settings:"palt" 1}
:root .v6-xs-pill>*{display:flex; align-items:center; padding:5px 14px 6px}
:root .v6-xs-parent{color:var(--text-2); transition:background .2s,color .2s}      /* 親のページへ戻れる（パンくずと同じ行き先） */
:root .v6-xs-parent:hover{background:var(--fill-hover); color:var(--text-1)}
@media(hover:hover){:root .v6-xs-parent:hover{color:var(--brand-text-strong)}}   /* I-54（ガラス） */
:root .v6-xs-parent:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
:root .v6-xs-here{border-left:1px solid var(--glass-line); color:var(--text-1)}
:root .sub-hero .sub-h1{margin-top:0}

/* 実行区分の凡例＝仕様の 1 行（左の列に項目名、右の 2 列にバッジと説明） */
:root .sub-hero .leg{display:grid; grid-template-columns:calc((100% - 2 * var(--xs-g)) / 3 + var(--xs-g)) max-content minmax(0,1fr);
  align-items:baseline; gap:14px 0; margin-top:clamp(48px,5vw,72px); padding-top:20px; border-top:1px solid var(--text-1);
  font-size:var(--t-body); line-height:1.6; color:var(--text-1)}
:root .sub-hero .leg>span:first-child{grid-row:1/span 3; font-size:var(--t-small); font-weight:700; letter-spacing:.04em; color:var(--text-3)}
:root .sub-hero .leg .exb{justify-self:start; margin-right:20px}
:root .sub-hero .leg>span:not(:first-child){word-break:auto-phrase; text-wrap:pretty}

/* ---------- 実行区分のバッジ（凡例・一覧・トレースで同じ形） ---------- */
:root .exb{display:inline-block; font-family:var(--font); font-weight:700; font-size:var(--t-caption); line-height:1.5; letter-spacing:.04em;
  padding:2px 8px; border:1px solid var(--line-strong); border-radius:6px; background:transparent; color:var(--text-1); white-space:nowrap}
:root .exb.a{color:var(--ok); border-color:var(--ok-line)}                                  /* 自動 */
:root .exb.b{color:var(--text-inverse); border-color:var(--text-1); background:var(--text-1)} /* 承認（人が裁可する） */
:root .exb.c{color:var(--text-2); border-color:var(--line-strong)}                          /* 委譲（有人へ引き継ぐ） */

/* ---------- AI の一覧: グループごとに仕様の表（左に項目、右に 名前｜実行区分｜説明 の行） ---------- */
:root .grp{grid-column:1/-1; display:grid; grid-template-columns:subgrid; margin-top:clamp(56px,6vw,96px); border-top:1px solid var(--text-1)}
:root .grp .gh{grid-column:1; align-self:start; position:sticky; top:var(--xs-stick);
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:6px; padding:22px 0 0; border-bottom:0}
:root .grp .gh b{font-family:var(--disp); font-weight:800; font-size:var(--t-h3); line-height:1.35; letter-spacing:0; color:var(--text-1); font-feature-settings:"palt" 1}
:root .grp .gh span{font-family:var(--font); font-weight:700; font-size:var(--t-small); line-height:1.5; letter-spacing:.06em; color:var(--text-3)}   /* GROUP 01（項目名） */
:root .ai-grid{grid-column:2/-1; display:block; margin-top:0}
:root .ai{display:grid; grid-template-columns:minmax(0,15.5em) 7em minmax(0,1fr); grid-template-areas:"nm ex ds"; column-gap:24px; align-items:baseline;
  padding:22px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent}
:root .ai:first-child{border-top:0}
:root .ai .hd2{display:contents}
:root .ai .nm{grid-area:nm; font-family:var(--disp); font-weight:800; font-size:var(--t-body); line-height:1.6; letter-spacing:.02em; color:var(--text-1); font-feature-settings:"palt" 1; word-break:auto-phrase;
  text-wrap:balance}   /* 2 行に折れる名前（901〜1180px）は行の長さをそろえる。そろえないと「シアター・カラオケルーム予約／AI」「エスカレーション・有人委譲／AI」と AI だけが 2 行目に残る */
/* ↑ 1181px 以上の列: 名前 15.5em（248px）｜実行区分 7em（112px）｜説明。名前の列は 15em（240px）だと最も長い「カーシェア・シェアサイクル案内AI」（238.7px）との差が
   1px ほどしかなく、分割フォントの読み込みの順で「水漏れ・停電・鍵の／夜間緊急対応」が 2 行に折れた（I-31 の撮り直しで見つかった）。
   実行区分の列はいちばん長いバッジ「自動（決済まで）」が 108.5px なので 7.5em→7em に詰め、説明の列の始まり（408px）と幅は前のまま＝最も長い説明（323px）も 1 行 */
:root .ai .exb{grid-area:ex; justify-self:start}
:root .ai .ds2{grid-area:ds; font-size:var(--t-small); line-height:1.7; letter-spacing:.02em; color:var(--text-2); word-break:auto-phrase; text-wrap:pretty}
:root .sub-hero+section .form-note{grid-column:2/-1; margin-bottom:clamp(40px,4vw,64px)}

/* ---------- トレース: 縦の 1 本の線に 時刻 → 手順 → 監査の記録 ---------- */
:root #trace{border-top:1px solid var(--line)}
:root #trace>.wrap{grid-template-rows:auto auto auto 1fr}   /* 左の列（ピル・見出し・リード）の間は詰め、右のトレースの高さの余りは最後の行へ */
:root :is(#trace,#physical) .idx{display:none}              /* TRANSPARENCY・PHYSICAL LAYER は v6 では日本語のピルに（I-8） */
:root .v6-xs-tag[hidden]{display:flex}
:root .v6-xs-tag{justify-self:start; width:max-content; max-width:100%; margin:0 0 24px; padding:5px 14px 6px; box-sizing:border-box;
  border:1px solid var(--glass-line); border-radius:8px; background:var(--fill); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-family:var(--disp); font-weight:800; font-size:var(--t-h6); line-height:1.5; letter-spacing:.02em; color:var(--text-1); font-feature-settings:"palt" 1}
:root .v6-xs-tag+.ed-title{margin-top:0 !important}         /* ページの style 属性の margin-top:12px より、ピルの下 0 で揃える（site-v6 の .idx+.ed-title と同じ） */
:root #trace>.wrap>*{grid-column:1}
:root #trace .sub-lead{margin-top:24px}
:root #trace .trace{--tx:52px; --tn:28px; counter-reset:xs-step; grid-column:2/-1; grid-row:1/-1; align-self:start; position:relative;
  max-width:none; margin:0; padding:clamp(28px,3vw,40px) clamp(24px,3.4vw,48px) clamp(32px,3.4vw,44px);
  border:1px solid var(--line); border-radius:16px; background:var(--surface-1); color:var(--text-1)}
/* 頭: 時刻を手順の番号の列に、「応答トレース — 最新の応答」を中身の列に。線はここの丸から始まる */
:root #trace .trace .th{position:relative; display:flex; flex-direction:row-reverse; justify-content:flex-end; flex-wrap:nowrap; align-items:baseline; gap:0;
  padding:0 0 32px; font-family:var(--font); font-size:var(--t-small); font-weight:700; line-height:1.6; letter-spacing:.04em; color:var(--text-1)}
:root #trace .trace .th span:last-child{flex:none; width:calc(var(--tx) + var(--tn)); font-variant-numeric:tabular-nums}
:root #trace .trace .th::before{content:""; position:absolute; left:var(--tx); top:.8em; bottom:0; width:1px; margin-left:-.5px; background:var(--line-strong)}
:root #trace .trace .th::after{content:""; position:absolute; left:var(--tx); top:.8em; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:var(--text-1)}
/* 手順: 番号（01〜04）｜線の上の丸｜項目名（small・--text-3）と値（body・--text-1） */
:root #trace .trace .rw{counter-increment:xs-step; position:relative; display:block; padding:0 0 28px calc(var(--tx) + var(--tn)); border-bottom:0; font-size:var(--t-body)}
:root #trace .trace .rw::before{content:counter(xs-step,decimal-leading-zero); position:absolute; left:0; top:0;
  font-size:var(--t-small); font-weight:700; line-height:1.6; letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--text-3)}
:root #trace .trace .rw::after{content:""; position:absolute; left:var(--tx); top:0; bottom:0; width:1px; margin-left:-.5px; background:var(--line-strong)}
:root #trace .trace .rw .k{display:block; width:auto; font-family:var(--font); font-size:var(--t-small); font-weight:700; line-height:1.6; letter-spacing:.04em; color:var(--text-3)}
:root #trace .trace .rw .k::before{content:""; position:absolute; z-index:1; left:var(--tx); top:.8em; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; box-sizing:border-box;
  border:1.5px solid var(--text-1); border-radius:50%; background:var(--surface-1)}
:root #trace .trace .rw .v{display:block; margin-top:4px; font-size:var(--t-body); line-height:1.6; letter-spacing:.02em; color:var(--text-1);
  word-break:keep-all; overflow-wrap:anywhere}                /* 「共用施設予約 → ゲストルーム予約AI」は矢印の前後で折る */
/* 実行区分の手順＝「誰が承認したか」の答え。一覧のバッジと同じ形で、線の上の丸も同じ色 */
:root #trace .trace .rw:nth-child(3) .k::before{border-color:var(--ok); background:var(--ok)}
:root #trace .trace .rw:nth-child(3) .v{display:inline-block; margin-top:6px; padding:2px 8px; border:1px solid var(--ok-line); border-radius:6px;
  font-weight:700; font-size:var(--t-caption); line-height:1.5; letter-spacing:.04em; color:var(--ok)}
/* 終点: SHA-256 監査チェーンへの記録（四角の印。v4 のグラデーションの短線は I-19 の外なので単色に） */
:root #trace .trace .ft{position:relative; display:block; margin:0; padding:0 0 0 calc(var(--tx) + var(--tn));
  font-family:var(--font); font-size:var(--t-small); font-weight:700; line-height:1.6; letter-spacing:.02em; color:var(--text-1); word-break:keep-all; overflow-wrap:anywhere}
:root #trace .trace .ft::before{z-index:1; position:absolute; left:var(--tx); top:.8em; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:2px; background:var(--text-1)}
:root #trace .trace .ft::after{content:""; position:absolute; left:var(--tx); top:0; height:.8em; width:1px; margin-left:-.5px; background:var(--line-strong)}
/* スクロールでトレースをたどる: 各手順が画面の下から入ってくるあいだに、丸が現れ、線が上から下へ伸びる（CSS のスクロール連動だけ。JS は足さない）。
   始まりは「手順の上端が画面の下端に来たとき」（cover 0%）で、それより前は動きを当てない（fill は forwards だけ）。
   なので画面の外にある間・全体のスクリーンショット・対応しないブラウザ・動きを減らす設定では、いつも完成形が見える */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    :root #trace .trace :is(.th,.rw,.ft){view-timeline:--xs-step block}
    :root #trace .trace .th::before,:root #trace .trace .rw::after,:root #trace .trace .ft::after{
      transform-origin:50% 0; animation:xs-draw linear forwards; animation-timeline:--xs-step; animation-range:cover 0% cover 32%}
    :root #trace .trace .th::after,:root #trace .trace .rw .k::before,:root #trace .trace .ft::before{
      animation:xs-node linear forwards; animation-timeline:--xs-step; animation-range:cover 0% cover 32%}
    :root #trace .trace .rw .v{animation:xs-fade linear forwards; animation-timeline:--xs-step; animation-range:cover 0% cover 32%}
  }
}
@keyframes xs-draw{0%,35%{transform:scaleY(0)} 100%{transform:scaleY(1)}}
@keyframes xs-node{0%,10%{opacity:0; transform:scale(.3)} 40%,100%{opacity:1; transform:none}}
@keyframes xs-fade{0%,15%{opacity:.2} 60%,100%{opacity:1}}

/* ---------- 物理レイヤー: 設備のカード 3 枚（格子の 3 列に揃える。頭の罫＋項目名の行＋名前 h4＋説明 body） ---------- */
:root #physical .mech-grid{grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px var(--xs-g); margin-top:clamp(40px,4vw,64px); counter-reset:xs-mech}
:root #physical .mech{counter-increment:xs-mech; display:flex; flex-direction:column; padding:0; border:0; border-top:1px solid var(--text-1); border-radius:0; background:transparent; box-shadow:none}
:root #physical .mech .mk2{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 24px; padding:14px 0; border-bottom:1px solid var(--line);
  background:none; -webkit-background-clip:border-box; background-clip:border-box;                 /* v4 のグラデーションの文字は I-19 の外なので単色に */
  font-family:var(--font); font-weight:700; font-size:var(--t-small); line-height:1.6; letter-spacing:.06em; color:var(--text-3)}
:root #physical .mech .mk2::after{content:counter(xs-mech,decimal-leading-zero); font-variant-numeric:tabular-nums; letter-spacing:.04em}
:root #physical .mech b{margin:0; font-family:var(--disp); font-weight:800; font-size:var(--t-h4); line-height:1.4; letter-spacing:0; color:var(--text-1); font-feature-settings:"palt" 1}
:root #physical .mech p{margin-top:12px; font-size:var(--t-body); line-height:1.75; letter-spacing:.02em; color:var(--text-2); text-wrap:pretty}

/* ---------- 結び: 見出しを左の 2 列、ボタンを右の列の下に ---------- */
:root .sub-sec:last-child .ed-title{grid-column:1/span 2; text-align:left; max-width:14em}
:root .sub-sec:last-child .sub-ctas{grid-column:3; align-self:end; justify-self:end; width:max-content; margin-top:0}

@media(max-width:1180px) and (min-width:901px){:root .ai{grid-template-columns:minmax(0,13em) 7.5em minmax(0,1fr); column-gap:20px}}   /* 右の 2 列が狭い間は名前の列を詰める */
/* ---------- 900px 以下: 1 列に（項目が上、中身が下） ---------- */
@media(max-width:900px){
  :root #trace>.wrap>*,:root #trace .trace,:root .sub-hero+section .form-note{grid-column:1/-1; grid-row:auto}
  :root .grp{display:block}
  :root .grp .gh{position:static; padding:20px 0 8px}
  :root #trace .trace{margin-top:40px}
  :root #physical .mech-grid{grid-template-columns:1fr}
  :root .sub-sec:last-child :is(.ed-title,.sub-ctas){grid-column:1/-1}
  :root .sub-sec:last-child .sub-ctas{justify-self:start; margin-top:32px}
}
@media(max-width:700px){
  :root .sub-hero .leg{grid-template-columns:max-content minmax(0,1fr); gap:12px 0}
  :root .sub-hero .leg>span:first-child{grid-row:auto; grid-column:1/-1; margin-bottom:4px}
  :root .ai{grid-template-columns:minmax(0,1fr) max-content; grid-template-areas:"nm ex" "ds ds"; column-gap:16px; row-gap:6px; padding:18px 0}
  :root #trace .trace{--tx:50px; --tn:20px; padding:28px 20px 32px}
  :root .sub-sec:last-child .sub-ctas{width:auto}
}