/* 年末調整アプリ固有の見た目。色はすべて navdocs-theme.css の --nd-* を使う。 */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--nd-bg); color: var(--nd-text); font-family: var(--nd-font); }

/* ヘッダーは固定表示なので、その高さだけ本文を下げる（サイドバーは使わない） */
.nk-main {
  max-width: 960px; margin: 0 auto;
  padding: calc(var(--nd-header-h) + var(--nd-space-3)) var(--nd-space-2) var(--nd-space-4);
}
/* 共通CSSは狭い画面でアプリ名を隠す（サイドバーに出る前提）。このアプリはサイドバーが無いので出す */
@media (max-width: 960px) {
  .nk-app-name { display: inline; font-size: 13px; padding-left: var(--nd-space-1); }
}
/* 従業員画面はスマホ基準。パソコンで開いても読みやすい幅に抑える */
.nk-main--narrow { max-width: 560px; }

.nk-header-form { margin: 0; }
.nk-header-logout {
  background: transparent; border: 1px solid rgba(255, 255, 255, .5); color: #fff;
  border-radius: var(--nd-radius-pill); padding: 4px 12px; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
/* スマホではヘッダーの名前を出さない（本文の見出しに名前がある） */
@media (max-width: 560px) {
  .nd-header__user { display: none; }
}

.nk-steps { list-style: none; margin: 0; padding: 0; }
.nk-steps li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nd-space-1);
  padding: 12px 0; border-bottom: 1px solid var(--nd-border);
}
.nk-steps li:last-child { border-bottom: 0; }

.nk-company-list { list-style: none; margin: 0; padding: 0; }
.nk-company-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nd-space-1);
  padding: 12px 0; border-bottom: 1px solid var(--nd-border);
}
.nk-company-list li:last-child { border-bottom: 0; }
.nk-muted { color: var(--nd-text-muted); font-size: 13px; }

.nk-alert {
  padding: 12px var(--nd-space-2); border-radius: var(--nd-radius-sm);
  background: var(--nd-danger-soft); color: var(--nd-danger-text); margin-bottom: var(--nd-space-2);
}

.nk-login { max-width: 420px; margin: var(--nd-space-2) auto; }
.nk-login .nd-btn { width: 100%; justify-content: center; }
.nk-dev { margin-top: var(--nd-space-3); padding-top: var(--nd-space-2); border-top: 1px dashed var(--nd-border); }
.nk-dev form { display: flex; gap: var(--nd-space-1); flex-wrap: wrap; }