/* =========================================================================
skeleton-base.css ― スケルトン共通ベース（デザイントークン）
=========================================================================
■これは何か
旧買取システムの「画面デザイン刷新スケルトン」全画面で共有する
“色・フォント・余白・角丸・影・z-index”などの基準トークン集です（legacy-renewal-design/_shared/ が正本）。
複数人でスケルトンを作る際、ここを唯一の基準にして見た目を揃えます。
■出典と同期（重要）
正本は新買取システム(Next.js/Tailwind v4)のテーマ定義です。
元は `@theme { … }` / `@custom-variant …`（Tailwind独自at-rule）で書かれており、
ビルドを通さない“素のHTML”では効きません。そこで本ファイルは
・`@theme { … }` → `:root { … }` に変換（値は元と同一）
・`@custom-variant` → Tailwind専用のため除外（下に代替メモ）
とした「プレーンCSSのミラー」です。
★本家テーマの色・値が変わったら、この _shared/skeleton-base.css を手で追随させてください
（全画面が参照する正本のため、ここ1箇所の修正で全画面へ反映される）。
■使い方
各スケルトンHTMLので、他のCSSより“先に”読み込む（画面フォルダから相対参照）：
画面固有CSSからは var(--color-brand-color) / var(--text-2xl) 等で参照する。
========================================================================= */
/* ---- Base font ---------------------------------------------------------- */
:root {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
/* ---- Responsive font sizes (SP default, PC on larger screens) ----------- */
:root {
--font-size-xs: 0.625rem; /* SP: 10px */
--font-size-sm: 0.75rem; /* SP: 12px */
--font-size-base: 0.875rem; /* SP: 14px */
--font-size-lg: 1rem; /* SP: 16px */
--font-size-xl: 1.125rem; /* SP: 18px */
--font-size-2xl: 1.3125rem; /* SP: 21px */
--font-size-3xl: 1.625rem; /* SP: 26px */
--font-size-4xl: 2rem; /* SP: 32px */
--font-size-5xl: 2.625rem; /* SP: 42px */
--font-size-6xl: 3.25rem; /* SP: 52px */
--font-size-7xl: 3.9375rem; /* SP: 63px */
--font-size-8xl: 5.25rem; /* SP: 84px */
--font-size-9xl: 7rem; /* SP: 112px */
}
@media (min-width: 768px) { /* md breakpoint */
:root {
--font-size-xs: 0.75rem; /* PC: 12px */
--font-size-sm: 0.875rem; /* PC: 14px */
--font-size-base: 1rem; /* PC: 16px */
--font-size-lg: 1.125rem; /* PC: 18px */
--font-size-xl: 1.25rem; /* PC: 20px */
--font-size-2xl: 1.5rem; /* PC: 24px */
--font-size-3xl: 1.875rem; /* PC: 30px */
--font-size-4xl: 2.25rem; /* PC: 36px */
--font-size-5xl: 3rem; /* PC: 48px */
--font-size-6xl: 3.75rem; /* PC: 60px */
--font-size-7xl: 4.5rem; /* PC: 72px */
--font-size-8xl: 6rem; /* PC: 96px */
--font-size-9xl: 8rem; /* PC: 128px */
}
}
/* @custom-variant top-lg (@media (min-width: 1033px)) ← Tailwind専用のため除外。
プレーンCSSで 1033px 境界が要る場合は @media (min-width:1033px){…} を直接使う。
（本家: apps/web の top.css / layout.tsx の tablet-scale 境界と同期が必要な TOP専用値） */
/* ---- Theme tokens（元 @theme → :root。値は本家と同一） ------------------ */
:root {
/* Font sizes（Tailwindの text-* エイリアス。実体は上の --font-size-* ＝レスポンシブ） */
--text-xs: var(--font-size-xs);
--text-sm: var(--font-size-sm);
--text-base: var(--font-size-base);
--text-lg: var(--font-size-lg);
--text-xl: var(--font-size-xl);
--text-2xl: var(--font-size-2xl);
--text-3xl: var(--font-size-3xl);
--text-4xl: var(--font-size-4xl);
--text-5xl: var(--font-size-5xl);
--text-6xl: var(--font-size-6xl);
--text-7xl: var(--font-size-7xl);
--text-8xl: var(--font-size-8xl);
--text-9xl: var(--font-size-9xl);
/* Colors */
--color-background: hsl(0 0% 98%);
--color-foreground: hsl(0 0% 3.9%);
--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(0 0% 3.9%);
--color-popover: hsl(0 0% 100%);
--color-popover-foreground: hsl(0 0% 3.9%);
--color-primary: hsl(0 72.2% 50.6%);
--color-primary-foreground: hsl(0 85.7% 97.3%);
--color-secondary: hsl(0 0% 96.1%);
--color-secondary-foreground: hsl(0 0% 9%);
--color-muted-foreground: hsl(0 0% 45.1%);
--color-accent: hsl(0 0% 96.1%);
--color-accent-foreground: hsl(0 0% 9%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(0 0% 98%);
--color-border: hsl(0 0% 89.8%);
--color-input: hsl(0 0% 89.8%);
--color-ring: hsl(0 72.2% 50.6%);
--color-brand-color: hsl(0 100% 43.14%); /* #DC0000 - ブランドカラー・エラー表示用 */
--color-text-color: hsl(0 0% 20%); /* #333 */
--color-gray: hsl(0 0% 92.2%);
--color-light-gray: hsl(0 0% 45%);
--color-base-gray: hsl(0 0% 98%); /* #fafafa */
--color-pale-gray: hsl(0 0% 94.9%); /* #F2F2F2 - テーブルヘッダー・薄い背景色 */
--color-light-red: hsl(0 69% 97%);
--color-blue: hsl(212 85% 50%);
--color-yellow: hsl(51 100% 50%);
--color-green: hsl(91 100% 34%);
--color-dark-green: hsl(97 63% 33%); /* 星評価用カラー */
--color-star-filled: hsl(47 100% 64%); /* #FFDC4A - 星の塗りつぶし色 */
--color-star-empty: hsl(0 0% 90%); /* #E5E5E5 - 星の空色 */
--color-faq-gray: hsl(0 0% 96.9%); /* FAQ用 */
/* Border radius / layout */
--radius: 0.25rem;
--max-width-content: 960px;
/* Font sizes（固定サイズ・Tailwind text-2xs 用） */
--text-2xs: 10px;
--text-2xs--line-height: 14px;
/* Layout sizes */
--height-header: 58px;
--width-kana-sidebar: 70px;
--width-card-right-column: 160px;
/* Line heights（相対値） */
--leading-relaxed-sm: 1.375; /* 22px / 16px */
/* Button widths（マイページ用） */
--width-btn-action: 264px;
--width-btn-handover-action: 243px;
/* Modal */
--width-modal-confirm: 334px;
--height-btn-modal: 2.75rem; /* 44px */
/* Shadows */
--shadow-card-soft: 0 0 40px rgba(0, 0, 0, 0.05);
/* Progress stepper */
--stepper-dot-size: 8px;
--stepper-bar-top: 3px;
--stepper-padding-x: 8px;
/* Component-specific colors */
--color-kana-sidebar: hsl(0 0% 66.7%); /* #aaa - 五十音サイドバー背景 */
--color-list-divider: hsl(200 18% 94%); /* #ecf0f2 - リスト区切り線 */
--color-overlay-light: rgba(51, 51, 51, 0.2);
--color-border-dashed: rgba(51, 51, 51, 0.3);
/* File upload thumbnail */
--size-thumbnail: 80px;
/* Review form layout */
--width-review-label: 118px;
--spacing-review-px: clamp(4px, 1vw, 12px);
--spacing-review-star-gap: clamp(0px, 0.3vw, 4px);
--spacing-review-form-px: clamp(2px, 0.5vw, 12px);
--spacing-review-form-star-gap: clamp(0px, 0.15vw, 4px);
/* Bank info form layout */
--width-bank-form-input: 387px;
--max-width-bank-form: 545px;
/* Z-index layers */
--z-header: 50;
--z-overlay: 60;
--z-panel: 70;
--z-sticky-footer: 99;
--z-modal: 1000;
--z-dialog-base: 50;
--z-dialog-sub: 55;
--z-dialog-confirm-top: 65;
/* Shadows */
--shadow-dropdown: 0 0 40px rgba(0, 0, 0, 0.05);
--shadow-sticky-footer: 0 -2px 8px rgba(0, 0, 0, 0.1);
}