/* ================================================
   ShiftSOS Landing Page - Custom Styles
   ================================================ */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #0f172a;
    color: #f8fafc;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* Container to prevent horizontal overflow from child animations or fixed widths */
.page-wrapper {
    flex: 1;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* ゴールドグラデーションテキスト
   使用箇所: ロゴ・見出しの強調テキスト
   ※ -webkit-text-fill-color でテキスト色を透明にし、background-clip でグラデーションを見せる手法 */
.text-gradient-gold {
    background: linear-gradient(135deg, #f3e5ab 0%, #d4af37 50%, #b4942b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ゴールドグラデーションボーダー（現在は未使用。将来の拡張用） */
.border-gradient-gold {
    border-image: linear-gradient(135deg, #f3e5ab 0%, #d4af37 100%) 1;
}

/* スクロールアニメーション
   初期状態: 透明 + 30px 下にずれた状態
   .visible クラスが IntersectionObserver によって付与されると上にフェードイン
   .delay-100/200/300 でカード等を時差アニメーションさせる */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

/* グラスモーフィズムカード
   半透明の艶消し背景 + backdrop-filter blur でフロストガラス風の見た目を実現。
   Solution セクションの 3 カードで使用。 */
.glass-card {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 画像オーバーレイ（下から上へのグラデーション）
   画像の下部に暗いグラデーションを重ねてテキストを読みやすくする。
   ::after 擬似要素で実装されるため、親要素に position: relative が必要。 */
.image-overlay {
    position: relative;
}

.image-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0.3) 100%);
}

/* ================================================
   デモアプリ専用スタイル
   デモモーダル内のスマホフレーム（#app-screen）に適用。
   ================================================ */

/* スクロールバーをスリムにして LP の雰囲気を統一する */
.app-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.app-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

.app-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.5);
    border-radius: 4px;
}

/* ドラッグ可能な優先順位リストアイテム
   管理者設定画面のスタッフ優先順位並び替えリストで使用。 */
.draggable-item {
    cursor: grab;
}

.draggable-item:active {
    cursor: grabbing;
}

/* 法的ドキュメント（利用規約・プライバシーポリシー）表示用スタイル
   Firestore から取得した HTML 文字列が #legal-content に innerHTML で注入される。
   モーダル内の白背景エリアに適用され、h1/h2/h3/p/ul/ol/li を整形する。 */
.legal-content h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
    color: #1e293b;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.legal-content h2 {
    font-size: 1.15em;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 1em;
    color: #1e293b;
    background: #f8fafc;
    border-left: 4px solid #d4af37;
    padding: 0.75rem 1rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.legal-content h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    color: #334155;
}

.legal-content p,
.legal-content ul,
.legal-content ol {
    margin-bottom: 1.2em;
    line-height: 1.7;
    color: #334155;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5em;
    list-style-type: disc;
}

.legal-content ol li {
    list-style-type: decimal;
}