/* v4: ESなしですぐ面接・無料枠のアンケート・プラン（準備中）。値は style.css の変数（DESIGN.md が正本）。 */

/* ホームの「ESなしですぐ面接」の帯 */
.quick-bar {
  display: grid; grid-template-columns: 30px auto minmax(0, 1fr) 24px; align-items: center; gap: 4px 12px;
  width: 100%; max-width: 1232px; margin: 12px auto 0; padding: 12px 16px; text-align: left;
  border-radius: var(--radius); background: var(--yellow-soft); box-shadow: 0 3px 0 var(--ink);
}
.quick-bar .ico { width: 28px; height: 28px; }
.quick-bar b { font-size: 17px; font-weight: 800; }
.quick-bar .desc { font-size: 14px; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.quick-bar:hover { background: var(--yellow); }
@media (max-width: 640px) {
  .quick-bar { grid-template-columns: 30px minmax(0, 1fr) 24px; grid-template-areas: "i n a" "d d d"; }
  .quick-bar > .ico:first-child { grid-area: i; }
  .quick-bar b { grid-area: n; }
  .quick-bar .desc { grid-area: d; }
  .quick-bar .arrow { grid-area: a; }
}

/* ES 画面の上の案内 */
.quick-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; background: var(--yellow-soft); }
.quick-hint > div { min-width: 0; flex: 1 1 260px; }
.quick-hint p { margin: 2px 0 0; overflow-wrap: anywhere; }

/* アンケート */
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.pick { position: relative; display: inline-block; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: inline-block; padding: 6px 14px; border: 2px solid var(--line); border-radius: var(--radius-pill); background: var(--card); font-size: 14px; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }
.pick input:checked + span { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.pick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
#screen-survey textarea { width: 100%; font: inherit; color: var(--ink); background: var(--card); border: 1.5px solid #b9b3a4; border-radius: 10px; padding: 10px 12px; resize: vertical; }
.preview { margin: 8px 0; padding: 10px 14px; background: var(--paper-2); border-radius: 10px; }
.preview li { overflow-wrap: anywhere; }
.send-card .check-row { font-weight: 700; }

/* プラン（準備中） */
.plan-list { display: grid; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); }
.plan-name { font-weight: 800; font-size: 17px; }
.plan-price { flex: 1 1 auto; color: var(--ink-2); overflow-wrap: anywhere; }

/* 無料の1回が終わったカード */
.free-end { background: var(--yellow-soft); border-color: #f1e0a0; }
.free-end h3 { margin-top: 0; }