/* =========================================================
   evies 블로그 디자인 시스템 (evies.kr 브랜드 결)
   Pretendard(KR) + Space Grotesk(EN/숫자), 그린 팔레트, 라이트/다크
   ========================================================= */
:root{
  --bg:#f7f7f4; --surface:#ffffff; --surface-2:#fbfbf9;
  --ink:#101216; --muted:#565c66; --muted-2:#757c88;
  --line:#eceef0; --line-2:#e4e7ea;
  --brand:#0b815a; --brand-2:#0f8459; --brand-bright:#22c58f;
  --mint:#e4f6ef; --mint-2:#eef8f3;
  --peach:#fff2e8; --peach-ink:#b45309;
  --blue:#3b6ef2; --blue-soft:#eef2fe;
  --radius:16px; --radius-lg:22px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,18,22,.04), 0 10px 30px rgba(16,18,22,.06);
  --shadow-sm:0 1px 2px rgba(16,18,22,.05), 0 4px 14px rgba(16,18,22,.05);
  --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --font-en:'Space Grotesk',var(--font);
  --maxw:1150px;
}
:root[data-theme="dark"]{
  --bg:#0b0d10; --surface:#15181d; --surface-2:#12151a;
  --ink:#f2f4f7; --muted:#a7aebb; --muted-2:#757c88;
  --line:#232830; --line-2:#2b313a;
  --brand:#34d8a4; --brand-2:#22c58f; --brand-bright:#4ade9c;
  --mint:#132a22; --mint-2:#16211d;
  --peach:#2a1f16; --peach-ink:#f0b37e;
  --blue:#7aa0ff; --blue-soft:#182238;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; transition:font-size .2s ease}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.65; letter-spacing:-.01em;
  word-break:keep-all; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{letter-spacing:-.03em; line-height:1.25; margin:0 0 .5em; font-weight:800}
p{margin:0 0 1em}
.en,.num{font-family:var(--font-en); letter-spacing:-.01em}

.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.container.narrow{max-width:860px}
.section{padding:56px 0}
.blog-head + .section{padding-top:30px}
.section.after-hero{padding-top:36px}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- 헤더/네비 ---------- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .3s}
.site-header.hide{transform:translateY(-100%)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(16,18,22,.07)}
.nav{display:flex; align-items:center; gap:30px; height:76px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.3rem; letter-spacing:-.03em}
.brand .logo{width:38px; height:38px; border-radius:11px; flex:none}
.nav-links{display:flex; gap:28px; margin-left:10px}
.nav-links a{color:var(--muted); font-weight:600; font-size:1.06rem; transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.icon-btn{width:44px;height:44px;border:1px solid var(--line-2);background:var(--surface);border-radius:13px;
  display:grid;place-items:center;cursor:pointer;color:var(--muted);font-size:1.15rem}
.icon-btn:hover{color:var(--ink)}
.nav-toggle{display:none}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px;
  font-weight:700; font-size:1rem; cursor:pointer; border:1px solid transparent; transition:.18s; letter-spacing:-.01em}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-2); transform:translateY(-1px)}
