/* ==========================================================================
   ZENKIGEN Components（コレドウ用）
   Figma のコンポーネント定義（get_design_context）から実測値を反映。
   - Button  … Style: Fill / Outline / Text / Danger
                Size : Small(h24 px11 py5) / Medium(h32 px13 py5) / Large(h40 px17 py9)
                共通 : min-width 96px / radius 4px / gap 4px / border 1px
                文字 : Small・Medium = 14px Regular lh1.71 ／ Large = 16px Regular lh1.8
   - Table   … 外枠 border 1px UiBorder01 + radius 8px + overflow hidden
                ヘッダ bg UiBackground02Light / セル間は border-top・border-right
                padding 16px / 12px、文字 14px（ヘッダのみ Bold）
   - Modal   … bg white / radius 8px / padding 24px / gap 24px / 右寄せ
                タイトル 16px Bold lh1
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-01);
  background: var(--ui-bg-02);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.zk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 96px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}

/* Size */
.zk-btn--sm { height: 24px; padding: 5px 11px; font-size: 14px; line-height: 1.71; }
.zk-btn--md { height: 32px; padding: 5px 13px; font-size: 14px; line-height: 1.71; }
.zk-btn--lg { height: 40px; padding: 9px 17px; font-size: 16px; line-height: 1.8;  }

/* min-width を外したいケース（テーブル内の小ボタン等） */
.zk-btn--auto { min-width: 0; }

/* Style=Fill */
.zk-btn--fill { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--text-on-color); }
.zk-btn--fill:hover:not(:disabled)  { background: var(--btn-fill-hover);  border-color: var(--btn-fill-hover); }
.zk-btn--fill:active:not(:disabled) { background: var(--btn-fill-active); border-color: var(--btn-fill-active); }

/* Style=Outline */
.zk-btn--outline { background: transparent; border-color: var(--ui-border-02); color: var(--interactive-02); }
.zk-btn--outline:hover:not(:disabled)  { background: var(--btn-outline-hover); }
.zk-btn--outline:active:not(:disabled) { background: var(--btn-outline-active); }

/* Style=Text */
.zk-btn--text { background: transparent; border-color: transparent; color: var(--interactive-02); }
.zk-btn--text:hover:not(:disabled)  { background: var(--btn-outline-hover); }
.zk-btn--text:active:not(:disabled) { background: var(--btn-outline-active); }

/* Style=Danger */
.zk-btn--danger { background: var(--btn-danger); border-color: var(--btn-danger); color: var(--text-on-color); }
.zk-btn--danger:hover:not(:disabled)  { background: var(--btn-danger-hover);  border-color: var(--btn-danger-hover); }
.zk-btn--danger:active:not(:disabled) { background: var(--btn-danger-active); border-color: var(--btn-danger-active); }

/* State=Disable */
.zk-btn--fill:disabled,
.zk-btn--danger:disabled { background: var(--btn-disable); border-color: var(--btn-disable); color: var(--text-on-color); cursor: not-allowed; }
.zk-btn--outline:disabled { background: transparent; border-color: var(--disabled-01); color: var(--disabled-01); cursor: not-allowed; }
.zk-btn--text:disabled    { background: transparent; border-color: transparent; color: var(--disabled-01); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   IconButton
   -------------------------------------------------------------------------- */
.zk-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 4px;
  background: transparent; color: var(--icon-01); cursor: pointer;
}
.zk-icon-btn:hover { background: var(--btn-outline-hover); }

/* --------------------------------------------------------------------------
   Tag（ステータス表示・差し戻しバッジ）
   既存トークンのみで構成。差し戻しバッジは Gray。
   -------------------------------------------------------------------------- */
.zk-tag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 8px;
  border-radius: 4px;
  font-size: 12px; font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.zk-tag--gray        { background: var(--ui-bg-02);  color: var(--text-02); }
.zk-tag--yellow      { background: var(--yellow-10); color: var(--text-01); }
.zk-tag--green       { background: var(--green-10);  color: var(--green-60); }
.zk-tag--green-solid { background: var(--green-60);  color: var(--text-on-color); }
.zk-tag--blue        { background: var(--blue-10);   color: var(--blue-60); }

