/* =================================================================
 * design-system.css
 * Roomnis デザイン言語 — 他ページから <link> 1枚で使用可能
 * CSS変数・テーマ・スクロールバー・ユーティリティ・
 * 入力欄・リップル・トグル・ボタン・フォーム・
 * ツールチップ・モーダルアニメーション・グラスモーフィズム
 * ================================================================= */

:root {
            --bg-main: #f8fafc;
            --bg-sidebar: #ffffff;
            --bg-surface: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            --accent-primary: #3b82f6;
            --accent-hover: #2563eb;
            --accent-bg: #eff6ff;
            --border-color: #e2e8f0;
            --transition-speed: 0.25s;
            --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
            --border-radius-sm: 0.5rem;
            --border-radius-md: 1rem;
            --border-radius-lg: 1.5rem;
            --border-radius-full: 9999px;
            --sidebar-collapsed: 72px;
            --sidebar-expanded: 280px;
            --header-bg: rgba(255,255,255,0.40);
            --header-border: rgba(255,255,255,0.70);
            --header-shadow: 0 2px 12px rgba(189,204,216,0.20);
            --header-shadow-up: 0 -4px 16px rgba(189,204,216,0.22);
            --like-hover-bg: #fef2f2;
        }

        /* ========== DARK THEME ========== */
        [data-theme="dark"] {
            --bg-main: #0f172a;
            --bg-sidebar: #1e293b;
            --bg-surface: #1e293b;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --accent-primary: #3b82f6;
            --accent-hover: #60a5fa;
            --accent-bg: #1e3a5f;
            --border-color: #334155;
            --header-bg: rgba(15,23,42,0.60);
            --header-border: rgba(255,255,255,0.14);
            --header-shadow: 0 8px 24px rgba(0,0,0,0.45),inset 0 1px 1px rgba(255,255,255,0.08);
            --header-shadow-up: 0 -8px 24px rgba(0,0,0,0.45);
            --like-hover-bg: rgba(239,68,68,0.12);
            color-scheme: dark;
        }

        /* ダーク時のボタン・入力欄の白背景を上書き */
        [data-theme="dark"] input,
        [data-theme="dark"] textarea {
            color-scheme: dark;
        }
        [data-theme="dark"] .btn-edit-profile,
        [data-theme="dark"] .follow-btn,
        [data-theme="dark"] #follow-btn {
            border-color: var(--border-color);
            color: var(--text-primary);
            background: var(--bg-surface);
        }
        [data-theme="dark"] .post-menu-dropdown {
            background: var(--bg-surface);
            border-color: var(--border-color);
        }
        [data-theme="dark"] .post-menu-dropdown button {
            color: var(--text-primary);
        }
        [data-theme="dark"] .post-menu-dropdown button:hover {
            background: var(--bg-main);
        }
        [data-theme="dark"] #user-menu {
            background: var(--bg-surface) !important;
            border-color: var(--border-color) !important;
        }
        [data-theme="dark"] .modal-card,
        [data-theme="dark"] .modal-inner {
            background: var(--bg-surface);
            border-color: var(--border-color);
        }
        [data-theme="dark"] .modal-overlay {
            background: rgba(0,0,0,0.7);
        }

        /* ========== SEPIA THEME ========== */
        /* 新テーマ追加例: [data-theme="sepia"] { ... } */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        /* ========== CUSTOM SCROLLBAR (prevents layout shift) ========== */
        html {
            scrollbar-gutter: stable;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        /* Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-primary);
            line-height: 1.5;
            display: flex;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
            overflow-x: hidden;
        }

        .app-container {
            display: flex;
            width: 100%;
            height: 100vh;
            overflow: visible;
        }

        /* ---- ユーティリティクラス（インラインスタイル置換） ---- */
        .text-sm { font-size:0.9rem; }
        .text-xs { font-size:0.8rem; }
        .text-muted-sm { font-size:0.8rem;color:var(--text-muted); }
        .text-muted-xs { font-size:0.75rem;color:var(--text-muted); }
        .text-muted-xs-shrink { font-size:0.75rem;color:var(--text-muted);flex-shrink:0; }
        .text-secondary-sm { font-size:0.83rem;color:var(--text-secondary); }
        .text-secondary-xs { font-size:0.75rem;color:var(--text-secondary); }
        .text-muted-col { color:var(--text-muted); }
        .text-error-sm { color:#ef4444;font-size:0.85rem;margin-bottom:0.75rem;display:none; }
        .heading-lg { font-size:1.2rem;font-weight:700;color:var(--text-primary);margin:0 0 0.75rem; }
        .heading-md { font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0 0 0.5rem; }
        .text-body-secondary { font-size:0.95rem;color:var(--text-secondary);line-height:1.6;margin:0 0 1.5rem; }
        .text-muted-hint { font-size:0.8rem;color:var(--text-muted);margin-bottom:0.25rem; }
        .fw-600 { font-weight:600; }
        .col-gap-75 { display:flex;flex-direction:column;gap:0.75rem; }
        .row-gap-75 { display:flex;align-items:center;gap:0.75rem; }
        .row-gap-75-full { display:flex;align-items:center;gap:0.75rem;width:100%; }
        .row-gap-6 { display:flex;align-items:center;gap:6px; }
        .row-muted-gap-3 { font-size:0.8rem;color:var(--text-muted);display:flex;align-items:center;gap:0.3rem; }
        .divider-top { border-top:1px solid var(--border-color); }
        .btn-outline-pill {
            padding:0.3rem 0.75rem;border-radius:9999px;border:1.5px solid var(--border-color);
            background:var(--bg-surface);color:var(--text-secondary);
            font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.15s;
        }
        .social-btn-row {
            flex:1;display:flex;align-items:center;gap:6px;padding:7px 8px;
            border-radius:8px;border:1px solid var(--border-color);background:var(--bg-surface);
            cursor:pointer;font-size:0.75rem;font-weight:500;color:var(--text-primary);
            transition:border-color 0.15s,background 0.15s;text-align:left;
        }
        .social-btn-col {
            display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;
            border-radius:0.75rem;border:1px solid var(--border-color);background:var(--bg-surface);
            cursor:pointer;font-size:0.82rem;font-weight:600;color:var(--text-primary);
            transition:border-color 0.15s,background 0.15s;
        }
        .social-icon { flex-shrink:0;width:32px;height:32px;border-radius:8px; }
        .avatar-xs { width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0; }
        .icon-md { width:18px;height:18px; }
        .icon-xs { width:12px;height:12px;flex-shrink:0; }
        .icon-xs-inline { width:12px;height:12px;display:inline-block;vertical-align:middle;margin-right:2px; }
        .icon-tab { width:14px;height:14px;vertical-align:-2px;margin-right:4px; }
        .emoji-icon-sm { width:1.2em;height:1.2em;object-fit:contain; }
        .emoji-icon-md { width:1.3em;height:1.3em;object-fit:contain;flex-shrink:0; }
        .pill-toggle-btn { width:44px;height:32px;border-radius:9999px; }
        .flex-1 { flex:1; }
        .pos-relative { position:relative; }
        .feed-empty { padding:2rem;text-align:center;color:#94a3b8; }
        .feed-error { padding:2rem;text-align:center;color:#ef4444; }
        .feed-muted { padding:2rem;text-align:center;color:var(--text-muted); }
        .icon-sm { width:16px;height:16px; }
        .text-effect-label { font-size:0.72rem; }
        .btn-cancel {
            padding:0.5rem 1.2rem;border:1px solid var(--border-color);
            border-radius:2rem;background:none;cursor:pointer;font-weight:600;
        }
        .btn-primary-pill {
            padding:0.5rem 1.2rem;border:none;border-radius:2rem;
            background:var(--accent-primary);color:#fff;cursor:pointer;font-weight:600;
        }
        .btn-primary-lg {
            padding:0.6rem 2rem;border:none;border-radius:9999px;
            background:var(--accent-primary);color:#fff;font-weight:700;font-size:0.95rem;cursor:pointer;
        }
        .form-label {
            display:block;font-size:0.85rem;font-weight:600;
            color:var(--text-secondary);margin-bottom:0.4rem;
        }
        .form-input {
            width:100%;padding:0.6rem 0.8rem;border:1px solid var(--border-color);
            border-radius:0.5rem;font-size:0.95rem;background:var(--bg-surface);
            color:var(--text-primary);box-sizing:border-box;
        }
        .card-surface {
            background:var(--bg-surface);border:1px solid var(--border-color);
            border-radius:1rem;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.04);
        }
        .section-label {
            font-size:0.7rem;font-weight:700;color:var(--text-muted);
            text-transform:uppercase;letter-spacing:0.08em;
            padding:0 0.75rem;margin-bottom:0.5rem;
        }
        .setting-row {
            display:flex;align-items:center;gap:0.5rem;cursor:pointer;
            padding:0.5rem;border-radius:0.5rem;border:1px solid var(--border-color);
        }
        .modal-header {
            display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;
        }
        .modal-header-lg {
            display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;
        }
        .modal-title { font-size:1rem;font-weight:700; }
        .modal-close-btn {
            background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--text-secondary);
        }
        .modal-actions { display:flex;gap:0.5rem;justify-content:flex-end; }
        .modal-field { margin-bottom:1rem; }
        .divider-bottom { border-bottom:1px solid var(--border-color); }
        .toggle-track {
            display:block;width:44px;height:24px;border-radius:9999px;
            background:var(--border-color);transition:background 0.2s;position:relative;
        }
        .toggle-wrap {
            position:relative;display:inline-flex;align-items:center;
            cursor:pointer;flex-shrink:0;
        }
        .toggle-thumb {
            position:absolute;top:3px;left:3px;width:18px;height:18px;
            border-radius:50%;background:#fff;transition:left 0.2s;
            box-shadow:0 1px 4px rgba(0,0,0,0.18);
        }
        .toggle-input { opacity:0;width:0;height:0;position:absolute; }
        .row-between {
            display:flex;justify-content:space-between;align-items:center;gap:0.5rem;
        }
        .row-actions-end { display:flex;gap:0.5rem;align-items:center; }

        input, textarea {
            transition: border-color 0.2s var(--ease-out-smooth),
                        box-shadow 0.2s var(--ease-out-smooth);
        }
        input:focus, textarea:focus {
            outline: none;
            border-color: var(--accent-primary) !important;
            box-shadow: 0 0 0 3px var(--accent-focus);
        }
        /* ←ボタン 円背景 + 波紋 */
        #back-btn {
            position: relative;
            overflow: hidden;
            border-radius: 50% !important;
            width: 36px;
            height: 36px;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.2s var(--ease-out-smooth);
        }
        #back-btn:hover {
            background: var(--bg-hover, rgba(0,0,0,0.06));
        }
        @keyframes ripple-expand {
            0%   { transform: scale(0);   opacity: 0.55; }
            40%  { transform: scale(1);   opacity: 0.40; }
            75%  { transform: scale(1);   opacity: 0.20; }
            100% { transform: scale(1);   opacity: 0;    }
        }
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.15);
            pointer-events: none;
            transform: scale(0);
            animation: ripple-expand 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .compose-input:focus {
            border-color: transparent !important;
            box-shadow: none;
        }

        @keyframes user-menu-in {
            from { opacity: 0; transform: translateY(6px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0)   scale(1);    }
        }
        #user-menu:not(.modal-animated) {
            animation: none;
        }
        #user-menu.menu-entering:not(.modal-animated) {
            animation: user-menu-in 0.2s var(--ease-out-smooth) both;
        }

        /* モバイル時のユーザーメニュー（モーダル内カード） */
        #user-menu.user-menu-modal {
            z-index: 10000;
            background: rgba(0,0,0,0.5) !important;
        }
        #user-menu.user-menu-modal > div {
            width: 90%;
            max-width: 480px;
            background: var(--bg-surface);
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
        /* ========== SMOOTH MODAL ANIMATIONS ========== */
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ロールバッジ ツールチップ */
        .role-badge-wrap {
          display: inline-flex;
          align-items: center;
          vertical-align: middle;
        }
        #role-tooltip {
          position: fixed;
          transform: translateX(-50%) translateY(-100%) scale(0.7);
          transform-origin: bottom center;
          background: var(--bg-surface, #1e293b);
          color: var(--text-primary, #f1f5f9);
          font-size: 0.75rem;
          font-weight: 600;
          white-space: nowrap;
          padding: 5px 10px;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.15s ease,
                      transform 0.2s var(--ease-out-smooth, cubic-bezier(0.16,1,0.3,1));
          z-index: 99999;
          border: 1px solid var(--border-color);
        }
        #role-tooltip::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border: 5px solid transparent;
          border-top-color: var(--bg-surface, #1e293b);
        }
        #role-tooltip.is-visible {
          opacity: 1;
          transform: translateX(-50%) translateY(-100%) scale(1);
        }
        .modal-animated {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.35s var(--ease-out-smooth),
                        visibility 0.35s var(--ease-out-smooth);
            will-change: opacity, visibility;
        }
        .modal-animated.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .modal-animated > div {
            transform: scale(1.25);
            opacity: 0;
            transition: transform 0.35s var(--ease-out-smooth),
                        opacity 0.35s var(--ease-out-smooth);
            will-change: transform, opacity;
        }
        .modal-animated.is-visible > div {
            transform: scale(1);
            opacity: 1;
        }
        .modal-animated.is-closing {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.28s var(--ease-out-smooth),
                        visibility 0.28s var(--ease-out-smooth);
        }
        .modal-animated.is-closing > div {
            transform: scale(1.25);
            opacity: 0;
            transition: transform 0.28s var(--ease-out-smooth),
                        opacity 0.28s var(--ease-out-smooth);
        }

        /* ドロワーモード: body.drawer-modal 時にモーダルを下からスライドイン */
        body.drawer-modal .modal-animated {
            align-items: flex-end !important;
            padding: 0 !important;
        }
        body.drawer-modal .modal-animated > div {
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 1.25rem 1.25rem 0 0 !important;
            transform: translateY(40px) !important;
            opacity: 0 !important;
            transition: transform 0.32s var(--ease-out-smooth),
                        opacity 0.32s var(--ease-out-smooth) !important;
            max-height: 90vh;
            overflow-y: auto;
        }
        body.drawer-modal .modal-animated.is-visible > div {
            transform: translateY(0) !important;
            opacity: 1 !important;
        }
        body.drawer-modal .modal-animated.is-closing > div {
            transform: translateY(40px) !important;
            opacity: 0 !important;
        }
        /* ドロワーハンドル */
        body.drawer-modal .modal-animated.is-visible > div::before {
            content: '';
            display: block;
            width: 36px;
            height: 4px;
            border-radius: 2px;
            background: var(--border-color);
            margin: 0.75rem auto 0;
        }

        /* 画面幅でなくサイドバーのCSSの状態を見て判定する。
           JSが .has-bottom-nav を body に付与する。 */
        body.has-bottom-nav #mobile-menu-btn { display: flex !important; }
        body.has-bottom-nav #user-menu-btn { display: none; }
        body.has-bottom-nav .login-banner {
            left: 0;
            bottom: 60px;
        }

        body.has-bottom-nav .login-banner-inner {
            flex-direction: column;
            align-items: flex-start;
            padding: 1rem 1.25rem;
            gap: 0.75rem;
        }

        .user-profile-name-block {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
        }

        .user-profile-name {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .user-profile-handle {
            color: var(--text-secondary);
            font-size: 0.8rem;
        }

        .user-profile-more {
            margin-left: auto;
            color: var(--text-secondary);
        }

        .compose-area--feed {
            border-bottom: 8px solid var(--bg-main);
        }

        .compose-area--post {
            border-bottom: 8px solid var(--bg-main);
            padding-top: 2rem;
        }

        .compose-input--post {
            min-height: 150px;
            font-size: 1.2rem;
        }

        .profile-meta {
            display: flex;
            gap: 1rem;
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .profile-meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .profile-meta-item i { width: 16px; }

        .profile-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
        }

        .profile-tab {
            flex: 1;
            text-align: center;
            padding: 1rem;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .profile-tab.active {
            font-weight: 700;
            color: var(--text-primary);
            border-bottom: 4px solid var(--accent-primary);
        }

        .login-banner-icon-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .login-banner-icon {
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            stroke: white;
        }

        .nav-item icon-home,
        .nav-item icon-squarepen,
        .nav-item icon-user {
            flex-shrink: 0;
            --iconcolor: currentColor;
            --iconactivecolor: var(--accent-primary);
        }

        .icon-btn icon-imageplus,
        .icon-btn icon-faceplus {
            pointer-events: none;
        }