/* 이든(ideun.xyz) — 프리미엄 에디토리얼 스킨(2026-08-21 리디자인).
   ★배경: 세리프 마스트헤드 + 골드 보조 악센트 + 웜뉴트럴 바탕으로 격을 높였다.
   ★기존 sb-*/zn-* 클래스는 전부 유지 — 톤·타이포만 갈아 끼웠다(복제 사이트와 동일 구성 금지 준수,
   이 파일은 gowarm 등 형제 사이트와 물리적으로 분리된 사본이라 안전하게 고쳐도 된다). */
:root{
  --h:130;                                   /* ★사이트 축 색상 */
  --acc:hsl(var(--h) 46% 30%);
  --acc-d:hsl(var(--h) 52% 20%);
  --acc-soft:hsl(var(--h) 38% 93%);
  --gold:#a9812f; --gold-d:#7c5f22; --gold-soft:#f6ecd4;   /* 보조 악센트 — 프리미엄 스파 톤 */
  --bg:#f3ecd9;                               /* 웜 파치먼트 배경(에디토리얼 톤) — 흰색과 확실히 구분되게 */
  --bg-deep:#ece2c6;                          /* 마스트헤드·기사 헤더 등 강조 밴드용 */
  --paper:#fff;
  --ink:#221f19;
  --mut:#7c7566;
  --line:#d9cdac;
  --serif:'Playfair Display','Noto Serif KR',Georgia,serif;
  --c-guide:var(--acc);
  --c-body:#0f766e; --c-life:#4f46e5; --c-howto:#a1345f;
  --c-wellness:#2563eb; --c-season:var(--gold-d); --c-sports:#15803d; --c-science:#6d28d9;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.75;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:var(--acc-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.sb-wrap{max-width:1080px;margin:0 auto;padding:0 1rem}

/* ── 상단바 ── */
.sb-top{position:sticky;top:0;z-index:20;background:rgba(250,248,243,.92);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(8px)}
.sb-top-in{display:flex;align-items:center;gap:.9rem;min-height:60px}
.sb-logo{font-family:var(--serif);font-style:italic;font-weight:700;font-size:1.55rem;line-height:1;
  letter-spacing:0;padding:.1rem .05rem .3rem;white-space:nowrap;color:var(--acc-d)}
.sb-logo:hover{text-decoration:none;color:var(--acc)}
.sb-crumb{color:var(--mut);font-size:.86rem;letter-spacing:.01em}
.sb-tel{margin-left:auto;background:var(--acc);color:#fff;font-weight:700;
  padding:.44rem .9rem;border-radius:999px;font-size:.88rem;white-space:nowrap;
  box-shadow:0 6px 16px hsl(var(--h) 46% 30% / .28);transition:background .18s,transform .18s}
.sb-tel:hover{text-decoration:none;background:var(--acc-d);transform:translateY(-1px)}

/* ── 켈리커(에디토리얼 눈짐표) — 섹션 제목 위 작은 골드 라벨 ── */
.sb-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:.4rem}

/* ── 웹진 홈(도깨비식 마스트헤드) ── */
/* ★진한 마스트헤드 밴드 — 푸터(어두운 톤)와 짝을 이루는 북엔드 구성으로 확실한 존재감을 준다 */
.zn-mast{position:relative;text-align:center;border-bottom:0;margin:.9rem 0 0;padding:3rem 1.2rem 2.6rem;
  background:linear-gradient(155deg,#1c3a20 0%,#26471f 55%,#1a3418 100%);border-radius:4px;
  box-shadow:0 18px 40px rgba(20,30,15,.22)}
.zn-mast:before{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 0%,hsl(38 60% 55% / .16),transparent 60%)}
.zn-mast .brandline{position:relative;display:block;font-family:var(--serif);font-weight:700;font-size:2.5rem;
  letter-spacing:.005em;color:#fff;margin-bottom:.5rem}
.zn-mast .brandline em{font-style:italic;color:var(--gold)}
.zn-mast h1{position:relative;margin:0;font-size:.86rem;font-weight:600;color:hsl(45 40% 82%);letter-spacing:.16em;
  text-transform:uppercase}
.zn-nav{display:flex;gap:.2rem;flex-wrap:wrap;justify-content:center;padding:1.1rem 0 1.3rem;
  border-bottom:1px solid var(--line);margin-bottom:0}
.zn-nav a{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  padding:.5rem .85rem;border-bottom:2px solid transparent}
.zn-nav a:hover{background:none;text-decoration:none;color:var(--acc-d);border-bottom-color:var(--gold)}

.zn-hero{display:grid;grid-template-columns:7fr 5fr;gap:1.1rem;padding:1.6rem 0 1.8rem;
  border-bottom:1px solid var(--line)}
.zn-hero .big{position:relative;display:block;border-radius:4px;overflow:hidden;min-height:360px;
  background:var(--ink);border:1px solid var(--line)}
.zn-hero .big .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .4s ease}
.zn-hero .big:hover .bgimg{transform:scale(1.035)}
.zn-hero .big .grad{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(10,8,4,.82) 84%)}
.zn-hero .big .tx{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem}
.zn-hero .big .cat{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:inline-block}
.zn-hero .big h2{margin:.6rem 0 0;font-family:var(--serif);font-weight:700;font-size:1.62rem;line-height:1.32;
  color:#fff;letter-spacing:0;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.zn-hero .big:hover{text-decoration:none}
.zn-rank{display:flex;flex-direction:column;gap:.15rem}
.zn-rank a{display:flex;align-items:center;gap:.8rem;padding:.68rem .3rem;border-bottom:1px solid var(--line)}
.zn-rank a:last-child{border-bottom:0}
.zn-rank a:hover{text-decoration:none;background:var(--acc-soft)}
.zn-rank .rk{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--gold-d);min-width:1.2rem;
  text-align:center;font-style:italic}