.zk-new {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--interactive-01);
}
.zk-new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--interactive-01); }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.zk-card { background: var(--ui-bg-01); border-radius: 8px; padding: 24px; }
.zk-card--flat { background: var(--ui-bg-02-light); }

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */
.zk-table-wrap {
  border: 1px solid var(--ui-border-01);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ui-bg-01);
}
/* 横スクロールさせる場合 */
.zk-table-wrap--scroll { overflow-x: auto; overflow-y: hidden; }

.zk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.71;
  color: var(--text-01);
}
.zk-table th,
.zk-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid var(--ui-border-01);
}
.zk-table th {
  background: var(--ui-bg-02-light);
  font-weight: 700;
  white-space: nowrap;
}
.zk-table tbody td { border-top: 1px solid var(--ui-border-01); background: var(--ui-bg-01); }
.zk-table th:last-child,
.zk-table td:last-child { border-right: none; }

.zk-table td.is-nowrap, .zk-table th.is-nowrap { white-space: nowrap; }
.zk-table td.is-muted { color: var(--text-03); }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.zk-modal-overlay {
  position: fixed; inset: 0;
  background: var(--bg-overlay-black);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 100;
}
.zk-modal {
  background: var(--ui-bg-01);
  border-radius: 8px;
  padding: 24px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 24px;
  max-width: 80vw; max-height: 88vh;
}
.zk-modal__title { width: 100%; font-size: 16px; font-weight: 700; line-height: 1; color: var(--text-01); }
.zk-modal__body  { width: 100%; overflow: auto; }
.zk-modal__foot  { display: flex; gap: 8px; }

/* ヘッダー・フッターを区切り線で分けるダイアログ型（差し戻し確認など） */
.zk-modal--dialog { padding: 0; gap: 0; align-items: stretch; }
.zk-modal--dialog .zk-modal__title {
  padding: 20px 24px;
  border-bottom: 1px solid var(--ui-border-01);
}
.zk-modal--dialog .zk-modal__body { padding: 24px; }
.zk-modal--dialog .zk-modal__foot {
  padding: 16px 24px;
  border-top: 1px solid var(--ui-border-01);
  justify-content: flex-end;
}
.zk-counter { text-align: right; font-size: 12px; color: var(--text-03); margin-top: 4px; }

/* 全画面モーダル（過去バージョンの目標詳細） */
.zk-modal--full {
  position: fixed; inset: 0;
  max-width: none; max-height: none;
  border-radius: 0; padding: 0; gap: 0;
  align-items: stretch;
  z-index: 110; background: var(--ui-bg-02);
}
.zk-modal--full .zk-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ui-bg-01);
  border-bottom: 1px solid var(--ui-border-01);
  padding: 16px 24px;
}

/* --------------------------------------------------------------------------
   Notification_Inline（差し戻し通知バナー）
   -------------------------------------------------------------------------- */
.zk-notice {
  background: var(--ui-bg-01);
  border: 1px solid var(--interactive-01);
  border-radius: 8px;
  padding: 14px 16px;
}
.zk-notice__head { display: flex; align-items: center; gap: 12px; }
.zk-notice__text { flex: 1; font-size: 14px; font-weight: 700; color: var(--interactive-01); }

/* 展開部分：今回の差し戻し内容 */
.zk-notice__body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border-01);
  display: flex; flex-direction: column; gap: 12px;
}
.zk-reject-item {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--ui-bg-02-light);
  border-radius: 4px;
  padding: 12px 14px;
}
.zk-reject-item__main { flex: 1; min-width: 0; }
.zk-reject-item__title { font-size: 14px; font-weight: 700; line-height: 1.71; margin-bottom: 2px; }
.zk-reject-item__body { font-size: 14px; line-height: 1.71; }
.zk-reject-item__none { font-size: 14px; line-height: 1.71; color: var(--text-03); }

/* --------------------------------------------------------------------------
   AppShell / Sidebar
   -------------------------------------------------------------------------- */
.zk-shell { display: flex; min-height: 100vh; }

.zk-sidebar {
  flex: none; width: 232px;
  background: var(--ui-bg-01);
  border-right: 1px solid var(--ui-border-01);
  display: flex; flex-direction: column; padding: 20px 0;
}
.zk-sidebar__logo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 20px; font-size: 22px; font-weight: 700;
}
.zk-sidebar__badge {
  background: var(--blue-10); color: var(--blue-60);
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 8px; border-radius: 4px;
}
.zk-nav__group { font-size: 12px; color: var(--text-03); padding: 14px 16px 6px; }
.zk-nav__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 16px;
  font-family: inherit; font-size: 14px; text-align: left;
  color: var(--text-01); cursor: pointer;
  background: none; border: 0; border-left: 3px solid transparent;
}
.zk-nav__item:hover:not(:disabled) { background: var(--ui-bg-02-light); }
.zk-nav__item.is-active {
  background: var(--blue-10); border-left-color: var(--interactive-01);
  color: var(--interactive-01); font-weight: 700;
}
.zk-nav__item:disabled { color: var(--text-03); cursor: default; }

