/*
 * カツプロ共通のヘッダー・フッター（2026-10-05・UIUX 決定記録 1〜7）。文字はすべて15px以上（全サービスの決まり・2026-10-05 カツの指摘で15px未満を一括で上げた）。
 * 本体・カツプロPR・デザインギャラリー・AI SEO の4つで同じものを使う。置き場所＝https://pro.alcuesto.jp/common/kp-shell.css
 * どのアプリの CSS ともぶつからないよう、class はすべて kps- で始める。開け閉めは <details>（JS が無くても動く）。
 * 1段目＝4つ共通（ロゴ・サービスの切り替え・ログイン／会員のアイコン・無料登録）
 * 2段目＝そのサービスのメニュー／未ログインだけ案内の細い帯／フッター＝上段はサービスのリンク・下段は共通
 */
.kps-head, .kps-foot, .kps-note { --kps-blue: #0055ff; --kps-ink: #111827; --kps-text: #374151; --kps-sub: #4b5563; --kps-line: #e5e7eb; --kps-bg: #f8fafc; --kps-max: 1400px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif; color: var(--kps-text); line-height: 1.5; box-sizing: border-box; }
.kps-head *, .kps-foot *, .kps-note * { box-sizing: border-box; }
.kps-head a, .kps-foot a, .kps-note a { text-decoration: none; color: inherit; }
.kps-in { max-width: var(--kps-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .kps-in { padding: 0 24px; } }

/* ===== 1段目（共通） ===== */
.kps-head { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--kps-line); }
.kps-bar { display: flex; align-items: center; gap: 12px; height: 56px; }
.kps-logo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kps-logo img { height: 28px; width: auto; display: block; }
.kps-svc { font-size: 15px; font-weight: 700; color: var(--kps-blue); background: #eef4ff; border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
.kps-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kps-login { font-size: 15px; font-weight: 700; color: var(--kps-ink); padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.kps-login:hover { background: #f3f4f6; }
.kps-join { font-size: 15px; font-weight: 700; color: #fff !important; background: var(--kps-blue); padding: 8px 14px; border-radius: 99px; white-space: nowrap; }
.kps-join:hover { background: #0044cc; }

/* 開け閉め（アプリのパネル・会員のメニュー） */
.kps-pop { position: relative; }
.kps-pop > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; color: var(--kps-sub); }
.kps-pop > summary::-webkit-details-marker { display: none; }
.kps-pop > summary:hover, .kps-pop[open] > summary { background: #f3f4f6; }
.kps-pop > summary:focus-visible { outline: 2px solid var(--kps-blue); outline-offset: 2px; }
.kps-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--kps-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); padding: 12px; }
.kps-panel h3 { margin: 4px 6px 8px; font-size: 15px; font-weight: 700; color: var(--kps-sub); letter-spacing: .04em; }

/* アプリの切り替え（点9つ） */
.kps-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.kps-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--kps-ink); text-align: center; line-height: 1.3; }
.kps-app:hover { background: #f3f6ff; }
.kps-app i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-style: normal; font-size: 15px; font-weight: 800; color: #fff; }
.kps-app[aria-current="page"] { background: #eef4ff; }
.kps-more { display: block; margin-top: 8px; padding: 10px; border-top: 1px solid var(--kps-line); text-align: center; font-size: 15px; font-weight: 700; color: var(--kps-blue) !important; }

/* 会員のアイコンとメニュー */
.kps-avatar > summary { width: auto; padding: 0 4px; }
.kps-face { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; }
.kps-face img { width: 100%; height: 100%; object-fit: cover; }
.kps-me { display: flex; align-items: center; gap: 10px; padding: 6px 6px 12px; border-bottom: 1px solid var(--kps-line); margin-bottom: 6px; }
.kps-me b { display: block; font-size: 15px; color: var(--kps-ink); }
.kps-plan { display: inline-block; margin-top: 2px; font-size: 15px; font-weight: 700; border-radius: 99px; padding: 1px 8px; background: #f3f4f6; color: var(--kps-sub); }
.kps-plan--paid { background: #eef4ff; color: var(--kps-blue); }
.kps-plan--admin { background: #fff4e5; color: #b45309; }
.kps-menu a, .kps-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 8px; font: inherit; font-size: 15px; color: var(--kps-ink); background: none; border: 0; cursor: pointer; text-align: left; }
.kps-menu a:hover, .kps-menu button:hover { background: #f3f4f6; }
.kps-menu hr { border: 0; border-top: 1px solid var(--kps-line); margin: 6px 0; }
.kps-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; }

/* ===== 2段目（サービスのメニュー） ===== */
.kps-sub { border-top: 1px solid var(--kps-line); background: #fff; }
.kps-sub .kps-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.kps-sub .kps-in::-webkit-scrollbar { display: none; }
.kps-sub a { flex: none; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; font-size: 15px; font-weight: 700; color: var(--kps-sub); border-bottom: 2px solid transparent; white-space: nowrap; }
.kps-sub a:hover { color: var(--kps-ink); }
.kps-sub a[aria-current="page"] { color: var(--kps-blue); border-bottom-color: var(--kps-blue); }

/* ===== 未ログインだけの案内の帯 ===== */
.kps-note { background: #f3f6ff; border-bottom: 1px solid #dbe5ff; font-size: 15px; }
.kps-note .kps-in { display: flex; align-items: center; gap: 12px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.kps-note p { margin: 0; color: var(--kps-ink); }
.kps-note a { margin-left: auto; flex: none; font-weight: 700; color: var(--kps-blue) !important; white-space: nowrap; }

/* ===== フッター ===== */
.kps-foot { background: #fff; border-top: 1px solid var(--kps-line); margin-top: 48px; font-size: 15px; }
.kps-foot-svc { padding: 32px 0 24px; border-bottom: 1px solid var(--kps-line); }
.kps-foot-svc h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--kps-ink); }
.kps-foot-svc ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 24px; }
.kps-foot-svc a { color: var(--kps-sub); }
.kps-foot-svc a:hover { color: var(--kps-blue); }
.kps-foot-base { padding: 20px 0 28px; }
.kps-foot-base .kps-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.kps-foot-logo img { height: 22px; display: block; }
.kps-sns { display: flex; gap: 10px; }
.kps-sns a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 99px; color: var(--kps-sub); }
.kps-sns a:hover { background: #f3f4f6; color: var(--kps-ink); }
.kps-sns svg { width: 18px; height: 18px; }
.kps-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 15px; }
.kps-links a { color: var(--kps-sub); }
.kps-links a:hover { color: var(--kps-blue); }
.kps-copy { width: 100%; margin: 0; font-size: 15px; color: var(--kps-sub); }

/* スマホ */
@media (max-width: 640px) {
  .kps-bar { height: 52px; gap: 8px; }
  .kps-logo img { height: 24px; }
  .kps-svc { font-size: 15px; padding: 2px 8px; }
  .kps-login { padding: 8px 6px; font-size: 15px; }
  .kps-join { padding: 7px 12px; font-size: 15px; }
  .kps-note p { font-size: 15px; }
  .kps-links { margin-left: 0; }
}


/* ===== 1段目の文字のメニュー（メディア・ヘルプ）（2026-10-05 決定記録 39） ===== */
.kps-tlink { font-size: 15px; font-weight: 700; color: var(--kps-sub); padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.kps-tlink:hover { background: #f3f4f6; color: var(--kps-ink); }
@media (max-width: 640px) { .kps-tlink { display: none; } }

/* ===== アプリのパネル（広く・全部のサービス・カードの画像）（決定記録 37） ===== */
.kps-panel--apps { width: 920px; max-height: min(78vh, 760px); overflow-y: auto; padding: 16px 18px; }
.kps-cat + .kps-cat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kps-line); }
.kps-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.kps-card { display: block; border-radius: 10px; padding: 4px; font-size: 15px; font-weight: 700; color: var(--kps-ink); line-height: 1.35; }
.kps-card:hover { background: #f3f6ff; }
.kps-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--kps-line); margin-bottom: 6px; background: #f3f4f6; }
.kps-card[aria-current="page"] { background: #eef4ff; }
.kps-card[aria-current="page"] img { outline: 2px solid var(--kps-blue); outline-offset: 1px; }
.kps-tag { display: inline-block; margin-left: 4px; font-size: 15px; font-weight: 700; color: var(--kps-sub); background: #f3f4f6; border-radius: 99px; padding: 0 6px; vertical-align: 1px; }
@media (max-width: 640px) {
  .kps-panel--apps { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; max-width: none; max-height: calc(100vh - 76px); }
  .kps-cards { grid-template-columns: repeat(2, 1fr); }
}

/* 用途を横に詰めて並べる（小さな用途どうしは同じ段に）。--n＝その用途のカードの数 */
.kps-cats { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.kps-cats .kps-cat { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
.kps-cats .kps-cat + .kps-cat { margin: 0; padding: 0; border: 0; }
.kps-cats .kps-cards { grid-template-columns: repeat(var(--n, 3), 132px); }
@media (max-width: 640px) {
  .kps-cats { display: block; }
  .kps-cats .kps-cat + .kps-cat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kps-line); }
  .kps-cats .kps-cards { grid-template-columns: repeat(2, 1fr); }
}
/* スマホの1段目が窮屈なので、サービス名の札は隠す（どのサービスかは2段目のメニューで分かる） */
@media (max-width: 480px) { .kps-svc { display: none; } }
/* 広い画面ではパネルを広げ、診断（3）と SNS（4）も同じ段に入れる */
@media (min-width: 1200px) { .kps-panel--apps { width: min(1120px, calc(100vw - 48px)); } }

/* ===== 1段目の右側：サービス → メディア → ヘルプ ｜ ログイン → 無料登録（2026-10-05 カツ「アイコン有・サービスを先頭に」） ===== */
.kps-tlink, .kps-login { display: inline-flex; align-items: center; gap: 6px; }
.kps-tlink svg, .kps-login svg, .kps-apps-btn svg { width: 18px; height: 18px; flex: none; }
.kps-apps-btn > summary { width: auto; height: 40px; padding: 0 10px; gap: 6px; display: inline-flex; border-radius: 8px; font-size: 15px; font-weight: 700; color: var(--kps-sub); white-space: nowrap; }
.kps-apps-btn > summary:hover, .kps-apps-btn[open] > summary { color: var(--kps-ink); }
.kps-sep { width: 1px; height: 22px; background: var(--kps-line); margin: 0 4px; }
/* サービスのパネルは、ボタンの位置ではなくヘッダーの中身の右端にそろえる（ボタンが左にあっても画面の外に出ない） */
.kps-apps-btn { position: static; }
.kps-apps-btn .kps-panel--apps { position: absolute; top: 56px; right: max(16px, calc((100vw - var(--kps-max)) / 2 + 24px)); }
.kps-head .kps-in.kps-bar { position: relative; }
@media (max-width: 640px) {
  .kps-tlink { display: inline-flex; padding: 8px; }
  .kps-tlink span, .kps-apps-btn summary span, .kps-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kps-apps-btn > summary { padding: 0 8px; }
  .kps-sep { display: none; }
  .kps-apps-btn .kps-panel--apps { position: fixed; top: 60px; left: 8px; right: 8px; }
}
/* カードをひと回り大きく（2026-10-05 カツ「もう少し大きくてもいい」）132px → 160px。広い画面ではパネルも広げる */
.kps-cats .kps-cards { grid-template-columns: repeat(var(--n, 3), 160px); gap: 12px; }
.kps-card { font-size: 15px; }
@media (min-width: 1200px) { .kps-panel--apps { width: min(1280px, calc(100vw - 48px)); max-height: min(84vh, 820px); } }
@media (max-width: 640px) { .kps-cats .kps-cards { grid-template-columns: repeat(2, 1fr); } }

/* ===== タブレットでも崩れないように（2026-10-05 カツ。769px でパネルが左にはみ出していた）=====
 * 1200px 未満：パネルは画面の幅に合わせ、用途は縦に並べ、カードは入るだけ折り返す
 * 1200px 以上：用途を横に詰め、カードは決まった数で並べる（上の指定） */
@media (max-width: 1199px) {
  .kps-apps-btn .kps-panel--apps { width: auto; left: 16px; right: 16px; max-width: none; }
  .kps-cats { display: block; }
  .kps-cats .kps-cat + .kps-cat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kps-line); }
  .kps-cats .kps-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .kps-apps-btn .kps-panel--apps { position: fixed; top: 60px; left: 8px; right: 8px; }
  .kps-cats .kps-cards { grid-template-columns: repeat(2, 1fr); }
}
/* パネルの基準は1段目（.kps-bar・中身の幅）なので、右端は1段目の内側の余白にそろえるだけでよい（広い画面で二重に寄っていた） */
@media (min-width: 1200px) { .kps-apps-btn .kps-panel--apps { right: 24px; } }
/* タブレットの1段目：サービス名の札とボタンが重ならないよう、メディア・ヘルプは文字を隠してアイコンだけ（読み上げは残す） */
@media (max-width: 1023px) {
  .kps-tlink { padding: 8px; }
  .kps-tlink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 今いるサービスをはっきり（2026-10-05 カツ「選択している箇所の色はもっとわかりやすく」）。
 * マウスを乗せた色（薄い灰色）と、今いるサービス（青い太枠＋青い文字＋「表示中」の札）を別物にする */
.kps-card { position: relative; border: 2px solid transparent; }
.kps-card:hover { background: #f3f4f6; }
.kps-card[aria-current="page"] { background: #e8f0ff; border-color: var(--kps-blue); color: var(--kps-blue); }
.kps-card[aria-current="page"] img { outline: 0; border-color: transparent; }
.kps-card[aria-current="page"]::after { content: "表示中"; position: absolute; top: 8px; left: 8px; font-size: 15px; font-weight: 700; color: #fff; background: var(--kps-blue); border-radius: 99px; padding: 1px 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
/* カツ「枠線だけでいいかも」（2026-10-05）＝今いるサービスは青い太枠だけ。札・背景・文字の色は付けない */
.kps-card[aria-current="page"] { background: transparent; color: var(--kps-ink); border-color: var(--kps-blue); }
.kps-card[aria-current="page"]::after { content: none; }
.kps-card[aria-current="page"]:hover { background: #f3f4f6; }

/* 管理者だけの「管理画面」「発信」のボタン（2026-10-05 カツ「今の本体のように1段目に出す」）。今の本体と同じ色（管理画面＝オレンジ・発信＝青の枠） */
.kps-adm { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid; font-size: 15px; font-weight: 700; white-space: nowrap; }
.kps-adm svg { width: 16px; height: 16px; flex: none; }
.kps-adm--admin { border-color: #f59e0b; color: #b45309 !important; background: #fffbeb; }
.kps-adm--admin:hover { background: #fef3c7; }
.kps-adm--post { border-color: #93b4ff; color: var(--kps-blue) !important; background: #f3f6ff; }
.kps-adm--post:hover { background: #e8efff; }
@media (max-width: 1023px) { .kps-adm { padding: 0 9px; } .kps-adm span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* 「サービス」のボタンは、開いている間もマウスを乗せても背景を付けない（2026-10-05 カツ「開いているサービスに色がつくのもややこしい」）。文字の色が濃くなるだけ */
.kps-apps-btn > summary, .kps-apps-btn > summary:hover, .kps-apps-btn[open] > summary { background: transparent; }
/* 2026-10-05 カツ「開いているサービスはグレースケールで、hover などの選択されたものが枠線あり」
 * 今いるサービス＝画像を白黒（枠も背景も付けない）／マウスを乗せた・キーボードで選んだもの＝青い枠線（背景は付けない） */
.kps-card, .kps-card:hover, .kps-card[aria-current="page"], .kps-card[aria-current="page"]:hover { background: transparent; border-color: transparent; color: var(--kps-ink); }
.kps-card:hover, .kps-card:focus-visible, .kps-card[aria-current="page"]:hover { border-color: var(--kps-blue); outline: 0; }
.kps-card[aria-current="page"] img { filter: grayscale(1); opacity: .75; }

/* ===== パネルの別案（2026-10-05 カツ「パッと見見にくい」）。data-kps-look で切り替え =====
 * list＝用途ごとの列に「小さな画像＋名前」の1行ずつ／text＝画像なしで名前だけ */
.kps-panel--apps[data-kps-look="list"] .kps-cats, .kps-panel--apps[data-kps-look="text"] .kps-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.kps-panel--apps[data-kps-look="list"] .kps-cats .kps-cat, .kps-panel--apps[data-kps-look="text"] .kps-cats .kps-cat { margin: 0; padding: 0; border: 0; }
.kps-panel--apps[data-kps-look="list"] .kps-cards, .kps-panel--apps[data-kps-look="text"] .kps-cards { display: flex; flex-direction: column; gap: 2px; grid-template-columns: none; }
.kps-panel--apps[data-kps-look="list"] .kps-card, .kps-panel--apps[data-kps-look="text"] .kps-card { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 8px; font-size: 15px; }
.kps-panel--apps[data-kps-look="list"] .kps-card img { width: 64px; flex: none; margin: 0; border-radius: 6px; }
.kps-panel--apps[data-kps-look="text"] .kps-card img { display: none; }
.kps-panel--apps[data-kps-look="text"] .kps-card { padding: 8px 10px; }
.kps-panel--apps[data-kps-look="list"] .kps-card:hover, .kps-panel--apps[data-kps-look="text"] .kps-card:hover { border-color: var(--kps-blue); }
.kps-panel--apps[data-kps-look="text"] .kps-card[aria-current="page"] { color: #9ca3af; }
.kps-panel--apps[data-kps-look="list"] .kps-cat h3, .kps-panel--apps[data-kps-look="text"] .kps-cat h3 { margin: 0 0 6px; padding: 0 8px 6px; border-bottom: 2px solid var(--kps-line); color: var(--kps-ink); }
@media (min-width: 1200px) { .kps-panel--apps[data-kps-look="list"], .kps-panel--apps[data-kps-look="text"] { width: 980px; } }
@media (max-width: 900px) { .kps-panel--apps[data-kps-look="list"] .kps-cats, .kps-panel--apps[data-kps-look="text"] .kps-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kps-panel--apps[data-kps-look="list"] .kps-cats, .kps-panel--apps[data-kps-look="text"] .kps-cats { grid-template-columns: 1fr; } }

/* 一覧型の見分けやすさ（2026-10-05 カツ「このままだけど色を付けるなどもう少し視認性を上げて」）
 * 用途ごとに色：見出しの文字と下線・箱にごく薄い同じ系統の色。行にマウスを乗せたら白地＋青い枠 */
.kps-panel--apps[data-kps-look="list"] .kps-cat { --c: #0055ff; --t: #f3f7ff; background: var(--t); border-radius: 12px; padding: 10px 8px 8px; }
.kps-panel--apps[data-kps-look="list"] .kps-cat[data-cat="kp"] { --c: #0055ff; --t: #f2f6ff; }
.kps-panel--apps[data-kps-look="list"] .kps-cat[data-cat="ai"] { --c: #6d28d9; --t: #f6f2ff; }
.kps-panel--apps[data-kps-look="list"] .kps-cat[data-cat="site"] { --c: #0f766e; --t: #effaf8; }
.kps-panel--apps[data-kps-look="list"] .kps-cat[data-cat="check"] { --c: #b91c1c; --t: #fff4f4; }
.kps-panel--apps[data-kps-look="list"] .kps-cat[data-cat="sns"] { --c: #be185d; --t: #fff3f8; }
.kps-panel--apps[data-kps-look="list"] .kps-cat[data-cat="work"] { --c: #a16207; --t: #fffaee; }
.kps-panel--apps[data-kps-look="list"] .kps-cat h3 { display: flex; align-items: center; gap: 8px; color: var(--c); border-bottom-color: var(--c); font-size: 15px; }
.kps-panel--apps[data-kps-look="list"] .kps-cat h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.kps-panel--apps[data-kps-look="list"] .kps-card { color: var(--kps-ink); font-weight: 700; }
.kps-panel--apps[data-kps-look="list"] .kps-card:hover, .kps-panel--apps[data-kps-look="list"] .kps-card:focus-visible { background: #fff; border-color: var(--kps-blue); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.kps-panel--apps[data-kps-look="list"] .kps-card img { border-color: rgba(15, 23, 42, .12); }
.kps-panel--apps[data-kps-look="list"] .kps-tag { background: #fff; border: 1px solid rgba(15, 23, 42, .12); }

/* 会員限定の札をはっきり（2026-10-05 カツ「会員限定のものはもう少しわかりやすく。アイコンありとか」）：鍵のアイコン＋「会員限定」＋オレンジ系 */
.kps-tag, .kps-panel--apps[data-kps-look="list"] .kps-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px 1px 6px; border-radius: 99px; border: 1px solid #f59e0b; background: #fff7e6; color: #92400e; font-size: 15px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.kps-tag::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 会員限定の札が大きくなったので、名前が折り返さないよう広い画面ではパネルを少し広げる */
@media (min-width: 1200px) { .kps-panel--apps[data-kps-look="list"] { width: 1060px; } }

/* ===== 利用条件の札を4種類に（2026-10-05 カツ「各メニューにバッジ・バッジについてのメニューも」）=====
 * public＝誰でも（緑）／part＝一部会員（青・見るのは誰でも、使う・持ち帰るのは会員）／member＝会員限定（オレンジ・鍵）／paid＝有料限定（紫・星）
 * 中身の線引きはサービス一覧（services.blade.php）の札から取った（2026-10-05） */
.kps-tag--public { border-color: #22c55e; background: #effdf4; color: #166534; }
.kps-tag--part { border-color: #60a5fa; background: #eff6ff; color: #1e40af; }
.kps-tag--member { border-color: #f59e0b; background: #fff7e6; color: #92400e; }
.kps-tag--paid { border-color: #a78bfa; background: #f5f3ff; color: #5b21b6; }
.kps-tag--public::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6-4.3-4.3 1.6-1.6 2.7 2.7 5.6-5.6 1.6 1.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6-4.3-4.3 1.6-1.6 2.7 2.7 5.6-5.6 1.6 1.6z'/%3E%3C/svg%3E"); }
.kps-tag--part::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4C6.5 4 2.7 8.3 1.5 12c1.2 3.7 5 8 10.5 8s9.3-4.3 10.5-8C21.3 8.3 17.5 4 12 4zm0 13a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4C6.5 4 2.7 8.3 1.5 12c1.2 3.7 5 8 10.5 8s9.3-4.3 10.5-8C21.3 8.3 17.5 4 12 4zm0 13a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); }
.kps-tag--paid::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.6.6-5 4.5 1.5 6.6L12 17l-6 3.4 1.5-6.6-5-4.5 6.6-.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.6.6-5 4.5 1.5 6.6L12 17l-6 3.4 1.5-6.6-5-4.5 6.6-.6z'/%3E%3C/svg%3E"); }
.kps-panel--apps[data-kps-look="list"] .kps-card .kps-tag { margin-left: auto; }

/* パネルの下の「札の意味」 */
.kps-legend { margin-top: 14px; padding: 12px 8px 4px; border-top: 1px solid var(--kps-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
.kps-legend div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 15px; color: var(--kps-sub); line-height: 1.5; }
.kps-legend .kps-tag { margin-left: 0; }
@media (max-width: 1023px) { .kps-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kps-legend { grid-template-columns: 1fr; } }

/* ===== 札を「使える人ごとの小さなアイコン」に（2026-10-05 カツ「サービスによってはバッジが4つ付く場合もある」）=====
 * public＝誰でも（緑）／member＝無料会員（オレンジ・鍵）／paid＝有料会員（紫・星）／key＝自分の API キー（灰・鍵）
 * 行にはアイコンだけ並べ、意味はパネルの下の説明と title（マウスを乗せると出る一言）で伝える */
.kps-bdgs { margin-left: auto; display: inline-flex; gap: 4px; flex: none; }
.kps-b { width: 24px; height: 24px; border-radius: 99px; display: inline-grid; place-items: center; font-style: normal; }
.kps-b::before { content: ""; width: 14px; height: 14px; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.kps-b--public { background: #16a34a; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-3a15.6 15.6 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8zM12 4c.8 1.2 1.5 2.5 1.9 4h-3.8c.4-1.5 1.1-2.8 1.9-4zM4.3 14a8.2 8.2 0 0 1 0-4h3.4a16.5 16.5 0 0 0 0 4zm.8 2h3a15.6 15.6 0 0 0 1.4 3.6A8 8 0 0 1 5.1 16zM8 8H5.1a8 8 0 0 1 4.4-3.6C8.9 5.5 8.4 6.7 8 8zm4 12c-.8-1.2-1.5-2.5-1.9-4h3.8c-.4 1.5-1.1 2.8-1.9 4zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4zm.3 5.6c.6-1.1 1.1-2.3 1.4-3.6h3a8 8 0 0 1-4.4 3.6zM16.3 14a16.5 16.5 0 0 0 0-4h3.4a8.2 8.2 0 0 1 0 4z'/%3E%3C/svg%3E"); }
.kps-b--member { background: #d97706; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E"); }
.kps-b--paid { background: #7c3aed; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.6.6-5 4.5 1.5 6.6L12 17l-6 3.4 1.5-6.6-5-4.5 6.6-.6z'/%3E%3C/svg%3E"); }
.kps-b--key { background: #4b5563; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm5.6-5a6 6 0 1 0 0 4H15v3h3v-3h2V9z'/%3E%3C/svg%3E"); }
.kps-legend div { flex-direction: row; align-items: center; gap: 8px; }
/* アイコンが3〜4つ付く行で名前が折り返さないよう、広い画面ではパネルをさらに広げる */
@media (min-width: 1200px) { .kps-panel--apps[data-kps-look="list"] { width: 1140px; } }
/* アイコンの意味はパネルの上に（2026-10-05 カツ「上部に移動で」）。下の線を区切りに */
.kps-panel--apps > .kps-legend { margin: 0 0 14px; padding: 4px 8px 12px; border-top: 0; border-bottom: 1px solid var(--kps-line); }
/* アイコンの意味を左詰めの札に（2026-10-05 カツ「バッジのところも見やすく・左詰めでもいい」） */
.kps-panel--apps > .kps-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; grid-template-columns: none; }
.kps-panel--apps > .kps-legend::before { content: "アイコンの意味"; font-size: 15px; font-weight: 700; color: var(--kps-ink); margin-right: 6px; }
.kps-panel--apps > .kps-legend div { flex-direction: row; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border: 1px solid var(--kps-line); border-radius: 99px; background: #fff; color: var(--kps-ink); font-weight: 700; }
@media (max-width: 560px) { .kps-panel--apps > .kps-legend::before { width: 100%; } }
/* 用途の箱の上の余白（2026-10-05 カツ「上部の余白調整して」）：見出しが箱の上の端に近すぎた */
.kps-panel--apps[data-kps-look="list"] .kps-cat { padding: 16px 10px 10px; }
.kps-panel--apps[data-kps-look="list"] .kps-cat h3 { margin: 0 0 8px; padding: 0 6px 10px; }
.kps-panel--apps[data-kps-look="list"] .kps-cats .kps-cat { padding: 16px 10px 10px; }

/* DM のアイコンと未読の印（本体の前のヘッダーと同じ働き・2026-10-05 組み込み） */
.kps-dm { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; color: var(--kps-sub); }
.kps-dm:hover { background: #f3f4f6; color: var(--kps-ink); }
.kps-dm svg { width: 20px; height: 20px; }
.kps-dot { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 99px; background: #ef4444; box-shadow: 0 0 0 2px #fff; }
.kps-menu form { margin: 0; }
.kps-avatar > summary img, .kps-avatar > summary > * { pointer-events: none; }

/* パネルの縦を短く（2026-10-05 カツ「項目まとめるか無駄な余白を詰めて縦を短く」）
 * 同じ段の箱の高さをそろえる並べ方をやめ、各列に用途を上から積む段組みにする。行の余白と画像も少し小さく */
.kps-panel--apps[data-kps-look="list"] .kps-cats { display: block; columns: 3 300px; column-gap: 20px; }
.kps-panel--apps[data-kps-look="list"] .kps-cats .kps-cat { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 16px; }
.kps-panel--apps[data-kps-look="list"] .kps-cats .kps-cat + .kps-cat { border-top: 0; }
.kps-panel--apps[data-kps-look="list"] .kps-cats .kps-cat { padding: 12px 8px 6px; }
.kps-panel--apps[data-kps-look="list"] .kps-cat h3 { margin: 0 0 4px; padding: 0 6px 8px; }
.kps-panel--apps[data-kps-look="list"] .kps-card { padding: 3px 6px; gap: 10px; }
.kps-panel--apps[data-kps-look="list"] .kps-card img { width: 56px; }
@media (max-width: 640px) { .kps-panel--apps[data-kps-look="list"] .kps-cats { columns: 1; } }
/* 列を決めて並べる（kp_shell.php の columns）。PC は3列・900px 以下は列をほどいて2列・640px 以下は1列 */
.kps-panel--apps[data-kps-look="list"] .kps-cats.kps-cats--cols { display: grid; columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.kps-cats--cols .kps-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kps-panel--apps[data-kps-look="list"] .kps-cats--cols .kps-cat { display: block; margin: 0; }
@media (max-width: 900px) { .kps-panel--apps[data-kps-look="list"] .kps-cats.kps-cats--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kps-cats--cols .kps-col { display: contents; } }
@media (max-width: 640px) { .kps-panel--apps[data-kps-look="list"] .kps-cats.kps-cats--cols { grid-template-columns: 1fr; } }

/* パネルに枠線（2026-10-05 カツ「白のままじゃわかりにくい」）。ページの白地と分かれるように */
.kps-panel--apps[data-kps-look="list"] { border: 2px solid #c3cddd; box-shadow: 0 18px 44px rgba(15, 23, 42, .22); }
/* 枠線をもっと濃く（2026-10-05 カツ） */
.kps-panel--apps[data-kps-look="list"] { border: 2px solid #64748b; }