.zn-rank .th{width:78px;height:56px;border-radius:3px;background-size:cover;background-position:center;
  flex:none;background-color:var(--acc-soft);border:1px solid var(--line)}
.zn-rank .tx{min-width:0}
.zn-rank .tx b{display:block;font-size:.93rem;line-height:1.45;font-weight:700;color:var(--ink);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.zn-rank .tx span{font-size:.76rem;color:var(--mut);letter-spacing:.03em}

.zn-sec{padding:2rem 0;border-bottom:1px solid var(--line)}
.zn-sec-h{display:flex;align-items:baseline;gap:.55rem;margin-bottom:1.1rem}
.zn-sec-h h2{margin:0;font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:0;
  display:flex;align-items:center;gap:.55rem}
.zn-sec-h h2 i{width:4px;height:.9em;border-radius:2px;background:var(--acc);display:inline-block}
.zn-sec-h .more{margin-left:auto;font-size:.8rem;color:var(--mut);font-weight:600;letter-spacing:.03em}
.zn-sec-h .more:hover{color:var(--gold-d)}
.zn-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.zn-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;box-shadow:0 1px 3px rgba(34,31,25,.06);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
.zn-card:hover{text-decoration:none;box-shadow:0 16px 34px rgba(34,31,25,.1);transform:translateY(-3px);
  border-color:var(--gold-soft)}
.zn-card .thumb{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;
  background-color:var(--acc-soft)}
.zn-card .bd{padding:.95rem 1rem 1.05rem}
.zn-card .cat{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.zn-card h3{margin:.4rem 0 .4rem;font-family:var(--serif);font-weight:600;font-size:1.06rem;line-height:1.42;
  color:var(--ink);letter-spacing:0;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.zn-card p{margin:0;font-size:.85rem;color:var(--mut);line-height:1.6;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.zn-card .dt{display:block;margin-top:.6rem;font-size:.74rem;color:var(--mut);letter-spacing:.03em}

/* ── 공용(2·3층 지역 페이지 포함) ── */
.sb-hero{padding:2.4rem 0 1.5rem;border-bottom:1px solid var(--line)}
.sb-hero h1{font-family:var(--serif);font-weight:700;font-size:1.9rem;line-height:1.32;margin:0 0 .6rem;
  color:var(--ink);letter-spacing:0}
.sb-hero p{margin:0;color:var(--mut);font-size:.98rem;max-width:46rem}
.sb-stat{display:flex;gap:1.4rem;margin-top:1.1rem;flex-wrap:wrap}
.sb-stat b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--acc-d)}
.sb-stat span{font-size:.78rem;color:var(--mut);letter-spacing:.05em;text-transform:uppercase}

section{padding:1.9rem 0;border-bottom:1px solid var(--line)}
h2{font-family:var(--serif);font-weight:700;font-size:1.28rem;margin:0 0 .95rem;color:var(--ink);letter-spacing:0}
.sb-lead{color:var(--mut);margin:0 0 1rem;max-width:44rem}

.sb-cards{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.sb-card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1.05rem;
  box-shadow:0 1px 3px rgba(34,31,25,.06);transition:box-shadow .2s ease,border-color .2s ease}
.sb-card:hover{box-shadow:0 12px 26px rgba(34,31,25,.1);border-color:var(--gold-soft)}
.sb-card-t{margin:0 0 .35rem;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.sb-card-t a{color:var(--ink)}
.sb-card-d{margin:0;font-size:.86rem;color:var(--mut);line-height:1.65}
.sb-card-a{font-size:.78rem;color:var(--mut);display:block;margin-top:.5rem;letter-spacing:.02em}
.sb-card-btn{display:inline-block;margin-top:.65rem;background:var(--acc-soft);color:var(--acc-d);
  font-weight:700;font-size:.85rem;padding:.36rem .8rem;border-radius:3px}
.sb-card-btn:hover{background:var(--acc);color:#fff;text-decoration:none}
.sb-card-tel{display:inline-block;margin-top:.65rem;margin-left:.35rem;font-weight:700;font-size:.85rem;
  color:var(--gold-d)}

.sb-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.sb-chips a{background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:.38rem .85rem;font-size:.87rem;color:var(--ink);box-shadow:0 1px 3px rgba(34,31,25,.06)}
.sb-chips a:hover{border-color:var(--gold);color:var(--gold-d);text-decoration:none;background:var(--gold-soft)}

.sb-course{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.sb-course td,.sb-course th{padding:.45rem .75rem;border:1px solid var(--line);font-size:.9rem}
.sb-faq{border:1px solid var(--line);border-radius:4px;background:var(--paper);
  padding:.15rem 1rem;margin:.5rem 0}
.sb-faq dt{font-weight:700;margin:.7rem 0 .25rem;color:var(--ink)}
.sb-faq dd{margin:0 0 .7rem;color:var(--mut);font-size:.92rem}

.sb-cta{background:linear-gradient(120deg,var(--acc-d) 0%,var(--acc) 100%);border-radius:4px;
  margin:1.5rem 0;color:#fff;position:relative;overflow:hidden}
.sb-cta:after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 60%,hsl(38 55% 55% / .28) 100%)}
.sb-cta-in{position:relative;display:flex;align-items:center;gap:1rem;padding:1.2rem 1.35rem;flex-wrap:wrap}
.sb-cta-t{font-weight:600;line-height:1.5}
.sb-cta-t b{font-family:var(--serif);font-size:1.14rem;font-weight:700}
.sb-cta-sp{flex:1}
.sb-cta-b{background:#fff;color:var(--acc-d);font-weight:700;padding:.58rem 1.15rem;
  border-radius:3px;white-space:nowrap}
.sb-cta-b:hover{text-decoration:none;background:var(--gold-soft)}

.sb-golist{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));list-style:none;
  margin:0;padding:0}
.sb-golist a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:.62rem .9rem;font-size:.9rem;color:var(--ink);box-shadow:0 1px 3px rgba(34,31,25,.06)}
.sb-golist a:hover{border-color:var(--gold);text-decoration:none;color:var(--gold-d);
  box-shadow:0 4px 12px rgba(34,31,25,.1)}
.sb-golist-more{margin:.9rem 0 0}
.sb-golist-more a{font-weight:700}
.sb-golocal{color:var(--mut);font-size:.88rem}

.sb-read{border-top:1px solid var(--line);padding-top:1.3rem}
.sb-read-t{font-family:var(--serif);font-weight:700;font-size:1.05rem;margin:0 0 .25rem;color:var(--ink)}
.sb-read-d{color:var(--mut);font-size:.9rem;margin:0 0 .7rem}
.sb-readlist{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  list-style:none;margin:0;padding:0}
.sb-readlist a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:.6rem .85rem;font-size:.9rem;color:var(--ink);box-shadow:0 1px 3px rgba(34,31,25,.06)}
.sb-readlist a:hover{border-color:var(--gold);color:var(--gold-d);text-decoration:none;
  box-shadow:0 4px 12px rgba(34,31,25,.1)}

