/* アプリの画面の再現。部品名・数値は app/lib/widgets と app/lib/screens に合わせる。
   画面は 375×812 の論理サイズで組み、端末の大きさに合わせて zoom で縮める。 */

/* ---------- 端末の枠(LPだけ) ---------- */
.device {
  --device-w: 300px;
  position: relative; flex: none;
  width: var(--device-w);
  aspect-ratio: 375 / 812;
  padding: var(--sp-sm);
  border-radius: var(--r-lp-device);
  background: var(--c-text-main);
  box-shadow: var(--shadow-lp-device);
}
.device-screen {
  position: relative; overflow: hidden;
  width: 100%; height: 100%;
  border-radius: calc(var(--r-lp-device) - var(--sp-sm));
  background: var(--c-background);
}
/* 中身は 375×812 で組み、JS が --z(縮小率)を入れる */
.app {
  position: absolute; top: 0; left: 0;
  width: 375px; height: 812px;
  zoom: var(--z, .78);
  overflow: hidden;
  background: var(--c-background);
  color: var(--c-text-main);
  font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-user-select: none; user-select: none;
}
.app input, .app textarea { -webkit-user-select: text; user-select: text; }
/* ステータスバー(時刻とカメラの島) */
.app-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: var(--size-huge);
  display: flex; align-items: center; padding: 0 var(--sp-xxl);
  font-size: var(--fs-title); font-weight: var(--fw-bold); pointer-events: none;
}
.app-status::after {
  content: ""; position: absolute; top: var(--sp-md); left: 50%;
  width: calc(var(--size-huge) * 2); height: var(--size-small);
  transform: translateX(-50%); border-radius: var(--r-pill); background: var(--c-text-main);
}
.app-body { position: absolute; inset: var(--size-huge) 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.app-body::-webkit-scrollbar { display: none; }

/* ---------- アプリバー ---------- */
.rc-appbar { position: relative; height: var(--size-xlarge); display: flex; align-items: center; justify-content: center; }
.rc-appbar h3 { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.rc-appbar .lead { position: absolute; left: calc(var(--sp-page) - (var(--size-medium) - var(--icon-large)) / 2); }
.rc-appbar .lead-text { position: absolute; left: calc(var(--sp-page) - var(--sp-md)); }
.rc-appbar .trail-text { position: absolute; right: calc(var(--sp-page) - var(--sp-md)); }

/* ---------- ボタン ---------- */
.rc-tap { border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.rc-icon-button { width: var(--size-medium); height: var(--size-medium); display: grid; place-items: center; color: var(--c-accent); }
.rc-primary {
  display: flex; align-items: center; justify-content: center; width: 100%; height: var(--size-xlarge);
  border-radius: var(--r-pill); background: var(--c-accent); box-shadow: var(--shadow-card);
  color: var(--c-on-fill); font-size: var(--fs-body); font-weight: var(--fw-bold);
}
.rc-primary[disabled] { background: var(--c-border); color: var(--c-text-faint); box-shadow: none; cursor: default; }
.rc-text-button {
  display: inline-flex; align-items: center; gap: var(--sp-sm); height: var(--control); padding: 0 var(--sp-md);
  color: var(--c-accent); font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap;
}
.rc-text-button.sub { color: var(--c-text-sub); }
.rc-pill-button {
  display: inline-flex; align-items: center; gap: var(--sp-sm); height: var(--size-large); padding: 0 var(--sp-lg);
  border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--shadow-card);
  color: var(--c-accent); font-size: var(--fs-body); font-weight: var(--fw-bold);
}
.rc-pill-button.wide { display: flex; width: 100%; }
.rc-fab {
  position: absolute; right: var(--sp-lg); bottom: var(--sp-lg); z-index: 3;
  width: var(--size-xlarge); height: var(--size-xlarge); border-radius: 50%;
  display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-fill); box-shadow: var(--shadow-card);
}
.rc-circle { width: var(--size-medium); height: var(--size-medium); border-radius: 50%; display: grid; place-items: center; background: var(--c-image-badge); color: var(--c-accent); }

/* ---------- 入力(RCFieldBox / 検索バー) ---------- */
.rc-field {
  display: flex; align-items: center; min-height: var(--size-xlarge); padding: 0 var(--sp-md);
  border-radius: var(--r-sm); background: var(--c-surface); box-shadow: var(--shadow-card);
}
.rc-field.multi { align-items: flex-start; padding: var(--sp-md); }
.rc-input {
  flex: 1; min-width: 0; width: 100%; border: 0; padding: 0; margin: 0; outline: none; background: none;
  color: var(--c-text-main); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body);
  resize: none;
}
.rc-input::placeholder { color: var(--c-text-faint); }
.rc-clear { padding: var(--sp-sm); color: var(--c-text-sub); }
.rc-search {
  flex: 1; display: flex; align-items: center; gap: var(--sp-sm); height: var(--size-medium); padding: var(--sp-xs) var(--sp-lg);
  border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--shadow-card); color: var(--c-accent);
}
.rc-search .rc-clear { margin-right: calc(-1 * var(--sp-sm)); }
.rc-label { margin: 0 0 var(--sp-sm); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.rc-section-title { margin: 0 0 var(--sp-sm); font-size: var(--fs-title); font-weight: var(--fw-bold); }
.rc-note { display: flex; margin: 0 0 var(--sp-xs); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-sub); }
.rc-note::before { content: "※ "; white-space: pre; }
.rc-banner {
  display: flex; align-items: center; padding: var(--sp-md); border-radius: var(--r-sm);
  background: var(--c-danger-bg); color: var(--c-danger); font-size: var(--fs-small);
}
.rc-banner p { flex: 1; margin: 0; }
.rc-banner .rc-icon-button { color: var(--c-danger); }

