/* 面接当日モード（追補23-48 §3 の7）。色は shared/tokens.css の3色（紺・空色・オレンジ）だけを使う */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg-light); color: var(--text-body); font-family: var(--font-base); font-size: 16px; line-height: var(--lh-ui); -webkit-text-size-adjust: 100%; }
a { color: var(--navy); }
a:hover { color: var(--orange-ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 14px; background: var(--navy); color: #fff; }
.skip-link:focus { left: 8px; top: 8px; }
.dy-wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.dy-main { padding: 8px 0 56px; }
.dy-crumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 12px 0 0; font-size: 12px; color: var(--text-muted); }
.dy-crumb li + li::before { content: "›"; margin-right: 6px; color: var(--border-strong); }
.dy-crumb a { color: var(--text-muted); }
.dy-head { padding: 18px 0 8px; }
.dy-title { margin: 0 0 10px; color: var(--navy); font-size: var(--fs-h1-sp); font-weight: var(--fw-h1); line-height: var(--lh-h1); }
.dy-lead { margin: 0; font-size: 15px; line-height: 1.85; }
.dy-card { margin: 16px 0 0; padding: 18px 16px 20px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-white); box-shadow: var(--shadow-card); }
.dy-h2 { margin: 0 0 10px; color: var(--navy); font-size: var(--fs-h2-sp); font-weight: var(--fw-h2); line-height: var(--lh-h2); }
.dy-note { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.dy-checks { list-style: none; margin: 0; padding: 0; }
.dy-checks li + li { border-top: 1px solid var(--border-color); }
.dy-checks label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; font-size: 15px; line-height: 1.6; color: var(--text-main); cursor: pointer; }
.dy-checks input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 22px; accent-color: var(--navy); }
.dy-checks label:has(input:checked) { color: var(--text-muted); text-decoration: line-through; }
.dy-progress { margin: 10px 0 6px; font-weight: 700; color: var(--navy); }
.dy-reset { padding: 6px 2px; border: 0; background: none; color: var(--navy); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.dy-breath { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 16px; }
.dy-circle { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--sky) 0, var(--sky-strong) 70%, var(--sky-line) 100%);
  transform: scale(.55); transition-property: transform; transition-timing-function: ease-in-out; }
.dy-circle.is-in { transform: scale(1); transition-duration: 4s; }
.dy-circle.is-out { transform: scale(.55); transition-duration: 6s; }
.dy-breath__text { margin: 0; font-size: 18px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.dy-links { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.dy-links a { display: block; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; font-weight: 700; text-decoration: none; }
.dy-links a:hover { border-color: var(--navy); background: var(--navy-soft); }
.dy-links--articles a { font-weight: 500; }
@media (min-width: 640px) {
  .dy-title { font-size: var(--fs-h1); }
  .dy-card { padding: 22px 26px 24px; }
  .dy-h2 { font-size: var(--fs-h2); }
}
@media (prefers-reduced-motion: reduce) { .dy-circle, .dy-circle.is-in, .dy-circle.is-out { transition: none; transform: scale(.8); } }