:root[data-theme="dark"] .btn-primary{color:#06231a}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-sm{padding:9px 16px; font-size:.9rem}

/* ---------- 블로그 타이틀(심플 h1) ---------- */
.blog-head{padding:52px 0 6px; animation:fadeUp .5s ease both}
.blog-head h1{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:900; letter-spacing:-.045em; margin:0 0 10px}
.blog-head .sub{font-size:1.05rem; color:var(--muted); margin:0; max-width:60ch}

/* ---------- 카테고리 칩 ---------- */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 30px}
.chip{padding:9px 18px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--muted); font-weight:700; font-size:.95rem; transition:.15s}
.chip:hover{color:var(--ink); border-color:var(--brand)}
.chip.active{background:var(--brand); color:#fff; border-color:var(--brand)}
:root[data-theme="dark"] .chip.active{color:#06231a}

/* ---------- 카드 그리드 ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2)}
.card .thumb{aspect-ratio:16/10; background:var(--mint-2); overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:.3s}
.card:hover .thumb img{transform:scale(1.04)}
.card .body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.cat-tag{align-self:flex-start; font-size:.78rem; font-weight:800; padding:5px 11px; border-radius:999px;
  background:var(--mint); color:var(--brand-2)}
.cat-tag.b{background:var(--blue-soft); color:var(--blue)}
.card h3{font-size:1.18rem; margin:0; letter-spacing:-.03em}
.card .meta{margin-top:auto; color:var(--muted-2); font-size:.85rem; font-family:var(--font-en)}
/* 요약은 3줄까지만 (카드 높이 균일) */
.card .body p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
/* 카드 전체 클릭 — 제목 링크를 카드 위로 확장 */
.card h3 a::after{content:''; position:absolute; inset:0; z-index:1}

/* ---------- 페이지네이션 ---------- */
.pager{display:flex; justify-content:center; gap:8px; margin-top:44px}
.pager a,.pager span{min-width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--line-2); background:var(--surface); font-weight:700; font-family:var(--font-en); color:var(--muted)}
.pager a:hover{color:var(--ink); border-color:var(--brand)}
.pager .on{background:var(--brand); color:#fff; border-color:var(--brand)}
:root[data-theme="dark"] .pager .on{color:#06231a}

/* ---------- 글 상세 ---------- */
.breadcrumb{display:flex; gap:8px; color:var(--muted-2); font-size:.9rem; margin:26px 0 14px; flex-wrap:wrap}
.breadcrumb a:hover{color:var(--brand)}
.post-head h1{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:900; letter-spacing:-.04em}
.post-meta{display:flex; gap:12px; align-items:center; color:var(--muted); font-size:.92rem; margin:14px 0 26px}
/* CLS 방지: 이미지 로드 전에 컨테이너 높이를 확보(aspect-ratio/고정높이) */
.post-hero{border-radius:var(--radius-lg); overflow:hidden; margin-bottom:32px; box-shadow:var(--shadow-sm);
  aspect-ratio:2/1; max-height:440px; background:var(--mint-2)}
.post-hero img{width:100%; height:100%; object-fit:cover}
/* 상단 꽉 채움 히어로(관리자 옵션) */
.post-hero-full{width:100%; height:min(48vh,500px); overflow:hidden; background:var(--mint-2); animation:fadeUp .5s ease both}
.post-hero-full img{width:100%; height:100%; object-fit:cover; display:block}
.post-body{font-size:1.09rem; line-height:1.85; letter-spacing:-.006em; color:#26292f}
:root[data-theme="dark"] .post-body{color:#d6dae1}
.post-body h2{font-size:1.5rem; margin:1.8em 0 .6em; padding-top:.3em}
.post-body h3{font-size:1.22rem; margin:1.5em 0 .5em}
.post-body p{margin:0 0 1.15em}
.post-body img{border-radius:14px; margin:1.2em auto; box-shadow:var(--shadow-sm)}
/* 본문 링크 — 고급스럽게 (밑줄 그라데이션 + 호버 배경) */
.post-body a{color:var(--brand-2); font-weight:700; text-decoration:none;
  background-image:linear-gradient(var(--brand),var(--brand)); background-repeat:no-repeat;
  background-size:100% 2px; background-position:0 100%; padding-bottom:2px; transition:color .15s,background-color .15s; border-radius:3px}
.post-body a:hover{color:var(--brand); background-color:var(--mint-2)}
/* 링크만 있는 문단 → 관련글 카드(점선 캡슐) 자동 변환 */
.post-body p.link-card{border:2px dashed color-mix(in srgb,var(--brand) 45%,var(--line-2));
  border-radius:999px; padding:16px 24px; text-align:center; margin:1.7em 0;
  background:var(--surface); transition:border-color .18s, transform .18s, box-shadow .18s}
.post-body p.link-card a{background:none; color:var(--ink); font-weight:700;
  display:inline-flex; align-items:center; gap:9px; padding:0}
.post-body p.link-card a::after{content:'→'; color:var(--brand); font-weight:800; transition:transform .18s}
.post-body p.link-card:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.post-body p.link-card:hover a::after{transform:translateX(4px)}
.post-body ul,.post-body ol{padding-left:1.3em; margin:0 0 1.15em}
.post-body li{margin:.35em 0}
.post-body blockquote{margin:1.4em 0; padding:14px 20px; background:var(--mint-2);
  border-left:4px solid var(--brand); border-radius:0 12px 12px 0; color:var(--muted)}
.post-body table{width:100%; border-collapse:collapse; margin:1.2em 0}
.post-body th,.post-body td{border:1px solid var(--line-2); padding:10px 12px; text-align:left}

/* 목차 */
.toc{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:0 0 30px}
.toc .t{font-weight:800; font-size:1rem; margin-bottom:10px; display:flex; align-items:center; gap:6px}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc li{counter-increment:toc; margin:.35em 0}
.toc li::before{content:counter(toc); font-family:var(--font-en); color:var(--brand); font-weight:700; margin-right:8px}
.toc a{color:var(--muted)} .toc a:hover{color:var(--ink)}
.toc .lv3{padding-left:1.4em; font-size:.94rem}

/* 태그 */
.tags{display:flex; gap:8px; flex-wrap:wrap; margin:34px 0}
.tags a{background:var(--surface); border:1px solid var(--line-2); color:var(--muted); padding:7px 13px;
  border-radius:999px; font-size:.88rem; font-weight:600}
.tags a:hover{color:var(--brand); border-color:var(--brand)}

/* 관련글 */
.related{margin-top:56px; padding-top:40px; border-top:1px solid var(--line)}

/* ---------- 푸터 ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:70px; padding:44px 0; color:var(--muted); font-size:.92rem}
.footer-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.footer-links{display:flex; gap:18px} .footer-links a:hover{color:var(--brand)}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .nav-toggle{display:grid}
}
@media (max-width:600px){
  .section{padding:40px 0}
  .blog-head{padding:36px 0 0}
  .grid{grid-template-columns:1fr}
}

/* 아이콘 폰트 자간 영향 제거(있다면) */
[class^="ri-"],[class*=" ri-"]{letter-spacing:normal}

/* ---------- 글자 크기 조절 ---------- */
.font-scale{display:flex; align-items:center; border:1px solid var(--line-2); border-radius:13px;
  overflow:hidden; background:var(--surface); height:44px}
.fs-btn{border:0; background:transparent; color:var(--muted); cursor:pointer; padding:0 13px; height:100%;
  font-weight:800; font-size:1.02rem; font-family:var(--font); transition:background .15s,color .15s; line-height:1}
.fs-btn:hover{color:var(--ink); background:var(--mint-2)}
.fs-btn+.fs-btn{border-left:1px solid var(--line-2)}
.fs-btn sup{font-size:.6em; margin-left:1px}
#fsDown{font-size:.8rem} #fsUp{font-size:1.08rem}
@media (max-width:600px){ .font-scale{display:none} }

/* ---------- 다크모드 해/달 토글 ---------- */
.theme-toggle{overflow:hidden}
.theme-toggle svg{transition:transform .4s cubic-bezier(.2,.7,.3,1.4)}
.theme-toggle:hover svg{transform:rotate(25deg)}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}

/* ---------- 본문 h2 엠블럼(포인트 바) ---------- */
.post-body h2{position:relative; padding-left:18px}
.post-body h2::before{content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:6px;
  border-radius:3px; background:linear-gradient(180deg,var(--brand-bright),var(--brand))}

/* ---------- 목차 토글 + 부드러운 이동 ---------- */
.post-body h2,.post-body h3{scroll-margin-top:96px}
.toc .t{cursor:pointer; user-select:none; justify-content:space-between}
.toc .t .tarrow{margin-left:auto; font-size:.85em; color:var(--muted-2); transition:transform .3s ease}
.toc.collapsed .t .tarrow{transform:rotate(-90deg)}
.toc ol{overflow:hidden; transition:max-height .38s ease,opacity .3s ease,margin .3s ease; max-height:800px; opacity:1}
.toc.collapsed ol{max-height:0; opacity:0; margin:0}
.toc a{transition:color .15s}
.toc li{transition:transform .18s} .toc li:hover{transform:translateX(2px)}

/* ---------- 본문 이미지 + AI 참고 캡션 ---------- */
.post-body figure.post-figure{margin:1.4em auto; text-align:center}
.post-body figure.post-figure img{margin:0 auto}
.post-body .ai-cap{display:block; margin-top:.65em; font-size:.85rem; color:var(--muted-2); font-weight:600; letter-spacing:-.01em}

/* ---------- 지도 ---------- */
.post-map{margin:34px 0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); animation:fadeUp .5s ease both}
.post-map iframe,.post-map .map-img{width:100%; height:360px; border:0; display:block; object-fit:cover}
.post-map .map-bar{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; background:var(--surface); flex-wrap:wrap}
.post-map .addr{display:inline-flex; align-items:center; gap:8px; font-size:.97rem; color:var(--ink)}
.post-map .addr svg{flex:none}
.post-map .addr b{font-weight:800; letter-spacing:-.02em}
.post-map .addr .tel{font-weight:800; color:var(--ink); font-family:var(--font-en); white-space:nowrap}
.post-map .addr .tel:hover{color:var(--brand)}
.post-map .map-links{display:inline-flex; gap:10px; flex-wrap:wrap}
.post-map .mlink{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem;
  padding:9px 16px; border-radius:999px; transition:.18s; letter-spacing:-.01em}
.post-map .mlink.g{background:var(--surface); color:var(--ink); border:1px solid var(--line-2)}
.post-map .mlink.g:hover{border-color:var(--muted-2); transform:translateY(-1px)}
.post-map .mlink.n{background:#03C75A; color:#fff; border:1px solid #03C75A}
.post-map .mlink.n:hover{background:#02b04f; transform:translateY(-1px)}
@media (max-width:600px){
  .post-map .map-bar{flex-direction:column; align-items:flex-start}
  .post-map .map-links{width:100%} .post-map .mlink{flex:1; justify-content:center}
}

/* ---------- 위로가기 (회색 · 은은하게) ---------- */
.to-top{position:fixed; right:22px; bottom:22px; z-index:60; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-2); background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--muted); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(16,18,22,.14); opacity:0; transform:translateY(14px) scale(.9);
  pointer-events:none; transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.3,1.3),color .2s,border-color .2s}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{color:var(--ink); border-color:var(--muted-2); transform:translateY(-3px)}
:root[data-theme="dark"] .to-top{box-shadow:0 6px 20px rgba(0,0,0,.5)}
@media (max-width:600px){ .to-top{right:16px; bottom:16px; width:44px; height:44px} }

/* ---------- 진입 애니메이션 ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.card{animation:fadeUp .5s ease both}
.grid .card:nth-child(2){animation-delay:.06s}
.grid .card:nth-child(3){animation-delay:.12s}
.grid .card:nth-child(4){animation-delay:.18s}
.grid .card:nth-child(5){animation-delay:.24s}
.grid .card:nth-child(6){animation-delay:.3s}
.post-head,.post-hero,.toc{animation:fadeUp .5s ease both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}