/*
  商品の「ひもづけ」ボード（かんばん方式）の見た目です。admin-boards.js と対になります。

  ・色とかたちは admin.css のトークン（--brand / --paper / --line / --card / --radius / --shadow）だけで組みます。
    警告は admin-catalog.css の .sold-out-restored と同じ琥珀色の左罫線です。
  ・★横にスクロールするのは列の入れ物（.board-columns）だけです。ページ全体は横にスクロールさせません
    （この管理画面は 375px で横スクロールなしを守っています）。.board-frame の min-width:0 を外すと、
    列の数だけページが横に伸びます。
  ・★つかむボタン（.board-handle）には touch-action:none が必須です。無いと、スマートフォンとタブレットでは
    指を動かした瞬間にブラウザのスクロールが勝ち、ドラッグが pointercancel で終わります。
    カード本体には付けません（付けると、一覧を指でスクロールできなくなります）。
  ・固定の列数で切り替えるブレークポイントは増やしません。列は grid-auto-columns の幅で自然に決まります。
*/

/* ---- ボードを開いているあいだは、画面の幅いっぱいに広げます（2026-09-21、ユーザー指示） ----
   ボードは列を横に並べる画面です。ほかの画面と同じ 1180px の中央寄せのままだと、広い画面でも列が3つほどしか
   見えません。admin.js の renderBoardWide() が、3つのボードを開いているあいだだけ body.is-board-wide を付けます。
   ★広げると、ウィンドウを広げた・ブラウザの表示を縮小したぶんだけ、見える列が増えます（列の幅は下の
     grid-auto-columns で決まり、入れ物の幅には合わせないため）。
   ★760px以下は、もともと幅いっぱいです。ヘッダーの右のボタンも、中身の右端に合わせ直します。 */
@media (min-width: 761px) {
    body.is-board-wide main {
        max-width: none;
    }

    body.has-side-nav.is-board-wide main {
        margin-left: var(--side-nav-width);
        margin-right: 0;
    }

    body.has-side-nav.is-board-wide .app-header {
        padding-right: 20px;
    }
}

.board-warnings {
    display: grid;
    gap: 8px;
}

.board-warnings:empty {
    display: none;
}

.board-warning {
    background: #fdf6ec;
    border-left: 4px solid #c98a2e;
    border-radius: 10px;
    color: #5d4a2d;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    padding: 12px 16px;
}

.board-warnings + .board-selection,
.board-warnings + .board-live,
.board-warnings:not(:empty) {
    margin-bottom: 12px;
}

.board-selection {
    align-items: center;
    background: #eff9f6;
    border: 1px solid #9ccbc0;
    border-radius: 10px;
    color: #084e42;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 800;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
}

.board-selection button {
    margin-left: auto;
    padding: 7px 12px;
}

/* 読み上げ専用。見た目には出しません（結果は画面の変化で分かります）。 */
.board-live {
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.board-frame {
    display: grid;
    gap: 14px;
    /* 左の一覧は割合で決めます。minmax(200px,260px) にすると、狭い画面（iPadの縦）でも先に260pxを取り、
       右の列が1本しか見えなくなります。 */
    grid-template-columns: clamp(180px, 22%, 248px) minmax(0, 1fr);
    /* 高さも画面に合わせます（以前は 760px で頭打ちにしていて、表示を縮小しても縦に見える件数が増えませんでした）。 */
    height: max(460px, 76vh);
    min-width: 0;
}

/* 「オプションを付ける」だけ、つかむ側（オプション）が右・落とし先（商品）が左です。 */
.board-frame.is-reversed {
    grid-template-columns: minmax(0, 1fr) clamp(200px, 30%, 300px);
}

.board-frame.is-reversed .board-source {
    order: 2;
}

.board-source,
.board-products,
.board-column {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    transition: background-color .16s ease, outline-color .16s ease;
}

.board-columns {
    display: grid;
    gap: 12px;
    /* 幅は画面の幅から決め、入れ物の空きには合わせません。minmax() にすると、入れ物より列の合計が
       広いとき（＝ほぼ常に）最小幅へ縮み、カードの商品名と価格が1文字ずつ折り返します。 */
    grid-auto-columns: clamp(232px, 22vw, 248px);
    grid-auto-flow: column;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.board-columns.is-blank {
    grid-auto-columns: minmax(0, 1fr);
}

.board-column-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 12px 10px;
}

.board-column-head h4 {
    color: var(--ink);
    flex: 1 1 auto;
    font-size: 14px;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.board-count,
.board-badge,
.board-mark {
    background: #e8efec;
    border-radius: 999px;
    color: #43544f;
    flex: none;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    white-space: nowrap;
}

.board-count.is-empty,
.board-badge.warn {
    background: #fff3df;
    color: #7c5316;
}

.board-mark.sold-out {
    background: #f4e8e8;
    color: #9b3535;
}

.board-preview {
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
}

.board-column-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    padding: 8px 12px 0;
}

.board-column.is-idle .board-column-cards {
    opacity: .66;
}

.board-source-cards,
.board-column-cards,
.board-product-rows {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 10px;
    scrollbar-width: thin;
}

.board-source-tools {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    padding: 10px 12px;
}

.board-only,
.board-price-same {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 6px;
}

.board-empty {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
    padding: 6px 4px;
}

.board-blank {
    align-content: center;
    border: 2px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 28px 18px;
    text-align: center;
}

.board-blank p {
    margin: 0;
}

/* ---- カード ---- */
.board-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: grab;
    display: grid;
    gap: 6px 8px;
    grid-template-columns: 30px 40px minmax(0, 1fr);
    padding: 8px;
    position: relative;
    transition: border-color .16s ease, opacity .16s ease, box-shadow .16s ease;
    user-select: none;
}