/* ---------- 一覧 ---------- */
.list-head { padding: var(--sp-lg) 0 var(--sp-sm) var(--sp-page); }
.list-head .row { display: flex; align-items: center; gap: var(--sp-md); padding-right: calc(var(--sp-page) - (var(--size-medium) - var(--icon-large)) / 2); }
.chips { display: flex; gap: var(--sp-sm); height: var(--size-small); margin: var(--sp-md) 0; }
.chips-scroll { display: flex; gap: var(--sp-sm); overflow-x: auto; padding-right: var(--sp-page); scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
/* フィルタのタグ: 枠は 2px の線を上に重ねるので、大きさは変わらない */
.chip {
  --tc: var(--c-accent);
  position: relative; flex: none; display: grid; place-items: center;
  height: var(--size-small); padding: 0 var(--sp-md); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--tc);
  font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap;
}
.chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--stroke) solid var(--tc); pointer-events: none; }
.chip.on { background: var(--tc); color: var(--c-on-fill); }
.chip.round { width: var(--size-small); padding: 0; border-radius: 50%; --tc: var(--c-heart); }
.summary { font-size: var(--fs-small); color: var(--c-text-sub); flex: 1; }
.list-items { padding: 0 var(--sp-page) var(--sp-fab); }
.recipe-row { display: flex; align-items: center; width: 100%; margin-bottom: var(--sp-md); padding: 0; overflow: hidden; text-align: left; }
.recipe-row > img { width: var(--img-row-thumb); height: var(--img-row-thumb); object-fit: cover; flex: none; }
.recipe-row .body { flex: 1; min-width: 0; margin-left: var(--sp-md); }
.recipe-row .name { font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { display: flex; align-items: center; margin-top: var(--sp-xs); color: var(--c-text-sub); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.meta .rc-icon { margin: 0 var(--sp-xs) 0 var(--sp-sm); }
.tag-pill { --tc: var(--c-accent); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-pill); line-height: 1; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.heart-btn { padding: var(--sp-sm); margin: 0 var(--sp-xs); color: var(--c-text-faint); }
.heart-btn.on { color: var(--c-heart); }
.grid-items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); padding: 0 var(--sp-page) var(--sp-fab); }
.grid-cell { padding: 0; overflow: hidden; text-align: left; }
.grid-cell .photo { position: relative; aspect-ratio: 1; }
.grid-cell .photo img { width: 100%; height: 100%; object-fit: cover; }
.grid-cell .time { position: absolute; top: var(--sp-sm); left: var(--sp-sm); display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-pill); background: var(--c-image-badge); color: var(--c-accent); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1; }
.grid-cell .heart-btn { position: absolute; top: 0; right: 0; margin: 0; }
.grid-cell .heart-btn .badge { width: var(--size-small); height: var(--size-small); border-radius: 50%; display: grid; place-items: center; background: var(--c-image-badge); }
.grid-cell .name { padding: var(--sp-sm) var(--sp-md); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { padding: var(--sp-empty) 0; display: grid; justify-items: center; gap: var(--sp-sm); color: var(--c-text-faint); }

/* 並べ替えのメニュー */
.popup { position: absolute; z-index: 6; min-width: calc(var(--size-huge) * 3); padding: var(--sp-sm) 0; border-radius: var(--r-sm); background: var(--c-surface); box-shadow: var(--shadow-lp-device); }
.popup button { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); width: 100%; height: var(--size-large); padding: 0 var(--sp-lg); color: var(--c-text-main); }

