/* エンドフィールド：記事・キャラページ用の黒背景テーマ（Layouts/dark.ctp）
   トップ（Elements/topDark.ctp）・パーティ編成ツールと同じ配色。
   既存の bootstrap / at.css / endfield.css の上から body.efd で塗り替える */
body.efd {
    --bg: #0b0d0f; --panel: #1a1e23; --panel2: #22272d; --line: #2e353d;
    --text: #e6e9ec; --sub: #c4cad1; --muted: #8b949e; --accent: #f2d22e; --ink: #15130a;
    background: var(--bg) !important; color: var(--text) !important; padding-top: 0 !important; font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
body.efd a { color: var(--accent); }
body.efd a:hover, body.efd a:focus { color: #fff; }
body.efd .en { font-family: 'Rajdhani', sans-serif; letter-spacing: .08em; }

/* ナビ・フッター（Layouts/tool.ctp と同じ） */
.efd .tl-container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.efd .tl-nav { position: sticky; top: 0; z-index: 1030; background: rgba(11,13,15,.92); backdrop-filter: blur(6px); border-bottom: 1px solid #22282e; }
.efd .tl-nav .tl-container { display: flex; align-items: center; gap: 10px; height: 48px; }
.efd .tl-brand { font: 700 20px 'Rajdhani', sans-serif; letter-spacing: .04em; color: var(--accent); text-decoration: none; }
.efd .tl-sub { font: 600 13px 'Rajdhani', sans-serif; letter-spacing: .12em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.efd .tl-sub:hover { color: var(--sub); }
.efd .tl-search { margin: 0 0 0 auto; display: flex; border: 1px solid var(--line); background: var(--panel); }
.efd .tl-search input { background: none; border: 0; color: var(--text); padding: 5px 10px; width: 200px; font-size: 12px; outline: none; }
.efd .tl-search button { background: none; border: 0; border-left: 1px solid var(--line); color: var(--muted); padding: 0 10px; cursor: pointer; font-size: 14px; }
.efd .tl-search:focus-within { border-color: var(--accent); }
.efd .tl-footer { border-top: 1px solid #22282e; margin-top: 24px; padding: 18px 0 28px; font-size: 12px; color: var(--muted); }
.efd .tl-footer a { color: var(--muted); text-decoration: none; }
.efd .tl-footer a:hover { color: var(--accent); }
.efd .tl-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.efd .tl-footer-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; margin-bottom: 10px; }
.efd .tl-copy { font-size: 11px; line-height: 1.7; color: #6b737b; margin: 0; }
.efd .efd-main { padding-top: 16px; }

/* 見出し下のカテゴリ（Elements/topDark.ctp の .gx-cats と同じ見た目） */
.efd .efd-cats { display: flex; gap: 6px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.efd .efd-cats::-webkit-scrollbar { display: none; }
.efd .efd-cats a { flex: none; background: var(--panel); border: 1px solid var(--line); padding: 5px 14px; font-size: 13px; color: var(--text); text-decoration: none; }
.efd .efd-cats a:hover { border-color: var(--muted); color: #fff; }

/* パンくず（行に付いている margin-top: -20px を打ち消す） */
.efd [style*="margin-top: -20px"] { margin-top: 0 !important; }
.efd .breadcrumb { background: none !important; padding: 0 0 10px; margin: 0; font-size: 12px; }
.efd .breadcrumb > li, .efd .breadcrumb > li a { color: var(--muted); }
.efd .breadcrumb > li a:hover { color: var(--accent); }
.efd .breadcrumb > li + li::before { color: #4b535b; }

/* パネル（左メニュー・本文・右列） */
.efd .panel, .efd .panel-default { background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: none; border-radius: 0; color: var(--text); }
.efd .panel-body { background: none !important; color: var(--text); }
.efd .panel-default.panel-orig > .panel-heading,
.efd .panel-default > .panel-heading { background: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; color: #fff !important; font-weight: 700; font-size: 14px; }
.efd .panel-default.panel-orig > .panel-heading.sub,
.efd .panel-default > .panel-heading.sub { background: none !important; border: 0 !important; color: var(--accent) !important; font-size: 12px; padding: 10px 15px 2px; letter-spacing: .04em; }
.efd .panel-default.panel-orig > .panel-heading.sub-sub { background: var(--panel2) !important; border-color: var(--line) !important; color: var(--sub) !important; }
.efd .nav-sidebar { margin: 0; }
.efd .nav-sidebar > li > a { color: var(--sub) !important; padding: 5px 15px 5px 17px; font-size: 13px; border-left: 2px solid transparent; background: none !important; }
.efd .nav-sidebar > li > a:hover, .efd .nav-sidebar > li > a:focus { background: var(--panel2) !important; border-left-color: var(--accent); color: #fff !important; }
.efd .nav-sidebar > li { color: var(--muted); }
.efd .icon_c { border-color: var(--line); }

/* 本文のパネルはトップの .gx-panel と同じ角の切り欠き */
.efd .gx-main > .panel { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); margin-bottom: 0; }
.efd .gx-main > .panel + .panel, .efd .gx-main > * + .panel { margin-top: 16px; }
.efd .gx-main { min-width: 0; }
.efd .gx-main.center_col_w { width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.efd .gx-wide { display: block; }
.efd .gx .breadcrumb { padding-top: 0; }
.efd .gx-cats { margin-bottom: 10px; }

/* 本文の見出し・文字 */
.efd h1 { color: #fff; }
.efd h2, .efd .panel-body h2 { box-shadow: none !important; background: none !important; background-color: transparent !important; color: #fff !important; border: 0 !important; border-left: 3px solid var(--accent) !important; padding: 2px 0 2px 10px !important; font-size: 18px; line-height: 1.45; border-radius: 0; }
.efd h3 { color: #fff !important; background: none !important; border: 0 !important; padding: 0 !important; font-size: 16px; line-height: 1.45; display: flex; align-items: center; gap: 8px; }
.efd h3::before { content: "//"; color: var(--accent); font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .04em; flex: none; }
.efd h3::after { content: ""; flex: 1; height: 1px; background: #5d656d; min-width: 24px; }
/* キャラページの見えない見出し（margin-top: -50px）がサムネイルを h2 に食い込ませるので、高さと余白をなくす */
.efd h3[style*="visibility: hidden"] { height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; }
.efd h3[style*="visibility: hidden"]::before, .efd h3[style*="visibility: hidden"]::after { display: none; }
.efd h4 { color: #fff !important; border-bottom: 1px solid var(--line) !important; }
.efd p, .efd li, .efd dd, .efd dt { color: inherit; }
.efd .panel-body p { color: var(--sub); }
.efd strong, .efd b { color: #fff; }
.efd hr { border-color: var(--line) !important; }
.efd p.img_exp, .efd .img_exp { color: var(--muted) !important; }
.efd .show_cr, .efd .sponsor, .efd .searchResDes, .efd .com_date { color: #6b737b !important; }
.efd blockquote { border-left-color: var(--line); color: var(--sub); }
.efd .blockq_pos_left, .efd .blockq_pos_right { color: var(--muted); }
.efd [style*="color: #7c7c7c"], .efd [style*="color:#7c7c7c"] { color: var(--muted) !important; }
.efd .fon-9, .efd .fon-10, .efd .fon-10-lg, .efd .fon-12, .efd .fon-20-lg { color: var(--sub) !important; text-shadow: none !important; }
/* 表の中の小さい注記（ガチャの期間など）は少し大きく、行間を広めに */
.efd td .fon-10 { font-size: 11px; line-height: 1.6; color: var(--muted) !important; }

/* 本文中のリンクは強調文（黄色）と見分けられるよう、水色＋下線 */
.efd .gx-main .panel-body p a, .efd .gx-main .panel-body td a, .efd .gx-main .panel-body li a, .efd .gx-main .panel-body dd a {
    color: #7cc4ff; text-decoration: underline; text-decoration-color: rgba(124,196,255,.45); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.efd .gx-main .panel-body p a:hover, .efd .gx-main .panel-body td a:hover, .efd .gx-main .panel-body li a:hover, .efd .gx-main .panel-body dd a:hover { color: #b3dcff; text-decoration-color: currentColor; }
/* 目次・キャラアイコン・記事一覧・タグはリンクの見た目にしない */
.efd .gx-main .panel-body #index a, .efd .gx-main .panel-body .index li a, .efd .gx-main .panel-body .searchRes td a, .efd .gx-main .panel-body .ref_table td a,
.efd .gx-main .panel-body .nav-tabs li a, .efd .gx-main .panel-body td a.btn, .efd .gx-main .panel-body p a.btn { color: var(--accent); text-decoration: none; }
.efd .gx-main .panel-body .item_container a, .efd .gx-main .panel-body td .item_container a { color: var(--text); text-decoration: none; }

/* 文字色のクラス（黒背景で読めるように明るめに） */
.efd .ann_col { color: #6cc4ea; }
.efd .lost_col { color: #f0b47a; }
.efd .fs { color: var(--accent); }
.efd .fso { color: #ff8a3d; }
.efd .fso.is-tag { display: inline-block; font-size: 11px; font-weight: 700; line-height: 17px; padding: 0 6px; margin: 0 4px 2px 0; color: #ffa463; background: rgba(255,138,61,.12); border: 1px solid rgba(255,138,61,.7); vertical-align: 1px; letter-spacing: .04em; }
.efd .el_fire_col { color: #ff7a5c; }
.efd .el_physics_col { color: #d9d2b0; }
.efd .el_ice_col { color: #4fd6dc; }
.efd .el_thunder_col { color: #ffcc33; }
.efd .el_wind_col { color: #a8e64a; }
.efd .el_physics { color: #c9ced4; }
.efd .el_quantum { color: #8f7bff; }
.efd .el_thunder { color: #c77dff; }

/* 表 */
.efd .table, .efd table { background: none; color: var(--text); }
.efd .table > thead > tr > th, .efd .table > tbody > tr > th, .efd .table > tbody > tr > td,
.efd .table-bordered, .efd .table-bordered > tbody > tr > td, .efd .table-bordered > tbody > tr > th, .efd .table-bordered > thead > tr > th { border-color: var(--line) !important; }
.efd table th, .efd th, .efd .table th { background-color: var(--panel2) !important; color: #fff; }
.efd table td { background-color: transparent; }
.efd .table.unique-rank td, .efd .table.unique-rank th { color: var(--text); }
.efd .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
.efd .table-hover > tbody > tr:hover { background: var(--panel2); }
.efd .endf { background-color: var(--panel2) !important; color: var(--text); }
.efd .endf th { background-color: #2a3037 !important; }
.efd .table_pick { background-color: rgba(242,210,46,.12); }
.efd .rate_5 { background-color: rgba(242,210,46,.14); }
.efd .rate_4_5 { background-color: rgba(255,140,60,.12); }
.efd .collapse-table { background: none; }
.efd .sticky-table th:first-child, .efd .sticky-table td:first-child, .efd [class*="sticky"] { background-color: var(--panel); color: var(--text); }
.efd th.headerSortUp, .efd th.headerSortDown { background-color: #2a3037 !important; }

/* 吹き出し・補足ボックス */
.efd .c_bq, .efd .says_sen, .efd .says, .efd .connect_b, .efd .exp_item, .efd .exp_bq, .efd .well,
.efd .index-container, .efd .active_back_color { background: var(--panel2) !important; color: var(--text) !important; border-color: var(--line) !important; }
.efd .says_sen:after, .efd .says:after { border-right-color: var(--panel2) !important; }
.efd .sheet_tag { background: #3a414a; color: #fff; }
/* スキル・素質のバッジ（パーティ編成ツールの技ラベルと同じ：枠線＋文字が技ごとの色、角は四角） */
.efd .sen_pos, .efd .sen_pos_b { --bc: #8b949e; background: var(--panel) !important; border: 1px solid var(--bc); border-radius: 0; padding: 0 7px; line-height: 17px; color: var(--bc); }
.efd .sen_pos span, .efd .sen_pos_b span { color: var(--bc) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .04em; text-shadow: none !important; }
.efd .sen_pos.is-sengi, .efd .sen_pos_b.is-sengi { --bc: #5aa9ff; }
.efd .sen_pos.is-renkei, .efd .sen_pos_b.is-renkei { --bc: #3fd0a4; }
.efd .sen_pos.is-ult, .efd .sen_pos_b.is-ult { --bc: #ff8a5c; }
.efd .sen_pos.is-basic, .efd .sen_pos_b.is-basic { --bc: #c4cad1; }
.efd .sen_pos.is-promo, .efd .sen_pos_b.is-promo { --bc: var(--accent); }
.efd .border_sen { border-bottom-color: var(--line); }
.efd .alert-info { background: rgba(108,196,234,.08) !important; border-color: rgba(108,196,234,.4) !important; color: #9fd8f0 !important; }
.efd .alert-danger { background: rgba(240,163,58,.08) !important; border-color: rgba(240,163,58,.4) !important; color: #f0b86a !important; }
.efd .alert-success { background: rgba(124,207,122,.08) !important; border-color: rgba(124,207,122,.4) !important; color: #a5dfa3 !important; }
.efd .index li { border-bottom-color: var(--line); }
.efd .new-topic { border-color: var(--accent); color: var(--accent); }

/* 参考リンク表 */
.efd .ref_table { border-color: var(--line); }
.efd .ref_t_ref { background-color: var(--panel2); color: var(--accent); }

/* キャラアイコンの並び（パーティ編成ツールと同じ：四角い顔アイコン＋下にレアリティ色の線＋その下に名前） */
.efd .item_container { width: 64px; height: auto; margin: 8px 8px 0 0; }
.efd .item_container .item_size_pos { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--panel2); border-bottom: 3px solid var(--rc, var(--line)); transition: filter .15s; }
.efd .item_container:hover .item_size_pos { filter: brightness(1.15); }
.efd .item_container.r6 { --rc: #FF7100; }
.efd .item_container.r5 { --rc: #FFCC00; }
.efd .item_container.r4 { --rc: #B380FF; }
.efd .item_container .item_name_pos_under { position: static; width: auto; height: auto; margin-top: 3px; text-align: center; line-height: 1.3; }
.efd .item_container .item_name_pos_under a { text-decoration: none; }
.efd .item_container .item_name_pos_under span { display: block; text-shadow: none !important; font-size: 10px; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.efd .item_container .item_name_pos_under.visible-xs { display: none !important; }
.efd .item_container .item_name_pos_under.hidden-xs { display: block !important; }
/* アイコンの下の「（初）」「（2）」などは名前のさらに下に小さく */
.efd .item_container .item_num_pos { position: static; width: auto; height: auto; margin-top: 1px; text-align: center; line-height: 1.2; }
.efd .item_container .item_num_pos span { font-size: 10px !important; font-weight: 700; color: var(--accent) !important; text-shadow: none !important; }
.efd .item_container_sub, .efd .item_container_sen, .efd .item_container_center { background: none; }

/* 黒い線画のSVGアイコン（目次・タグ・補足など）を白くする */
.efd img.list, .efd img.icon-caret-down, .efd img.icon-tags, .efd img.icon-lightbulb, .efd img.icon-arrow-circle-right, .efd img.icon-ex-link { filter: brightness(0) invert(1); opacity: .85; }

/* タブ・ボタン・ページ送り */
.efd .nav-tabs { border-bottom-color: var(--line); }
.efd .nav-tabs > li > a { color: var(--sub); background: none; border-color: transparent; border-radius: 0; }
.efd .nav-tabs > li > a:hover { background: var(--panel2); border-color: var(--line) var(--line) transparent; color: #fff; }
.efd .nav-tabs > li.active > a, .efd .nav-tabs > li.active > a:hover, .efd .nav-tabs > li.active > a:focus { background: var(--panel) !important; color: var(--accent); border: 1px solid var(--line); border-bottom-color: var(--panel); }
.efd .btn-default { background: var(--panel2); color: var(--text); border-color: var(--line); }
.efd .btn-default:hover, .efd .btn-default.active { background: #2a3037; color: #fff; border-color: var(--muted); }
.efd .btn-primary { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important; border-radius: 0; font-weight: 700; }
.efd .btn-x, .efd .btn-line, .efd .btn-facebook, .efd .btn-url, .efd .btn-tweet,
.efd .btn-x:link, .efd .btn-line:link, .efd .btn-facebook:link, .efd .btn-url:link,
.efd .btn-x:visited, .efd .btn-line:visited, .efd .btn-facebook:visited, .efd .btn-url:visited { background: var(--panel2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 0; font-weight: 500; }
.efd .btn-x:hover, .efd .btn-line:hover, .efd .btn-facebook:hover, .efd .btn-url:hover, .efd .btn-tweet:hover { background: var(--panel2) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.efd .btn-x img, .efd .icon-x { filter: invert(1); }
.efd .pagination > li > a, .efd .pagination > li > span { background: var(--panel) !important; border-color: var(--line) !important; color: var(--sub) !important; }
.efd .pagination > li > a:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.efd .pagination > .active > a, .efd .pagination > .active > span { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important; }
.efd .pagination > .disabled > a, .efd .pagination > .disabled > span { color: #5d656d !important; }
.efd .pagination > .current > a, .efd .pagination > .current > span { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important; font-weight: 700; }

/* 記事一覧（タグ・検索・関連記事） */
.efd .searchRes tr { border-bottom: 1px solid var(--line); }
.efd .searchRes td { color: var(--text); }
.efd .searchRes h4 { color: #fff !important; border: 0 !important; }
.efd .thumbnail, .efd .caption > h5, .efd .caption > h5 > a { background: none; border: 0; color: #fff; }

/* フォーム（コメント欄） */
.efd .form-control, .efd textarea, .efd input[type="text"], .efd input[type="email"], .efd select { background: var(--panel2) !important; border-color: var(--line) !important; color: var(--text) !important; box-shadow: none; border-radius: 0; }
.efd .form-control:focus { border-color: var(--accent) !important; }
.efd legend, .efd label { color: var(--text); border-color: var(--line); }
.efd .comm_info { color: #7ccf7a; }
.efd .modal-content { background: var(--panel) !important; color: var(--text); border-color: var(--line); }

/* インラインで薄い灰色の背景が付いた見出し（右列の「集中攻略」など） */
.efd [style*="background-color: #e7e7e7"], .efd [style*="background-color:#e7e7e7"] { background-color: var(--panel2) !important; color: var(--muted) !important; }

/* キャラページのレアリティの星（灰色の画像）を明るく */
.efd img[src*="c91ba360b5e7d57817dfd92d7ab75443"], .efd img[src*="1efe6f4226bdf5f1b87255f5281732f4"], .efd img[src*="a8c239a37458fca1141966e23f96eb22"] { filter: brightness(1.7); }

/* ランク表などの開閉ボタン（黒い線の画像の代わりに黄色の山形を描く） */
.efd .view-down, .efd .view-up { background: none !important; position: relative; display: inline-block; width: 22px; height: 22px; vertical-align: middle; border: 1px solid var(--line); background-color: var(--panel2) !important; transition: border-color .15s; }
.efd .view-down::before, .efd .view-up::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.efd .view-down::before { transform: translate(-50%, -70%) rotate(45deg); }
.efd .view-up::before { transform: translate(-50%, -25%) rotate(-135deg); }
.efd a:hover > .view-down, .efd a:hover > .view-up { border-color: var(--accent); }

/* 絞り込みの入力欄（キャラ一覧・キャラシート） */
.efd .input-group-addon { background: var(--panel2); border-color: var(--line); color: var(--sub); border-radius: 0; }
.efd .btn-danger, .efd .btn-danger:link, .efd .btn-danger:visited { background: var(--panel2) !important; border: 1px solid #c0566f !important; color: #ff8aa5 !important; border-radius: 0; }
.efd .btn-danger:hover { background: #c0566f !important; color: #fff !important; }
.efd .btn-info, .efd .btn-info:link, .efd .btn-info:visited { background: var(--panel2) !important; border: 1px solid #4a90c8 !important; color: #8cc4ef !important; border-radius: 0; }
.efd .btn-info:hover { background: #4a90c8 !important; color: #fff !important; }

/* シェアバー（Elements/sns.ctp。パーティ編成ツールと同じ） */
.efd .efd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); }
.efd .efd-share-title { font-size: 13px; font-weight: 700; color: #fff; margin-right: auto; }
.efd .efd-share-title .en { color: var(--accent); font-size: 12px; margin-right: 8px; }
.efd .efd-share-btns { display: flex; gap: 8px; }
.efd .efd-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 12px; cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.efd .efd-share-btn svg { width: 16px; height: 16px; fill: currentColor; }
.efd .efd-share-btn:hover, .efd .efd-share-btn:focus { border-color: var(--accent); color: var(--accent); }
.efd .efd-share-btn.is-done { background: var(--accent); color: var(--ink); border-color: var(--accent); }
@media (max-width: 767px) {
    .efd .efd-share-btn .efd-share-label { display: none; }
    .efd .efd-share-title { flex-basis: 100%; }
    .efd .efd-share-btns { flex: 1; }
    .efd .efd-share-btn { flex: 1; }
}

/* 広告まわり */
.efd .footer_ov_ad { background: var(--panel2); }

@media (max-width: 767px) {
    .efd .item_container { width: 54px; margin: 6px 6px 0 0; }
    .efd .tl-sub { font-size: 11px; }
    .efd .tl-search input { width: 96px; }
    .efd .efd-main { padding-top: 12px; }
}
@media (max-width: 420px) {
    .efd .tl-search input { width: 64px; padding: 5px 6px; }
}