/* 목록 카드(웹진 목록 페이지) */
.sb-zcards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.sb-zcards.is-big{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.sb-zcard{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  box-shadow:0 1px 3px rgba(34,31,25,.06);transition:box-shadow .22s ease,border-color .22s ease}
.sb-zcard:hover{box-shadow:0 16px 34px rgba(34,31,25,.1);border-color:var(--gold-soft)}
.sb-zthumb{display:block;aspect-ratio:16/9;background:var(--acc-soft)}
.sb-zthumb img{width:100%;height:100%;object-fit:cover;display:block}
.sb-zbody{padding:.95rem 1rem 1.05rem}
.sb-zcat{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d)}
.sb-zcard h3{margin:.4rem 0 .4rem;font-family:var(--serif);font-weight:600;font-size:1.05rem;line-height:1.45;
  letter-spacing:0}
.sb-zcard h3 a{color:var(--ink)}
.sb-zcard p{margin:0;font-size:.85rem;color:var(--mut);line-height:1.6}
.sb-zdate{display:block;margin-top:.55rem;font-size:.74rem;color:var(--mut);letter-spacing:.03em}

/* 글 상세 */
.sb-progress{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:40;background:transparent}
.sb-progress i{display:block;height:100%;width:0;background:var(--gold)}
.sb-article{max-width:46rem}          /* ★본문 가로폭 제한 — 전 사이트 공통 규칙 */
.sb-crumbs{font-size:.84rem;color:var(--mut);padding:1rem 0 .2rem;letter-spacing:.02em}
.sb-crumbs a{color:var(--mut)}
.sb-crumbs span{margin:0 .3rem}
.sb-ahead{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:1.6rem 1.7rem 1.5rem;margin:.9rem 0 1.5rem;box-shadow:0 1px 3px rgba(34,31,25,.05);overflow:hidden}
.sb-ahead:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--acc) 100%)}
.sb-acover{margin:1.3rem 0 1.6rem;border-radius:4px;overflow:hidden;box-shadow:0 18px 40px rgba(34,31,25,.14)}
.sb-acover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.sb-apill{display:inline-block;background:var(--gold-soft);color:var(--gold-d);font-weight:700;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.26rem .65rem;border-radius:999px}
.sb-ahead h1{font-family:var(--serif);font-weight:700;font-size:1.9rem;line-height:1.34;margin:.7rem 0 .55rem;
  letter-spacing:0}
