/* これまでのピック（v1。2026-11-12）。共通の部品は va.css、決まりは リポジトリ直下の DESIGN.md。接頭辞は dy-。
   形は2つ：一覧（月ごと。PCはカレンダー、スマホは日付の行）と、1日（日めくりの札と名前 → その日の1本 → 前の日／次の日 → 広告の枠）。
   日付はインクの地に英数字（お知らせの日付の札と同じ言葉づかい）。今日だけコーラル。演出は rise だけ。黄緑は使わない。 */

/* ===== 2羽（このページの中で使う形） ===== */
.dy-b{position:relative;display:block;flex:none}
.dy-b img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.dy-b .va-plate{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) rotate(-3deg)}

/* ===== 一覧：題名の段 ===== */
.dy-ph .va-in{position:relative}
.dy-ph h1 wbr{display:inline}
.dy-ph-act{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:22px}
.dy-ph-bird{display:none}
@media (min-width:1080px){
  .dy-ph .lead{max-width:none}
  /* ツバメ（旅人）は題名の段の右下に立つ。吹き出しはツバメの右（ツバメが向いている側） */
  .dy-ph-bird{display:flex;align-items:flex-end;gap:20px;position:absolute;right:var(--gut);bottom:0;padding-bottom:20px}
  .dy-ph-bird .dy-b{width:132px}
  .dy-ph-bird .va-say{margin-bottom:64px;font-size:15px;padding:10px 16px;transform:rotate(2deg);white-space:nowrap}
  .dy-ph-bird .va-say::before{top:auto;bottom:12px}
}

