/*
 * 出張中のガラスカード (「東京出張中」など) — 2026-10-18 オーナー指示で追加
 *
 * 下の「元のコード」は、オーナーから渡された
 *   Claude_Code用_左プレビュー完全準拠_埋め込みコード.html
 * の <style> をそのまま写した物。色・角丸・高さ 86px・文字 38/21px・ピン 28×34px・ガラスの背景・
 * 4.5 秒で一周する光・縁のぼかしは変えない (変更禁止の指示)。画像や動画には変えず、CSS で動かす。
 * 横幅だけは、2026-10-18 のオーナー指示 (「文字に対して横幅が広い。左右の余白を上下の余白と同じに狭めて」) で、
 * 元の 310px 固定から「中身の幅 + 左右 24px」に変えた (一番下の「横幅」の行。元のコードの行は書き換えていない)。
 * 色は A (アイスホワイト・2026-10-18 オーナー指示で B のピュアホワイトから変更)。色は inc/travel-badge.php の 'tone' で決める ('ice'＝アイスホワイト・''＝ピュアホワイト)。
 * 変えてよいのは、一番下の「このサイトでの置き場所」の横幅・拡大率 (--badge-scale)・位置だけ。
 */

/* ===== 元のコード ここから ===== */

@property --travel-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes travel-spin{to{--travel-angle:360deg}}
.travel-glass-ui .glass-pill{--beam:rgba(255,255,255,1);--dim:rgba(255,255,255,.12);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;width:310px;height:86px;border-radius:31px;background:linear-gradient(160deg,#ffffff1c,#ffffff09 55%,#ffffff16);box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 3px #ffffff35,0 7px 16px #211a1622;border:1px solid #ffffff70;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.travel-glass-ui .glass-pill.ice{--beam:#e4f6ff;--dim:rgba(191,224,248,.17)}
.travel-glass-ui .glass-pill::before,.travel-glass-ui .glass-pill::after{content:'';position:absolute;pointer-events:none;inset:-1px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--travel-angle),var(--dim) 0deg,transparent 80deg,transparent 272deg,var(--dim) 297deg,var(--beam) 323deg,#fff 335deg,var(--dim) 354deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:travel-spin 4.5s linear infinite}
.travel-glass-ui .glass-pill::after{inset:-5px;padding:8px;filter:blur(6px);opacity:.8;z-index:-1}
.travel-glass-ui .glass-pill svg{width:28px;height:34px;flex:none;fill:white;filter:drop-shadow(0 1px 2px #0003)}
.travel-glass-ui .glass-text{display:flex;align-items:baseline;gap:2px;white-space:nowrap;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;font-weight:750;letter-spacing:-.035em;text-shadow:0 1px 3px #17131135}
.travel-glass-ui .glass-city{font-size:38px;line-height:1}
.travel-glass-ui .glass-status{font-size:21px;line-height:1}
.travel-glass-ui.is-paused .glass-pill::before,.travel-glass-ui.is-paused .glass-pill::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.travel-glass-ui .glass-pill::before,.travel-glass-ui .glass-pill::after{animation:none}}

/* Full-size reference badge is 310×86px; scale both dimensions uniformly for panel photos.
   --badge-scale: 0.52 gives 161.2×44.72px.
   IMPORTANT: neither wrapper nor its ancestors should clip outer glow. */
.travel-glass-ui.travel-glass-embed{--badge-scale:.52;position:relative;display:inline-block;width:calc(310px * var(--badge-scale));height:calc(86px * var(--badge-scale));overflow:visible;vertical-align:top;isolation:isolate}
.travel-glass-embed>.glass-pill{position:absolute;left:0;top:0;transform:scale(var(--badge-scale));transform-origin:0 0}
/* ===== 元のコード ここまで ===== */

/* ===== このサイトでの置き場所 (横幅・拡大率・位置だけ) =====
   2026-10-18 オーナー指示で、写真の左上から「名前の真上」「写真の番号 (1/9) の真上」へ下ろした。
   写真の枠 (.cast-card) は写真の外を切り取る作り (overflow:hidden)。光とぼかしはカードの外へ約 17px (拡大率 1 の時)
   広がるので、拡大後の光 (17px × 拡大率) が写真の枠の内側に収まる位置にしてある。写真そのものは触らない */
/* 横幅: 中身 (ピン + 「東京」 + 「出張中」) の幅に、左右 24px ずつ足した幅にする (2026-10-18 オーナー指示)。
   上下は、高さ 86px の中で文字とピンの上下に約 26px (縁 1px を含む) あく。左右も縁 1px + 24px + 文字の中の余白で約 26px になり、上下とそろう。
   「東京」なら 310px → 約 228px (本番で実測)。地域の文字が変わっても、文字の幅に合わせて伸び縮みする */
.travel-glass-ui .glass-pill{width:max-content;padding:0 24px}
/* 影を消す (2026-10-18 オーナー指示「ドロップシャドウを消して」)。囲みの下に落ちる影・文字の影・ピンの影の 3 つ。
   囲みの縁の内側の光 (inset の 2 つ) は影ではないので残す */
.travel-glass-ui .glass-pill{box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 3px #ffffff35}
.travel-glass-ui .glass-text{text-shadow:none}
.travel-glass-ui .glass-pill svg{filter:none}
.cast-card > .travel-glass-embed{position:absolute;top:12px;left:3px;bottom:auto;z-index:5;pointer-events:none}
/* 置き場所は写真の左上 (2026-10-18 オーナー指示「やはり一覧も個人ページも左上に」。名前・「1/9」の真上に置いた版 PR #135 から戻した)。
   キャスト一覧のカード (スマホで横 195px 前後): 拡大率 0.357 (0.21 の 1.7 倍・PR #136)。「東京」の文字は約 13.6px。
   横は、囲みの左の縁を写真の左端から 3px にする (オーナー指示「限界まで左に寄せて、3px 右に戻す」)。光は左側が少し写真の外で切れる */
.cast-card[data-therapist-id] > .travel-glass-embed{--badge-scale:.357}
/* キャスト個人ページの大きい写真 (スマホで横 390px 前後): 0.52 の 1.8 倍 = 0.936 にした後、「でかすぎる」で 0.7 倍 = 0.655 (2026-10-18 オーナー指示)。
   写真の上端 44px ほどは、画面の上に固定された「CANDY KOBE」のロゴの帯 (.fixed-header-layer・高さ 68px) の下に隠れる。
   ロゴと重ならないよう、写真の上端から 56px 下げる (PR #134 で本番実測) */
.hero__main > .travel-glass-embed{--badge-scale:.655;top:56px;left:14px}
/* 同じカードに「リアルタイム更新」の点滅の表示 (assets/css/realtime.css・左上 8px) が付いた時は、ガラスカードの下へずらして重ならないようにする */
.cast-card:has(> .travel-glass-embed) > .cast-card__live{top:calc(12px + 88px * .357 + 8px)}