@import "tailwindcss";

/* 職務経歴書メーカー（resume）用テーマ — 参考デザイン shokumu-keirekisho-tool.jsx の和風パレット */
@theme {
  --color-kk-paper: #F2EDE3;
  --color-kk-surface: #FCFAF4;
  --color-kk-ink: #23272F;
  --color-kk-sub: #7A7E86;
  --color-kk-line: #E5DECE;
  --color-kk-navy: #2B4865;
  --color-kk-navy-deep: #21384F;
  --color-kk-navy-soft: #ECF1F5;
  --color-kk-gold: #A6824C;

  --font-kk-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-kk-doc: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-kk-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* ───────────────────────────────────────────────────────────
   候補者向け画面の共通デザインシステム（洗練・上品トーン）
   - 既存の indigo を活かしつつ、面(canvas)・影・角丸・タイポを統一する
   ─────────────────────────────────────────────────────────── */
@theme {
  /* ページ背景（純白より少し落ち着いた面色）と濃色インク */
  --color-canvas: #F5F6FA;
  --color-ink: #1B2333;

  /* アプリ全体のベースフォント（layout側でWebフォントを読み込む） */
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* 奥行きを出すための繊細な影（強すぎない多層シャドウ） */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-soft: 0 6px 20px -6px rgba(28, 33, 51, 0.14), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --shadow-lift: 0 18px 40px -12px rgba(28, 33, 51, 0.22);
}

@layer base {
  body {
    @apply antialiased;
    /* 日本語の字詰めを詰め気味にして上品な組版に */
    font-feature-settings: "palt" 1;
    letter-spacing: 0.01em;
  }
  /* 見出しは黒を締めて、字間をわずかに詰める */
  h1, h2, h3 {
    @apply text-ink tracking-tight;
  }
}

/* 候補者向け画面の共通コンポーネント（ボタン・カード・バッジ）。
   ビュー側の class を統一し、余白・角丸・影・色を一貫させる。
   ※ v4では @apply でカスタムクラスを連鎖できないため、各クラスに素の utility を展開する */
@layer components {
  /* プライマリボタン（主要CTA）。既定は中サイズ、.btn-lg で拡大 */
  .btn-primary {
    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-soft transition hover:bg-indigo-500 active:scale-[.98] disabled:cursor-not-allowed disabled:bg-gray-300 disabled:shadow-none;
  }
  /* セカンダリボタン（枠線・白背景） */
  .btn-secondary {
    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-gray-700 shadow-sm transition hover:border-gray-400 hover:bg-gray-50 active:scale-[.98];
  }
  /* ピル型のゴースト操作ボタン（読み上げスキップ等の副次操作） */
  .btn-pill {
    @apply inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 shadow-sm transition hover:border-gray-300 hover:bg-gray-50 active:scale-[.98];
  }
  .btn-lg {
    @apply px-5 py-3.5 text-base;
  }
  /* 標準カード（白面・繊細な枠と影で奥行きを出す） */
  .card {
    @apply rounded-2xl border border-gray-200/70 bg-white shadow-card;
  }
  /* 情報タグ（職種候補・ラベルなど） */
  .badge {
    @apply inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-600;
  }
}

/* CA管理画面・ログインの共通フォーム部品。
   枠線がはっきり見え、文字と枠の間に十分なpaddingを確保する */
@layer components {
  .form-input {
    @apply rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 shadow-sm placeholder:text-gray-400;
  }
  .form-input:focus {
    @apply border-indigo-500 outline-none ring-2 ring-indigo-200;
  }
  .form-select {
    @apply rounded-lg border border-gray-300 bg-white px-3 py-2.5 pr-8 text-sm text-gray-900 shadow-sm;
  }
  .form-select:focus {
    @apply border-indigo-500 outline-none ring-2 ring-indigo-200;
  }
}

/* チャットバブルのフェードイン */
@keyframes kkFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.kk-fade { animation: kkFade .35s ease both; }

/* 印刷: 職務経歴書本体のみを出力 */
@media print {
  body * { visibility: hidden !important; }
  #kk-print, #kk-print * { visibility: visible !important; }
  #kk-print {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none !important; border: none !important; margin: 0 !important;
  }
  .kk-noprint { display: none !important; }
}

/* 印刷: 求人紹介資料（複数求人を1ファイルにまとめ、求人ごとにページを分ける）。
   #kk-print と違い position は通常フローのままにする。絶対配置だと複数ページに渡る内容が
   1ページ目で切れる環境があるため。 */
@media print {
  #kk-print-flow, #kk-print-flow * { visibility: visible !important; }
  #kk-print-flow { width: 100%; box-shadow: none !important; border: none !important; margin: 0 !important; }
  #kk-print-flow .intro-sheet { border: none !important; padding: 0 !important; }
  #kk-print-flow .intro-sheet + .intro-sheet { break-before: page; }
}