/* ===== 一覧：月ごと。見出しの右に「◯日分」 ===== */
.dy-month .va-h .dy-n{font-family:var(--px);font-weight:400;font-size:13px;color:var(--mute)}
.dy-empty{padding:26px 22px;border:2px dashed var(--mute);font-size:15px;line-height:1.8}
.dy-empty b{display:block;font-weight:900;font-size:20px;color:var(--ink)}
/* --- スマホ：日付の行（新しい順）。1枚の紙に、日付の札・小さなサムネイル・名前 --- */
.dy-cal{display:none}
.dy-rows{background:var(--paper2);border:var(--bd);box-shadow:var(--sh)}
.dy-month.alt .dy-rows{background:var(--paper) var(--grain)}
.dy-rows li+li{border-top:2px dashed var(--line)}
.dy-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px 10px 10px;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.dy-row .d{width:56px;min-height:54px;display:grid;place-items:center;align-content:center;gap:5px;background:var(--ink);color:var(--paper2);line-height:1;text-align:center}
.dy-row .d b{font-family:var(--en);font-weight:800;font-size:14.5px;letter-spacing:0}
.dy-row .d small{font-family:var(--en);font-weight:800;font-size:8.5px;letter-spacing:.08em;color:#ffb39f}
.dy-row .va-mini{width:104px}
.dy-row .nm{min-width:0}
.dy-row .nm b{display:block;font-weight:900;font-size:15.5px;line-height:1.3;letter-spacing:-.01em}
.dy-row .nm small{display:block;font-family:var(--px);font-size:11px;line-height:1.4;color:var(--mute);margin-top:2px}
.dy-row>i{font-style:normal;font-family:var(--px);font-size:13px;color:var(--coral);transition:transform .2s var(--ease)}
.dy-row:hover .nm b{color:var(--coral-d)}
.dy-row:hover>i{transform:translateX(3px)}
.dy-row:focus-visible{outline-offset:-3px}
.dy-row>i em{font-style:normal;font-family:var(--jp);font-weight:900;font-size:12px;color:var(--ink);margin-right:5px}
.dy-row.today .d{background:var(--coral)}
.dy-row.today .d small{font-family:var(--jp);font-weight:900;font-size:11px;letter-spacing:0;color:#fff}
/* --- PC：カレンダー（日曜はじまり・7列）。マス＝日付の帯（インク）・サムネイル・名前。今日のマスはコーラル --- */
@media (min-width:860px){
  .dy-rows{display:none}
  .dy-cal{display:block}
  .dy-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin-bottom:8px;padding-bottom:6px;border-bottom:var(--bd)}
  .dy-wk span{display:flex;align-items:baseline;gap:7px;font-weight:900;font-size:14px;line-height:1.3;color:var(--ink)}
  .dy-wk small{font-family:var(--en);font-weight:800;font-size:9px;letter-spacing:.08em;color:var(--mute)}
  .dy-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:20px 14px;padding-top:10px}
}
.dy-cell{min-width:0}
.dy-cell a{display:flex;flex-direction:column;height:100%;background:var(--paper2);border:var(--bd);box-shadow:3px 3px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.dy-cell a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.dy-cell a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dy-cell .d{display:flex;align-items:baseline;gap:7px;padding:6px 9px 5px;background:var(--ink);color:var(--paper2);line-height:1}
.dy-cell .d b{font-family:var(--en);font-weight:800;font-size:19px;letter-spacing:0}
.dy-cell .d small{font-family:var(--en);font-weight:800;font-size:8.5px;letter-spacing:.08em;color:#ffb39f}
.dy-cell .d em{margin-left:auto;font-style:normal;font-weight:900;font-size:12px;line-height:1}
.dy-cell .va-mini{width:100%;border:0;border-bottom:var(--bd)}
.dy-cell .nm{display:block;padding:8px 9px 10px}
.dy-cell .nm b{display:block;font-weight:900;font-size:14px;line-height:1.35;letter-spacing:-.01em;font-feature-settings:"palt"}
.dy-cell .nm small{display:block;font-family:var(--px);font-size:10.5px;line-height:1.4;color:var(--mute);margin-top:2px}
.dy-cell.today a{box-shadow:5px 5px 0 var(--coral)}
.dy-cell.today a:hover{box-shadow:7px 7px 0 var(--coral)}
.dy-cell.today .d{background:var(--coral)}
.dy-cell.today .d small{color:#fff}
/* ピックの無い日（始まる前・これから）：点線のマスに日付だけ */
.dy-cell.none{display:flex;flex-direction:column;gap:8px;min-height:120px;padding:6px 9px;border:1.5px dashed var(--mute);color:var(--mute)}
.dy-cell.none .d{padding:0;background:none;color:var(--mute)}
.dy-cell.none .d small{color:var(--mute)}
.dy-cell.none i{font-style:normal;font-family:var(--px);font-size:10.5px;line-height:1.4}

/* ===== 1日：題名の段（日めくりの札＋「◯年◯月◯日の今日のピック」＋名前） ===== */
.dy-day-ph .va-in{padding-bottom:30px}
.dy-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:start}
/* 日めくりの札：上にインクの帯（年）、大きな月日、曜日。少し傾ける */
.dy-leaf{position:relative;width:112px;background:var(--paper2);border:var(--bd);box-shadow:var(--sh);transform:rotate(-3deg);text-align:center;line-height:1}
.dy-leaf .y{display:flex;justify-content:center;align-items:center;gap:9px;padding:5px 0 4px;background:var(--ink);color:var(--paper2);font-family:var(--px);font-size:12.5px;letter-spacing:.1em}
.dy-leaf .y::before,.dy-leaf .y::after{content:"";width:5px;height:5px;background:var(--paper)}   /* 綴じ穴（小さな四角） */
.dy-leaf b{display:block;padding:11px 4px 6px;font-family:var(--en);font-weight:800;font-size:27px;letter-spacing:0;color:var(--ink)}
.dy-leaf .w{display:block;padding-bottom:9px;font-family:var(--en);font-weight:800;font-size:10px;letter-spacing:.12em;color:var(--coral-d)}
/* 題名：小さい行「2026年11月10日の今日のピック」＋極太の名前（1行に入るまで縮める） */
.va-ph .dy-h1{justify-self:stretch;min-width:0;container-type:inline-size;font-size:inherit;line-height:1.1}
/* 小さい行は、インクの札にする（後ろを帯が通っても読めるように） */
.dy-h1 .lab{display:block;width:max-content;max-width:100%;margin-bottom:10px;padding:3px 12px 4px;background:var(--ink);color:var(--paper2);font-weight:900;font-size:clamp(14px,1.4vw,18px);line-height:1.5;letter-spacing:.01em;-webkit-text-stroke:0}
.dy-h1 .nm{display:block;white-space:nowrap;font-size:min(clamp(50px,8.4vw,108px),calc(100cqw / var(--n)));line-height:1.08;letter-spacing:-.04em}
.dy-now{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-top:16px;font-weight:700;font-size:14.5px;color:var(--ink)}
@media (min-width:860px){
  .dy-day-ph .va-in{padding-bottom:40px}
  .dy-head{grid-template-columns:auto minmax(0,1fr);gap:38px;align-items:end;margin-top:6px}
  .dy-leaf{width:176px;margin-bottom:6px;box-shadow:6px 6px 0 var(--ink)}
  .dy-leaf .y{padding:7px 0 6px;font-size:14px}
  .dy-leaf .y::before,.dy-leaf .y::after{width:7px;height:7px}
  .dy-leaf b{padding:18px 6px 9px;font-size:46px}
  .dy-leaf .w{padding-bottom:15px;font-size:13px}
}

/* ===== 1日：その日の1本（左に動画、右に札・一言・この日の1本・行き先） ===== */
.dy-stage-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.dy-screen{min-width:0}
.dy-cap{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-bottom:16px}
.dy-screen .va-yt{box-shadow:var(--sh-l)}
.dy-screen .va-yt:not(.playing):hover{box-shadow:10px 10px 0 var(--ink)}
.dy-info{min-width:0;display:grid;gap:14px;justify-items:start;align-content:start}
.dy-lead{font-weight:700;font-size:18px;line-height:1.7;color:var(--ink)}
.dy-lead.tbd{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-weight:500;font-size:14px;color:var(--ink2)}
.dy-tbd{font-family:var(--px);font-size:12px;line-height:1.5;color:var(--mute);border:1.5px dashed var(--mute);padding:0 7px;white-space:nowrap}
.dy-win{margin-top:-8px}
.dy-one{width:100%;margin:0;border-top:var(--bd);border-bottom:var(--bd)}
.dy-one>div{padding:10px 0 11px}
.dy-one>div+div{border-top:1.5px dashed var(--line)}
.dy-one dt{font-family:var(--px);font-size:11.5px;line-height:1.5;color:var(--mute)}
.dy-one dd{font-weight:700;font-size:15px;line-height:1.6;color:var(--ink)}
.dy-one dd.num{font-family:var(--en);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.3}
.dy-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media (min-width:980px){
  .dy-stage-grid{grid-template-columns:minmax(0,1fr) 372px;gap:48px;align-items:start}
  .dy-info{padding-top:54px}   /* 貼り紙の行の分だけ下げて、動画の上の端とそろえる */
}

/* ===== 1日：前の日／次の日 ===== */
.dy-nav .va-in{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){
  .dy-nav .va-in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:26px;align-items:stretch}
}

/* ===== 2026-11-15：1日のページの右の欄（試し）と、前の日・次の日（タレントのページと同じ形。真ん中は黒い正方形の「ピック一覧へ」） ===== */
.dy-vt{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:12px;font-size:14px;line-height:1.6;color:var(--ink2)}
.dy-vt b{font-weight:700;color:var(--ink)}
.dy-vt .num{font-family:var(--en);font-weight:800;font-size:13px;color:var(--mute)}
.dy-info .h{font-family:var(--px);font-size:11.5px;color:var(--mute);margin-bottom:6px}
.dy-info .h small{margin-left:4px}
.dy-hs ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;height:26px}
.dy-hs li{background:color-mix(in srgb,var(--teal) calc(var(--o) * 100%),var(--paper));border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.dy-hs .ax{display:flex;justify-content:space-between;margin-top:3px;font-family:var(--en);font-size:10px;color:var(--mute)}
.dy-mix ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.dy-mix li{display:grid;grid-template-columns:4em minmax(0,1fr) 3.4em;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--ink)}
.dy-mix li i{display:block;height:10px;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--coral) var(--w),var(--paper2) var(--w))}
.dy-mix li b{font-family:var(--en);font-weight:800;font-size:14px;text-align:right}
.dy-mix li b small{font-size:10px;margin-left:1px}
.dy-one dd small{font-size:11px;margin-left:2px}
.dy-info>*+*{margin-top:16px}
.dy-pn{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.dy-pnb{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;padding:12px;background:var(--paper2);border:var(--bd);box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;min-width:0}
.dy-pnb.next{grid-template-columns:minmax(0,1fr) 150px;text-align:right}
.dy-pnb.next img{order:2}
.dy-pnb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:var(--bd)}
.dy-pnb .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.dy-pnb.next .tx{align-items:flex-end}
.dy-pnb small{font-family:var(--px);font-size:11px;color:var(--mute)}
.dy-pnb b{font-weight:900;font-size:clamp(17px,1.7vw,21px);line-height:1.3;overflow-wrap:anywhere}
.dy-pnb .og{line-height:1}
.dy-pnb:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.dy-pnb.none{grid-template-columns:minmax(0,1fr);box-shadow:none;border-style:dashed;background:transparent}
.dy-pnb.none b{font-size:15px;color:var(--ink2)}
.dy-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:112px;height:112px;align-self:center;background:var(--ink);color:var(--paper2);text-decoration:none;border:var(--bd);box-shadow:4px 4px 0 var(--coral);transition:transform .12s,box-shadow .12s}
.dy-mid span{font-weight:900;font-size:15px;color:var(--paper2)}
.dy-mid small{font-family:var(--en);font-weight:800;font-size:9px;letter-spacing:.08em;color:#a7a297}
.dy-mid:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--coral)}
@media (max-width:760px){
  .dy-pn{grid-template-columns:minmax(0,1fr)}
  .dy-pnb,.dy-pnb.next{grid-template-columns:120px minmax(0,1fr);text-align:left}
  .dy-pnb.next img{order:0}.dy-pnb.next .tx{align-items:flex-start}
  .dy-mid{order:3;width:100%;height:auto;padding:12px;flex-direction:row;gap:10px}
}
.dy-info>.dy-hs,.dy-info>.dy-mix,.dy-info>.dy-one{justify-self:stretch;width:100%}
.dy-info>*+*{margin-top:0}
.dy-older{padding:28px 0 40px}
.dy-older p{display:flex;justify-content:center}