/* moala-ui 8237e03 / toC のレシピ transcription。
   部品の正本: design-system/08〜13、src/lib/presets/theme/recipes/。
   toC-tokens.json + semantic-tokens.ts + styleConstants.ts の実値を
   moala-ui-for-html.js の対象クラスと照合。未使用 variant は含めない。
   対応表（atoms / molecules は src/components/ 以下）:
| 要素 | moala-ui コンポーネント / variant | 出典（src/lib/presets/theme/recipes/ 以下） |
|---|---|---|
| 照会入力 / 操作 / 注意 / エラー | Input main、Button primary large、Note default、Snackbar danger | input.ts、button.ts、note.ts、snackbar.ts、atoms/Input/index.tsx |
| ヘッダー | Header background=white position=sticky、Typography h4 | header.ts、typography.ts |
| 幕ロゴ | Karaku MakuLogo、squareLogo size=medium、Path black | squareLogo.ts、path.ts、Karaku components/atoms/MakuLogo/index.tsx |
| 公演名 / 日時 / 帯 | Typography h4 / labelM / labelL-medium、ApplyArea alternative の配色 | typography.ts、applyArea.ts、styleConstants.ts |
| 入場の案内 | Snackbar info、InfoIcon m、Typography body2 | snackbar.ts、icon.ts、typography.ts、atoms/Snackbar/index.tsx |
| 枚数 / 確認見出し | Typography h3 / h4 | typography.ts |
| 入場リンク / 送信 | Button danger size=large as=withIcon full、C1のみ background=white、ApprovalIcon xs、Typography labelM-medium | button.ts、icon.ts、typography.ts、Karaku ButtonApplyArea/ButtonApplyModal |
| 区分 | Chip transparent size=xs、Typography labelS-medium | chip.ts、typography.ts、atoms/Chip/index.tsx、Karaku BundleTicket |
| 等級 / ゲート | ConfirmationNumberIcon outlined / ArchIcon、size=m variant=description、Typography labelL | icon.ts、path.ts、typography.ts、atoms/Icons |
| 行番号 / 座席・属性 / code | Typography labelM-bold / labelM / labelS（座席なしは labelM）、description 色 | typography.ts |
| 行の状態 | Chip default / successFilled size=xs、Typography labelS-medium | chip.ts、typography.ts、atoms/Chip/index.tsx |
| 行の区切り | Divider color=main、width=100%、height=1px | divider.ts、atoms/Divider/index.tsx |
| 使用済み | StampedBox root/stamp、Box sub1 radius=m、Image transparent 96×96、Typography body1 | stampedBox.ts、box.ts、atoms/Image/index.tsx、molecules/StampedBox/index.tsx |
| 入場直後のフラッシュ | ScreenFlash（durationSeconds=1.6） | screenFlash.ts、keyframes.ts、styleConstants.ts、atoms/ScreenFlash/index.tsx、Karaku tickets/_components/AppliedFlash |
| 確認カード / 説明 | Box cautionPale radius=l、ErrorIcon m caution、Typography body2-medium | box.ts、icon.ts、path.ts、typography.ts |
| 戻る | Button icon size=icon background=white radius=100、CloseIcon m description | button.ts、icon.ts、path.ts |
| エラーの丸 / 本文 | Box primaryPale radius=100、ConfirmationNumberIcon outlined xl black、Typography labelL-medium | box.ts、icon.ts、path.ts、typography.ts |
   画面の幅・配置・余白は Emba UI 仕様 C1/C1b/C2/C3/C4。
   SVG symbol の参照先にも塗りが伝わるよう、レシピの path セレクタを
   :is(path, use) に転記する。Button に active 固有のレシピは無い。
*/

/* 出典: Panda preflight 相当の要素初期化。fontFamilies.font-sans は Noto Sans JP
   （internal/webfont が同一オリジンで配信。読み込み前と失敗時は端末の日本語フォント）。 */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
