@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

:root{
  --bg:#ffffff;
  --bg-alt:#fafafa;
  --ink:#1f1f1f;
  --ink-soft:#5b5b5b;
  --line:#eaeaea;
  --accent:#ff4949;
  --accent-dark:#e13232;
  --highlight:#ffea79;
  --shadow:0 2px 16px rgba(0,0,0,0.06);
  --shadow-hover:0 6px 20px rgba(0,0,0,0.1);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Nanum Gothic", "Malgun Gothic", sans-serif;
  line-height:1.7;
}

/* ---------- Cover ---------- */
.cover{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.cover .eyebrow{
  letter-spacing:.08em;
  font-size:.75rem;
  color:#fff;
  background:var(--accent);
  font-weight:800;
  margin-bottom:16px;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:9999px;
}
.cover h1{
  font-weight:800;
  letter-spacing:-1.5px;
  font-size:2.8rem;
  margin:0;
  color:var(--ink);
}
.cover p{
  color:var(--ink-soft);
  max-width:520px;
  margin:0 auto;
  font-size:1rem;
}
.cover .count{
  margin-top:28px;
  font-size:.9rem;
  font-weight:700;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:18px;
  display:inline-block;
}

/* ---------- TOC (index page) ---------- */
.toc-book{
  max-width:1100px;
  margin:0 auto;
  padding:48px 24px 20px;
}
.toc-book > h2{
  font-weight:800;
  letter-spacing:-.5px;
  font-size:1.6rem;
  color:var(--ink);
  margin:0 0 28px;
  text-align:center;
}
.toc-columns{
  column-width:260px;
  column-gap:28px;
  counter-reset:toc-counter;
}
.toc-group{
  break-inside:avoid;
  margin-bottom:26px;
}
.toc-group-label{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:800;
  margin:0 0 10px;
}
.toc-list{
  list-style:none;
  margin:0;
  padding:0;
}
.toc-list li{
  counter-increment:toc-counter;
  margin-bottom:10px;
}
.toc-list a{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px 16px;
  color:var(--ink);
  font-size:1.05rem;
  font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease;
}
.toc-list a::before{
  content:counter(toc-counter, decimal-leading-zero);
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:9999px;
  background:var(--accent);
  color:#fff;
  font-size:.8rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.toc-list a:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

/* ---------- Recipes ---------- */
section.recipe{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:36px 40px;
  margin-bottom:56px;
  scroll-margin-top:24px;
}

.recipe-header{
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:3px solid var(--ink);
  padding-bottom:14px;
  margin-bottom:22px;
}
.recipe-num{
  font-size:.85rem;
  font-weight:800;
  color:#fff;
  background:var(--accent);
  border-radius:9999px;
  padding:4px 12px;
}
.recipe-header h2{
  font-weight:800;
  letter-spacing:-.5px;
  font-size:1.7rem;
  margin:0;
  color:var(--ink);
}

.recipe-source{
  font-size:.82rem;
  color:var(--ink-soft);
  margin:-10px 0 20px;
}
.recipe-source a{
  color:var(--accent-dark);
}

.recipe h3.section-title{
  font-weight:800;
  letter-spacing:-.3px;
  font-size:1.05rem;
  color:var(--ink);
  margin:26px 0 12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.recipe h3.section-title::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--accent);
  display:inline-block;
  flex-shrink:0;
}
.recipe > h3.section-title:first-of-type{
  margin-top:0;
}

.ingredient-list{
  list-style:none;
  margin:0;
  padding:0;
}
.ingredient-list > li{
  padding:6px 0;
  border-bottom:1px dashed var(--line);
  font-size:.95rem;
}
.ingredient-list > li:last-child{border-bottom:none;}
.ingredient-list .group-label{
  color:var(--accent-dark);
  font-weight:800;
  margin-right:6px;
}

.sub-ingredient{
  margin:14px 0 0;
}
.sub-ingredient .sub-title{
  font-weight:800;
  color:var(--ink);
  font-size:.92rem;
  margin-bottom:6px;
  display:block;
}

table.ratio-table{
  border-collapse:collapse;
  width:100%;
  margin:8px 0 4px;
  font-size:.92rem;
}
table.ratio-table th, table.ratio-table td{
  border:1px solid var(--line);
  padding:8px 12px;
  text-align:left;
}
table.ratio-table th{
  background:var(--bg-alt);
  color:var(--accent-dark);
  font-weight:800;
}

.steps ol{
  margin:0;
  padding-left:0;
  list-style:none;
  counter-reset:step-counter;
}
.steps > ol > li{
  counter-increment:step-counter;
  position:relative;
  padding:0 0 18px 42px;
  margin-bottom:6px;
}
.steps > ol > li::before{
  content:counter(step-counter);
  position:absolute;
  left:0;
  top:0;
  width:28px;
  height:28px;
  border-radius:9999px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps > ol > li:last-child{padding-bottom:0;}

.step-title{
  font-weight:800;
  margin:0 0 4px;
  font-size:.98rem;
}
.step-time{
  color:var(--accent-dark);
  font-weight:700;
  font-size:.85rem;
  margin-left:6px;
}
.steps p{
  margin:0 0 8px;
  font-size:.95rem;
}
.steps ul{
  margin:6px 0;
  padding-left:20px;
  font-size:.95rem;
}
.steps ul li{margin-bottom:4px;}

.stage-title{
  font-weight:800;
  color:var(--ink);
  margin:18px 0 8px;
  font-size:.98rem;
}
.steps > ol > li .stage-title:first-child{margin-top:0;}

blockquote.note, blockquote.warning, blockquote.tip{
  margin:10px 0;
  padding:10px 16px;
  border-left:4px solid var(--ink);
  background:var(--bg-alt);
  font-size:.9rem;
  color:var(--ink-soft);
  border-radius:0 8px 8px 0;
}
blockquote.warning{
  border-left-color:var(--accent);
}
blockquote.tip{
  border-left-color:var(--highlight);
  background:#fffbea;
}

.tips{
  margin-top:24px;
  padding:16px 20px;
  background:var(--highlight);
  border-radius:12px;
}
.tips h3.section-title{margin-top:0;}
.tips h3.section-title::before{background:var(--ink);}
.tips ul{
  margin:0;
  padding-left:20px;
}
.tips ul li{margin-bottom:8px;font-size:.93rem;}
.tips ul li:last-child{margin-bottom:0;}

.closing-note{
  margin-top:18px;
  font-size:.9rem;
  color:var(--ink-soft);
  font-style:italic;
}

.tstamp{
  font-size:.8rem;
  color:var(--accent-dark);
  text-decoration:none;
  font-weight:800;
}
.tstamp:hover{text-decoration:underline;}

/* ---------- Recipe page nav ---------- */
.recipe-nav{
  max-width:820px;
  margin:0 auto;
  padding:24px 24px 0;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  font-weight:800;
  color:var(--accent-dark);
  text-decoration:none;
}
.back-link:hover{text-decoration:underline;}

.recipe-page section.recipe{
  max-width:820px;
  margin:24px auto 40px;
}

.recipe-pager{
  max-width:820px;
  margin:0 auto 60px;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:.88rem;
}
.recipe-pager a{
  color:var(--ink-soft);
  text-decoration:none;
  font-weight:700;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:9999px;
  background:#fff;
  max-width:42%;
}
.recipe-pager a:hover{
  border-color:var(--accent);
  color:var(--accent-dark);
}
.recipe-pager .pager-next{
  text-align:right;
  margin-left:auto;
}

footer.book-footer{
  text-align:center;
  padding:40px 20px 60px;
  color:var(--ink-soft);
  font-size:.85rem;
  border-top:1px solid var(--line);
}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .toc-book{padding:32px 18px 12px;}
  section.recipe{padding:26px 22px;}
}

/* ---------- Print ---------- */
@media print{
  section.recipe{
    box-shadow:none;
    border:none;
    page-break-inside:avoid;
    page-break-after:always;
  }
  .cover{page-break-after:always;}
}