:root{
  --bg:#f2f7ef;
  --surface:#fffdf8;
  --surface-2:#fffdf8;
  --primary:#4d6b3c;
  --primary-dark:#39512c;
  --text:#243024;
  --muted:#667266;
  --border:rgba(36,48,36,0.10);
  --shadow:0 10px 30px rgba(0,0,0,0.08);
  --radius:18px;
  --radius-lg:28px;
  --max:1240px;
}

*{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#f2f7ef 0%, #e6f2e2 100%);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
  height:auto;
}

a{
  text-decoration:none;
  color:inherit;
}

/* ---------- HEADER ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(242,247,239,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.site-nav-wrap{
  width:min(calc(100% - 32px), var(--max));
  margin:0 auto;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:10px 0;
}

.site-nav-logo{
  flex:0 0 auto;
}

.site-nav-logo a{
  font-size:1.25rem;
  font-weight:800;
  color:var(--primary-dark);
  white-space:nowrap;
}

.site-nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}

.site-nav-links a{
  color:var(--muted);
  font-weight:700;
  padding:8px 10px;
  border-radius:999px;
  transition:all .2s ease;
  white-space:nowrap;
}

.site-nav-links a:hover{
  background:#edf3e7;
  color:var(--primary-dark);
}

/* ---------- LAYOUT ---------- */

.page-shell{
  width:min(calc(100% - 32px), var(--max));
  margin:0 auto;
  padding:24px 0 50px;
}

.layout-2{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

/* ---------- HERO ---------- */

.hero{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:38px;
  box-shadow:var(--shadow);
  margin:24px 0;
}

.hero h1{
  margin:0 0 14px;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.15;
}

.hero p{
  margin:0;
  color:var(--muted);
}

/* ---------- SIDEBAR ---------- */

.sidebar-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  position:sticky;
  top:98px;
  min-width:0;
}

.sidebar-box h3{
  margin:0 0 16px;
  line-height:1.3;
}

.sidebar-scroll{
  max-height:72vh;
  overflow:auto;
}

.sidebar-scroll a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  word-break:break-word;
}

.sidebar-scroll a:hover{
  background:#edf3e7;
  color:var(--primary-dark);
}

/* ---------- CONTENT ---------- */

.content-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  min-width:0;
}

.page-title{
  margin:0 0 12px;
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.2;
}

.page-subtitle{
  margin:0 0 20px;
  color:var(--muted);
}

/* ---------- DETAIL ---------- */

.detail-split{
  display:grid;
  grid-template-columns:420px minmax(0,1fr);
  gap:24px;
  margin-top:20px;
  align-items:start;
}

.detail-image{
  border-radius:20px;
  overflow:hidden;
  background:var(--surface);
  min-width:0;
}

.detail-image img{
  width:100%;
  border-radius:10px;
  background:#f6fbf3;
  padding:10px;
  border:1px solid #dbe8d2;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.detail-copy{
  line-height:1.7;
  font-size:1.05rem;
  min-width:0;
  word-break:break-word;
}

/* ---------- BUTTONS ---------- */

.action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 16px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  transition:all .2s ease;
  text-align:center;
}

.action-btn:hover{
  background:var(--primary-dark);
}

.action-btn.secondary{
  background:#eef3e7;
  color:var(--primary-dark);
}

.two-col-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:24px;
}

/* ---------- CARDS ---------- */

.card,
.list-card{
  background:#ffffff;
  border:1px solid #dfe8d8;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,0.05);
  transition:all 0.25s ease;
  padding:18px;
  min-width:0;
}

.card:hover,
.list-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,0.08);
  border-color:#cfe2c6;
}

.card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.card h3{
  margin:0 0 10px;
  line-height:1.3;
}

.card p{
  margin:0 0 18px;
  color:var(--muted);
}

.card .action-btn{
  margin-top:auto;
}

.card-desc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.5;
  margin-bottom:12px;
}

.list-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.list-card h3{
  margin:0 0 10px;
  line-height:1.3;
}

