:root {
  --bg: #fbf7f0;
  --card: #ffffff;
  --line: #e2d9cc;
  --text: #24201b;
  --muted: #6b635a;
  --primary: #c8542a;
  --primary-dark: #a6421f;
  --primary-soft: #fbe9e0;
  --ok: #2e7d32;
  --danger: #b3261e;
  --radius: 16px;
  --tap: 60px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom);
}
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* 上のバー */
#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  min-height: 64px; padding: 8px 12px;
  background: var(--primary); color: #fff;
  padding-top: calc(8px + env(safe-area-inset-top));
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#tb-title { font-weight: 700; font-size: 22px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tb-status { font-size: 16px; opacity: .95; white-space: nowrap; }
.tb-btn {
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.7); color: #fff;
  border-radius: 12px; min-height: 48px; padding: 0 14px; font-size: 18px; font-weight: 700; cursor: pointer;
}

main { max-width: 760px; margin: 0 auto; padding: 16px 16px 120px; }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 10px 20px;
  border: 2px solid var(--primary); border-radius: var(--radius);
  background: #fff; color: var(--primary); font-size: 20px; font-weight: 700;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:active { background: var(--primary-dark); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger.fill { background: var(--danger); color: #fff; }
.btn.small { min-height: 44px; font-size: 17px; padding: 6px 12px; border-radius: 12px; }
.btn.ghost { border-color: var(--line); color: var(--muted); background: #fff; }
.btn.block { width: 100%; }
.btn.huge { min-height: 76px; font-size: 24px; }
.btn:disabled { opacity: .5; cursor: default; }

/* 入力 */
input[type=text], input[type=tel], input[type=search], textarea {
  width: 100%; min-height: 56px; padding: 10px 14px;
  border: 2px solid #b9ae9f; border-radius: 12px; background: #fff; font-size: 20px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus { outline: 3px solid #f2b79a; border-color: var(--primary); }
label.f { display: block; margin: 12px 0 0; }
label.f > span { display: block; font-size: 17px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.hint { font-size: 16px; color: var(--muted); margin: 6px 0 0; }

/* カード */
.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 18px; }
.card h2 { margin: 0 0 8px; font-size: 22px; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; }
.card h2 .n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 18px; flex: none; }
.card h3 { margin: 18px 0 6px; font-size: 19px; }

/* 種類えらび */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  min-height: 46px; padding: 6px 14px; border-radius: 999px; border: 2px solid #b9ae9f; background: #fff;
  font-size: 17px; font-weight: 700; cursor: pointer; color: var(--text);
}
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 材料・手順の行 */
.row { border: 2px dashed #d9cfc0; border-radius: 14px; padding: 12px; margin: 12px 0; background: #fffdf9; }
.row-head { display: flex; align-items: center; gap: 8px; }
.row-head .num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; font-size: 19px; }
.row-head .grow { flex: 1; }
.row-btns { display: flex; gap: 6px; }
.row-btns .btn { min-height: 42px; font-size: 16px; padding: 4px 10px; border-radius: 10px; }
.row label.f { margin-top: 8px; }
.row .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .row .two { grid-template-columns: 1fr; } }

.add-btn { margin-top: 10px; }

