/* 本日出勤のボーイカード（2026-09-19）
   本日出勤ページ（page-today*.php）・ボーイ一覧（archive-product*.php）と、
   トップページ（index*.php）の「本日出勤」「ボーイ一覧」で共通に使う見た目。
   .tdx を付けた囲みの中だけに効く。
   ※カードのHTMLは前のまま。js/shift-adjust.js が使う目印（.boy-card / .work-time の data-* /
     .shift-time / .tomari-mark / .sold-out-badge / .boys-count）には見た目しか当てていない。
   ※style.css の #today-cast 用の見た目とぶつからないよう、囲みの id は #today-cast にしない。
   ※カードの「本日の出勤」の文字は言語ごとに --tdx-worklabel で変える。 */
.tdx{--red:#dc2626;--red-d:#991b1b;--red-l:#fef2f2;--ink:#1f2937;--mut:#6b7280;--line:#e5e7eb;--sat:#2563eb;--green:#06c755;
  background:#f7f7f8;color:var(--ink);font-size:14px;line-height:1.7;overflow-x:hidden}
.tdx *{box-sizing:border-box}

/* ページ上部（本日出勤ページ） */
.tdx-hero{background:linear-gradient(135deg,#7f1d1d 0%,#dc2626 60%,#b91c1c 100%);color:#fff;text-align:center;padding:34px 16px 30px;border-radius:0 0 22px 22px}
.tdx-date{display:inline-block;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 14px;font-size:13px;font-weight:800;letter-spacing:.05em;margin-bottom:8px}
.tdx-hero h1{color:#fff;font-size:clamp(24px,5.6vw,36px);font-weight:900;margin:0 0 6px;line-height:1.3}
.tdx-hero p{margin:0 auto 16px;max-width:600px;opacity:.95}

/* 見出し（トップページの中の一区画） */
.tdx-head{text-align:center;margin:0 0 14px}
.tdx-head .tdx-date{background:var(--red-l);color:var(--red)}
.tdx-head h2{font-size:clamp(22px,4.6vw,30px);font-weight:900;margin:0 0 4px;line-height:1.3;color:var(--ink)}
.tdx-head p{margin:0;color:var(--mut);font-size:13.5px}

.tdx-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tdx-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:999px;font-weight:800;font-size:14.5px;text-decoration:none!important;min-width:190px}
.tdx-btn--white{background:#fff;color:var(--red)!important}
.tdx-btn--red{background:var(--red);color:#fff!important}
.tdx-btn--outline{background:#fff;color:var(--red)!important;border:2px solid var(--red)}
.tdx-btn--line{background:var(--green);color:#fff!important}
.tdx-btn--ghost{background:transparent;color:#fff!important;border:2px solid rgba(255,255,255,.75)}

.tdx-body{max-width:1200px;margin:0 auto;padding:18px 16px 0}
.tdx-note{background:#fffbeb;border:1px solid #fde68a;color:#78350f;border-radius:12px;padding:10px 14px;font-size:13px;margin:0 0 10px;text-align:left}
.tdx-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:#374151;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0 0 14px}
.tdx-legend b{color:var(--red)}
.tdx-more{margin-top:16px}

/* カード一覧 */
.tdx .boys-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:0}
.tdx .boy-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.06);transition:transform .15s,box-shadow .15s,border-color .15s;min-width:0;position:relative;margin:0}
.tdx .boy-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.12);border-color:var(--red)}
.tdx .boy-card-link,.tdx .boy-card > a{display:flex;flex-direction:column;height:100%;text-decoration:none!important;color:inherit!important}
.tdx .boy-card-image{position:relative;aspect-ratio:3/4;height:auto;background:#eee;overflow:hidden}
.tdx .boy-card-image img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;max-width:none;transition:transform .3s}
.tdx .boy-card:hover .boy-card-image img{transform:scale(1.04)}
.tdx .no-image,.tdx .boy-image-placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:34px}
.tdx .boy-name-overlay{position:absolute;left:0;right:0;bottom:0;top:auto;padding:26px 10px 8px;border-radius:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff;font-weight:900;font-size:15px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tdx .sold-out-badge{position:absolute;top:8px;right:8px;z-index:3;background:#374151;color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px}
.tdx .boy-card:has(.sold-out-badge) .boy-card-image img{filter:grayscale(.7) brightness(.85)}
.tdx .boy-info-area{padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px;flex-grow:1;background:#fff;color:var(--ink)}
.tdx .sex-info,.tdx .boy-info-area > div:first-child{text-align:center;margin:0}
.tdx .sex-tag{display:inline-block;background:#f3f4f6;color:#374151;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 10px}
.tdx .work-time{text-align:center;background:var(--red-l);color:var(--red-d);border-radius:10px;padding:5px 6px;margin:0;font-weight:900;font-size:14px;line-height:1.35}
.tdx .work-time::before{content:var(--tdx-worklabel,"本日の出勤");display:block;font-size:10.5px;font-weight:700;color:var(--red);letter-spacing:.05em}
.tdx .overnight-info{text-align:center;font-size:12px;color:var(--mut);margin:0}
.tdx .tomari-mark{color:var(--sat);font-weight:800}
.tdx .play-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:auto;font-size:11.5px}
.tdx .play-info-grid > div{display:flex;justify-content:space-between;align-items:center;gap:4px;background:#f9fafb;border:1px solid #f0f0f0;border-radius:8px;padding:3px 7px;color:#374151;font-weight:700}
.tdx .play-value,.tdx .play-info-grid > div > span:last-child{color:var(--red);font-weight:900;font-size:13px}
.tdx .boys-count,.tdx .no-boys-message{grid-column:1/-1;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;color:#374151;margin:0}
.tdx .boys-count p,.tdx .no-boys-message p{margin:0;text-align:center}
.tdx .no-boys-message a{color:var(--red);font-weight:800}

@media (max-width:600px){
  .tdx-btn{min-width:0;flex:1 1 100%}
  .tdx .boys-grid-container{grid-template-columns:1fr 1fr;gap:10px}
  .tdx .boy-name-overlay{font-size:14px}
  .tdx .work-time{font-size:13px}
  .tdx .play-info-grid > div{padding:3px 6px}
}