/* ---------- 詳細 ---------- */
.detail-hero { position: relative; aspect-ratio: 1; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero .bar { position: absolute; top: var(--sp-xl); left: var(--sp-page); right: var(--sp-page); display: flex; justify-content: space-between; }
.detail-pad { padding: 0 var(--sp-page); }
.detail-title { display: flex; align-items: flex-start; gap: var(--sp-sm); padding-top: var(--sp-xl); }
.detail-title h3 { flex: 1; margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-bold); line-height: var(--lh-body); }
.detail-title .heart-btn { width: var(--size-small); height: var(--size-small); padding: 0; margin: 0; display: grid; place-items: center; }
.detail-meta { display: flex; gap: var(--sp-sm); margin: var(--sp-sm) 0 var(--sp-lg); }
.time-pill { display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text-sub); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-sm); }
.sec-head .rc-section-title { margin: 0; }
.rc-stepper { display: inline-flex; align-items: center; padding: var(--sp-sm); border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--shadow-card); }
.rc-stepper .label { padding: 0 var(--sp-md); font-weight: var(--fw-bold); }
.rc-stepper .step { position: relative; width: var(--size-small); height: var(--size-small); border-radius: 50%; display: grid; place-items: center; background: var(--c-background); color: var(--c-accent); font-size: var(--fs-title); font-weight: var(--fw-bold); }
/* 見た目は32、押せる範囲は44 */
.rc-stepper .step::before { content: ""; position: absolute; inset: calc((var(--size-small) - var(--control)) / 2); }
.rc-card.ing { margin-bottom: var(--sp-lg); padding: 0 var(--sp-lg); }
.ing li { display: flex; justify-content: space-between; padding: var(--sp-md) 0; border-bottom: var(--line) solid var(--c-border); }
.ing li:last-child { border-bottom: 0; }
.ing .amt { transition: color var(--t-slow); }
.ing .amt.flash { color: var(--c-accent); }
.steps .rc-card { display: flex; gap: var(--sp-md); margin-bottom: var(--sp-md); }
.step-no { flex: none; width: var(--size-tiny); height: var(--size-tiny); border-radius: 50%; display: grid; place-items: center; background: var(--c-background); color: var(--c-accent); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1; }
.source { margin: var(--sp-sm) 0 var(--sp-xxxl); font-size: var(--fs-small); }
.source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.plain, ol.plain { list-style: none; margin: 0; padding: 0; }

