:root{
  --accent-1:#ff7f50;
  --accent-2:#8bc34a;
  --accent-3:#6ad5a8;
  --accent-4:#ffd54f;
  --text:#2b3a55;
  --muted:#6b7280;
  --bg:#fffaf6;
  --card:#ffffff;
  --radius:12px;
}

/* リセットと基本 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

/* レイアウト */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

/* ヘッダー — タイトルの下にボタン群を配置 */
.header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.site-title{
  font-size:20px;
  font-weight:800;
  background: linear-gradient(90deg,var(--accent-1), var(--accent-2));
  -webkit-background-clip:text;
  color:transparent;
}

/* ボタングループ */
.header-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

/* ベースボタン */
.btn{
  border:0;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(43,58,85,0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.btn:not(.active):hover{ transform:translateY(-2px) }
.btn.large{ padding:12px 18px }

/* アクティブボタン */
.btn.active{
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transform:none;
}

/* カラーバリエーション（アクセントを利用） */
.btn.accent-1{
  background:var(--accent-1);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,127,80,0.15);
}
.btn.accent-2{
  background:var(--accent-2);
  color:#072b31;
  box-shadow:0 6px 16px rgba(106,198,213,0.12);
}
.btn.accent-3{
  background:var(--accent-3);
  color:#222;
  box-shadow:0 6px 16px rgba(255,213,79,0.12);
}
.btn.accent-4{
  background:var(--accent-4);
  color:#072a08;
  box-shadow:0 6px 16px rgba(139,195,74,0.12);
}
.btn.ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(43,58,85,0.06);
  box-shadow:none;
}

/* フォーカスの可視化（アクセシビリティ） */
.btn:focus{
  outline:3px solid rgba(11,116,222,0.12);
  outline-offset:2px;
}

/* レシピ枠 */
.recipe-wrap{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 6px 18px rgba(43,58,85,0.05);
  margin-bottom:12px;
}
#recipe-title{
  font-size:22px;
  font-weight:900;
  color:var(--accent-1);
  margin:0 0 12px 0;
}
#recipe-instructions{
  font-size:16px;
  font-weight:800;
  color:#333;
  margin:0 0 16px 0;
}

/* シェアボタン群（リンクと button 両方に適用） */
.share-row a, .share-row button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  border:0;
}

/* 個別のシェアボタン色 */
#btn-copy{ background:linear-gradient(90deg,var(--accent-2),var(--accent-3)); color:#1b2430 }
#btn-png{  background:linear-gradient(90deg,var(--accent-3),var(--accent-4)); color:#1b2430 }
#btn-x{    background:#1da1f2 }
#btn-fb{   background:#1877f2 }
#btn-line{ background:#00b900 }
#btn-mail{ background:#6c5ce7 }

/* 関連リンク */
.related{
  background:transparent;
  font-size:14px;
  color:var(--muted);
  margin-bottom:16px;
}
.related a{ color:var(--accent-2); text-decoration:none; font-weight:700 }

/* レシピリスト */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-bottom:24px;
}
.card{
  padding:12px;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff, #fffdf9);
  box-shadow:0 6px 12px rgba(43,58,85,0.04);
}
.list-title{ color:var(--accent-4); margin:0 0 6px 0; font-weight:800 }
.list-cat{ color:var(--muted); margin:0 0 8px 0; font-size:13px }
.list-instr{ color:#444; margin:0 0 10px 0; font-size:14px }
.btn-ghost{
  background:transparent;
  border:1px dashed #ddd;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}

/* トップに戻るリンク */
.back-top{ display:inline-block; margin:8px 0; color:var(--accent-2); font-weight:800; text-decoration:none }

/* カラフルな見出し（h2/h3） */
h2{ color:var(--accent-2); font-size:20px; margin:16px 0 8px 0 }
h3{ color:var(--accent-3); font-size:18px; margin:12px 0 6px 0 }

/* アクセシビリティ微調整 */
a:focus, button:focus{ outline:3px solid rgba(100,150,200,0.25); outline-offset:2px }

/* レスポンシブ: スマホ横向きで両端が画面端にくるようにする */
@media (max-width:900px) and (orientation:landscape){
  .container{ padding-left:6px; padding-right:6px; }
  .grid{ grid-template-columns:repeat(2, 1fr); }
}

/* レスポンシブ: 狭い画面ではタイトルとボタンをストレッチして縦積みに */
@media (max-width:600px){
  .header{ flex-direction:column; align-items:stretch; gap:10px; }
  .grid{ grid-template-columns:1fr; }
  .site-title{ font-size:18px; }
  #recipe-title{ font-size:20px; }
  .header-buttons{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; justify-content:center; }
}