.list-card p{
  margin:0 0 12px;
  color:var(--muted);
}

.list-card .readmore{
  margin-top:auto;
  color:var(--primary-dark);
  font-weight:700;
}

/* ---------- GRID ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:20px;
  align-items:stretch;
}

.list-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

/* ---------- TABLES / LISTS ---------- */

.recipe-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.recipe-table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
}

.recipe-table td,
.recipe-table th{
  vertical-align:top;
}

/* ---------- GALLERY ---------- */

.thumb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
  margin-top:28px;
}

.thumb-grid img{
  width:100%;
  border-radius:8px;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

/* ---------- NOTICE ---------- */

.notice-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-top:20px;
}

/* ---------- PAGINATION / ALPHABET ---------- */

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:30px;
  flex-wrap:wrap;
}

.pagination a{
  background:#eef3e7;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  color:#39512c;
  border:1px solid #dbe8d2;
  transition:all .2s ease;
}

.pagination a:hover{
  background:#e1eed9;
  transform:translateY(-1px);
}

.pagination span{
  background:#ffffff;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #dbe8d2;
  font-weight:700;
  color:#39512c;
}

.alphabet{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:24px;
}

.alphabet a{
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbe8d2;
  color:#667266;
  font-weight:700;
  transition:all .2s ease;
}

.alphabet a:hover{
  background:#eef3e7;
  color:#39512c;
}

/* ---------- FOOTER ---------- */

.footer{
  margin-top:40px;
  padding:24px 0 40px;
  text-align:center;
}

.footer-inner{
  min-width:0;
  word-break:break-word;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:1100px){

  .detail-split{
    grid-template-columns:340px minmax(0,1fr);
  }

}

@media (max-width:980px){

  .layout-2{
    grid-template-columns:1fr;
  }

  .sidebar-box{
    position:static;
    top:auto;
  }

  .detail-split{
    grid-template-columns:1fr;
  }

  .two-col-links{
    grid-template-columns:1fr;
  }

  .list-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .recipe-table{
    min-width:620px;
  }

}

@media (max-width:760px){

  .site-nav-wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:12px 0;
  }

  .site-nav-links{
    width:100%;
    justify-content:flex-start;
    gap:10px;
  }

  .site-nav-links a{
    padding:8px 10px;
  }

  .page-shell{
    width:min(calc(100% - 20px), var(--max));
    padding:16px 0 36px;
  }

  .hero{
    padding:26px 20px;
    border-radius:20px;
  }

  .content-box,
  .sidebar-box,
  .notice-box{
    padding:18px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .list-grid{
    grid-template-columns:1fr;
  }

  .thumb-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pagination{
    gap:10px;
  }

  .pagination a,
  .pagination span{
    width:100%;
    text-align:center;
  }

}

@media (max-width:520px){

  .hero h1{
    font-size:1.9rem;
  }

  .page-title{
    font-size:1.55rem;
  }

  .site-nav-logo a{
    font-size:1.1rem;
  }

  .thumb-grid{
    grid-template-columns:1fr;
  }

  .action-btn{
    min-height:46px;
    padding:10px 14px;
  }

  .card,
  .list-card{
    padding:16px;
  }

  .content-box,
  .sidebar-box,
  .notice-box{
    padding:16px;
  }

  .recipe-table{
    min-width:560px;
  }

}

.site-nav-toggle{
display:none;
width:46px;
height:46px;
padding:0;
border:1px solid var(--border);
border-radius:12px;
background:#fff;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.site-nav-toggle span{
display:block;
width:20px;
height:2px;
background:var(--primary-dark);
border-radius:2px;
}

@media (max-width:760px){

.site-nav-wrap{
position:relative;
flex-direction:row;
align-items:center;
justify-content:space-between;
}

.site-nav-toggle{
display:flex;
}

.site-nav-links{
display:none;
width:100%;
flex-direction:column;
align-items:flex-start;
gap:8px;
padding-top:12px;
}

.site-nav-links.is-open{
display:flex;
}

.site-nav-links a{
width:100%;
padding:10px 12px;
}

}