/* ---------- URLから追加 / 保存 ---------- */
.page { padding: var(--sp-xl) var(--sp-page); }
.page .rc-text-button { align-self: flex-start; }
.stack { display: flex; flex-direction: column; }
.gap-xxl { height: var(--sp-xxl); }
.gap-xl { height: var(--sp-xl); }
.gap-lg { height: var(--sp-lg); }
.gap-sm { height: var(--sp-sm); }
.edit-slot { height: var(--img-edit-slot); border-radius: var(--r-md); overflow: hidden; }
.edit-slot img { width: 100%; height: 100%; object-fit: cover; }
.dot { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--tc, var(--c-accent)); flex: none; margin-right: var(--sp-md); }
.edit-row { display: flex; align-items: center; margin-bottom: var(--sp-sm); padding: 0 var(--sp-xs); }
.edit-row .fields { flex: 1; min-width: 0; display: flex; padding: var(--sp-md) 0; }
.edit-row .fields .rc-input:nth-child(1) { flex: 3; }
.edit-row .fields .rc-input + .rc-input { flex: 1; }
.edit-row .remove { padding: var(--sp-lg) var(--sp-sm); color: var(--c-danger); }
.edit-row .handle { padding: var(--sp-lg) var(--sp-sm); color: var(--c-text-faint); }

/* ---------- 重ねるもの ---------- */
.scrim { position: absolute; inset: 0; z-index: 7; background: var(--c-scrim); animation: fade var(--t-slow) ease-out; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: var(--sp-sm) var(--sp-page) var(--sp-xxl);
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--c-surface);
  animation: rise var(--t-slow) ease-out;
}
.sheet .handle-bar { width: var(--size-medium); height: var(--sp-xs); margin: 0 auto var(--sp-lg); border-radius: var(--r-pill); background: var(--c-border); }
.rc-row { display: flex; align-items: center; gap: var(--sp-md); width: 100%; min-height: var(--size-xlarge); text-align: left; }
.rc-row .t { flex: 1; }
.rc-row.divider { border-bottom: var(--line) solid var(--c-border); }
.rc-row.danger { color: var(--c-danger); }
.icon-bubble { width: var(--size-medium); height: var(--size-medium); border-radius: var(--r-sm); display: grid; place-items: center; background: var(--c-background); color: var(--c-accent); }
.center-layer { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; }
.loading-card { display: flex; align-items: center; gap: var(--sp-md); }
.spinner { width: var(--icon-xlarge); height: var(--icon-xlarge); border-radius: 50%; border: calc(var(--stroke) * 2) solid var(--c-border); border-top-color: var(--c-accent); animation: spin var(--t-spin) linear infinite; }
.done-card { display: grid; justify-items: center; gap: var(--sp-lg); padding: var(--sp-xl) var(--sp-xxl); border-radius: var(--r-lg); background: var(--c-surface); font-size: var(--fs-title); font-weight: var(--fw-bold); animation: fade var(--t-dialog) ease-out; }
.done-text { animation: rise-in var(--t-rise) ease-out both; }
.done-mark { width: var(--size-huge); height: var(--size-huge); border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-fill); animation: pop var(--t-pop) var(--ease-pop); }
.toast {
  position: absolute; left: var(--sp-page); right: var(--sp-page); bottom: var(--sp-page); z-index: 9;
  padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-md); background: var(--c-text-main); color: var(--c-on-fill);
  font-weight: var(--fw-bold); animation: fade var(--t-slow) ease-out;
}
.banner-layer { position: absolute; top: calc(var(--size-huge) + var(--size-xlarge) + var(--sp-lg)); left: var(--sp-page); right: var(--sp-page); z-index: 6; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes pop { from { transform: scale(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--sp-sm)); } }

.app :focus-visible { outline: var(--stroke) solid var(--c-accent); outline-offset: var(--stroke); }