/*
 * Tailwind 互換の最小ユーティリティクラス集
 * site-header / site-footer / top-nav / drawer-menu / index.php などの
 * 「テーマクローム」部分が使っている Tailwind ユーティリティを
 * 素の CSS として提供する（Tailwind Play CDN を外すための置き換え）。
 *
 * 追加クラスが必要になったらこのファイルへ追記すること。
 * 使用中のクラスが変わった時は tell-theme の design-system.md の値に合わせる。
 */

/* === Layout === */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.list-none { list-style: none; }

.fixed { position: fixed; }
.sticky { position: sticky; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }

/* === Flex / Grid alignment === */
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }

/* === Sizing === */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-5 { width: 20px; }
.w-6 { width: 24px; }
.w-70 { width: 280px; }
.h-5 { height: 20px; }
.h-6 { height: 24px; }
.h-7 { height: 28px; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.min-w-11 { min-width: 44px; }
.min-h-11 { min-height: 44px; }
.min-h-\[52px\] { min-height: 52px; }
.max-w-\[80\%\] { max-width: 80%; }

/* === Spacing: padding === */
.p-0 { padding: 0; }
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pt-6 { padding-top: 24px; }

/* === Spacing: margin === */
.m-0 { margin: 0; }
.mb-4 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.mt-8 { margin-top: 32px; }

/* === Colors（design-system.md グレースケールに一致） === */
.bg-white { background-color: #FFFFFF; }
.bg-gray-10 { background-color: #1A1A1A; }
.bg-transparent { background-color: transparent; }
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
.text-white { color: #FFFFFF; }
.text-gray-10 { color: #1A1A1A; }
.text-gray-30 { color: #4D4D4D; }
.text-gray-50 { color: #808080; }

/* === Borders === */
.border   { border-width: 1px; border-style: solid; border-color: currentColor; }
.border-0 { border: 0; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: currentColor; }
.border-gray-10 { border-color: #1A1A1A; }
.border-gray-85 { border-color: #D9D9D9; }
.border-gray-92 { border-color: #EBEBEB; }

/* === Border radius === */
.rounded-full { border-radius: 9999px; }
.rounded-pill { border-radius: 999px; }

/* === Typography === */
.text-xs   { font-size: 12px; }
.text-sm   { font-size: 13px; }
.text-base { font-size: 14px; }
.text-lg   { font-size: 16px; }
.text-2xl  { font-size: 22px; }
.font-serif  { font-family: 'Noto Sans JP', sans-serif; }
.font-medium { font-weight: 500; }
.leading-none  { line-height: 1; }
.leading-tight { line-height: 1.25; }
.no-underline  { text-decoration: none; }
.whitespace-nowrap { white-space: nowrap; }
.tracking-tight    { letter-spacing: -0.025em; }

/* === z-index === */
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* === Opacity / events / overflow === */
.opacity-0 { opacity: 0; }
.pointer-events-none { pointer-events: none; }
.overflow-y-auto { overflow-y: auto; }
.cursor-pointer { cursor: pointer; }

/* === Transitions === */
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* === Transforms === */
.translate-x-full { transform: translateX(100%); }
.translate-x-0    { transform: translateX(0); }

/* === Drawer stage ===
 * デスクトップ閲覧時に SP 幅コンテナ（max-width: 375px）の右端からスライドさせるための
 * 仮想ステージ。ステージ内に position:absolute なドロワーを配置し overflow:hidden で
 * 「閉じている時の右にはみ出した分」を切り落とす。
 */
.drawer-stage {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 375px;
  z-index: 1500; /* teller-tabs(99) / mini-header(101) / floating-fab(150) / bottom-cta(200) / modals(1000-1100) より上 */
  pointer-events: none;
  overflow: hidden;
}
.drawer-stage > [data-drawer] { pointer-events: auto; }
[data-drawer-overlay] { z-index: 1499 !important; }