/*
 * カラクリオ 共通デザインのトークン（docs/design-system.md §4）。**全製品の色・文字・余白はここが正。**
 *
 * - ライトとダークは light-dark() で1行に並べる。同じ値を @media と [data-theme] に2回書かない
 *   （片方だけ直す事故の元になるため）。color-scheme を OS に従わせ、[data-theme] では color-scheme だけを上書きする
 * - 製品のコードに色や大きさを直書きしない。足りないトークンはここに足す
 * - お客様向けの差し替え（つむぎチャット Pro の店の色など）は --k-accent 系だけを上書きする（§6）
 */

:root {
  color-scheme: light dark;

  /* --- 色（コントラストは --k-bg に対して。docs/design-system.md §4.1）--- */
  --k-bg: light-dark(#ffffff, #17161a);
  --k-bg-marketing: light-dark(#faf7f2, #17161a); /* 生成り。公開の画面の地 */
  --k-surface: light-dark(#f6f3ee, #1f1d22);
  --k-surface-2: light-dark(#eee9e0, #28252b);
  --k-border: light-dark(#e3dccf, #34302c);
  --k-border-strong: light-dark(#cbc2b3, #4a4540);

  --k-fg: light-dark(#221f1a, #ece8e1); /* 墨 16.4 / 14.8 */
  --k-fg-muted: light-dark(#6b6459, #a8a196); /* 5.9 / 7.0 */
  --k-fg-faint: light-dark(#8a8276, #7d776d); /* 3.8 / 4.1。本文に使わない */

  --k-accent: light-dark(#2a4580, #8fa6e0); /* 紺青 9.3 / 7.5 */
  --k-accent-hover: light-dark(#192f60, #b3c3ee);
  --k-accent-fg: light-dark(#ffffff, #17161a); /* 主ボタンの文字 */
  --k-accent-soft: light-dark(#e9edf6, #232a3c);

  /* 赤は危険だけに使う。ブランド色にしない（燕メールで一度作り直した） */
  --k-danger: light-dark(#b3261e, #f28b82); /* 6.5 / 7.5 */
  --k-danger-fg: light-dark(#ffffff, #17161a);
  --k-danger-soft: light-dark(#fbeceb, #3a2322);
  --k-ok: light-dark(#1f6f45, #72c095); /* 6.1 / 8.3 */
  --k-ok-soft: light-dark(#e8f3ec, #1d3326);
  --k-warn: light-dark(#8a5a00, #d6a33a); /* 5.9 / 7.9 */
  --k-warn-soft: light-dark(#f7efdd, #372c16);

  --k-overlay: light-dark(rgba(34, 31, 26, 0.45), rgba(0, 0, 0, 0.6)); /* モーダルの背景 */

  /*
   * カラクリオのロゴ（コーポレートサイトの Logo.astro と同じ）。**ロゴにだけ使う。**
   * 真鍮は製品の画面の色には使わない（docs/design-system.md §4.1）が、会社のロゴは正式な色のまま出す
   */
  --k-logo-mark: light-dark(#a16207, #c9932e); /* 歯車（真鍮） */
  --k-logo-text: light-dark(#192f60, #ece8e1); /* 「カラクリオ」（紺青） */

  /* --- 文字（§4.2）。製品の画面は Web フォントを読み込まない --- */
  --k-font-sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --k-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif; /* 公開の画面の見出しだけ */
  --k-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --k-text-xs: 0.75rem; /* 12px バッジ */
  --k-text-sm: 0.8125rem; /* 13px 補助・表 */
  --k-text-md: 0.9375rem; /* 15px 製品の画面の本文 */
  --k-text-lg: 1.0625rem; /* 17px 公開の画面の本文 */
  --k-text-xl: 1.25rem; /* 20px 節の見出し */
  --k-text-2xl: 1.5rem; /* 24px 画面の見出し */
  --k-text-3xl: clamp(1.75rem, 5vw, 2.5rem); /* LP の見出し */

  --k-leading-app: 1.7;
  --k-leading-marketing: 1.8;

  /* --- 余白（4px 基準）・角丸・影・動き（§4.3）--- */
  --k-s1: 4px;
  --k-s2: 8px;
  --k-s3: 12px;
  --k-s4: 16px;
  --k-s5: 24px;
  --k-s6: 32px;
  --k-s7: 48px;
  --k-s8: 64px;

  --k-radius-sm: 4px;
  --k-radius: 8px;
  --k-radius-lg: 12px;
  --k-radius-pill: 999px;

  /* 製品の画面では影を使わず罫線で囲む。重なる要素（モーダル・ポップオーバー）だけ */
  --k-shadow-overlay: 0 12px 32px light-dark(rgba(34, 31, 26, 0.16), rgba(0, 0, 0, 0.5));

  --k-duration: 150ms;

  /* 押せる場所の最小の高さ（§5.2）*/
  --k-target: 36px;
  --k-target-touch: 44px;
}

/* 画面の切替で選んだものを優先する。値は上の light-dark() がそのまま使う */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --k-duration: 0ms;
  }
}

/*
 * カラクリオ 共通デザインの土台（docs/design-system.md）。tokens.css の後に読み込む。
 *
 * 要素セレクタ（body・a・h1 など）への指定はここに集める。製品の既存の CSS と混ぜて移す途中でも
 * 壊れにくいよう、部品は components.css の k- 接頭辞のクラスに閉じる。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-fg);
  font-family: var(--k-font-sans);
  font-size: var(--k-text-md);
  line-height: var(--k-leading-app);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* 公開の画面（LP・料金・ドキュメント）。body か外側の要素に付ける */
.k-marketing {
  background: var(--k-bg-marketing);
  font-size: var(--k-text-lg);
  line-height: var(--k-leading-marketing);
}
/* 明朝の見出しは公開の画面だけ（§4.2） */
.k-marketing :is(h1, h2, h3) {
  font-family: var(--k-font-serif);
  font-weight: 600;
}

h1,
h2,
h3 {
  line-height: 1.35;
  margin: 0 0 var(--k-s3);
  /* 見出しの最後の1文字だけが次の行に落ちないよう、行の長さを揃え、日本語は文節で折り返す */
  text-wrap: balance;
  word-break: auto-phrase;
}
h1 {
  font-size: var(--k-text-2xl);
}
h2 {
  font-size: var(--k-text-xl);
}
h3 {
  font-size: var(--k-text-md);
}
.k-marketing h1 {
  font-size: var(--k-text-3xl);
}

p {
  margin: 0 0 var(--k-s3);
}

a {
  color: var(--k-accent);
  text-underline-offset: 0.2em;
  transition: color var(--k-duration);
}
a:hover {
  color: var(--k-accent-hover);
}

code,
kbd,
pre {
  font-family: var(--k-font-mono);
  font-size: 0.92em;
}

/* フォーカスは必ず見える（§5.2）。outline: none だけにしない */
:focus-visible {
  outline: 2px solid var(--k-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--k-accent-soft);
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* チェック・ラジオ・範囲の色をアクセントに揃える */
:root {
  accent-color: var(--k-accent);
}

img,
svg {
  max-width: 100%;
}

/*
 * カラクリオ 共通の部品（docs/design-system.md §5）。tokens.css・base.css の後に読み込む。
 *
 * - クラスはすべて k- 接頭辞。製品の既存のクラス（.card・.button など）とぶつけず、画面ごとに置き換えられるように
 * - 値はトークンだけを使う。ここに色や大きさを直書きしない
 * - 状態は aria 属性で表す（aria-current・aria-pressed・aria-invalid）。見た目のためだけのクラスを増やさない
 */

/* ---------------------------------------------------------------- 画面の枠 */

.k-page {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--k-s6) var(--k-s4) var(--k-s7);
}
.k-page--narrow {
  max-width: 400px; /* ログイン・登録などの1列の画面 */
}
.k-page--wide {
  max-width: 1200px;
}

.k-topnav {
  display: flex;
  align-items: center;
  gap: var(--k-s4);
  min-height: 52px;
  padding: 0 var(--k-s4);
  background: var(--k-surface);
  border-bottom: 1px solid var(--k-border);
}
.k-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s2);
  color: var(--k-fg);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
/* 製品のロゴマークだけアクセント色にし、文字は地の文字色のまま（燕メールの約束を引き継ぐ）。
   カラクリオのロゴ（.k-logo）は正式な色で出すので、直に置いたマークにだけ当てる */
.k-topnav__brand > svg {
  color: var(--k-accent);
}
.k-topnav__links {
  display: flex;
  gap: var(--k-s1);
  margin-left: auto;
}
.k-topnav__links a {
  padding: var(--k-s2) var(--k-s3);
  border-radius: var(--k-radius);
  color: var(--k-fg-muted);
  text-decoration: none;
  white-space: nowrap;
}
.k-topnav__links a:hover,
.k-topnav__links a[aria-current="page"] {
  background: var(--k-surface-2);
  color: var(--k-fg);
}

.k-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--k-s3);
  margin-bottom: var(--k-s5);
}
.k-page-header h1 {
  margin: 0;
}

/* ---------------------------------------------------------------- ボタン */

.k-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s2);
  min-height: 40px;
  padding: 0 var(--k-s4);
  border: 1px solid transparent;
  border-radius: var(--k-radius);
  background: var(--k-accent);
  color: var(--k-accent-fg);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--k-duration),
    border-color var(--k-duration),
    color var(--k-duration);
}
.k-button:hover:not(:disabled) {
  background: var(--k-accent-hover);
  color: var(--k-accent-fg);
}
.k-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.k-button--sm {
  min-height: 32px;
  padding: 0 var(--k-s3);
  font-size: var(--k-text-sm);
}
.k-button--lg {
  min-height: 48px;
  padding: 0 var(--k-s5);
}
.k-button--block {
  width: 100%;
}

/* 副（枠） */
.k-button--secondary {
  background: var(--k-bg);
  border-color: var(--k-border-strong);
  color: var(--k-fg);
}
.k-button--secondary:hover:not(:disabled) {
  background: var(--k-surface);
  color: var(--k-fg);
}

/* リンクの見た目のボタン */
.k-button--link {
  min-height: auto;
  padding: 0;
  background: none;
  color: var(--k-accent);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.k-button--link:hover:not(:disabled) {
  background: none;
  color: var(--k-accent-hover);
}

/*
 * 破壊的操作は色と形の両方で区別する（§5.2）。
 * 入口は赤の枠（--danger-outline）、モーダルの中の最終確認だけ赤の塗り（--danger）。
 */
.k-button--danger-outline {
  background: var(--k-bg);
  border-color: var(--k-danger);
  color: var(--k-danger);
}
.k-button--danger-outline:hover:not(:disabled) {
  background: var(--k-danger-soft);
  color: var(--k-danger);
}
.k-button--danger {
  background: var(--k-danger);
  color: var(--k-danger-fg);
}
.k-button--danger:hover:not(:disabled) {
  background: var(--k-danger);
  color: var(--k-danger-fg);
  filter: brightness(0.92);
}

/* ---------------------------------------------------------------- 入力 */

/* ラベル・入力・補足・エラーを1組にする */
.k-field {
  display: grid;
  gap: var(--k-s1);
  margin-bottom: var(--k-s4);
}
.k-field__label {
  font-size: var(--k-text-sm);
  font-weight: 600;
}
.k-field__hint {
  color: var(--k-fg-muted);
  font-size: var(--k-text-sm);
}
.k-field__error {
  color: var(--k-danger);
  font-size: var(--k-text-sm);
}

.k-input,
.k-select,
.k-textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--k-s2) var(--k-s3);
  border: 1px solid var(--k-border-strong);
  border-radius: var(--k-radius);
  background: var(--k-bg);
  color: var(--k-fg);
  transition: border-color var(--k-duration);
}
.k-textarea {
  min-height: 96px;
  resize: vertical;
}
.k-input::placeholder,
.k-textarea::placeholder {
  color: var(--k-fg-faint);
}
.k-input:hover,
.k-select:hover,
.k-textarea:hover {
  border-color: var(--k-fg-faint);
}
.k-input:focus-visible,
.k-select:focus-visible,
.k-textarea:focus-visible {
  border-color: var(--k-accent);
  outline-offset: 0;
}
.k-input[aria-invalid="true"],
.k-select[aria-invalid="true"],
.k-textarea[aria-invalid="true"] {
  border-color: var(--k-danger);
}

.k-check {
  display: flex;
  align-items: center;
  gap: var(--k-s2);
  min-height: var(--k-target);
  cursor: pointer;
}

/* ---------------------------------------------------------------- 囲み */

.k-card {
  padding: var(--k-s5);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  background: var(--k-bg);
}
.k-card + .k-card {
  margin-top: var(--k-s4);
}
.k-card__title {
  margin: 0 0 var(--k-s3);
  font-size: var(--k-text-md);
  font-weight: 700;
}

/* 区切りの一文（「または」など） */
.k-divider {
  display: flex;
  align-items: center;
  gap: var(--k-s3);
  margin: var(--k-s4) 0;
  color: var(--k-fg-muted);
  font-size: var(--k-text-sm);
}
.k-divider::before,
.k-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--k-border);
}

/* ---------------------------------------------------------------- お知らせ・バッジ */

.k-notice {
  padding: var(--k-s3) var(--k-s4);
  border-left: 3px solid var(--k-accent);
  border-radius: var(--k-radius-sm);
  background: var(--k-accent-soft);
  margin-bottom: var(--k-s4);
}
.k-notice--ok {
  border-color: var(--k-ok);
  background: var(--k-ok-soft);
}
.k-notice--warn {
  border-color: var(--k-warn);
  background: var(--k-warn-soft);
}
.k-notice--error {
  border-color: var(--k-danger);
  background: var(--k-danger-soft);
}
.k-notice:empty {
  display: none;
}

/* 状態を色だけで伝えない。必ず文字を入れる（§5.2） */
.k-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--k-s2);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-pill);
  color: var(--k-fg-muted);
  font-size: var(--k-text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.k-badge--ok {
  border-color: transparent;
  background: var(--k-ok-soft);
  color: var(--k-ok);
}
.k-badge--warn {
  border-color: transparent;
  background: var(--k-warn-soft);
  color: var(--k-warn);
}
.k-badge--danger {
  border-color: transparent;
  background: var(--k-danger-soft);
  color: var(--k-danger);
}
.k-badge--accent {
  border-color: transparent;
  background: var(--k-accent-soft);
  color: var(--k-accent);
}

.k-muted {
  color: var(--k-fg-muted);
}
.k-hint {
  color: var(--k-fg-muted);
  font-size: var(--k-text-sm);
}

/* ---------------------------------------------------------------- タブ・切替 */

.k-tabs {
  display: flex;
  gap: var(--k-s1);
  border-bottom: 1px solid var(--k-border);
  margin-bottom: var(--k-s5);
  overflow-x: auto;
}
.k-tabs a,
.k-tabs button {
  padding: var(--k-s2) var(--k-s3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--k-fg-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.k-tabs [aria-current="page"],
.k-tabs [aria-selected="true"] {
  border-bottom-color: var(--k-accent);
  color: var(--k-fg);
  font-weight: 600;
}

.k-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  background: var(--k-surface);
}
.k-segmented button {
  min-height: 32px;
  padding: 0 var(--k-s3);
  border: 0;
  border-radius: calc(var(--k-radius) - 2px);
  background: none;
  color: var(--k-fg-muted);
  cursor: pointer;
  transition: background-color var(--k-duration);
}
.k-segmented button[aria-pressed="true"] {
  background: var(--k-bg);
  color: var(--k-fg);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--k-border);
}

/* ---------------------------------------------------------------- 表 */

.k-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
}
.k-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--k-text-sm);
}
.k-table th,
.k-table td {
  padding: var(--k-s2) var(--k-s3);
  border-bottom: 1px solid var(--k-border);
  text-align: left;
  vertical-align: top;
}
.k-table th {
  background: var(--k-surface);
  color: var(--k-fg-muted);
  font-weight: 600;
  white-space: nowrap;
}
.k-table tr:last-child td {
  border-bottom: 0;
}

/* ---------------------------------------------------------------- 空状態 */

/* 製品の図版＋一文＋次にやる操作。ブランドが出てよい数少ない場所（§6） */
.k-empty {
  display: grid;
  justify-items: center;
  gap: var(--k-s3);
  padding: var(--k-s7) var(--k-s4);
  border: 1px dashed var(--k-border-strong);
  border-radius: var(--k-radius);
  color: var(--k-fg-muted);
  text-align: center;
}
.k-empty svg {
  color: var(--k-accent);
}

/* ---------------------------------------------------------------- モーダル */

/* <dialog> を showModal() で開く。Esc とフォーカスの閉じ込めはブラウザに任せる */
.k-dialog {
  width: min(480px, calc(100vw - 2 * var(--k-s4)));
  padding: var(--k-s5);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg);
  color: var(--k-fg);
  box-shadow: var(--k-shadow-overlay);
}
.k-dialog::backdrop {
  background: var(--k-overlay);
}
.k-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--k-s2);
  margin-top: var(--k-s5);
}

/* ---------------------------------------------------------------- カラクリオのロゴ */

/* 歯車＋「カラクリオ」「KARAKURIO」。コーポレートサイトの Logo.astro と同じ組み方 */
.k-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--k-logo-text);
  text-decoration: none;
}
.k-logo__mark {
  display: inline-flex;
  color: var(--k-logo-mark);
}
.k-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
.k-logo__ja {
  font-family: var(--k-font-serif); /* ロゴの字形なので、製品の画面でも明朝のまま */
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.k-logo__en {
  color: var(--k-fg-muted);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.42em;
}
.k-logo--sm .k-logo__ja {
  font-size: 1rem;
}

/* ---------------------------------------------------------------- ロゴの並び（共通アカウントの画面） */

.k-brand {
  display: grid;
  justify-items: center;
  gap: var(--k-s2);
  margin-bottom: var(--k-s5);
  text-align: center;
}
.k-brand__mark {
  width: 48px;
  height: 48px;
  color: var(--k-accent);
}
.k-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}