/* =====================================================================
   style.css — ワードサーチ生成 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 共有CSSに無い小物ユーティリティを補完 */
.sg-mt-3 { margin-top: var(--sg-space-3, 12px); }
.sg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sg-btn--sm {
  padding: 6px 12px;
  font-size: 0.85rem;
}
.sg-list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.9;
  color: var(--sg-fg, #333);
}
.sg-list li { margin: 2px 0; }

/* 向き選択（チェックボックス群） */
.sg-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* サンプルボタンは軽めに */
#sample-btn { margin-top: 8px; }

/* メッセージ色分け */
#msg-section.is-ok .sg-result__value { color: var(--sg-ok, #217a3c); }
#msg-section.is-warn .sg-result__value { color: var(--sg-warn, #a5680a); }
#msg-section.is-error .sg-result__value { color: var(--sg-danger, #c0392b); }

/* ---- パズル本体 ---- */
.ws-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.ws-toolbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ws-print-title {
  display: none; /* 画面では隠す。印刷時のみ表示 */
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.ws-grid-wrap {
  overflow-x: auto;
  display: flex;
  justify-content: center;
}
.ws-grid {
  --ws-size: 12;
  display: grid;
  grid-template-columns: repeat(var(--ws-size), 1fr);
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  border: 2px solid var(--sg-fg, #333);
  background: #fff;
}
.ws-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sg-border, #d0d4dc);
  font-weight: 600;
  color: #1a1a1a;
  /* セル数に応じて文字を自動縮小 */
  font-size: clamp(0.6rem, calc(46vw / var(--ws-size)), 1.25rem);
  user-select: none;
  line-height: 1;
}
.ws-cell.is-answer {
  background: var(--sg-accent-weak, #ffe066);
  color: #7a4b00;
  border-radius: 3px;
}

.ws-wordlist {
  margin-top: 18px;
}
.ws-wordlist__title {
  font-size: 1rem;
  margin: 0 0 8px;
}
.ws-words {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 4px 14px;
}
.ws-word {
  padding: 4px 0;
  border-bottom: 1px dashed var(--sg-border, #d0d4dc);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- 印刷（問題＝格子＋さがす言葉のみ） ---- */
@media print {
  /* 共有ヘッダ/フッタや設定・メッセージ・ヒントを隠す */
  .sg-header,
  .sg-footer,
  .sg-related-links,
  .sg-sitelinks,
  .sg-lead,
  #form-heading,
  form#app,
  #msg-section,
  #tips-heading,
  .ws-toolbar {
    display: none !important;
  }
  /* 設定カード自体（form を含む）を隠す */
  .sg-card[aria-labelledby="form-heading"],
  .sg-card[aria-labelledby="tips-heading"] {
    display: none !important;
  }
  body, .sg-page, .sg-main, .sg-container {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #puzzle-section {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .ws-print-title { display: block; }
  .ws-grid {
    width: 100%;
    max-width: 100%;
    page-break-inside: avoid;
  }
  .ws-cell { color: #000 !important; }
  .ws-cell.is-answer {
    background: #ddd !important;
    color: #000 !important;
  }
  .sg-title { font-size: 1.3rem; text-align: center; }
}