/* ───── Journal magazine layout — 향촌흑염소 전북완주점 ───── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  line-height: 1.7;
  color: #1a1f1a;
  background: #faf8f3;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
:root{
  --ink:#0d1f17; --forest:#1a3d2e; --moss:#2d5a3d; --jade:#4a7c5e;
  --cream:#f5f0e1; --paper:#faf8f3; --bronze:#8b6f3a; --gold:#c9a661;
  --gold-light:#e6c989; --seal:#b4422a; --line:#dbd2b7;
  --ease: cubic-bezier(.22,.61,.36,1);
}
a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }
.container { width:min(1140px, 92vw); margin:0 auto; }
.serif{ font-family:'Noto Serif KR','Nanum Myeongjo',serif; }
.cormorant{ font-family:'Cormorant Garamond','Noto Serif KR',serif; font-style:italic; }
h1,h2,h3,h4,h5{ font-family:'Noto Serif KR',serif; font-weight:700; letter-spacing:-.02em; margin:0; line-height:1.35; }
p { margin:0 0 1.1em; }
.eyebrow{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase; font-size:12.5px; color:var(--bronze);
}

/* nav */
.jnav{
  position:sticky; top:0; z-index:50;
  background:rgba(13,31,23,.94); backdrop-filter:blur(14px);
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 1px 0 rgba(201,166,97,.18);
}
.jnav .brand{ display:flex; align-items:center; gap:12px; color:var(--cream); }
.jnav .brand .mark{
  width:34px; height:34px; border:1.2px solid var(--gold); display:grid; place-items:center;
  font-family:'Noto Serif KR',serif; font-weight:900; color:var(--gold); font-size:16px;
}
.jnav .brand .tt{ font-family:'Noto Serif KR',serif; font-weight:700; font-size:15px; }
.jnav .links{ display:flex; gap:24px; }
.jnav .links a{
  font-size:12.5px; letter-spacing:.15em; color:var(--cream); opacity:.85;
  padding:4px 0; border-bottom:1px solid transparent; transition:border-color .25s var(--ease), opacity .25s var(--ease);
}
.jnav .links a:hover{ opacity:1; border-bottom-color:var(--gold); }
.jnav .tel{
  display:inline-flex; padding:8px 16px; border:1px solid var(--gold);
  color:var(--gold-light); font-size:12.5px; letter-spacing:.16em;
  font-family:'Cormorant Garamond',serif;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.jnav .tel:hover{ background:var(--gold); color:var(--ink); }
@media (max-width:780px){ .jnav .links{ display:none; } .jnav{ padding:10px 14px; } }

/* breadcrumb */
.crumb{ padding:32px 0 12px; font-size:12.5px; color:#6f6856; letter-spacing:.05em; }
.crumb a{ color:var(--bronze); border-bottom:1px solid transparent; transition:border-color .2s; }
.crumb a:hover{ border-bottom-color:var(--gold); }
.crumb span.sep{ margin:0 8px; color:var(--gold); }
.crumb .here{ color:var(--moss); }

/* hero — article */
.j-hero{ padding:30px 0 50px; position:relative; }
.j-hero .meta-row{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }
.j-hero .badge{
  display:inline-block; padding:6px 14px; border:1px solid var(--gold);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px;
  letter-spacing:.3em; color:var(--bronze);
}
.j-hero .meta{ font-size:13px; color:#6f6856; letter-spacing:.06em; }
.j-hero .meta b{ color:var(--moss); font-weight:600; }
.j-hero h1{
  font-size:clamp(28px, 4.6vw, 56px);
  line-height:1.18; color:var(--ink); margin-bottom:24px; max-width:18ch;
}
.j-hero .lead{
  font-family:'Noto Serif KR',serif; font-weight:300; font-size:clamp(16px,1.7vw,19.5px);
  line-height:1.85; color:#3a4640; max-width:760px;
}
.j-hero .cover{
  margin-top:42px; aspect-ratio:16/8; overflow:hidden; position:relative;
  box-shadow:0 30px 70px -30px rgba(26,61,46,.32); border:1px solid rgba(139,111,58,.18);
}
.j-hero .cover img{ width:100%; height:100%; object-fit:cover; }
.j-hero .cover .seal{
  position:absolute; right:18px; bottom:18px; width:74px; height:74px;
  filter: drop-shadow(0 8px 18px rgba(180,66,42,.32));
}

/* article body */
.article-grid{
  display:grid; grid-template-columns: minmax(0, 760px) 280px;
  gap:64px; padding:54px 0 90px;
}
.article-grid .main{ min-width:0; }
.article-grid .side{ position:sticky; top:96px; align-self:start; }
@media (max-width:980px){
  .article-grid{ grid-template-columns:1fr; gap:32px; }
  .article-grid .side{ position:static; }
}
.body-prose{ font-family:'Noto Serif KR',serif; color:#26312a; font-size:17px; line-height:1.95; font-weight:300; }
.body-prose p{ margin:0 0 1.3em; }
.body-prose h2{
  font-size:clamp(20px,2.6vw,26px); color:var(--ink); margin:60px 0 22px; padding-top:24px;
  border-top:1px solid var(--line); letter-spacing:-.01em;
}
.body-prose h2 .num{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  color:var(--gold); font-size:.7em; margin-right:14px; letter-spacing:.1em;
}
.body-prose h3{ font-size:18px; color:var(--moss); margin:32px 0 12px; }
.body-prose strong{ color:var(--ink); font-weight:600; }
.body-prose em{ font-style: italic; color:var(--moss); }
.body-prose ul, .body-prose ol{ margin:0 0 1.2em 0; padding-left:1.1em; }
.body-prose li{ margin:.4em 0; }
.body-prose figure{ margin:36px 0; }
.body-prose figure img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border:1px solid rgba(139,111,58,.16);
}
.body-prose figure figcaption{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--bronze);
  font-size:13.5px; letter-spacing:.06em; text-align:center; margin-top:10px;
}
.pullquote{
  margin:36px 0; padding:26px 28px; border-left:3px solid var(--gold);
  background:rgba(245,240,225,.6); font-family:'Noto Serif KR',serif;
  color:var(--moss); font-size:17px; line-height:1.8;
}
.checklist{
  margin:30px 0; padding:24px 26px; background:#fff;
  border:1px solid rgba(139,111,58,.22); position:relative;
}
.checklist::before{
  content:'CHECKLIST'; position:absolute; top:-12px; left:18px; background:var(--paper);
  padding:0 12px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:12px; letter-spacing:.28em; color:var(--bronze);
}
.checklist ul{ list-style:none; padding:0; margin:0; }
.checklist li{
  padding:8px 0 8px 28px; position:relative; font-size:15.5px;
  font-family:'Noto Sans KR',sans-serif; color:#26312a; line-height:1.7;
}
.checklist li::before{
  content:''; position:absolute; left:0; top:14px;
  width:14px; height:14px; border:1.5px solid var(--gold); background:rgba(201,166,97,.12);
}

/* TOC sidebar */
.side .toc{ background:#fff; border:1px solid rgba(139,111,58,.22); padding:24px 22px; margin-bottom:24px; }
.side .toc h5{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  letter-spacing:.28em; color:var(--bronze); margin:0 0 14px; font-size:13px; text-transform:uppercase;
}
.side .toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.side .toc li{ counter-increment:toc; padding:8px 0; border-bottom:1px dashed rgba(139,111,58,.15); }
.side .toc li:last-child{ border-bottom:0; }
.side .toc li a{
  font-size:13.5px; color:#26312a; line-height:1.5; display:block;
  padding-left:28px; position:relative; transition:color .25s var(--ease);
}
.side .toc li a::before{
  content:counter(toc, decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:13px;
}
.side .toc li a:hover{ color:var(--moss); }
.side .meta-card{
  background:var(--ink); color:var(--cream); padding:24px 22px; margin-bottom:24px;
}
.side .meta-card h5{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  color:var(--gold-light); letter-spacing:.28em; margin:0 0 14px; font-size:13px;
}
.side .meta-card .line{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px dashed rgba(201,166,97,.18); }
.side .meta-card .line:last-child{ border-bottom:0; }
.side .meta-card .line .l{ color:#a99366; letter-spacing:.06em; }
.side .meta-card .line .v{ color:var(--cream); font-family:'Noto Serif KR',serif; }
.side .cta-card{
  border:1px solid rgba(139,111,58,.25); padding:22px; text-align:center; background:#fff;
}
.side .cta-card .lbl{
  font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.28em;
  color:var(--bronze); font-size:12px; margin-bottom:8px;
}
.side .cta-card .num{
  font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--ink); letter-spacing:.02em;
  display:inline-block; padding-bottom:6px; border-bottom:2px solid var(--gold);
}
.side .cta-card .sub{ font-size:13px; color:#5a6760; margin-top:14px; line-height:1.7; }
.side .cta-card .btn{
  margin-top:16px; display:block; padding:11px 14px; border:1px solid var(--ink);
  font-size:13.5px; letter-spacing:.1em; color:var(--ink); transition:background .25s, color .25s;
}
.side .cta-card .btn:hover{ background:var(--ink); color:var(--cream); }

/* tags */
.tags{ margin:48px 0 0; padding-top:30px; border-top:1px solid var(--line); }
.tags .lbl{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--bronze); letter-spacing:.28em; font-size:12px; margin-bottom:14px; }
.tags ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  padding:6px 14px; background:rgba(201,166,97,.12); border:1px solid rgba(201,166,97,.32);
  font-size:13px; color:#3a4640; font-family:'Noto Serif KR',serif;
}

/* related */
.related{ padding:90px 0; background:linear-gradient(180deg,#f4eed8,#ede5d0); }
.related h2{ font-size:clamp(22px,2.8vw,30px); color:var(--ink); margin-bottom:30px; }
.related .eyebrow{ display:inline-block; margin-bottom:10px; }
.related .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related .card{ background:#fff; border:1px solid rgba(139,111,58,.18); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.related .card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(26,61,46,.32); }
.related .card .ph{ aspect-ratio:5/3; overflow:hidden; }
.related .card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.related .card:hover .ph img{ transform:scale(1.06); }
.related .card .body{ padding:20px 22px 22px; }
.related .card .kind{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--bronze); letter-spacing:.22em; font-size:12px; }
.related .card h3{ font-size:18px; color:var(--ink); margin:8px 0 8px; line-height:1.4; }
.related .card p{ font-size:13.5px; color:#5a6760; margin:0; line-height:1.7; }
@media (max-width:780px){ .related .grid{ grid-template-columns:1fr; } }

/* index */
.idx-hero{
  padding:80px 0 60px; background:linear-gradient(180deg, var(--ink) 0%, #102a1f 100%);
  color:var(--cream); position:relative; overflow:hidden;
}
.idx-hero::after{
  content:''; position:absolute; bottom:-150px; right:-150px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(201,166,97,.1), transparent 70%);
}
.idx-hero .eyebrow{ display:inline-block; color:var(--gold-light); margin-bottom:14px; }
.idx-hero h1{ font-size:clamp(28px,4.4vw,52px); color:var(--cream); margin-bottom:18px; max-width:18ch; }
.idx-hero .lead{
  font-family:'Noto Serif KR',serif; font-size:17px; color:#c1b687; max-width:620px; line-height:1.85; font-weight:300;
}
.idx-grid{ padding:60px 0 100px; background:var(--paper); }
.idx-grid .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
@media (max-width:980px){ .idx-grid .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .idx-grid .grid{ grid-template-columns:1fr; } }
.idx-grid .card{
  background:#fff; border:1px solid rgba(139,111,58,.18); position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex; flex-direction:column;
}
.idx-grid .card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -25px rgba(26,61,46,.32); }
.idx-grid .card .ph{ aspect-ratio:5/3; overflow:hidden; }
.idx-grid .card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.idx-grid .card:hover .ph img{ transform:scale(1.06); }
.idx-grid .card .body{ padding:24px 26px 28px; flex:1; display:flex; flex-direction:column; }
.idx-grid .card .num{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold);
  letter-spacing:.18em; font-size:13px;
}
.idx-grid .card h2{ font-size:22px; color:var(--ink); margin:10px 0 12px; line-height:1.35; }
.idx-grid .card p{ font-size:14px; color:#5a6760; margin:0; line-height:1.8; flex:1; }
.idx-grid .card .read{
  margin-top:18px; font-family:'Cormorant Garamond',serif; font-style:italic;
  color:var(--bronze); font-size:13.5px; letter-spacing:.16em;
}

/* footer */
footer.jf{ background:#0a1610; color:#8d8870; padding:60px 0 28px; font-size:13px; }
footer.jf .grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:40px; }
footer.jf .brand p{ color:#a8a285; line-height:1.8; margin:0; max-width:360px; font-size:13px; }
footer.jf h5{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  font-size:14px; letter-spacing:.28em; color:var(--gold-light); margin:0 0 14px;
}
footer.jf ul{ list-style:none; padding:0; margin:0; }
footer.jf ul li{ padding:5px 0; color:#a8a285; }
footer.jf ul li a:hover{ color:var(--gold-light); }
footer.jf .legal{ border-top:1px solid rgba(168,162,133,.15); padding-top:22px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; font-size:12px; color:#6f6a55; }
@media (max-width:780px){ footer.jf .grid{ grid-template-columns:1fr; gap:30px; } }

.reveal{ opacity:0; transform:translate3d(0,30px,0); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translate3d(0,0,0); }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition-duration:.001s !important; animation-duration:.001s !important; } }