/*
 * EP SNS運用基盤：LINE風テーマ（大きいボタン・押しやすい入力欄）
 * - L Harness の画面部品（Kumo）には手を入れず、このファイル1つで全画面の見た目を変える。
 *   上流（Shudesu/line-harness-oss）の更新を取り込むときは、globals.css の import 1行とこのファイルだけ残せばよい。
 * - Tailwind のユーティリティはカスケードレイヤーの中にあるため、レイヤー外に書いたこのファイルの指定が優先される。
 * - 基調色は LINE グリーン（#06C755）。LINE のロゴ・商標は使わない（BRAND.md の方針どおり）。
 */

:root {
  --ep-green: #06c755;
  --ep-green-hover: #05b14c;
  --ep-green-press: #049a42;
  --ep-green-soft: #e6f9ee;
  --ep-ink: #111111;
  --ep-sub: #5b6066;
  --ep-line: #e3e5e8;
  --ep-canvas: #f5f6f7;
  --ep-btn-h: 52px;
  --ep-btn-h-small: 40px;
  --ep-field-h: 48px;
  /* Kumo の強調ボタンの色を LINE グリーンにそろえる */
  --kumo-button-emphasis-bg: var(--ep-green);
  --kumo-button-emphasis-ring: var(--ep-green);
}

body {
  background: var(--ep-canvas);
  color: var(--ep-ink);
  font-size: 15px;
}

/* ---------------------------------------------------------------- ボタン */
/* 標準：高さ52px・文字16px・太字・丸い形（LINE のアプリのボタンに合わせる） */
[data-kumo-component="Button"],
[data-kumo-component="LinkButton"] {
  min-height: var(--ep-btn-h);
  padding-inline: 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 9999px;
  gap: 8px;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, transform 0.05s ease;
}
[data-kumo-component="Button"] svg,
[data-kumo-component="LinkButton"] svg {
  width: 20px;
  height: 20px;
}
[data-kumo-component="Button"]:active:not(:disabled) {
  transform: scale(0.98);
}

/* 表の中などの小さいボタン（Kumo の xs / sm）も、指で押せる高さ40pxにする */
[data-kumo-component="Button"][class*="h-5 "],
[data-kumo-component="Button"][class*="h-6.5"] {
  min-height: var(--ep-btn-h-small);
  padding-inline: 16px;
  font-size: 14px;
}

/* アイコンだけのボタンは正円にする */
[data-kumo-component="Button"][class*="size-9"],
[data-kumo-component="Button"][class*="size-10"] {
  width: var(--ep-btn-h);
  min-width: var(--ep-btn-h);
  padding-inline: 0;
}
[data-kumo-component="Button"][class*="size-3.5"],
[data-kumo-component="Button"][class*="size-6.5"] {
  width: var(--ep-btn-h-small);
  min-width: var(--ep-btn-h-small);
  min-height: var(--ep-btn-h-small);
  padding-inline: 0;
}

/* 押したときの色（強調ボタン） */
[data-kumo-component="Button"][class*="emphasis-bg"]:not(:disabled):hover {
  background-color: var(--ep-green-hover);
}
[data-kumo-component="Button"][class*="emphasis-bg"]:not(:disabled):active {
  background-color: var(--ep-green-press);
}

/* Kumo を使っていない素のボタンも同じ大きさにそろえる（チェックボックス等の部品は除く） */
main button:not([data-kumo-component]):not([role="switch"]):not([role="checkbox"]):not([role="radio"]):not([role="tab"]) {
  min-height: var(--ep-btn-h-small);
}

/* 切り替え（配信対象：全員／タグ／複数タグ、配信タイミング など）。Kumo の Tabs */
main [data-kumo-component="Tabs"][role="tab"] {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 15px;
  font-weight: 700;
}
main .kumo-tabs-list {
  height: auto;
  min-height: 50px;
  border-radius: 9999px;
  padding: 3px;
}
/* 選ばれている項目の下地（Kumo の indicator）を、タブの高さに合わせる */
main .kumo-tabs-list > [class*="active-tab-width"] {
  top: 3px;
  bottom: 3px;
  height: auto;
  border-radius: 9999px;
}
main .kumo-tabs-list [role="tab"],
main .kumo-tabs-list [role="tab"] ~ * {
  border-radius: 9999px;
}
main .kumo-tabs-list [role="tab"][aria-selected="true"] {
  color: var(--ep-green-press);
}

/* ---------------------------------------------------------------- 入力欄 */
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
main select,
[data-kumo-component="Select"] button {
  min-height: var(--ep-field-h);
  font-size: 16px; /* スマホで拡大されない大きさ */
  border-radius: 12px;
}
main textarea {
  font-size: 16px;
  border-radius: 12px;
  min-height: 120px;
}
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
  outline: 2px solid var(--ep-green);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- 左のメニュー */
aside nav a,
aside nav button {
  min-height: 48px;
  font-size: 15px !important;
  border-radius: 12px !important;
}
aside nav a[aria-current="page"],
aside nav a.bg-green-50,
aside nav a[class*="bg-harness-accent"] {
  background: var(--ep-green-soft) !important;
  color: var(--ep-green-press) !important;
  font-weight: 700 !important;
}

/* ---------------------------------------------------------------- カード・見出し */
main h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
main [class*="rounded-xl"],
main [class*="rounded-lg"]:not([data-kumo-component]) {
  border-radius: 16px;
}

/* キーボード操作で今どこにいるかを分かりやすくする */
:focus-visible {
  outline-color: var(--ep-green);
}

/* スマホ幅：ボタンは大きさだけ保ち、横幅は変えない（画面下に浮くボタンが全幅になって画面を覆うため） */