:root{
    --accent: #d71b16; 
    --accent-dark: #a81512;
    --muted: #666;
    --bg: #fff8f6;
    --card-bg: #ffffff;
    --radius: 12px;
    --max-width: 1100px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg,var(--bg), #fff);
    color:#222;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  .container{
    width:95%;
    max-width:var(--max-width);
    margin:0 auto;
  }
  
  /* header */
  .site-header{
    padding:18px 0;
    border-bottom:1px solid #eee;
    background:#fff;
    position:sticky;
    top:0;
    z-index:10;
  }
  
  .header-inner{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
  }
  
  /* logo */
  .logo{
    font-weight:800;
    font-size:1.2rem;
    color:var(--accent-dark);
  }
  .logo span{color:var(--accent)}

  .categories{display:flex;gap:8px;flex:1;margin:0 16px}
  .categories .cat{
    background:transparent;
    border:1px solid #eee;
    padding:6px 10px;
    border-radius:999px;
    cursor:pointer;
    font-size:0.9rem;
  }
  .categories .cat.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    box-shadow:0 4px 10px rgba(215,27,22,0.12);
  }
  
  /* search */
  .search input{
    padding:8px 10px;
    border-radius:8px;
    border:1px solid #ddd;
    min-width:180px;
  }
  
  /* title */
  .page-title{
    margin:26px 0 12px;
    font-size:1.4rem;
  }
  
  /* grid */
  .menu-grid{
    display:grid;
    gap:20px;
    grid-template-columns: 1fr;
    margin-bottom:40px;
  }
  
  /* card */
  .menu-card{
    background:var(--card-bg);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 6px 18px rgba(20,20,20,0.05);
    display:flex;
    flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .menu-card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 30px rgba(20,20,20,0.08);
  }
  
  .imgwrap{
    width:100%;
    aspect-ratio: 16 / 9;
    overflow:hidden;
    background:#f6f6f6;
  }
  .imgwrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  /* body */
  .card-body{
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .item-title{
    font-size:1.05rem;
    margin:0;
  }
  .item-desc{
    margin:0;
    font-size:0.95rem;
    color:var(--muted);
  }
  
  /* foot */
  .card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
    gap:8px;
  }
  .price{
    font-weight:700;
    font-size:1.05rem;
    color:#111;
  }

  #btn{
    background:var(--accent);
    color:#fff;
    border:none;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    box-shadow:0 6px 12px rgba(215,27,22,0.12);
  }
  #btn:hover{background:var(--accent-dark)}

  /* footer */
  .site-footer{
    padding:18px 0;
    border-top:1px solid #eee;
    text-align:center;
    color:var(--muted);
    font-size:0.9rem;
  }
  
  /* larger screens */
  @media(min-width:600px){
    .menu-grid{
      grid-template-columns: repeat(2, 1fr);
    }
    .categories{max-width:500px}
  }
  
  @media(min-width:980px){
    .menu-grid{
      grid-template-columns: repeat(3, 1fr);
    }
    .header-inner{gap:24px}
    .logo{font-size:1.4rem}
    .page-title{font-size:1.6rem}
  }