.board-option-card {
    grid-template-columns: 30px minmax(0, 1fr);
}

.board-handle {
    background: var(--brand);
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: grab;
    height: 36px;
    padding: 0;
    touch-action: none;
    width: 30px;
}

.board-handle:active {
    cursor: grabbing;
}

.board-handle span {
    font-size: 18px;
    line-height: 1;
    writing-mode: vertical-rl;
}

.board-handle[aria-pressed="true"] {
    background: var(--brand-dark);
    box-shadow: 0 0 0 3px #bfe3d9;
}

.board-thumb {
    background: var(--paper);
    border-radius: 8px;
    height: 40px;
    object-fit: cover;
    pointer-events: none;
    width: 40px;
}

.board-card-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.board-card-name {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.board-card-price {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* オプションの選択肢（「少なめ・ふつう・大盛り」）と、カテゴリーの要約（「商品3件・この区分だけの価格2件」）は
   長くなります。折り返しを止めたままだと、カードと画面の外へはみ出します（2026-09-21、ユーザー報告）。
   ★カテゴリーのカードは、開いた中の商品の行（.board-member）の金額まで巻き込まないよう、子結合子で絞ります。 */
.board-option-card .board-card-price,
.board-category-card > .board-card-text > .board-card-price {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* 印（「どの商品にも付いていません」など）も、狭い一覧では折り返します。 */
.board-card-marks .board-badge {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.board-card-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    grid-column: 1 / -1;
}

.board-card-marks:empty {
    display: none;
}

.board-card.is-unlinked {
    background: #fffaf1;
    border-color: #e0b368;
}

.board-card.is-selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand) inset;
}

.board-card.is-dragging {
    opacity: .4;
}

/* 列の中のカードは、右上の × のぶんだけ右を空けます（列を取ると、商品名の幅が足りなくなります）。 */
.board-placed-card {
    padding-right: 42px;
}

/* × は32pxにします（2026-10-15）。26pxでは指で押しにくく、隣のつかむ所（⠿・36px）とも差が大きかったため。
   36pxにすると、320pxの画面で札の中の「商品と価格を見る」が2行に折れました。 */
.board-remove {
    background: #fff0f0;
    border-radius: 8px;
    color: var(--danger);
    font-size: 15px;
    height: 32px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 32px;
}

/* ---- 列の中の並べ替え（「カテゴリーに入れる」。2026-09-21、ユーザー指示） ----
   カードの間へ落とせます。落ちる場所に線を出します（カードどうしのすき間 8px の真ん中）。 */
.board-card.is-insert-before::before,
.board-card.is-insert-after::after {
    background: var(--brand);
    border-radius: 2px;
    content: "";
    height: 3px;
    left: 2px;
    pointer-events: none;
    position: absolute;
    right: 2px;
}

.board-card.is-insert-before::before {
    top: -6.5px;
}

.board-card.is-insert-after::after {
    bottom: -6.5px;
}

/* 選んでいるカードにだけ出る「↑ 上へ」「↓ 下へ」。右の余白（× のぶん）まで使います。 */
.board-steps {
    display: grid;
    gap: 6px;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    margin-right: -28px;
}

.board-steps button {
    font-size: 12px;
    padding: 7px 8px;
}

.board-price {
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    padding-top: 8px;
}

.board-price-own {
    font-size: 12px;
}

.board-place {
    margin: 10px 10px 0;
}

.board-product-row .board-place {
    margin: 0;
}

/* つかんでいるあいだポインターに付いてくる写し。pointer-events:none なので、
   admin-boards.js の elementFromPoint() は下にある落とし先をそのまま拾えます。 */
.board-ghost {
    box-shadow: var(--shadow);
    cursor: grabbing;
    left: 0;
    opacity: .94;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translate(-9999px, -9999px);
    z-index: 1000;
}

.is-dragging-board .board-card {
    cursor: grabbing;
}

/* ---- Ctrl を押しながら運ぶと複製（2026-09-21、ユーザー指示） ----
   列の中のカードを動かしているあいだ、ゴーストの上に吹き出しを出します（admin-boards.js の bindBoardDrag()）。
   ★吹き出しはゴーストの子です。ゴーストが position:fixed なので、ここを基準に置けば一緒に付いてきます。
   ★画面の上端に近いときは、切れないようにゴーストの下へ回します（.is-tip-below）。
   ★複製のあいだは元のカードを薄くしません（元の列に残るので、消えるように見せない）。 */
.board-drag-tip {
    background: var(--ink);
    border-radius: 8px;
    bottom: calc(100% + 10px);
    box-shadow: 0 6px 16px #0003;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    left: 8px;
    line-height: 1;
    padding: 7px 10px;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
}

/* 吹き出しのしっぽ（ゴーストの側を向く三角）。 */
.board-drag-tip::after {
    border: 6px solid transparent;
    border-top-color: var(--ink);
    content: "";
    left: 14px;
    position: absolute;
    top: 100%;
}

.board-ghost.is-tip-below .board-drag-tip {
    bottom: auto;
    top: calc(100% + 10px);
}

.board-ghost.is-tip-below .board-drag-tip::after {
    border-bottom-color: var(--ink);
    border-top-color: transparent;
    bottom: 100%;
    top: auto;
}

.board-ghost.is-copying {
    border-color: var(--brand);
}

.board-ghost.is-copying .board-drag-tip {
    background: var(--brand);
}

.board-ghost.is-copying .board-drag-tip::after {
    border-top-color: var(--brand);
}

.board-ghost.is-copying.is-tip-below .board-drag-tip::after {
    border-bottom-color: var(--brand);
    border-top-color: transparent;
}

.is-copying-board .board-card.is-dragging {
    opacity: 1;
}

.is-drop-target {
    background: #e3f3ee;
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.is-drop-denied {
    background: #fff0f0;
    outline: 2px dashed var(--danger);
    outline-offset: -2px;
}

/* ---- オプションを付ける：商品の行が落とし先 ---- */
.board-product-row {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 6px 10px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 8px 10px;
    transition: background-color .16s ease, outline-color .16s ease;
}

.board-chips {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 6px;
    grid-column: 1 / -1;
}

.board-product-row .board-place {
    grid-column: 1 / -1;
}

.board-chip {
    align-items: center;
    background: #dff4ed;
    border-radius: 999px;
    color: #084e42;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 4px;
    padding: 3px 4px 3px 10px;
}

.board-chip .board-remove {
    background: transparent;
    font-size: 14px;
    height: 32px;
    position: static;
    width: 32px;
}

/* ---- 「コースの中身」のチップ（2026-10-05） ----
   コースの行に並ぶ品。名前の横に「何分後」と「1コースあたりの数」の欄があります。丸いチップのままだと欄が入らないので、
   角を少し丸めた札にして、1つを1行に置きます（何分後の早い順に、上から下へ読めるように）。 */
.board-course-row .board-chips {
    display: grid;
    gap: 6px;
}

.board-course-chip {
    border-radius: 10px;
    display: grid;
    gap: 6px 8px;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    padding: 6px 6px 6px 10px;
}

.board-course-chip-name {
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* admin.css の label{display:grid} のままだと、欄と単位が縦に割れます。 */
.board-course-field {
    align-items: center;
    color: #084e42;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 4px;
    white-space: nowrap;
}

.board-course-field input {
    font-size: 14px;
    padding: 5px 6px;
    text-align: right;
    width: 62px;
}

.board-course-field input[data-course-quantity] {
    width: 50px;
}

/* ---- 「コースの中身」のアコーディオン（2026-10-05、ユーザー指示） ----
   コースの名前の行（.board-course-toggle）を押すと、中身のチップ（.board-chips）が開閉します。畳んだあいだは
   「N品・品名…」を1行で出します（品名は入りきらないぶんを … で切ります）。隣の行が開いても、畳んだ行は伸ばしません。 */
.board-course-row {
    align-self: start;
}

.board-course-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--ink);
    display: grid;
    gap: 2px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    min-height: 44px;
    padding: 2px 4px;
    text-align: left;
    width: 100%;
}

.board-course-toggle::after {
    color: var(--muted);
    content: "▾";
    font-size: 13px;
    grid-column: 2;
    grid-row: 1 / span 2;
}

.board-course-toggle[aria-expanded="true"]::after {
    content: "▴";
}

.board-course-meta {
    align-items: baseline;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    grid-column: 1;
    min-width: 0;
}

.board-course-count {
    color: var(--brand-dark);
    flex: none;
}

.board-course-names {
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 開いているあいだは、下にチップが並ぶので品名の行は出しません。 */
.board-course-row.is-open .board-course-names {
    display: none;
}

.board-course-all {
    font-size: 12px;
    margin-left: auto;
    padding: 6px 10px;
}

/* 課金制限中も、開いて中身を見ることは止めません（編集の欄とボタンは止まったまま）。 */
.billing-restricted #tab-catalog .board-course-toggle {
    opacity: 1;
    pointer-events: auto;
}

/* 幅いっぱいに広げたので、商品の行を1列のままにすると1行が横に長くなりすぎます。入るだけ横にも並べます。 */
@media (min-width: 761px) {
    .board-product-rows {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }
}

/* 課金制限中も「見る」ことは止めません。編集（つかむ・入れる・外す）は admin.css の
   .billing-restricted #tab-catalog :is(input,select,textarea,button) と、admin-boards.js の
   startPointerDrag() の入口で止まります。 */
.billing-restricted .board-card {
    cursor: default;
}

@media (max-width: 760px) {
    /* 縦に積みます。操作の主役は「⠿ で選ぶ →『ここに入れる』」です。 */
    .board-frame,
    .board-frame.is-reversed {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .board-frame.is-reversed .board-source {
        order: 0;
    }

    .board-source-cards,
    .board-product-rows {
        max-height: 40vh;
    }

    .board-columns {
        grid-auto-columns: min(264px, 82%);
        scroll-snap-type: x proximity;
    }

    .board-column {
        max-height: 48vh;
        scroll-snap-align: start;
    }

    /* オプションは数が少ないので、上に横並びの帯で出します（下の商品を広く使うため）。 */
    .board-option-source .board-source-cards {
        grid-auto-columns: minmax(170px, 62%);
        grid-auto-flow: column;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .board-card,
    .board-source,
    .board-products,
    .board-column,
    .board-product-row {
        transition: none;
    }
}

/* ---- 「注文画面に出す」のカテゴリーのカード（2026-09-21） ----
   カテゴリーには写真が無いので、つかむボタンと名前の2列です。列の中のカードは、押すと商品の一覧が開きます。 */
.board-category-card {
    grid-template-columns: 30px minmax(0, 1fr);
}

.board-expand {
    font-size: 12px;
    grid-column: 1 / -1;
    justify-self: start;
    /* 右上の × のぶん空けてある余白（.board-placed-card の padding-right）へ、はみ出させません。 */
    padding: 6px 10px;
}

.board-expand::after {
    content: " ▾";
}

.board-expand[aria-expanded="true"]::after {
    content: " ▴";
}

.board-members {
    border-top: 1px dashed var(--line);
    cursor: default;
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    /* カードの右の余白（× のぶん）まで使います。商品名と価格の幅が足りなくなるためです。 */
    margin-right: -28px;
    padding-top: 8px;
}

.board-member {
    align-items: baseline;
    display: grid;
    gap: 2px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.board-member-name {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.board-member-name .board-mark {
    margin-left: 4px;
}

.board-member.is-denied .board-member-name {
    color: var(--muted);
}

.board-member-note {
    color: var(--warning);
    font-size: 11px;
    grid-column: 1 / -1;
    line-height: 1.5;
}

.board-member .board-price {
    border-top: 0;
    padding-top: 0;
}

/* ---- もとに戻す（画面右下に固定。2026-09-21、ユーザー指示） ----
   ★商品タブの5画面にだけ出します（admin.js の renderLinkUndo() が hidden を付け外し）。
   ★トースト（.toast）と同じ場所なので、出ているあいだはトーストを上へずらします（body.has-link-undo）。
   ★z-index は左メニュー（15）より上、ヘッダー（20）より下です。 */
.link-undo {
    align-items: center;
    background: var(--ink);
    border-radius: 999px;
    bottom: max(20px, env(safe-area-inset-bottom));
    box-shadow: 0 12px 28px #0004;
    color: #fff;
    display: inline-flex;
    gap: 8px;
    min-height: 48px;
    padding: 12px 20px;
    position: fixed;
    right: 20px;
    z-index: 18;
}

.link-undo svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 18px;
}

.link-undo:disabled {
    background: #8a9693;
    box-shadow: none;
    opacity: 1;
}

/* ボタンに書いておくショートカット（2026-09-21、ユーザー指示）。読み上げは aria-keyshortcuts が受け持ちます。 */
.link-undo-key {
    border: 1px solid #fff8;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 6px;
}

body.has-link-undo .toast {
    bottom: 84px;
}

/* ボタンが、ボードの下の端のカードや「下書き保存」に重ならないよう、商品タブの下に余白を足します。 */
body.has-link-undo #tab-catalog {
    padding-bottom: 72px;
}

/* 「コースの中身」の右の商品：チェックを入れて複数まとめて選ぶ（2026-10-05、ユーザー指示）。 */
.board-source-card:has(.board-pick) {
    grid-template-columns: 30px 30px 40px minmax(0, 1fr);
}

.board-pick {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.board-pick input {
    cursor: pointer;
    height: 20px;
    margin: 0;
    width: 20px;
}

.board-source-card.is-picked {
    background: #eff9f6;
    border-color: #2f8f7a;
}

/* ---- 「コースの中身」のコースを増やす入口（2026-10-05） ----
   新しく作る／いまある商品をコースにする。コースの列の見出しのすぐ下に、横に2つ（狭い画面では縦）並べます。 */
.board-course-tools {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    padding: 10px 12px;
}

.board-course-tool {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.board-course-tool-label {
    color: #43544f;
    font-size: 12px;
    font-weight: 800;
}

.board-course-tool-row {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.board-course-tool-row input,
.board-course-tool-row select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.board-course-tool-row button {
    flex: none;
    white-space: nowrap;
}

.board-course-unset {
    font-size: 12px;
    grid-column: 1 / -1;
    justify-self: end;
    min-height: 36px;
}

/* スマホの「コースの中身」（2026-10-15）。
   ・品の札は、1段目に品名と ×、2段目に「何分後」「×数」を置きます。1段に4つ並べると、品名の列が
     320pxで0px（札が枠からあふれる）、375〜430pxでも1行2〜3文字になっていました。
   ・数の欄は16pxにします（16px未満だと iPhone がタップで画面を拡大します）。
   ・「新しいコースを作る」は、狭い幅（400px以下）では欄とボタンを2段にします。例文と「商品を選ぶ」が切れていました。 */
@media (max-width: 560px) {
    .board-course-chip {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }

    .board-course-chip-name {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    .board-course-chip .board-remove {
        grid-column: 4;
        grid-row: 1;
    }

    .board-course-chip .board-course-field {
        grid-row: 2;
    }
}

@media (max-width: 760px) {
    .board-course-field input {
        font-size: 16px;
    }
}

@media (max-width: 400px) {
    .board-course-tool-row {
        flex-wrap: wrap;
    }

    .board-course-tool-row input,
    .board-course-tool-row select {
        flex-basis: 100%;
    }

    .board-course-tool-row button {
        flex: 1 1 100%;
    }
}