/* 写真 */
.photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.photo-item { position: relative; width: 150px; }
.photo-item img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; border: 2px solid var(--line); }
.photo-item .del { position: absolute; top: -8px; right: -8px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: var(--danger); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.photo-item .badge { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 2px 8px; border-radius: 8px; }
.step-photo img { width: 100%; max-width: 360px; height: auto; border-radius: 12px; border: 2px solid var(--line); }
.uploading { font-size: 17px; color: var(--muted); padding: 10px; }

/* 一覧 */
.search-wrap { margin: 12px 0; }
.list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 620px) { .list { grid-template-columns: 1fr 1fr; } }
.item {
  display: flex; gap: 14px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 12px; cursor: pointer; text-align: left; width: 100%;
}
.item:active { background: #fff5ee; }
.item .thumb { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex: none; background: #f1ebe2; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.item .name { font-size: 21px; font-weight: 800; line-height: 1.3; }
.item .sub { font-size: 16px; color: var(--muted); margin-top: 4px; }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; font-size: 19px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }

/* 見る画面 */
.hero img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); border: 2px solid var(--line); }
.hero-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hero-thumbs img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
.title-big { font-size: 30px; font-weight: 800; margin: 14px 0 4px; line-height: 1.3; }
.meta { color: var(--muted); font-size: 17px; }
table.ing { width: 100%; border-collapse: collapse; font-size: 19px; }
table.ing th, table.ing td { border-bottom: 1px solid var(--line); padding: 10px 6px; text-align: left; vertical-align: top; }
table.ing th { color: var(--muted); font-size: 16px; font-weight: 700; }
.brand { color: var(--primary-dark); font-size: 17px; }
.note { color: var(--muted); font-size: 16px; }
.step { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: none; }
.step .num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.step .body { flex: 1; }
.step .heat { display: inline-block; background: var(--primary-soft); color: var(--primary-dark); border-radius: 8px; padding: 2px 10px; font-size: 16px; margin-top: 4px; }
.pre { white-space: pre-wrap; word-break: break-word; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.actions .btn { flex: 1 1 200px; }

/* 下に固定のボタン */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251,247,240,.96); border-top: 2px solid var(--line);
}
.bottom-bar .inner { max-width: 760px; margin: 0 auto; display: flex; gap: 10px; }
.bottom-bar .btn { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
@media (max-width: 400px) { .bottom-bar .btn { font-size: 18px; } }

/* あいことば */
.lock { text-align: center; padding-top: 30px; }
.lock .big-icon { font-size: 64px; }
.lock input { text-align: center; font-size: 30px; letter-spacing: .2em; min-height: 70px; }
.err { color: var(--danger); font-weight: 700; margin-top: 10px; }

/* 声・確認の画面 */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: #fff; border-radius: 20px; padding: 20px; width: 100%; max-width: 520px; }
.voice-title { font-size: 24px; font-weight: 800; text-align: center; }
.voice-text { min-height: 120px; margin: 14px 0; padding: 12px; border: 2px dashed #b9ae9f; border-radius: 12px; font-size: 20px; }
.confirm-text { font-size: 21px; font-weight: 700; text-align: center; white-space: pre-wrap; }
.modal-btns { display: flex; gap: 10px; margin-top: 10px; }
.modal-btns .btn { flex: 1; }
.mic-row { display: flex; gap: 8px; align-items: flex-start; }
.mic-row textarea { flex: 1; }
.mic { flex: none; width: 60px; min-height: 60px; border-radius: 14px; border: 2px solid var(--primary); background: #fff; font-size: 26px; cursor: pointer; }
.mic.rec { background: var(--danger); border-color: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .6; } }

/* 通知 */
#toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 60; background: #24201b; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 18px; max-width: 90vw; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); }

.tip { background: #fff8e6; border: 2px solid #f1d58a; border-radius: var(--radius); padding: 12px 14px; font-size: 17px; margin: 12px 0; }
.tip b { display: block; font-size: 18px; margin-bottom: 4px; }
.tip .btn { margin-top: 8px; }

/* 印刷 */
@media print {
  #topbar, .bottom-bar, .actions, .foot-links, #toast, .no-print { display: none !important; }
  body { background: #fff; font-size: 15px; }
  main { max-width: none; padding: 0; }
  .card { border: 1px solid #999; break-inside: avoid; }
  .hero img { max-height: 300px; }
}

/* ===== 横のメニュー ===== */
#btn-menu { font-size: 22px; padding: 0 12px; }
@media (max-width: 520px) { #btn-menu .menu-word { display: none; } }
#side-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 39; }
#side {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 40;
  background: #fff; border-right: 2px solid var(--line); overflow-y: auto;
  padding: 12px 10px calc(20px + env(safe-area-inset-bottom)); padding-top: calc(12px + env(safe-area-inset-top));
  transform: translateX(-105%); transition: transform .18s ease-out; box-shadow: 4px 0 16px rgba(0,0,0,.12);
}
#side.open { transform: none; }
.side-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 22px; padding: 4px 8px 10px; }
.side-head .close { color: var(--primary); border-color: var(--primary); background: #fff; }
.side-sec { font-size: 15px; color: var(--muted); font-weight: 700; margin: 14px 10px 4px; }
.side-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 12px;
  border: none; background: none; border-radius: 12px; font-size: 18px; font-weight: 700; text-align: left; line-height: 1.3;
  cursor: pointer; color: var(--text); text-decoration: none;
}
.side-item:active { background: #f5efe6; }
.side-item.on { background: var(--primary-soft); color: var(--primary-dark); }
.side-item.new { background: var(--primary); color: #fff; justify-content: center; margin: 4px 0 6px; }
.side-item .cnt { margin-left: auto; font-size: 15px; color: var(--muted); background: #f1ebe2; border-radius: 999px; padding: 0 10px; min-width: 32px; text-align: center; }
.side-item.on .cnt { background: #fff; }
.info-text { font-size: 19px; white-space: pre-wrap; line-height: 1.7; }
.info-text b { display: block; font-size: 21px; margin-bottom: 6px; }

/* 一覧の見出し */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.list-head h2 { margin: 0; font-size: 22px; color: var(--primary-dark); }
.group-h { grid-column: 1 / -1; font-size: 18px; font-weight: 800; color: var(--muted); margin: 14px 0 -4px; padding-bottom: 4px; border-bottom: 2px solid var(--line); }

/* パソコンの広い画面では、メニューを左に出しっぱなしにする */
@media (min-width: 900px) {
  #btn-menu, #side-bg, .side-head .close { display: none !important; }
  #side { transform: none; top: 64px; width: 280px; box-shadow: none; padding-top: 12px; background: #fffdf9; z-index: 10; }
  main { margin-left: 300px; margin-right: auto; }
  .bottom-bar .inner { margin-left: 300px; }
}
@media print { #side, #btn-menu { display: none !important; } main { margin-left: 0; } }

/* ===== 横並びの見せ方（材料は左・作り方は右） ===== */
.tabs { position: sticky; top: 64px; z-index: 12; display: flex; gap: 6px; background: var(--bg); padding: 8px 0; margin: 0 0 6px; }
.tab { flex: 1; min-height: 50px; border: 2px solid #b9ae9f; background: #fff; border-radius: 12px; font-size: 18px; font-weight: 800; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tab-n { font-size: 14px; background: rgba(0,0,0,.12); border-radius: 999px; padding: 0 8px; }
.tab.on .tab-n { background: rgba(255,255,255,.3); }
.pane { display: none; }
.pane.on { display: block; }
.show-top { margin-bottom: 4px; }
.show-title .actions { margin: 10px 0 0; }
.h-sub { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.ing-n { display: inline-block; min-width: 24px; color: var(--muted); font-size: 15px; }
table.ing td.amt { white-space: nowrap; font-weight: 700; }
table.ing .th-brand, table.ing .td-brand { display: none; }
ol.steps { list-style: none; margin: 0; padding: 0; }
.step { align-items: flex-start; }
.step-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); flex: none; cursor: zoom-in; }
.hero img, [data-zoom] { cursor: zoom-in; }
.photo-modal { flex-direction: column; gap: 10px; background: rgba(0,0,0,.85); cursor: zoom-out; }
.photo-modal img { max-width: 96vw; max-height: 82vh; object-fit: contain; border-radius: 10px; }
.photo-close { color: #fff; font-size: 17px; }

/* 書く画面：手順の箱を「文＋火加減｜写真」の横並びに */
.step-edit { display: grid; grid-template-columns: 1fr; gap: 8px; }
.step-photo { margin-top: 8px; }
.step-photo .photo-item { width: 120px; }
.step-photo .photo-item img { width: 120px; height: 120px; }
@media (min-width: 640px) {
  .step-edit { grid-template-columns: 1fr 140px; align-items: start; }
  .step-photo { margin-top: 30px; }
}

/* 広い画面：タブをやめて、左＝材料・右＝作り方 を同時に見せる */
@media (min-width: 900px) {
  main { max-width: none; padding-right: 24px; }
  .tabs:not(.jumps) { display: none; }
  .pane { display: block; }
  .show-top { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 20px; align-items: start; }
  .show-top .hero:empty { display: none; }
  .show-grid { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: 18px; align-items: start; }
  .pane-ing { position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow: auto; }
  .pane-memo { grid-column: 1 / -1; }
  table.ing .th-brand, table.ing .td-brand { display: table-cell; }
  table.ing .only-narrow { display: none; }
  .hero img { max-height: 260px; }
  .edit-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 18px; align-items: start; }
  .jumps { display: none; }
  .row .two { grid-template-columns: 1fr 1fr; }
  .row label.f > span { font-size: 15px; }
  .row input[type=text] { min-height: 48px; font-size: 18px; }
}
@media (min-width: 1300px) {
  .show-grid { grid-template-columns: 4fr 8fr; }
}


/* 材料表の列幅（名前が細切れに折れないように） */
table.ing { table-layout: fixed; }
table.ing col.c-name { width: 58%; }
table.ing col.c-amt { width: 42%; }
table.ing td, table.ing th { word-break: break-word; overflow-wrap: anywhere; }
table.ing td.amt { white-space: normal; }
@media (min-width: 900px) {
  table.ing col.c-name { width: 40%; }
  table.ing col.c-amt { width: 22%; }
  table.ing col.c-brand { width: 38%; }
  .show-top.no-photo { grid-template-columns: 1fr; }
}

/* ===== 材料の写真 ===== */
.ing-cell { display: flex; gap: 8px; align-items: flex-start; }
.ing-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); flex: none; cursor: zoom-in; }
.ing-edit { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ing-photo .photo-item { width: 100px; }
.ing-photo .photo-item img { width: 100px; height: 100px; }
@media (min-width: 640px) {
  .ing-edit { grid-template-columns: 1fr 110px; align-items: start; }
  .ing-photo { margin-top: 30px; }
}

/* 閲覧画面（広い画面）: 左＝材料＋コツ・メモ、右＝作り方。固定表示はやめて重ならないように */
@media (min-width: 900px) {
  .show-grid { grid-template-rows: auto 1fr; }
  .pane-ing { position: static; max-height: none; overflow: visible; grid-column: 1; grid-row: 1; }
  .pane-memo { grid-column: 1; grid-row: 2; }
  .pane-steps { grid-column: 2; grid-row: 1 / 3; }
}

/* ===== 印刷（A4・1枚に収まるように。多いときは2枚） ===== */
#print { display: none; }
@media print {
  @page { size: A4 portrait; margin: 10mm 11mm 10mm; }
  html, body { background: #fff !important; color: #000; font-size: 10pt; padding: 0; margin: 0; }
  body > *:not(#print) { display: none !important; }
  #print { display: block !important; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; line-height: 1.4; }
  #print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-head { display: flex; gap: 6mm; align-items: flex-start; border-bottom: 0.6mm solid #c8542a; padding-bottom: 2mm; margin-bottom: 3mm; }
  .p-title-wrap { flex: 1; }
  .p-head h1 { font-size: 17pt; margin: 0 0 1mm; line-height: 1.25; }
  .p-meta { font-size: 9pt; color: #444; }
  .p-hero { width: 40mm; height: 28mm; object-fit: cover; border-radius: 2mm; flex: none; }
  .p-body { display: grid; grid-template-columns: 66mm 1fr; gap: 5mm; align-items: start; }
  #print h2 { font-size: 11pt; color: #a6421f; margin: 0 0 1.5mm; border-left: 1.2mm solid #c8542a; padding-left: 2mm; line-height: 1.3; }
  #print h2.mt { margin-top: 3mm; }
  #print h2 small { font-size: 8pt; color: #666; font-weight: 400; margin-left: 1mm; }
  .p-ing table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .p-ing td { border-bottom: 0.2mm solid #ccc; padding: 0.8mm 1mm; vertical-align: top; }
  .p-ing td.n { width: 5mm; color: #777; font-size: 8pt; }
  .p-ing td.a { text-align: right; white-space: nowrap; font-weight: 700; width: 17mm; }
  .p-ing .b { color: #a6421f; font-size: 7.5pt; }
  .p-ing .nt { color: #555; font-size: 7.5pt; }
  .p-steps ol { list-style: none; margin: 0; padding: 0; }
  .p-steps li { display: flex; gap: 2mm; padding: 1.5mm 0; border-bottom: 0.2mm solid #ddd; break-inside: avoid; font-size: 9.5pt; }
  .p-steps .n { flex: none; width: 6mm; height: 6mm; border-radius: 50%; background: #c8542a; color: #fff; font-weight: 700; font-size: 9pt; display: flex; align-items: center; justify-content: center; }
  .p-steps .t { flex: 1; }
  .p-steps .h { font-size: 8pt; color: #a6421f; margin-top: 0.5mm; }
  .p-steps img { width: 20mm; height: 20mm; object-fit: cover; border-radius: 1.5mm; flex: none; }
  .p-foot { margin-top: 3mm; display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
  .p-box { border: 0.25mm solid #bbb; border-radius: 2mm; padding: 2mm 3mm; font-size: 9pt; break-inside: avoid; }
  .p-box:only-child { grid-column: 1 / -1; }
  .p-date { font-size: 8pt; color: #777; text-align: right; margin-top: 2mm; }
  .p-pre { white-space: pre-wrap; word-break: break-word; }
}
@media print {
  /* 少し詰めて、ふつうの量なら1枚に収まるように */
  .p-head { margin-bottom: 2mm; }
  .p-hero { width: 34mm; height: 24mm; }
  .p-body { grid-template-columns: 70mm 1fr; gap: 4mm; }
  .p-ing table { font-size: 8.5pt; }
  .p-ing td { padding: 0.5mm 1mm; }
  .p-ing .b, .p-ing .nt { font-size: 7pt; line-height: 1.3; }
  .p-steps li { font-size: 9pt; padding: 1.2mm 0; }
  .p-steps img { width: 18mm; height: 18mm; }
  .p-foot { margin-top: 2mm; gap: 3mm; }
  .p-box { font-size: 8.5pt; padding: 1.5mm 2.5mm; }
}

/* 材料表: メーカー列は十分に広い画面(1200px以上)だけ別列にする。それ未満は名前の下に */
@media (min-width: 900px) and (max-width: 1199px) {
  table.ing .th-brand, table.ing .td-brand { display: none; }
  table.ing .only-narrow { display: block; }
  table.ing col.c-name { width: 62%; }
  table.ing col.c-amt { width: 38%; }
}
@media (min-width: 1200px) {
  table.ing col.c-name { width: 44%; }
  table.ing col.c-amt { width: 20%; }
  table.ing col.c-brand { width: 36%; }
  .ing-thumb { width: 40px; height: 40px; }
}