/* SAITOWORKS Recruit CSS (v0.2)
   - 色や余白は base.css のトークンを参照
   - このファイルではページ固有の見た目のみ定義
*/

/* ================= 共通セクション ================= */
.swx-section {
  padding: var(--swx-gap-12) 0;
}

.swx-hero {
  padding: var(--swx-gap-12) 0 var(--swx-gap-8);
  background: var(--swx-c-surface);
}
.swx-hero .title {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem);
  margin-bottom: var(--swx-gap-4);
}

/* Steps */
.swx-steps .step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--swx-gap-4);
  align-items: start;
}
.swx-steps .num {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--swx-c-brand);
  color: var(--swx-c-ink-on-brand, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* FAQ */
.swx-faq details {
  border: 1px solid var(--swx-c-border);
  border-radius: var(--swx-radius);
  padding: 0.75rem 1rem;
  background: var(--swx-c-bg);
}
.swx-faq details + details {
  margin-top: 0.75rem;
}

/* ================= 応募フォーム共通 ================= */
.swx-apply {
  /* ページ内ローカル変数に束ねておくと保守が楽 */
  --brand: var(--swx-c-brand);
  --brand-weak: var(--swx-c-brand-weak);
  --surface: #fff;
  --bg: var(--swx-c-bg);
  --border: var(--swx-c-border);
  --muted: var(--swx-c-muted);
  --radius: var(--swx-radius);
  --shadow-sm: var(--swx-shadow-sm);
  --shadow-md: var(--swx-shadow-md);
}
.swx-apply__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

.swx-apply form .form-row {
  margin-top: var(--swx-gap-6);
}

/* ================= カレンダー ================= */
.swx-cal {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.swx-cal__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.swx-cal__head p {
  margin-bottom: 0;
}
.swx-cal__label {
  min-width: 140px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ←→ ナビゲーションボタン（ブランドカラー） */
.swx-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: 0.15s transform, 0.15s box-shadow, 0.15s background;
  box-shadow: var(--shadow-sm);
}
.swx-cal__nav:hover {
  background: color-mix(in oklab, var(--brand) 92%, black);
  box-shadow: 0 0 0 4px var(--brand-weak);
}
.swx-cal__nav:active {
  transform: translateY(1px);
}

.swx-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 12px;
}
.swx-cal__cell {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--swx-c-bg);
  cursor: pointer;
  user-select: none;
  transition: 0.12s transform, 0.12s background, 0.12s color, 0.12s border-color;
}
.swx-cal__cell:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
}

/* 前月/次月のパディングセル */
.swx-cal__cell.is-pad {
  background: var(--swx-c-surface);
  color: var(--muted);
  border-style: dashed;
  cursor: default;
}

/* 受付停止・休業・満席など */
.swx-cal__cell.is-disabled {
  background: var(--swx-c-surface);
  color: var(--swx-c-muted);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

/* 今日 */
.swx-cal__cell[aria-current='date'] {
  outline: 2px solid var(--brand);
}

/* 選択中（JSで .is-picked を付与） */
.swx-cal__cell.is-picked {
  background: var(--brand-weak);
  border-color: var(--brand);
  color: color-mix(in oklab, var(--brand) 30%, black);
}

/* ================= フォーム要素 ================= */
.swx-apply label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 600;
}

.swx-apply input[type='text'],
.swx-apply input[type='tel'],
.swx-apply input[type='email'],
.swx-apply input[type='date'],
.swx-apply select,
.swx-apply textarea {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--swx-c-bg);
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.4;
  transition: 0.15s border-color, 0.15s box-shadow;
}
.swx-apply input:focus,
.swx-apply select:focus,
.swx-apply textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-weak);
}

.swx-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.swx-consent input {
  width: auto;
}

/* ================= モーダル ================= */
.swx-modal {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--swx-c-text) 45%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.swx-modal[aria-hidden='false'] {
  display: flex;
}

.swx-modal__dialog {
  position: relative;
  background: var(--swx-c-bg);
  border-radius: 12px;
  max-width: 560px;
  width: 92vw;
  padding: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.swx-modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  background: var(--swx-c-bg);
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

/* Buttons */
.swx-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
#swx-submit,
#swx-cancel,
.swx-apply button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
#swx-submit {
  background: var(--brand);
  color: #fff;
}
#swx-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
#swx-cancel {
  background: var(--swx-c-bg);
  border-color: var(--border);
}

/* ================= Responsive ================= */
@media (max-width: 640px) {
  .swx-cal__grid {
    gap: 4px;
  }
  .swx-cal__cell {
    border-radius: 6px;
  }
}

/* 見出しの下の余白を自然に */
.swx-modal__dialog h3 {
  margin: 0 0 var(--swx-gap-4);
}

/* モーダル内のフォーム要素は幅いっぱいに */
.swx-modal__dialog form input[type='text'],
.swx-modal__dialog form input[type='tel'],
.swx-modal__dialog form input[type='email'],
.swx-modal__dialog form input[type='date'],
.swx-modal__dialog form select,
.swx-modal__dialog form textarea {
  max-width: 100%;
  width: 100%;
}

/* 既存の「最大420px」の縛りを打ち消し（念のため） */
.swx-apply input[type='text'],
.swx-apply input[type='tel'],
.swx-apply input[type='email'],
.swx-apply input[type='date'],
.swx-apply select,
.swx-apply textarea {
  max-width: none;
}

/* キャンセルの文字色（背景白でも読みやすく） */
#swx-cancel {
  color: var(--swx-fg);
}