.sb-adeck{color:var(--mut);margin:0 0 .8rem;font-size:1.02rem;line-height:1.7}
.sb-ameta{display:flex;align-items:center;gap:.5rem;color:var(--mut);font-size:.85rem}
.sb-aavatar{width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.sb-adot{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}
.sb-toc{background:var(--gold-soft);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px;
  padding:1rem 1.2rem;margin:1.3rem 0;box-shadow:0 1px 3px rgba(34,31,25,.05)}
.sb-toc-h{margin:0 0 .5rem;font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-d)}
.sb-toc ol{margin:0;padding-left:1.2rem}
.sb-toc li{margin:.3rem 0;font-size:.92rem}
.sb-toc a{color:var(--ink)}
.sb-toc a:hover{color:var(--gold-d)}
.sb-prose{font-size:1.06rem}
.sb-prose h2{position:relative;font-family:var(--serif);font-weight:700;font-size:1.5rem;margin:2.3rem 0 .85rem;
  padding-top:.5rem;padding-left:1rem;letter-spacing:0;border-left:3px solid var(--gold)}
.sb-prose h3{font-weight:700;font-size:1.1rem;margin:1.5rem 0 .5rem}
.sb-prose p{margin:.9rem 0}
/* ★첫 문단 드롭캡 — 프리미엄 에디토리얼의 대표 문법 */
.sb-prose > p:first-of-type:first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:3.4rem;
  line-height:.82;padding:.1rem .35rem 0 0;color:var(--acc-d)}
.sb-prose ul,.sb-prose ol{padding-left:1.3rem}
.sb-prose li{margin:.3rem 0}
.sb-prose blockquote{margin:1.1rem 0;padding:.7rem 1.1rem;border-left:3px solid var(--gold);
  background:var(--gold-soft);border-radius:0 3px 3px 0;color:var(--gold-d);font-style:italic}
.sb-prose strong{color:var(--acc-d)}
.sb-aend{height:3px;width:64px;background:var(--gold);border-radius:2px;margin:2.1rem 0 1rem}

/* 푸터 */
.sb-foot{border-top:1px solid var(--ink);margin-top:1.8rem;background:#221f19;color:#c9c2b3}
.sb-foot .sb-wrap{padding-top:.2rem}
.sb-foot-s{padding:1.4rem 0 .4rem;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:#fff}
.sb-foot p{color:#a49c8a;font-size:.85rem;margin:.3rem 0}
.sb-foot-b{padding:.7rem 0 1.8rem;color:#847b68;font-size:.78rem;letter-spacing:.02em}
.sb-foot a{color:#c9c2b3}
.sb-foot a:hover{color:#fff}

@media (max-width:760px){
  .zn-hero{grid-template-columns:1fr}
  .zn-hero .big{min-height:240px}
  .zn-hero .big h2{font-size:1.2rem}
  .zn-mast .brandline{font-size:1.7rem}
  .sb-hero h1{font-size:1.45rem}
  .sb-ahead h1{font-size:1.5rem}
}