/* ===== ベース ===== */ * { box-sizing: border-box; } :root{ --bg: #f4f5f9; --panel: #ffffff; --panel-2: #f7f8fb; --line: #e1e4ed; --line-strong: #c8cdd9; --text: #1a1d2e; --text-2: #3d4358; --muted: #6b7280; --accent: #7a1f1c; /* HPらしい深い赤 */ --accent-hover: #9c2723; --accent-soft: #fdecec; /* primaryボタンの薄背景 */ --danger: #d1242f; --ok: #1f9d55; --gryffindor: #ae0001; --slytherin: #1a472a; --hufflepuff: #ecb939; --ravenclaw: #0e1a40; --no-house: #6b7280; } html, body{ margin: 0; } body{ background: var(--bg); color: var(--text); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; } /* ビルダーUIのルート（モックでは body 全体、WPでは div#hpdb-builder-root） */ .hpdb-app, body.hpdb-builder{ display: flex; flex-direction: column; } /* WP環境ではの他に色々挟まる可能性があるので、ビルダーラッパーで高さ制御 */ #hpdb-builder-root{ display: flex; flex-direction: column; min-height: 100vh; } /* ===== ボタン（基本は文字） ===== */ .btn-text{ background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); padding: 7px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s; } .btn-text:hover{ background: var(--panel-2); border-color: var(--accent); color: var(--accent); } .btn-text.primary{ background: #0d1224; color: #fff; border-color: #c5a063; } .btn-text.primary:hover{ background: #131a3a; border-color: #d6b577; color: #c5a063; } .btn-text.btn-secondary{ background: var(--panel-2); } input, select, textarea{ background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 10px; font: inherit; width: 100%; } input:focus, select:focus, textarea:focus{ outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .hidden{ display: none !important; } /* ===== トップバー ===== */ .topbar{ display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #0d1224; color: #f5f1e3; border-bottom: 2px solid #c5a063; flex-shrink: 0; gap: 10px; position: sticky; top: 0; z-index: 10; } .topbar .btn-text{ background: transparent; color: #f5f1e3; border-color: rgba(255,255,255,.25); } .topbar .btn-text:hover{ background: rgba(255,255,255,.08); border-color: #c5a063; color: #c5a063; } .topbar .btn-text.primary{ background: #c5a063; color: #0d1224; border-color: #c5a063; } .topbar .btn-text.primary:hover{ background: #d6b577; border-color: #d6b577; color: #0d1224; } .topbar .btn-back{ text-decoration: none; display: inline-flex; align-items: center; font-size: 13px; } .topbar-left{ display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .deck-title{ flex: 1; min-width: 0; } .deck-title input{ font-weight: bold; font-size: 15px; background: transparent; color: #f5f1e3; border-color: transparent; padding: 3px 6px; width: 100%; } .deck-title input::placeholder{ color: rgba(245,241,227,.45); } .deck-title input:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); } .deck-title input:focus{ background: rgba(255,255,255,.08); border-color: #c5a063; outline: none; } .deck-status{ display: flex; gap: 8px; align-items: center; font-size: 11px; color: rgba(245,241,227,.7); margin-top: 2px; padding: 0 6px; flex-wrap: wrap; } .deck-status .dot{ width: 3px; height: 3px; background: rgba(245,241,227,.3); border-radius: 50%; } .deck-status .ok{ color: #4dd07a; font-weight: bold; } .deck-status .over{ color: #ff6b73; font-weight: bold; } #status-validity.ok{ color: #4dd07a; font-weight: bold; } #status-validity.error{ color: #ff6b73; font-weight: bold; } .topbar-actions{ display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } /* ===== タブ ===== */ .tabs{ display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; scrollbar-width: thin; background: var(--panel); border-bottom: 1px solid var(--line); flex-shrink: 0; } .tab{ padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text-2); font-size: 12px; white-space: nowrap; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 5px; transition: background .12s, border-color .12s; } .tab:hover{ background: var(--panel-2); border-color: var(--accent); } .tab.active{ background: var(--text); color: #fff; border-color: var(--text); font-weight: bold; } .tab .badge{ font-size: 10px; background: rgba(0,0,0,.08); padding: 1px 6px; border-radius: 999px; color: inherit; } .tab.active .badge{ background: rgba(255,255,255,.25); } /* ===== レイアウト上下分割 ===== ・デスクトップ：上下分割で各ペイン内スクロール・スマホ/狭い画面：ページ全体を自然にスクロール */ .deck-pane, .pool-pane{ display: flex; flex-direction: column; background: var(--bg); } .deck-pane{ border-bottom: 1px solid var(--line-strong); background: var(--panel-2); } @media (min-width: 901px){ .deck-pane, .pool-pane{ min-height: 0; overflow: hidden; } .deck-pane{ flex: 0 0 45%; } .pool-pane{ flex: 1; } .grid{ overflow-y: auto; flex: 1; } } /* ===== グリッド ===== */ .grid{ display: grid; gap: 10px; padding: 12px 14px; } .deck-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .pool-grid{ grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); } /* ===== カードタイル ===== */ .card{ position: relative; border-radius: 8px; padding: 5px; background: var(--panel); display: flex; flex-direction: column; transition: transform .1s, box-shadow .12s; user-select: none; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,30,60,.04); } .card .art{ aspect-ratio: 5 / 7; border-radius: 5px; position: relative; overflow: hidden; background-position: center; background-size: cover; } /* 実画像（画像があるときのみ表示） */ .card .art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; } .card .art img.failed{ display: none; } /* オーバーレイ（タグや名前。画像があれば前面、なければ寮カラーの上に） */ .card .art .overlay{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 5px; font-size: 9px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); } /* 画像がある場合は名前ラベルだけ控えめに、タグも半透明背景で見やすく */ .card .art img:not(.failed) ~ .overlay .name{ display: none; } .card .art .top{ display: flex; justify-content: space-between; align-items: flex-start; } .card .art .name{ font-weight: bold; font-size: 10px; background: rgba(0,0,0,.65); padding: 3px 4px; border-radius: 3px; text-align: center; line-height: 1.2; } .card.house-gryffindor .art{ background-color: var(--gryffindor); } .card.house-slytherin .art{ background-color: var(--slytherin); } .card.house-hufflepuff .art{ background-color: var(--hufflepuff); color: #1a1a1a; text-shadow: none; } .card.house-hufflepuff .art .name{ background: rgba(0,0,0,.4); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .card.house-ravenclaw .art{ background-color: var(--ravenclaw); } .card.house-none .art{ background-color: var(--no-house); } .card .meta{ margin-top: 4px; display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); } .card .type-tag{ font-size: 8px; background: rgba(0,0,0,.55); padding: 1px 4px; border-radius: 2px; color: #fff; } .card .rarity-tag{ font-size: 8px; background: rgba(255,255,255,.85); color: var(--accent); padding: 1px 4px; border-radius: 2px; font-weight: bold; } /* プール側 */ .pool-grid .card{ cursor: pointer; } .pool-grid .card:hover{ transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 4px 12px rgba(122,31,28,.18); } .pool-grid .card .in-deck-badge{ position: absolute; bottom: 6px; right: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 999px; min-width: 24px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); } .pool-grid .card.full{ opacity: .45; cursor: not-allowed; } .pool-grid .card.full .art{ filter: grayscale(.6); } /* デッキ側 -/+ */ .deck-grid .card{ background: var(--panel); } .deck-grid .card .qty-controls{ display: flex; margin-top: 5px; gap: 3px; } .deck-grid .card .qty-controls button{ flex: 1; padding: 6px 0; font-size: 16px; font-weight: bold; line-height: 1; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text); cursor: pointer; } .deck-grid .card .qty-controls button:hover{ background: var(--accent); color: #fff; border-color: var(--accent); } .deck-grid .card .qty-controls .qty-display{ flex: 1; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; background: var(--panel-2); border-radius: 4px; border: 1px solid var(--line); color: var(--text); } .empty{ padding: 40px 14px; text-align: center; color: var(--muted); font-size: 13px; } /* ===== プールツールバー ===== */ .pool-toolbar{ display: flex; gap: 8px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); align-items: center; flex-shrink: 0; } .search-wrap{ flex: 1; position: relative; } .search-wrap input[type="search"]{ padding-left: 10px; } .pool-toolbar select{ width: auto; min-width: 110px; } .filter-panel{ background: var(--panel); padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .filter-panel fieldset{ border: none; padding: 0; margin: 0 0 10px; } .filter-panel legend{ font-size: 11px; color: var(--muted); padding: 0; margin-bottom: 5px; font-weight: bold; } .chips{ display: flex; flex-wrap: wrap; gap: 5px; } .chip{ font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); cursor: pointer; user-select: none; color: var(--text-2); } .chip:hover{ background: var(--panel-2); } .chip.active{ background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold; } .reset-btn{ font-size: 11px; padding: 5px 12px; margin-top: 4px; } .pool-header{ padding: 6px 14px; font-size: 11px; color: var(--muted); flex-shrink: 0; background: var(--bg); } /* ===== モーダル ===== */ .modal{ position: fixed; inset: 0; background: rgba(20,30,60,.45); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-body{ background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; width: 90%; max-width: 540px; box-shadow: 0 12px 32px rgba(20,30,60,.18); } .modal-body h3{ margin: 0 0 8px; color: var(--accent); font-size: 16px; } .modal-body textarea{ font-family: 'Consolas', monospace; font-size: 12px; word-break: break-all; } .modal-actions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } /* ===== 統計モーダル ===== */ .stats-body{ max-width: 520px; position: relative; max-height: 86vh; overflow-y: auto; } .modal-close-btn{ position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 22px; color: var(--muted); cursor: pointer; padding: 4px 8px; } .modal-close-btn:hover{ color: var(--accent); } .stats-summary{ margin: 0 0 14px; font-size: 13px; color: var(--text-2); } .stat-block{ margin-bottom: 18px; } .stat-block h4{ font-size: 13px; margin: 0 0 8px; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 4px; } .stat-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .stat-list li{ display: grid; grid-template-columns: 100px 1fr 70px; gap: 8px; font-size: 12px; align-items: center; } .stat-label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); } .stat-bar{ height: 14px; background: var(--panel-2); border-radius: 7px; position: relative; overflow: hidden; } .stat-bar-fill{ position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 7px; } .stat-bar-fill.house-gryffindor{ background: var(--gryffindor); } .stat-bar-fill.house-slytherin{ background: var(--slytherin); } .stat-bar-fill.house-hufflepuff{ background: var(--hufflepuff); } .stat-bar-fill.house-ravenclaw{ background: var(--ravenclaw); } .stat-bar-fill.house-none{ background: var(--no-house); } .stat-value{ font-weight: bold; text-align: right; color: var(--text); } .stat-value small{ font-weight: normal; color: var(--muted); } /* ===== 画像エクスポート用レイアウト ===== */ .export-canvas{ /* hidden container, only used as parent if needed */ } .export-layout{ position: fixed; left: -10000px; top: 0; width: 1200px; background: #ffffff; color: #1a1d2e; padding: 24px 28px; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif; box-sizing: border-box; } .export-layout .ex-header{ display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #7a1f1c; padding-bottom: 12px; margin-bottom: 16px; } .export-layout h2{ font-size: 26px; margin: 0 0 4px; color: #1a1d2e; } .export-layout .ex-sub{ font-size: 12px; color: #6b7280; margin: 0; } .export-layout .ex-houses{ display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: #3d4358; } .export-layout .ex-leg{ display: inline-flex; align-items: center; gap: 4px; } .export-layout .ex-dot{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .export-layout .ex-house-gryffindor{ background-color: #ae0001; color: white; } .export-layout .ex-house-slytherin{ background-color: #1a472a; color: white; } .export-layout .ex-house-hufflepuff{ background-color: #ecb939; color: #1a1a1a; } .export-layout .ex-house-ravenclaw{ background-color: #0e1a40; color: white; } .export-layout .ex-house-none{ background-color: #6b7280; color: white; } .export-layout .ex-pmrow{ display: flex; gap: 16px; margin-bottom: 16px; } .export-layout .ex-pm-block{ flex: 0 0 130px; } .export-layout .ex-pm-label{ font-size: 10px; letter-spacing: 2px; font-weight: bold; color: #7a1f1c; margin-bottom: 4px; } .export-layout .ex-grid{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; } .export-layout .ex-card{ background: #f4f5f9; border-radius: 4px; overflow: hidden; border: 1px solid #e1e4ed; font-size: 9px; } .export-layout .ex-art{ position: relative; aspect-ratio: 5 / 7; } .export-layout .ex-art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .export-layout .ex-overlay{ position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 4px; z-index: 2; } .export-layout .ex-name{ width: 100%; background: rgba(0,0,0,.65); color: #fff; padding: 2px 4px; border-radius: 2px; font-size: 9px; text-align: center; line-height: 1.2; } .export-layout .ex-meta{ display: flex; justify-content: space-between; padding: 3px 5px; background: #fff; font-size: 9px; color: #6b7280; } .export-layout .ex-qty{ font-weight: bold; color: #7a1f1c; } .export-layout .ex-pm-block .ex-art{ border-radius: 6px; } .export-layout .ex-footer{ margin-top: 14px; padding-top: 10px; border-top: 1px solid #e1e4ed; font-size: 10px; color: #6b7280; text-align: right; } /* ===== ボタン内アイコン（mask-imageで色分離） ===== */ .btn-with-icon{ display: inline-flex; align-items: center; gap: 6px; } .icon{ display: none; /* PCでは文字優先のため非表示 */ width: 16px; height: 16px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex-shrink: 0; } .icon-save{ -webkit-mask-image: url('icons/icon-save.svg'); mask-image: url('icons/icon-save.svg'); } .icon-link{ -webkit-mask-image: url('icons/icon-link.svg'); mask-image: url('icons/icon-link.svg'); } /* ===== モバイル: アイコン優先 ===== */ @media (max-width: 600px){ .topbar{ padding: 8px 10px; gap: 6px; } .topbar-actions button{ padding: 7px 10px; } /* アイコン付きボタンはアイコンだけ見せる */ .btn-with-icon .label{ display: none; } .btn-with-icon .icon{ display: inline-block; width: 18px; height: 18px; } .btn-with-icon{ width: 38px; height: 38px; padding: 0; justify-content: center; } /* 検索アイコンを inputの左側に表示 */ .search-wrap::before{ content: ''; position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background-color: var(--muted); -webkit-mask: url('icons/icon-search.svg') center/contain no-repeat; mask: url('icons/icon-search.svg') center/contain no-repeat; pointer-events: none; } .search-wrap input[type="search"]{ padding-left: 32px; } .deck-status{ font-size: 10px; gap: 6px; } .deck-grid{ grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); } .pool-grid{ grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); } .deck-pane{ flex: 0 0 50%; } }