.zk-sidebar__user {
  margin: auto 16px 0; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--ui-border-01); border-radius: 6px; padding: 10px 12px;
}
.zk-avatar {
  width: 28px; height: 28px; border-radius: 4px;
  background: var(--blue-10); color: var(--blue-60);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

.zk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zk-topbar {
  background: var(--ui-bg-01); border-bottom: 1px solid var(--ui-border-01);
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
}
.zk-topbar__title { font-size: 20px; font-weight: 700; line-height: 1.6; }
.zk-content { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.zk-field { display: flex; flex-direction: column; gap: 6px; }
.zk-field__label { font-size: 12px; color: var(--text-02); }
.zk-input, .zk-select, .zk-textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--ui-border-02); border-radius: 4px;
  background: var(--ui-bg-01);
  font-family: inherit; font-size: 14px; color: var(--text-01);
}
.zk-textarea { height: auto; min-height: 104px; padding: 10px 12px; line-height: 1.71; resize: vertical; }
.zk-input::placeholder, .zk-textarea::placeholder { color: var(--text-placeholder); }
.zk-input:focus, .zk-select:focus, .zk-textarea:focus {
  outline: none; border-color: var(--interactive-01); box-shadow: 0 0 0 2px var(--blue-10);
}
.zk-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.zk-check input { width: 16px; height: 16px; accent-color: var(--interactive-01); margin: 0; }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.zk-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--text-01);
}
.zk-tabs { display: flex; gap: 20px; }
.zk-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 2px; cursor: pointer; font-family: inherit;
  font-size: 14px; color: var(--text-02);
}
.zk-tab.is-active { color: var(--interactive-01); border-bottom-color: var(--interactive-01); font-weight: 700; }

.zk-row { display: flex; align-items: center; gap: 12px; }
.zk-row--between { justify-content: space-between; }
.zk-spacer { flex: 1; }

/* 承認状況（1次承認／2次承認／最終承認）— 折り返さない */
.zk-approval { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.zk-approval__step { display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.zk-approval__label { font-size: 12px; color: var(--text-02); white-space: nowrap; }
.zk-approval__box {
  border: 1px solid var(--ui-border-01); border-radius: 4px;
  padding: 3px 10px; font-size: 12px; color: var(--text-02);
  background: var(--ui-bg-01); white-space: nowrap;
}
.zk-approval__box.is-done { background: var(--green-10); border-color: var(--green-10); color: var(--green-60); }
.zk-approval__mark { color: var(--support-success); display: inline-flex; }

/* プロトタイプ専用のロール切替バー（実装対象外） */
.zk-devbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  background: var(--text-01); color: var(--text-on-color);
  padding: 8px 16px; font-size: 12px;
}
.zk-devbar__seg { display: flex; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; overflow: hidden; }
.zk-devbar__seg button {
  background: transparent; border: 0; color: inherit; font-family: inherit;
  font-size: 12px; padding: 5px 12px; cursor: pointer;
}
.zk-devbar__seg button.is-active { background: var(--interactive-01); }

/* 編集中の目標詳細に出る固定アクションバー */
.zk-actionbar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ui-bg-01);
  border-top: 1px solid var(--ui-border-01);
  padding: 16px 24px;
  margin: 8px -24px -24px;
}

/* 編集モードの入力欄（目標シート内） */
.zk-edit-input {
  width: 100%;
  border: 1px solid var(--ui-border-02);
  border-radius: 4px;
  background: var(--ui-bg-01);
  padding: 8px 12px;
  font-family: inherit; font-size: 14px; line-height: 1.71; color: var(--text-01);
  resize: vertical;
}
.zk-edit-input:focus { outline: none; border-color: var(--interactive-01); box-shadow: 0 0 0 2px var(--blue-10); }

.zk-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--text-01); color: var(--text-on-color);
  padding: 12px 20px; border-radius: 6px; font-size: 14px; z-index: 200;
}