body, h1, h2, h3, p, ol, hr { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: transparent; padding: 0; }
svg, img { display: block; }
.visitor { background: #fff; color: #000000d9; color-scheme: light; font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }

/* 出典: box.ts / .box; トークン: レシピ固定値 */
.box { width:100%; height:100%; }

/* 出典: button.ts / .button; トークン: レシピ固定値 */
.button { cursor:pointer; text-align:center; width:auto; display:inline-flex; position:relative; }

/* 出典: button.ts / .button:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]); トークン: レシピ固定値 */
.button:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]) { cursor:not-allowed; }

/* 出典: button.ts / .button:is(:focus-visible,[data-focus-visible]); トークン: borders-m */
.button:is(:focus-visible,[data-focus-visible]) { outline-style:solid; outline-width:2px; }

/* 出典: chip.ts / .chip; トークン: borders-s, font-sizes-12, font-weights-medium, line-heights-heading, radii-xs, spacing-space-12, spacing-space-4 */
.chip { font-size:.75rem; font-weight:500; line-height:125%; border-bottom-left-radius:2px; border-bottom-right-radius:2px; border-bottom-style:solid; border-bottom-width:1px; border-left-style:solid; border-left-width:1px; border-right-style:solid; border-right-width:1px; border-top-left-radius:2px; border-top-right-radius:2px; border-top-style:solid; border-top-width:1px; padding-bottom:.25rem; padding-left:.75rem; padding-right:.75rem; padding-top:.25rem; justify-content:center; align-items:center; width:-moz-fit-content; width:fit-content; display:flex; }

/* 出典: screenFlash.ts / .screen-flash; トークン: z-index-250, styleConstants.screenFlashSuccessBackgroundColor。
   Karaku の AppliedFlash は durationSeconds=1.6 を inline style で渡すが、レシピの既定値と同じなので CSS に固定する。 */
