/* =====================================
   和暦職歴チェッカー（外部CSS）
   ===================================== */

.whc-wrap{max-width:1000px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
.whc-title{margin:0 0 12px;font-size:20px;font-weight:700;}
.whc-errors{background:#fff3f3;border:1px solid #ffb3b3;padding:10px;margin:0 0 12px;border-radius:8px;}

.whc-grid{
  display:grid;
  grid-template-columns: 2.2fr 2.2fr 0.9fr 0.9fr 0.9fr; /* 5列 */
  gap:10px;
  align-items:center;
  border:1px solid #ddd;
  padding:12px;
  border-radius:10px;
  margin-bottom:10px;
}

.whc-head{font-weight:700;opacity:.85;margin:8px 0 6px;}
.whc-cell{box-sizing:border-box;}
.whc-cell label{display:block;font-size:12px;opacity:.8;margin-bottom:4px;}

/* ★ここがポイント：元号＋年＋月を絶対に1列にする */
.whc-inline{
  display:flex;
  gap:8px;
  flex-wrap: nowrap;      /* ← wrap禁止 */
  align-items:center;
  white-space: nowrap;    /* 念のため */
}

/* 入力幅（崩れにくい値） */
.whc-inline select{ width: 90px; }
.whc-inline input[type="number"]{ width: 78px; }

/* 万一カラムが狭いテーマでも折り返さず横スクロールで逃がす */
.whc-cell{ overflow-x: auto; }

.whc-btn{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #333;background:#fff;cursor:pointer;}
.whc-small{font-size:12px;opacity:.75;margin-top:6px;}

.whc-resultBox{
  border:1px solid #ddd;border-radius:10px;padding:12px;margin-top:12px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}

.whc-totalBtnWrap{display:flex;justify-content:flex-end;margin-top:8px;}
.whc-totalBtn{padding:10px 14px;border-radius:10px;border:1px solid #333;background:#fff;cursor:pointer;}
.whc-note{font-size:12px;opacity:.7;margin-top:8px;}

.whc-rowmsg{grid-column: 1 / -1; margin-top:6px;}
.whc-rowmsg .err{background:#fff3f3;border:1px solid #ffb3b3;padding:8px;border-radius:8px;font-size:13px;}
.whc-rowmsg .ok{background:#f4fff6;border:1px solid #a8e6b0;padding:8px;border-radius:8px;font-size:13px;}

/* スマホ：縦積み（横1列強制だと見にくいので） */
@media (max-width: 780px){
  .whc-grid{grid-template-columns: 1fr;}
  .whc-inline{flex-wrap: wrap; white-space: normal;}
  .whc-inline select,.whc-inline input[type="number"]{width:auto;}
  .whc-btn{max-width:220px;}
  .whc-cell{ overflow-x: visible; }
}