/* ============================================================
   test-dates.css — 意地悪な日付ジェネレーター 固有スタイル
   共通変数は /style/common.css の --tp-* を流用
   ============================================================ */

/* ====== 操作パネル ====== */
.dt-panel{background:#fff;border:1px solid var(--tp-border);border-radius:12px;padding:20px 22px}
.dt-form-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--tp-border)}
.dt-form-row label{font-size:12px;font-weight:700;color:var(--tp-text2)}
.dt-form-row input[type=date],.dt-form-row select{border:1px solid var(--tp-border2);border-radius:6px;padding:8px 10px;font-size:13px;font-family:inherit;color:var(--tp-text);background:#fff}
.dt-btn-ghost{background:none;border:1px solid var(--tp-border2);border-radius:2px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--tp-text2);cursor:pointer;font-family:inherit}
.dt-btn-ghost:hover{border-color:var(--tp-orange);color:var(--tp-orange)}
.dt-copy{font-size:12px;font-weight:700;color:#fff;background:var(--tp-orange);border:none;border-radius:2px;padding:6px 16px;cursor:pointer;font-family:inherit;transition:background .12s}
.dt-copy:hover{background:#c94a12}
.dt-copy.is-done{background:var(--tp-green)}

/* ====== 日付カード ====== */
.dt-group{margin-top:22px}
.dt-group-hd{font-size:14px;font-weight:800;color:var(--tp-text2);margin:0 0 12px;padding-left:10px;border-left:3px solid var(--tp-orange)}
.dt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dt-item{display:flex;flex-direction:column;gap:7px;background:var(--tp-cream);border:1px solid var(--tp-border);border-radius:10px;padding:14px 15px}
.dt-item.is-warn{border-color:var(--tp-orange-bd);background:var(--tp-orange-bg)}
.dt-val{font-family:'SFMono-Regular','Consolas',monospace;font-size:15px;font-weight:700;color:var(--tp-text);word-break:break-all;line-height:1.5}
.dt-item.is-warn .dt-val{color:var(--tp-orange)}
.dt-name{font-size:12px;font-weight:800;color:var(--tp-text)}
.dt-note{font-size:11px;line-height:1.8;color:var(--tp-text2);margin:0;flex:1}
.dt-copy-s{align-self:flex-start;padding:5px 14px;font-size:11px}

/* ====== 出力エリア ====== */
.dt-out-block{margin-top:24px;padding-top:18px;border-top:1px solid var(--tp-border)}
.dt-out{width:100%;border:1px solid var(--tp-border2);border-radius:8px;padding:11px 12px;font-family:'SFMono-Regular','Consolas',monospace;font-size:12px;line-height:1.7;resize:vertical;box-sizing:border-box;background:var(--tp-cream);color:var(--tp-text);white-space:pre}
.dt-out-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.dt-info{font-size:12px;color:var(--tp-text3);flex:1;min-width:150px}

/* ====== 実装差分 ====== */
.dt-sec-lead{font-size:13px;line-height:1.9;color:var(--tp-text2);margin:0 0 16px}
.dt-diff{display:flex;flex-direction:column;gap:12px}
.dt-diff-card{background:#fff;border:1px solid var(--tp-border);border-radius:12px;padding:18px 20px}
.dt-diff-q{font-size:13px;font-weight:800;color:var(--tp-text);margin-bottom:14px;font-family:'SFMono-Regular','Consolas',monospace}
.dt-diff-as{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.dt-diff-a{flex:1;min-width:180px;background:var(--tp-cream);border:1px solid var(--tp-border);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.dt-diff-l{font-size:11px;font-weight:700;color:var(--tp-text2)}
.dt-diff-v{font-family:'SFMono-Regular','Consolas',monospace;font-size:18px;font-weight:900;color:var(--tp-orange);line-height:1.3}
.dt-diff-n{font-size:11px;color:var(--tp-text3)}
.dt-diff-vs{align-self:center;font-size:11px;font-weight:800;color:var(--tp-text3);font-family:'Syne','M PLUS 1p',sans-serif}
.dt-diff-note{font-size:12px;line-height:1.8;color:var(--tp-text2);margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--tp-border)}

/* ====== 解説 ====== */
.dt-why{background:#fff;border:1px solid var(--tp-border);border-radius:12px;padding:22px 24px}
.dt-why p{font-size:13px;line-height:2;color:var(--tp-text2);margin:0 0 14px}
.dt-why p:last-child{margin-bottom:0}
.dt-why strong{color:var(--tp-text)}
.dt-why a{color:var(--tp-orange);font-weight:700}

/* ====== FAQ（details/summaryベース。test-data.css と同スタイル） ====== */
.faq-item{border-bottom:1px solid var(--tp-border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px;cursor:pointer;font-weight:700;font-size:14px;color:var(--tp-text);list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-icon{color:var(--tp-orange);font-weight:700}
details[open] .faq-icon{transform:rotate(45deg)}
.faq-a{padding:0 2px 14px;font-size:13px;line-height:1.8;color:var(--tp-text2)}

@media(max-width:900px){
  .dt-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .dt-grid{grid-template-columns:1fr}
  .dt-panel{padding:16px}
  .dt-why,.dt-diff-card{padding:18px}
  .dt-form-row input[type=date],.dt-form-row select{flex:1;min-width:0}
  .dt-diff-vs{display:none}
}