/* クックポップのページだけの見た目。サイト共通の文書ページ（/style.css の .doc-top・.card）に、アプリと同じギンガムのふきん（たまご色）と丸い文字を重ねる */
.cookpop{
  --bg:#FFF8EC;--panel:#ffffff;--ink:#4A2E1C;--sub:#7A5A44;--line:#F0DFC4;
  --red:#E8573A;--link:#B83C24;--btn:#E8573A;--btn-edge:#B83C24;--btn-ink:#ffffff;--blue:#3E8FC4;
  --cloth-rgb:255,196,61;
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif}
@media (prefers-color-scheme:dark){
  .cookpop{--bg:#2A1D14;--panel:#3A2A1E;--ink:#FFF1DC;--sub:#C9B4A3;--line:#4E3A2B;--link:#FFB59E;--blue:#8CC8F0}
}
:root[data-theme="dark"] .cookpop{--bg:#2A1D14;--panel:#3A2A1E;--ink:#FFF1DC;--sub:#C9B4A3;--line:#4E3A2B;--link:#FFB59E;--blue:#8CC8F0}

/* 上の帯：アプリの地と同じギンガム（28px の格子） */
.cookpop .doc-top{color:var(--ink);background-color:#FFF8EC;
  background-image:linear-gradient(90deg,rgba(var(--cloth-rgb),.38) 50%,transparent 50%),linear-gradient(rgba(var(--cloth-rgb),.38) 50%,transparent 50%);
  background-size:28px 28px;padding-bottom:36px}
.cookpop .doc-home{color:#7A5A44;font-weight:700}
.cookpop .doc-title img{box-shadow:0 5px 0 rgba(74,46,28,.18)}
.cookpop .doc-title h1{font-weight:900;color:#4A2E1C}
.cookpop .doc-title h1 small{font-family:inherit;color:#7A5A44}
/* 見出しは紙に貼ったテープ風（少し傾けるのはテープだけ） */
.cookpop .doc-title h1{display:inline-block;background:#fff;padding:6px 14px 8px;border-radius:3px;box-shadow:0 2px 0 rgba(74,46,28,.12)}
.cookpop .card{border:0;border-radius:6px;box-shadow:0 3px 0 var(--line)}
.cookpop .card h2,.cookpop .card h3{font-family:inherit;font-weight:900}
.cookpop .card h2{border-left-width:6px}
.cookpop .doc-foot .btn{font-family:inherit}
.cookpop ol.steps{padding-left:1.4em;margin:0 0 8px}
.cookpop ol.steps li{margin-bottom:6px}