/* chre3 運用者コンソール スタイル (ROBOT-529 / P4-H-2) */ :root { --acc_primary: #2e7d32; --acc_primary_dark: #1b5e20; --acc_bg: #f4f6f4; --acc_card: #ffffff; --acc_border: #d8ded8; --acc_text: #1f2a1f; --acc_err: #c62828; --acc_warn: #8a6d00; } * { box-sizing: border-box; } body { margin: 0; font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; background: var(--acc_bg); color: var(--acc_text); line-height: 1.6; } .acc_card { max-width: 420px; margin: 8vh auto; padding: 32px; background: var(--acc_card); border: 1px solid var(--acc_border); border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.06); } .acc_card h1 { margin: 0 0 4px; font-size: 1.4rem; } .acc_sub { margin: 0 0 24px; color: #6b756b; font-size: .85rem; } .acc_form label, .acc_card label { display: block; margin: 0 0 16px; font-size: .9rem; font-weight: 600; } .acc_form input, .acc_card input[type=text], .acc_card input[type=password] { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 1rem; border: 1px solid var(--acc_border); border-radius: 10px; font-weight: 400; } .acc_btn { width: 100%; padding: 12px; margin-top: 8px; font-size: 1rem; font-weight: 700; color: #fff; background: var(--acc_primary); border: none; border-radius: 10px; cursor: pointer; } .acc_btn:hover { background: var(--acc_primary_dark); } .acc_note { margin-top: 14px; font-size: .82rem; color: #6b756b; } .acc_error { color: var(--acc_err); font-weight: 600; } .acc_warn { background: #fff8e1; border: 1px solid #ffe082; color: var(--acc_warn); padding: 10px 12px; border-radius: 10px; font-size: .85rem; } .acc_ok { color: var(--acc_primary_dark); font-weight: 600; } .acc_step2 { margin: 0 0 18px; } .acc_recovery { margin-top: 20px; font-size: .82rem; } .acc_recovery summary { cursor: pointer; color: #6b756b; } /* (?) ヘルプボタン (CLAUDE.md 必須ルール) */ .sr_help_btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; font-size: .72rem; font-weight: 700; color: #fff; background: #90a490; border-radius: 50%; cursor: help; vertical-align: middle; } /* header (index) */ .acc_header { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--acc_card); border-bottom: 1px solid var(--acc_border); } .acc_header .acc_who { color: #6b756b; font-size: .9rem; } .acc_logout { margin-left: auto; } .acc_logout button { padding: 7px 14px; border: 1px solid var(--acc_border); background: #fff; border-radius: 8px; cursor: pointer; } .acc_main { max-width: 720px; margin: 32px auto; padding: 0 24px; } .acc_menu { list-style: none; padding: 0; margin: 20px 0; } .acc_menu li { margin: 8px 0; } .acc_menu a { color: var(--acc_primary_dark); } /* バックアップコード一覧 */ .acc_codes { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .acc_codes li { background: #f0f4f0; border: 1px solid var(--acc_border); border-radius: 8px; padding: 8px 10px; text-align: center; } .acc_codes code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95rem; letter-spacing: .5px; } /* テーブル (監査 / スタッフ) */ .acc_table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .88rem; } .acc_table th, .acc_table td { padding: 8px 10px; border-bottom: 1px solid var(--acc_border); text-align: left; vertical-align: middle; } .acc_table th { background: #eef2ee; font-weight: 700; } .acc_table code { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; } .acc_r_ng td { background: #fdecea; } .acc_r_inactive td { color: #9aa39a; } .acc_muted { color: #9aa39a; } .acc_filter { display: flex; gap: 10px; align-items: end; margin: 8px 0; } .acc_filter input { padding: 8px 10px; border: 1px solid var(--acc_border); border-radius: 8px; } .acc_inline { display: inline; } .acc_inline select { padding: 5px 6px; border: 1px solid var(--acc_border); border-radius: 6px; } .acc_actions { white-space: nowrap; } .acc_actions button { padding: 5px 10px; margin-right: 4px; border: 1px solid var(--acc_border); background: #fff; border-radius: 6px; cursor: pointer; font-size: .82rem; } .acc_actions button:disabled { opacity: .4; cursor: not-allowed; } /* 行内の推奨アクション (招待の再発行 = 平文を誰も見ない経路 / ROBOT-681) */ .acc_actions button.acc_primary_action { border-color: var(--acc_primary); color: var(--acc_primary_dark); font-weight: 700; } .acc_actions button.acc_primary_action:disabled { border-color: var(--acc_border); color: inherit; font-weight: 400; } /* 一覧の中でメールを直せる小さい入力 (ROBOT-681) */ .acc_email_input { width: 15em; max-width: 100%; padding: 4px 6px; border: 1px solid var(--acc_border); border-radius: 6px; font-size: .8rem; } /* 初期スタッフ発行フォーム (ROBOT-625) */ .acc_create { border: 1px solid var(--acc_border); border-radius: 10px; padding: 12px 16px; margin: 8px 0 22px; background: #fafcfa; } .acc_create > summary { cursor: pointer; font-weight: 700; color: var(--acc_primary_dark); list-style: revert; } .acc_create_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; } .acc_create_grid label { display: block; font-size: .84rem; font-weight: 600; color: #48524a; } .acc_create_grid input, .acc_create_grid select { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--acc_border); border-radius: 8px; font-size: .9rem; box-sizing: border-box; } .acc_create_hint { display: block; font-size: .76rem; color: #6b756b; font-weight: 400; margin-top: 3px; } .acc_created code, .acc_warn code { font-family: ui-monospace, Menlo, monospace; } /* 汎用のセクション枠 (password.php 等、フォームを何本か並べるページ用 / ROBOT-681) */ .acc_section { border: 1px solid var(--acc_border); border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; background: #fafcfa; max-width: 720px; } .acc_section > h2 { margin: 0 0 10px; font-size: 1rem; color: var(--acc_primary_dark); } .acc_section .acc_form { max-width: 420px; } .acc_section ul.acc_note { margin-top: 6px; padding-left: 1.2em; } .acc_section ul.acc_note li { margin-bottom: 6px; } /* ========================================================================= メ革風シェル (上部ヘッダー + 左メニュー + 右メイン) ROBOT-529 P4-H-7 ========================================================================= */ html, body.acc_shell { height: 100%; } body.acc_shell { margin: 0; display: flex; flex-direction: column; background: var(--acc_bg); } /* 検証モード 警告バナー (ROBOT-632) */ .acc_bypass_banner { flex: 0 0 auto; background: #fff4e5; color: #8a4b00; border-bottom: 2px solid #e07b00; padding: 8px 18px; font-size: .9rem; line-height: 1.5; } .acc_bypass_banner a { color: #8a4b00; font-weight: 700; } /* 検証モード トグルパネル (mfa_status.php / ROBOT-632) */ .acc_bypass_panel { border: 1px solid var(--acc_border); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; background: #fafcfa; } .acc_bypass_panel.acc_bypass_on { background: #fff4e5; border-color: #e6b56a; } .acc_bypass_h { margin: 0 0 8px; font-size: 1rem; display: flex; align-items: center; gap: 6px; } .acc_bypass_state { margin: 6px 0 10px; font-size: .92rem; } .acc_bypass_hours { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font-size: .88rem; } .acc_bypass_hours select { padding: 6px 8px; border: 1px solid var(--acc_border); border-radius: 8px; } /* 上部ヘッダー */ .acc_topbar { display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 18px; flex: 0 0 auto; background: #fff; border-bottom: 2px solid var(--acc_primary); box-shadow: 0 1px 4px rgba(0,0,0,.04); } .acc_brand { display: flex; align-items: center; gap: 8px; font-weight: 700; } .acc_brand_mark { font-size: 1.25rem; } .acc_brand_name { color: var(--acc_primary_dark); font-size: 1.02rem; white-space: nowrap; } .acc_topnav { display: flex; align-items: center; gap: 6px; } .acc_topnav_item { font-size: .85rem; color: #48524a; text-decoration: none; padding: 6px 10px; border-radius: 8px; } .acc_topnav_item:hover { background: #eef3ee; } .acc_ok_pill { background: #e8f5e9; color: var(--acc_primary_dark); font-weight: 600; } /* 二要素 OFF (検証モード) を正直に出す。ROBOT-657 */ .acc_warn_pill { background: #fff3cd; color: #7a5b00; font-weight: 600; } .acc_topuser { margin-left: auto; display: flex; align-items: center; gap: 12px; } .acc_user_name { font-size: .88rem; color: #333; } .acc_user_name small { color: #8a948a; } .acc_logout_form { margin: 0; } .acc_logout_btn { padding: 6px 14px; border: 1px solid var(--acc_border); background: #fff; border-radius: 8px; cursor: pointer; font-size: .85rem; } .acc_logout_btn:hover { background: #f2f5f2; } /* 本体 = 左メニュー + メイン */ .acc_body { flex: 1 1 auto; display: flex; min-height: 0; } /* 左メニュー (メ革化: 縦フレックス = スクロール域 + 下部に「隠す」ボタン) */ .acc_sidebar { flex: 0 0 220px; width: 220px; display: flex; flex-direction: column; background: #fbfcfb; border-right: 1px solid var(--acc_border); } .acc_side_scroll { flex: 1 1 auto; overflow-y: auto; padding: 10px 0; } .acc_side_heading { /* 旧静的見出し (現在は未使用、後方互換で残置) */ font-size: .72rem; font-weight: 700; color: #93a093; letter-spacing: .04em; padding: 14px 16px 4px; } .acc_side_list { list-style: none; margin: 0; padding: 0; } .acc_side_nested .acc_side_link { padding-left: 20px; } /* ROBOT-682: 行は角丸の pill。左の色バーは使わない (Cloudflare 調 = 塗りだけで現在地を示す)。 margin+padding の合計は旧 padding(左右16px) と同じ 32px に収める。 増やすと「予約チャット履歴」等が 2 行に折り返す (220px 幅の余白は元々ぎりぎり)。 */ .acc_side_link { display: flex; align-items: center; gap: 10px; margin: 1px 6px; padding: 8px 10px; border-radius: 8px; color: #37413a; text-decoration: none; font-size: .9rem; } .acc_side_link:hover { background: #eef3ee; } .acc_side_active { background: #e8f5e9; color: var(--acc_primary_dark); font-weight: 600; } /* ROBOT-682: アイコンは **本文より淡い単色**。主役はラベルで、アイコンは形の手掛かりとして背景に退く。 絵文字のようにアイコン自身が主張すると、項目が増えたときに「絵の壁」になって読めなくなる。 */ .acc_side_icon { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: #9aa39c; transition: color .12s ease; } .acc_side_icon svg { width: 18px; height: 18px; display: block; } .acc_side_link:hover .acc_side_icon { color: #5c665e; } .acc_side_active .acc_side_icon { color: var(--acc_primary); } /* 移行 SQL 適用前に残っている絵文字。線画と並んでも行が崩れない大きさに抑える */ .acc_side_icon_legacy { font-size: .95rem; line-height: 1; } /* ROBOT-682: 左メニュー内の (?) は塗りをやめて輪郭だけにする。 15 個以上が縦に並ぶため、塗りつぶしの丸が実は一番強い視覚ノイズだった。 hover では従来どおり塗って「押せる」ことを示す (機能は変えない)。 */ .acc_side_link .sr_help_btn { width: 16px; height: 16px; background: none; color: #a8b1a9; border: 1px solid #ccd3cd; } .acc_side_link:hover .sr_help_btn, .acc_side_link .sr_help_btn:hover { background: #90a490; color: #fff; border-color: #90a490; } .acc_side_dead { color: #a7b0a8; cursor: not-allowed; } /* 不許可URL: クリック不能 */ .acc_side_dead .acc_side_icon { color: #c2c9c3; } /* admin.php のタブは ではなく