.screen-flash { opacity:0; pointer-events:none; z-index:250; background-color:#3ae07d; animation-name:screenFlash; animation-duration:1.6s; animation-timing-function:ease-in-out; animation-fill-mode:forwards; position:fixed; inset:0; }

/* 出典: keyframes.ts / screenFlash */
@keyframes screenFlash { 0% { opacity:0; } 10%, 40% { opacity:.55; } to { opacity:0; } }

/* 出典: snackbar.ts / .snackbar; トークン: borders-s, radii-s, spacing-space-12, spacing-space-16, spacing-space-8 */
.snackbar { align-items:center; column-gap:.5rem; justify-content:flex-start; row-gap:.5rem; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-bottom-style:solid; border-bottom-width:1px; border-left-style:solid; border-left-width:1px; border-right-style:solid; border-right-width:1px; border-top-left-radius:4px; border-top-right-radius:4px; border-top-style:solid; border-top-width:1px; padding-bottom:.75rem; padding-left:1rem; padding-right:1rem; padding-top:.75rem; width:100%; display:flex; }

/* 出典: typography.ts / .typography; トークン: レシピ固定値 */
.typography { white-space:pre-wrap; padding:1px; }

/* 出典: box.ts / .box--background_cautionPale; トークン: colors-background-color-background-caution-pale */
.box--background_cautionPale { background-color:#fcf7e1; }

/* 出典: box.ts / .box--background_primaryPale; トークン: colors-background-color-background-primary-pale */
.box--background_primaryPale { background-color:#ebecf6; }

/* 出典: box.ts / .box--background_sub1; トークン: colors-background-color-background-sub-sub1 */
.box--background_sub1 { background-color:#f5f5f5; }

/* 出典: box.ts / .box--borderRadius_100; トークン: radii-xxl */
.box--borderRadius_100 { border-bottom-left-radius:100px; border-bottom-right-radius:100px; border-top-left-radius:100px; border-top-right-radius:100px; }

/* 出典: box.ts / .box--borderRadius_l; トークン: radii-l */
.box--borderRadius_l { border-bottom-left-radius:16px; border-bottom-right-radius:16px; border-top-left-radius:16px; border-top-right-radius:16px; }

/* 出典: box.ts / .box--borderRadius_m; トークン: radii-m */
.box--borderRadius_m { border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-top-left-radius:8px; border-top-right-radius:8px; }

/* 出典: button.ts / .button--borderRadius_100; トークン: radii-xxl */
.button--borderRadius_100 { border-bottom-left-radius:100px; border-bottom-right-radius:100px; border-top-left-radius:100px; border-top-right-radius:100px; }

/* 出典: button.ts / .button--full_true; トークン: レシピ固定値 */
.button--full_true { width:100%; }

/* 出典: button.ts / .button--size_icon; トークン: レシピ固定値 */
.button--size_icon { flex-direction:column; align-items:flex-start; padding:.5rem; }

/* 出典: button.ts / .button--size_large; トークン: spacing-brand-button-inline */
.button--size_large { padding-bottom:.6875rem; padding-left:1.5rem; padding-right:1.5rem; justify-content:center; align-items:center; padding-top:.6875rem; }

/* 出典: button.ts / .button--size_large:has(svg); トークン: spacing-space-8 */
.button--size_large:has(svg) { column-gap:.5rem; row-gap:.5rem; padding:.6875rem 1.5rem .6875rem 1rem; }

/* 出典: button.ts / .button--variant_danger; トークン: borders-s, colors-border-color-border-danger, colors-brand-white-alpha-900, colors-text-color-text-danger, radii-brand-button */
.button--variant_danger { background-color:#ffffffd9; color:#b2272c; border-bottom-color:#efaaac; border-bottom-left-radius:100px; border-bottom-right-radius:100px; border-bottom-style:solid; border-bottom-width:1px; border-left-color:#efaaac; border-left-style:solid; border-left-width:1px; border-right-color:#efaaac; border-right-style:solid; border-right-width:1px; border-top-color:#efaaac; border-top-left-radius:100px; border-top-right-radius:100px; border-top-style:solid; border-top-width:1px; }

/* 出典: button.ts / .button--variant_danger :is(path, use); トークン: colors-text-color-text-danger */
.button--variant_danger :is(path, use) { fill:#b2272c; }

/* 出典: button.ts / .button--variant_danger:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]) :is(path, use); トークン: colors-text-color-text-disabled */
.button--variant_danger:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]) :is(path, use) { fill:#00000040; }

/* 出典: button.ts / .button--variant_danger:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]); トークン: borders-s, colors-brand-grayish-green-100, colors-text-color-text-disabled */
.button--variant_danger:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]) { background-color:#dadddd; color:#00000040; border-bottom-color:#dadddd; border-bottom-style:solid; border-bottom-width:1px; border-left-color:#dadddd; border-left-style:solid; border-left-width:1px; border-right-color:#dadddd; border-right-style:solid; border-right-width:1px; border-top-color:#dadddd; border-top-style:solid; border-top-width:1px; }

/* 出典: button.ts / .button--variant_danger:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]):is(:hover,[data-hover]); トークン: colors-brand-grayish-green-100, colors-text-color-text-disabled */
.button--variant_danger:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]):is(:hover,[data-hover]) { background-color:#dadddd; color:#00000040; }

/* 出典: button.ts / .button--variant_danger:is(:hover,[data-hover]); トークン: colors-background-color-background-danger-pale, colors-text-color-text-danger */
.button--variant_danger:is(:hover,[data-hover]) { background-color:#fefbfb; color:#b2272c; }

/* 出典: button.ts / .button--variant_danger:is(:focus-visible,[data-focus-visible]); トークン: colors-border-color-border-danger */
.button--variant_danger:is(:focus-visible,[data-focus-visible]) { outline-color:#efaaac; }

/* 出典: button.ts / .button--background_white（compoundVariants。Panda では variant より後の層に出るので variant の後ろに置き #fff を勝たせる）; トークン: colors-brand-white */
.button--background_white { background-color:#fff; }

/* 出典: button.ts / .button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]) :is(path, use), .button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]):is(:hover,[data-hover]) :is(path, use); トークン: colors-text-color-text-disabled */
.button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]) :is(path, use),
.button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]):is(:hover,[data-hover]) :is(path, use) { fill:#00000040; }

/* 出典: button.ts / .button--variant_icon:is(:hover,[data-hover]) :is(path, use); トークン: colors-background-color-background-primary-light */
.button--variant_icon:is(:hover,[data-hover]) :is(path, use) { fill:#939acb; }

/* 出典: button.ts / .button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]), .button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]):is(:hover,[data-hover]); トークン: colors-text-color-text-disabled */
.button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]),
.button--variant_icon:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]):is(:hover,[data-hover]) { color:#00000040; }

/* 出典: button.ts / .button--variant_icon:is(:hover,[data-hover]); トークン: colors-background-color-background-primary-light */
.button--variant_icon:is(:hover,[data-hover]) { color:#939acb; }

/* 出典: button.ts / .button--variant_icon:is(:focus-visible,[data-focus-visible]); トークン: colors-background-color-background-primary-light */
.button--variant_icon:is(:focus-visible,[data-focus-visible]) { outline-color:#939acb; }

/* 出典: chip.ts / .chip--variant_default; トークン: colors-border-color-border-main, colors-background-color-background-fix-white, colors-text-color-text-body */
.chip--variant_default { background-color:#fff; color:#000000d9; border-bottom-color:#c3c4c9; border-left-color:#c3c4c9; border-right-color:#c3c4c9; border-top-color:#c3c4c9; }

/* 出典: chip.ts / .chip--variant_default :is(path, use); トークン: colors-text-color-text-body */
.chip--variant_default :is(path, use) { fill:#000000d9; }

/* 出典: chip.ts / .chip--variant_successFilled; トークン: colors-border-color-border-success, colors-background-color-background-success-pale */
.chip--variant_successFilled { background-color:#ebf5ed; border-bottom-color:#b3dcbd; border-left-color:#b3dcbd; border-right-color:#b3dcbd; border-top-color:#b3dcbd; }

/* 出典: chip.ts / .chip--variant_successFilled :is(path, use); トークン: colors-background-color-background-success-dark */
.chip--variant_successFilled :is(path, use) { fill:#296538; }

/* 出典: chip.ts / .chip--variant_transparent; トークン: colors-border-color-border-main, colors-brand-transparent, colors-text-color-text-body */
.chip--variant_transparent { background-color:transparent; color:#000000d9; border-bottom-color:#c3c4c9; border-left-color:#c3c4c9; border-right-color:#c3c4c9; border-top-color:#c3c4c9; }

/* 出典: divider.ts / .divider--color_main; トークン: colors-border-color-border-main */
.divider--color_main { background-color:#c3c4c9; border-bottom-color:#c3c4c9; border-left-color:#c3c4c9; border-right-color:#c3c4c9; border-top-color:#c3c4c9; }

/* 出典: header.ts / .header--background_white; トークン: colors-brand-white */
.header--background_white { background-color:#fff; }

/* 出典: header.ts / .header--position_sticky; トークン: z-index-50 */
.header--position_sticky { z-index:50; position:sticky; top:0; }

/* 出典: icon.ts / .icon--size_xs; トークン: レシピ固定値 */
.icon--size_xs { width:16px; min-width:16px; max-width:16px; height:16px; min-height:16px; max-height:16px; }

/* 出典: path.ts / .path--variant_black; トークン: colors-brand-black */
.path--variant_black { fill:#000; }

/* 出典: snackbar.ts / .snackbar--variant_info; トークン: colors-background-color-background-info-pale, colors-border-color-border-info */
.snackbar--variant_info { background-color:#e6ecf6; border-bottom-color:#b3c6e4; border-left-color:#b3c6e4; border-right-color:#b3c6e4; border-top-color:#b3c6e4; }

/* 出典: snackbar.ts / .snackbar--variant_info :is(path, use); トークン: colors-background-color-background-info-dark */
.snackbar--variant_info :is(path, use) { fill:#33507e; }

/* 出典: typography.ts / .typography--color_description; トークン: colors-text-color-text-description */
.typography--color_description { color:#0000008c; }

/* 出典: typography.ts / .typography--color_danger; トークン: colors-text-color-text-danger */
.typography--color_danger { color:#b2272c; }

/* 出典: typography.ts / .typography--color_white; トークン: colors-text-color-text-white */
.typography--color_white { color:#fffffff2; }

/* 出典: typography.ts / .typography--textAlign_center; トークン: レシピ固定値 */
.typography--textAlign_center { text-align:center; }

/* 出典: typography.ts / .typography--variant_body1; トークン: font-sizes-16, font-weights-regular, line-heights-readable */
.typography--variant_body1 { font-size:1rem; font-weight:400; letter-spacing:.08px; line-height:175%; }

/* 出典: typography.ts / .typography--variant_body2; トークン: font-sizes-14, font-weights-regular, line-heights-readable */
.typography--variant_body2 { font-size:.875rem; font-weight:400; letter-spacing:.07px; line-height:175%; }

/* 出典: typography.ts / .typography--variant_h3; トークン: font-sizes-20, font-weights-bold, line-heights-heading */
.typography--variant_h3 { font-size:1.25rem; font-weight:700; letter-spacing:.8px; line-height:125%; }

/* 出典: typography.ts / .typography--variant_h4; トークン: font-sizes-18, font-weights-bold, line-heights-heading */
.typography--variant_h4 { font-size:1.125rem; font-weight:700; letter-spacing:.72px; line-height:125%; }

/* 出典: typography.ts / .typography--variant_labelL; トークン: font-sizes-16, font-weights-regular, line-heights-heading */
.typography--variant_labelL { font-size:1rem; font-weight:400; letter-spacing:.64px; line-height:125%; }

/* 出典: typography.ts / .typography--variant_labelL-medium; トークン: font-sizes-16, font-weights-medium, line-heights-heading */
.typography--variant_labelL-medium { font-size:1rem; font-weight:500; letter-spacing:.64px; line-height:125%; }

/* 出典: typography.ts / .typography--variant_labelM; トークン: font-sizes-14, font-weights-regular, line-heights-heading */
.typography--variant_labelM { font-size:.875rem; font-weight:400; line-height:125%; }

/* 出典: typography.ts / .typography--variant_labelM-bold; トークン: font-sizes-14, font-weights-bold, line-heights-heading */
.typography--variant_labelM-bold { font-size:.875rem; font-weight:700; line-height:125%; }

/* 出典: typography.ts / .typography--variant_labelM-medium; トークン: font-sizes-14, font-weights-medium, line-heights-heading */
.typography--variant_labelM-medium { font-size:.875rem; font-weight:500; line-height:125%; }

/* 出典: typography.ts / .typography--variant_labelS; トークン: font-sizes-12, font-weights-regular, line-heights-heading */
.typography--variant_labelS { font-size:.75rem; font-weight:400; line-height:125%; }

/* 出典: typography.ts / .typography--variant_labelS-medium; トークン: font-sizes-12, font-weights-medium, line-heights-heading */
.typography--variant_labelS-medium { font-size:.75rem; font-weight:500; line-height:125%; }

/* 出典: chip.ts / .chip--size_xs; トークン: レシピ固定値 */
.chip--size_xs { padding-top:.125rem; padding-bottom:.125rem; }

/* 出典: icon.ts / .icon--size_m; トークン: レシピ固定値 */
.icon--size_m { width:24px; min-width:24px; max-width:24px; height:24px; min-height:24px; max-height:24px; }

/* 出典: icon.ts / .icon--size_xxl; トークン: レシピ固定値（moala-ui molecules/EmptyState のアイコンと同じ 64px） */
.icon--size_xxl { width:64px; min-width:64px; max-width:64px; height:64px; min-height:64px; max-height:64px; }

/* 出典: path.ts / .path--variant_caution; トークン: colors-background-color-background-caution-default */
.path--variant_caution { fill:#e6c232; }

/* 出典: path.ts / .path--variant_danger; トークン: colors-background-color-background-danger-default */
.path--variant_danger { fill:#f7d2d4; }

/* 出典: path.ts / .path--variant_description; トークン: colors-text-color-text-description */
.path--variant_description { fill:#0000008c; }

/* 出典: squareLogo.ts / .squareLogo--size_medium; トークン: レシピ固定値 */
.squareLogo--size_medium { width:32px; min-width:32px; max-width:32px; height:32px; min-height:32px; max-height:32px; }

/* 出典: typography.ts / .typography--variant_body2-medium; トークン: font-sizes-14, font-weights-medium, line-heights-readable */
.typography--variant_body2-medium { font-size:.875rem; font-weight:500; letter-spacing:.07px; line-height:175%; }

/* 出典: stampedBox.ts / .stampedBox__root; トークン: レシピ固定値 */
.stampedBox__root { position:relative; }

/* 出典: stampedBox.ts / .stampedBox__stamp; トークン: spacing-space-40, spacing-space-8 */
.stampedBox__stamp { right:.5rem; top:calc(-1 * 2.5rem); position:absolute; }

/* 出典: atoms/Snackbar/index.tsx。HStack stretch / gap=space-8、
   StyleableContainer 24×24、Container paddingTop=space-2。ErrorIcon は UI 仕様の選択を維持。 */
.snackbar-content { display: flex; align-items: stretch; justify-content: flex-start; gap: 8px; }
.snackbar-icon { width: 24px; height: 24px; padding-top: 2px; flex: none; }

/* 出典: molecules/StampedBox/index.tsx、atoms/Image/index.tsx。
   Image as=image background=transparent、styleConstants.stampedBoxStampSize=6rem。
   inline style を使わず同梱 CSS で表現する。 */
.stamp-image { background: transparent; flex: 0 0 auto; width: 96px; height: 96px; }
.used-content { padding: 8px 12px; }

/* 出典: atoms/Divider/index.tsx の width=100% / height=1px。 */
.ticket-divider { width: 100%; height: 1px; }

/* 出典: Emba UI 仕様 C1〜C4 の配置・幅・余白。
   カード・帯の配色は applyArea.ts alternative / styleConstants.ts、
   banner の文字色は text.color-text-white、overlay は brand-black-alpha.800。
   Header sticky の zIndex.50 より overlay を上（zIndex.200）に置く。 */
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.screen { max-width: 430px; margin: 0 auto; background: #fff; }
.ticket-header { padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.banner { background: #000; color: #fffffff2; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.main { padding: 24px 24px 48px; display: flex; flex-direction: column; }
.vs { display: flex; flex-direction: column; }
.hs, .row { display: flex; align-items: center; }
.row { gap: 8px; }
.aic { align-items: center; }
.jcc { justify-content: center; } /* HStack の既定 justifyContent center */
.f1 { flex: 1 0 0%; min-width: 0; overflow-wrap: anywhere; } /* Karaku の VStack flex="1" minWidth="0"（flex-shrink 0） */
.g2 { gap: 2px; }
.g4 { gap: 4px; }
.g8 { gap: 8px; }
.g12 { gap: 12px; }
.g16 { gap: 16px; }
.alt { background: #ececec; border-radius: 8px; overflow: hidden; }
.band { background: rgba(77, 88, 169, .75); color: #fffffff2; text-align: center; padding: 8px 16px; }
.altc { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.counts { display: flex; align-items: baseline; gap: 12px; }
.attributes { flex-wrap: wrap; }
.tickets { padding: 0; list-style: none; }
.trow { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.stamp-space { padding-top: 16px; }
.overlay { position: fixed; inset: 0; z-index: 200; background: #000000bf; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.modal { width: 90%; max-width: 387px; margin: auto; display: flex; flex-direction: column; gap: 56px; }
.visitor.confirm { overflow: hidden; }
.cbox { padding: 16px; }
.errbody { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 24px; text-align: center; }
.circle { width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; }

/* 出典: input.ts main / atoms/Input。toC: border-main #c3c4c9、brand-primary.500 #7079ba。 */
.input__root { display:flex; align-items:center; outline-style:none; width:100%; }
.input__root--variant_main { border:1px solid #c3c4c9; border-radius:2px; padding:6px 12px; }
.input__root--variant_main:focus-within { border-color:#7079ba; }
.input__input { background:#fff; font:inherit; font-size:1rem; font-weight:400; line-height:175%; outline-style:none; width:100%; min-width:0; }
.input__input::placeholder { color:#00000040; font-size:.875rem; }
.input__root:has(:disabled), .input__input:disabled { background:#dadddd; color:#00000040; cursor:not-allowed; }
/* 出典: button.ts primary。toC の primary-default / light と brand-button。 */
.button--variant_primary { background:#4d58a9; color:#fff; border-radius:100px; }
.button--variant_primary:hover { background:#939acb; color:#ffffffe6; }
.button--variant_primary:focus-visible { outline-color:#939acb; }
.button--variant_primary:disabled, .button--variant_primary:disabled:hover { background:#dadddd; color:#00000040; }
/* 出典: note.ts default。toC の sub1 / border-main / text-body。 */
.note { display:flex; align-items:center; border:1px solid; border-radius:4px; font-size:.75rem; font-weight:400; gap:8px; letter-spacing:.15px; line-height:150%; padding:12px 16px; width:100%; }
.note--variant_default { background:#f5f5f5; border-color:#c3c4c9; color:#000000d9; }
.note svg { flex:none; fill:currentColor; }
/* 出典: snackbar.ts danger。toC の danger-pale / border-danger / danger-dark。 */
.snackbar--variant_danger { background:#fefbfb; border-color:#efaaac; }
.snackbar--variant_danger :is(path,use) { fill:#e0595d; }
/* C5: 幅いっぱいの送信・遷移ボタン。 */
.lookup-button { justify-content:center; align-items:center; font-size:.875rem; font-weight:500; line-height:125%; }
.button--width_full { width:100%; }
/* 出典: box.ts / .box--border_s, .box--borderColor_main; トークン: borders-s, colors-border-color-border-main（toC）。 */
.box--border_s { border-width:1px; border-style:solid; }
.box--borderColor_main { border-color:#c3c4c9; }
/* 出典: typography.ts / .typography--variant_h5; トークン: font-sizes-16, font-weights-bold, line-heights-heading */
.typography--variant_h5 { font-size:1rem; font-weight:700; letter-spacing:.64px; line-height:125%; }
/* C5: 受け取り方のカード。moala-ui molecules/InfoCard default の形（Box border s / borderColor main / borderRadius m に、
   padding 16 のアイコン付き見出し、Divider main 1px、padding 16 の本文）。間の「または」は labelM の description 色を中央に置く。 */
.lookup-card { display:flex; flex-direction:column; }
.lookup-card__head, .lookup-card__body { padding:16px; }
.lookup-or { text-align:center; }

/* ログイン情報の長い URL も一列の幅に収める。 */
/* 出典: theme/recipes/link.ts の link と variant underline。メールログインの「確認コードを送り直す」に使う。
   app.css は a の下線と色を消しているので、link クラスで下線と色を戻す。 */
.link { cursor:pointer; }
.link:focus-visible { outline-width:2px; outline-style:solid; outline-color:#64B6A5; outline-offset:2px; }
.link--variant_underline { color:#0000008C; text-decoration-line:underline; }
.link--variant_underline:hover { color:#64B6A5; }