@charset "utf-8";
/* ============================================================================
   새벽수유 계산기 — 공용 스타일시트
   milkroutine.com

   구성
     1. 디자인 토큰 (색 계단 · 타이포 · 그림자 · 라운드 · 간격)
     2. 레거시 변수 별칭  ← 각 페이지에 남아 있는 고유 CSS가 참조하는 이름
     3. 리셋 / 기본 타이포그래피
     4. 사이트 크롬 (헤더 · 내비 · 모바일 탭바 · 푸터)
     5. 아티클 (본문 타이포 · 표 · 인용 · 콜아웃 · FAQ · CTA)
     6. 허브 (검색 · 필터칩 · 가이드 카드)
     7. 계산기 공용 (카드 · 스탯 · 스테퍼 · 입력 필드)
     8. 목차(TOC) · 관련글
     9. 데스크톱 레이아웃

   ⚠️ 이 파일 하나가 30개 페이지 전부의 겉모습을 결정합니다.
      페이지 고유 스타일만 각 HTML의 <style> 블록에 남겨두세요.
   ========================================================================== */

/* ============================================================================
   1. 디자인 토큰
   ========================================================================== */
:root{
  /* --- 뉴트럴(웜) : 배경 · 서피스 · 경계선 --------------------------------- */
  --c-50:#FFFDFA;
  --c-100:#FFFBF6;
  --c-150:#FDF6EC;
  --c-200:#FBF1E6;
  --c-300:#F2E6D4;
  --c-400:#ECDFCC;
  --c-500:#DCCBB2;
  --c-600:#9C8B79;
  --c-700:#786A59;
  --c-800:#5F5346;
  --c-900:#4A3F35;

  /* --- 민트(프라이머리) --------------------------------------------------- */
  --m-50:#F2FAF6;
  --m-100:#E6F5EE;
  --m-200:#CDEBDE;
  --m-300:#AEDCC9;
  --m-400:#8FCDB3;
  --m-500:#6DB89A;
  --m-600:#4E9679;
  --m-700:#3D7861;
  --m-800:#2E5B49;

  /* --- 탠(액센트) --------------------------------------------------------- */
  --t-50:#FDF8EF;
  --t-100:#FBF0DE;
  --t-200:#F4E2C4;
  --t-300:#E3C89A;
  --t-400:#D2AC72;
  --t-500:#BE8F4F;
  --t-600:#A8763B;
  --t-700:#875E2E;

  /* --- 시맨틱 -------------------------------------------------------------- */
  --ok-bg:#EDF9F0;      --ok-fg:#2F7D4A;   --ok-line:#BFE4CB;
  --warn-bg:#FFF6E5;    --warn-fg:#9A6512; --warn-line:#F0D9A8;
  --danger-bg:#FDEEEC;  --danger-fg:#A93B2C; --danger-line:#F2C7C0;

  /* --- 역할 토큰 ----------------------------------------------------------- */
  --bg:var(--c-200);
  --surface:var(--c-100);
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--c-150);
  --text:var(--c-900);
  --text-soft:var(--c-700);
  --text-faint:var(--c-600);
  --line:var(--c-400);
  --line-soft:var(--c-300);

  /* --- 타이포 -------------------------------------------------------------- */
  --font-sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
              system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
              "Segoe UI", sans-serif;
  --font-num:"Pretendard Variable", Pretendard, ui-monospace, "SF Mono", monospace;

  /* --- 그림자 -------------------------------------------------------------- */
  --shadow-xs:0 1px 2px rgba(74,63,53,.05);
  --shadow-sm:0 1px 2px rgba(74,63,53,.06), 0 2px 6px rgba(74,63,53,.05);
  --shadow-md:0 1px 2px rgba(74,63,53,.06), 0 6px 20px rgba(74,63,53,.07);
  --shadow-lg:0 2px 4px rgba(74,63,53,.06), 0 14px 34px rgba(74,63,53,.10);
  --shadow-ring:0 0 0 3px var(--m-100);

  /* --- 라운드 -------------------------------------------------------------- */
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --radius-full:999px;

  /* --- 레이아웃 ------------------------------------------------------------ */
  --wrap:640px;
  --wrap-app:440px;
  --tabbar-h:58px;

  color-scheme:light;
}

/* --- 다크 테마 -------------------------------------------------------------- */
:root[data-theme="dark"]{
  --c-50:#171310;
  --c-100:#2A2119;
  --c-150:#241C15;
  --c-200:#1E1812;
  --c-300:#332920;
  --c-400:#3E3226;
  --c-500:#524334;
  --c-600:#8A7A68;
  --c-700:#B3A290;
  --c-800:#D8CBBA;
  --c-900:#F3E9DC;

  --m-50:#1B2622;
  --m-100:#28352F;
  --m-200:#2F4740;
  --m-300:#4A7A66;
  --m-400:#6FAE93;
  --m-500:#7FC0A4;
  --m-600:#8FCDB3;
  --m-700:#A9DBC5;
  --m-800:#C4E8D7;

  --t-50:#241D15;
  --t-100:#362C21;
  --t-200:#4A3B29;
  --t-300:#C9A06B;
  --t-400:#D6B27F;
  --t-500:#DDBF8E;
  --t-600:#E3C89A;
  --t-700:#EBD8B4;

  --ok-bg:#1C2E22;      --ok-fg:#8FD3A6;   --ok-line:#2F4B39;
  --warn-bg:#332616;    --warn-fg:#E5BC73; --warn-line:#4E3C21;
  --danger-bg:#33201D;  --danger-fg:#E79A8E; --danger-line:#4E2F2A;

  --surface:var(--c-100);
  --surface-raised:var(--c-300);
  --surface-sunken:var(--c-150);

  --shadow-xs:0 1px 2px rgba(0,0,0,.25);
  --shadow-sm:0 1px 2px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.28);
  --shadow-md:0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.45);
  --shadow-ring:0 0 0 3px var(--m-100);

  color-scheme:dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-50:#171310;
    --c-100:#2A2119;
    --c-150:#241C15;
    --c-200:#1E1812;
    --c-300:#332920;
    --c-400:#3E3226;
    --c-500:#524334;
    --c-600:#8A7A68;
    --c-700:#B3A290;
    --c-800:#D8CBBA;
    --c-900:#F3E9DC;

    --m-50:#1B2622;
    --m-100:#28352F;
    --m-200:#2F4740;
    --m-300:#4A7A66;
    --m-400:#6FAE93;
    --m-500:#7FC0A4;
    --m-600:#8FCDB3;
    --m-700:#A9DBC5;
    --m-800:#C4E8D7;

    --t-50:#241D15;
    --t-100:#362C21;
    --t-200:#4A3B29;
    --t-300:#C9A06B;
    --t-400:#D6B27F;
    --t-500:#DDBF8E;
    --t-600:#E3C89A;
    --t-700:#EBD8B4;

    --ok-bg:#1C2E22;      --ok-fg:#8FD3A6;   --ok-line:#2F4B39;
    --warn-bg:#332616;    --warn-fg:#E5BC73; --warn-line:#4E3C21;
    --danger-bg:#33201D;  --danger-fg:#E79A8E; --danger-line:#4E2F2A;

    --surface:var(--c-100);
    --surface-raised:var(--c-300);
    --surface-sunken:var(--c-150);

    --shadow-xs:0 1px 2px rgba(0,0,0,.25);
    --shadow-sm:0 1px 2px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.28);
    --shadow-md:0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.45);
    --shadow-ring:0 0 0 3px var(--m-100);

    color-scheme:dark;
  }
}

/* ============================================================================
   2. 레거시 변수 별칭
   각 페이지의 <style>에 남아 있는 고유 규칙들이 아래 이름을 참조합니다.
   이름을 바꾸지 말 것 — 계산기 3종과 아티클 개별 스타일이 전부 깨집니다.
   ========================================================================== */
:root{
  --mint:var(--m-400);
  /* --mint-strong 는 '민트 틴트 위에 얹는 글자색'으로 주로 쓰입니다.
     m-600 은 라이트 모드에서 대비가 3.1:1 밖에 안 나와 m-700 으로 잡습니다. */
  --mint-strong:var(--m-700);
  --mint-tint:var(--m-100);
  --tan:var(--t-300);
  /* --mint-strong 과 같은 이유. t-600 은 탠 틴트 위에서 3.5:1 밖에 안 나옵니다. */
  --tan-strong:var(--t-700);
  --tan-tint:var(--t-100);
  --shadow:var(--shadow-md);
}

/* ============================================================================
   3. 리셋 / 기본
   ========================================================================== */
*{ box-sizing:border-box; }

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

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  word-break:keep-all;
  overflow-wrap:break-word;
}

a{ color:inherit; }

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

:where(button, input, select, textarea){ font-family:inherit; }

:where(a, button, input, select, [tabindex]):focus-visible{
  outline:2px solid var(--m-600);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

::selection{ background:var(--m-200); color:var(--c-900); }

/* 아이콘 SVG 공통 표현 속성.
   페이지마다 8개씩 붙던 fill/stroke/linecap 속성을 여기로 모았습니다
   (마크업에는 viewBox 와 aria-hidden 만 남습니다). */
.brand-mark svg,
.icon-btn svg,
.tabbar svg,
.search-box .icon svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================================================================
   4. 사이트 크롬
   ========================================================================== */

/* --- 상단 헤더 -------------------------------------------------------------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  max-width:var(--wrap);
  margin:0 auto;
  padding:12px 16px 10px;
  display:flex;
  flex-direction:column;
  gap:9px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .site-nav{ background:var(--bg); }
}

.site-nav .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.01em;
  text-decoration:none;
  color:var(--text);
}
.brand .brand-mark{
  flex:0 0 auto;
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:linear-gradient(140deg, var(--m-400), var(--m-600));
  color:#fff;
  box-shadow:var(--shadow-xs);
}
.brand .brand-mark svg{ width:15px; height:15px; display:block; }

.header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

.icon-btn{
  flex:0 0 auto;
  width:36px; height:36px;
  border-radius:11px;
  border:1.5px solid var(--line);
  background:var(--surface-raised);
  color:var(--text-soft);
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-xs);
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease, transform .12s ease;
}
.icon-btn svg{ width:17px; height:17px; display:block; }
.icon-btn:hover{ border-color:var(--m-400); color:var(--m-600); }
.icon-btn:active{ transform:scale(.94); }

/* --- 상단 내비 (알약) -------------------------------------------------------- */
.nav-links{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  font-size:12.5px;
  padding-bottom:1px;
  margin:0 -16px;
  padding-left:16px;
  padding-right:16px;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:6px 13px;
  border-radius:var(--radius-full);
  background:var(--surface-raised);
  border:1.5px solid var(--line);
  text-decoration:none;
  color:var(--text-soft);
  font-weight:700;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.nav-links a:hover{ border-color:var(--m-300); color:var(--m-600); }
.nav-links a.current{
  background:var(--mint-tint);
  color:var(--mint-strong);
  border-color:var(--mint-strong);
}

/* --- 모바일 하단 탭바 -------------------------------------------------------- */
.tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  display:flex;
  align-items:stretch;
  background:color-mix(in srgb, var(--surface-raised) 92%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(74,63,53,.06);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .tabbar{ background:var(--surface-raised); }
}
.tabbar a{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-decoration:none;
  color:var(--text-faint);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:-.02em;
  padding:7px 2px 6px;
  transition:color .15s ease;
}
.tabbar a svg{ width:20px; height:20px; display:block; }
.tabbar a .tab-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tabbar a.current{ color:var(--m-600); }
.tabbar a:active{ opacity:.6; }

body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px){
  .tabbar{ display:none; }
  body{ padding-bottom:0; }
}

/* --- 푸터 -------------------------------------------------------------------- */
.site-footer{
  max-width:var(--wrap);
  margin:0 auto;
  padding:22px 16px 40px;
  border-top:1px solid var(--line-soft);
  margin-top:14px;
}
.footer-links{
  display:flex;
  gap:10px 14px;
  flex-wrap:wrap;
  font-size:12px;
  margin-bottom:12px;
}
.footer-links a{
  text-decoration:none;
  color:var(--text-soft);
  font-weight:600;
}
.footer-links a:hover{ color:var(--m-600); }
.footer-owner{
  font-size:11.5px;
  color:var(--text-soft);
  line-height:1.7;
  margin:0 0 6px;
}
.footer-owner a{ color:var(--text-soft); }
.copyright{
  font-size:11.5px;
  color:var(--text-faint);
  line-height:1.6;
  margin:0;
}

/* ============================================================================
   5. 아티클
   ========================================================================== */
.article-wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:14px 16px 40px;
}

.breadcrumb{
  font-size:12px;
  color:var(--text-faint);
  margin-bottom:10px;
}
.breadcrumb a{ text-decoration:none; color:var(--text-faint); }
.breadcrumb a:hover{ color:var(--m-600); }

.tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:var(--mint-strong);
  background:var(--mint-tint);
  padding:3px 10px;
  border-radius:var(--radius-full);
  margin-bottom:10px;
  letter-spacing:-.01em;
}

.article-wrap h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.025em;
  margin:0 0 8px;
  text-wrap:balance;
  line-height:1.32;
}
.meta{
  font-size:12.5px;
  color:var(--text-faint);
  margin-bottom:22px;
}

.article-wrap h2{
  font-size:18.5px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.4;
  margin:34px 0 12px;
  padding-left:12px;
  border-left:4px solid var(--m-400);
}
.article-wrap h3{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  margin:20px 0 7px;
  color:var(--mint-strong);
}
.article-wrap p{
  font-size:15px;
  line-height:1.85;
  color:var(--text);
  margin:0 0 14px;
}
.article-wrap ol,
.article-wrap ul{
  margin:0 0 14px;
  padding-left:20px;
  font-size:15px;
  line-height:1.85;
}
.article-wrap p:last-child{ margin-bottom:0; }
.article-wrap li{ margin-bottom:6px; }
.article-wrap li::marker{ color:var(--m-500); }
.article-wrap strong{ color:var(--tan-strong); font-weight:800; }
/* 본문 링크만 강조합니다.
   `.article-wrap a` 전체를 잡으면 특이도(0,3,1)가 `.toc ol > li > a`(0,1,3)를
   이겨서 목차·관련글·빵부스러기 링크까지 밑줄 민트색이 되어버립니다. */
.article-wrap p > a,
.article-wrap li > a,
.article-wrap td > a{
  color:var(--m-700);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--m-300);
  text-underline-offset:3px;
}

/* --- 표 ---------------------------------------------------------------------- */
.table-scroll,
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:16px 0 20px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--surface-raised);
}
.article-wrap table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font-size:13.5px;
  margin:0;
}
.article-wrap th,
.article-wrap td{
  padding:11px 13px;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  line-height:1.6;
  color:var(--text);
}
.article-wrap tbody tr:nth-child(even) td{ background:var(--surface-sunken); }
.article-wrap tr:last-child td{ border-bottom:none; }
.article-wrap th{
  background:var(--mint-tint);
  color:var(--mint-strong);
  font-weight:800;
  white-space:nowrap;
  border-bottom:1px solid var(--m-200);
}

/* --- 인용 / 출처 -------------------------------------------------------------- */
.article-wrap blockquote{
  margin:28px 0 8px;
  padding:16px 18px;
  border-left:4px solid var(--mint-strong);
  background:var(--mint-tint);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.article-wrap blockquote p{
  margin:0 0 8px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--text-soft);
}
.article-wrap blockquote p:last-child{ margin-bottom:0; }
.article-wrap blockquote strong{ color:var(--text); }

/* --- 콜아웃 ------------------------------------------------------------------- */
.callout{
  background:var(--tan-tint);
  border:1px solid var(--t-200);
  border-radius:var(--radius-md);
  padding:14px 16px;
  font-size:13px;
  color:var(--text-soft);
  line-height:1.75;
  margin:20px 0;
}
.callout strong{ color:var(--tan-strong); }

.note{
  font-size:12px;
  color:var(--text-faint);
  line-height:1.6;
  padding:0 4px;
  text-align:center;
}

/* 응급·주의 안내 박스. 건강 관련 글에서 "이럴 땐 병원에 가세요" 용도로 씁니다.
   --danger-* 토큰이 라이트/다크 양쪽에 정의돼 있어 별도 다크 대응이 필요 없습니다. */
.warning{
  background:var(--danger-bg);
  border:1px solid var(--danger-line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  font-size:13.5px;
  color:var(--danger-fg);
  line-height:1.8;
  margin:20px 0;
}
.warning strong{ color:var(--danger-fg); font-weight:800; }
.warning ul{
  margin:8px 0 0;
  padding-left:19px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--danger-fg);
}
.warning li{ margin-bottom:5px; }
.warning li:last-child{ margin-bottom:0; }
.warning li::marker{ color:var(--danger-fg); }

/* --- FAQ ---------------------------------------------------------------------
   두 가지 마크업을 모두 지원합니다.
     아티클  : .faq-item > h3 + p
     계산기  : .faq-item > p.faq-q + p.faq-a
   -------------------------------------------------------------------------- */
.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:15px 17px;
  margin-bottom:10px;
}
.faq-item:last-child{ margin-bottom:0; }
/* 질문 규칙은 반드시 `.faq-item .faq-q`(0,2,0) 형태로 두세요.
   `.faq-q`(0,1,0) 로만 쓰면 아래 `.faq-item p`(0,1,1) 에 특이도로 밀려
   질문이 답변과 같은 색·크기로 렌더링됩니다. */
.faq-item h3,
.faq-item .faq-q{
  margin:0 0 6px !important;
  font-size:14.5px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:1.55 !important;
  border-left:none !important;
  padding-left:0 !important;
}
.faq-item p,
.faq-item .faq-a{
  margin:0 !important;
  font-size:13.5px !important;
  color:var(--text-soft) !important;
  line-height:1.8 !important;
}

/* --- CTA ---------------------------------------------------------------------- */
.cta{
  display:block;
  text-align:center;
  text-decoration:none;
  background:linear-gradient(135deg, var(--m-100), var(--m-200));
  color:var(--mint-strong);
  font-weight:800;
  font-size:14.5px;
  border:1.5px solid var(--m-400);
  border-radius:var(--radius-md);
  padding:15px;
  margin:26px 0 6px;
  box-shadow:var(--shadow-xs);
  transition:transform .12s ease, box-shadow .15s ease;
}
.cta:hover{ box-shadow:var(--shadow-sm); }
.cta:active{ transform:scale(.99); }
.cta.secondary{
  background:var(--surface-raised);
  color:var(--text-soft);
  border-color:var(--line);
}

/* ============================================================================
   6. 허브 (guides.html · gear.html)
   ========================================================================== */
/* 주의: header.top 은 허브가 아니라 계산기(index · feeding-schedule)의 앱 헤더
   클래스입니다. 각 페이지가 자체 정의를 가지고 있으므로 여기서 건드리지 않습니다. */
.lede{
  font-size:14px;
  color:var(--text-soft);
  line-height:1.7;
  margin:0 0 22px;
}

.search-box{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--surface-raised);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:11px 15px;
  margin-bottom:14px;
  box-shadow:var(--shadow-xs);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-box:focus-within{
  border-color:var(--m-400);
  box-shadow:var(--shadow-ring);
}
.search-box input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-family:inherit; font-size:15px; color:var(--text);
}
.search-box input::placeholder{ color:var(--text-faint); }
.search-box .icon{ font-size:15px; color:var(--text-faint); flex:0 0 auto; display:flex; }
.search-box .icon svg{ width:16px; height:16px; }

.filter-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.filter-chip{
  font-size:12px; font-weight:700;
  padding:6px 13px;
  border-radius:var(--radius-full);
  border:1.5px solid var(--line);
  background:var(--surface-raised);
  color:var(--text-soft);
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-chip:hover{ border-color:var(--m-300); color:var(--m-600); }
.filter-chip.active{
  background:var(--mint-tint);
  color:var(--mint-strong);
  border-color:var(--mint-strong);
}

.no-results{
  display:none; text-align:center; padding:30px 10px;
  color:var(--text-soft); font-size:13.5px;
}
.no-results.show{ display:block; }

.guide-list{ display:flex; flex-direction:column; gap:12px; }
.guide-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .18s ease, border-color .16s ease;
}
.guide-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--m-300);
}
.guide-card.hidden{ display:none; }
.guide-card .tag{ margin-bottom:8px; }
.guide-card h2{
  font-size:17px; font-weight:800; letter-spacing:-.02em;
  margin:0 0 6px;
  border-left:none; padding-left:0;
}
.guide-card p{ font-size:13.5px; color:var(--text-soft); line-height:1.7; margin:0; }
.guide-card .arrow{
  font-size:12.5px; color:var(--mint-strong); font-weight:700;
  margin-top:10px; display:block;
}

/* ============================================================================
   7. 계산기 공용
   ========================================================================== */
/* margin auto 는 빼지 마세요. index.html 은 body 가 flex 라 가운데 정렬되지만,
   feeding-schedule.html 은 그렇지 않아 이게 없으면 화면 왼쪽에 붙습니다. */
.app{
  width:100%;
  max-width:var(--wrap-app);
  margin-left:auto;
  margin-right:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

section.card,
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
}

.section-label{
  font-size:12.5px;
  font-weight:800;
  color:var(--text-soft);
  letter-spacing:.02em;
  margin:0 0 4px;
}

.stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}
.stat{
  border-radius:var(--radius-md);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.stat .label{ font-size:11.5px; font-weight:700; color:var(--text-soft); }
.stat .value{ font-size:22px; font-weight:800; letter-spacing:-.02em; }
.stat .value .u{ font-size:13px; font-weight:700; margin-left:1px; }

.info-card h2{
  font-size:16.5px; font-weight:800; letter-spacing:-.02em;
  margin:0 0 8px; border-left:none; padding-left:0;
}
.info-card h2:not(:first-child){ margin-top:22px; }
.info-card h3{ font-size:14px; font-weight:800; margin:14px 0 5px; color:var(--mint-strong); }
.info-card p{ font-size:14px; line-height:1.75; color:var(--text); margin:0 0 10px; }
.info-card .formula{
  font-size:13.5px; font-weight:700;
  background:var(--mint-tint); color:var(--mint-strong);
  border-radius:var(--radius-sm); padding:11px 13px; margin:0 0 12px;
  text-align:center;
}

.stepper{
  display:flex; align-items:center; gap:10px;
}
.stepper button{
  width:38px; height:38px;
  border-radius:11px;
  border:1.5px solid var(--line);
  background:var(--surface-raised);
  color:var(--text);
  font-size:19px; font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, transform .12s ease;
}
.stepper button:hover{ border-color:var(--m-400); }
.stepper button:active{ transform:scale(.94); }
.stepper .count-value{ font-size:16px; font-weight:800; min-width:34px; text-align:center; }

/* ============================================================================
   8. 목차(TOC) · 관련글
   (기존 article-extras.css 내용을 흡수)
   ========================================================================== */
.toc{
  display:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin:4px 0 22px;
}
.toc.has-items{ display:block; }
.toc .toc-title{
  font-size:12.5px; font-weight:800; color:var(--mint-strong);
  margin:0 0 8px; display:flex; align-items:center; gap:6px;
}
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc ol > li{ counter-increment:toc; margin:0 0 6px; }
.toc ol > li:last-child{ margin-bottom:0; }
.toc ol > li > a{
  font-size:13.5px; font-weight:700; text-decoration:none; color:var(--text);
  display:flex; gap:6px;
}
.toc ol > li > a::before{
  content:counter(toc); flex:0 0 auto; color:var(--mint-strong); font-weight:800;
}
.toc ol > li > a:hover{ color:var(--mint-strong); }
.toc ul.toc-sub{
  list-style:none; margin:6px 0 0; padding-left:20px;
  display:flex; flex-direction:column; gap:5px;
}
.toc ul.toc-sub li a{
  font-size:12.5px; font-weight:600; text-decoration:none; color:var(--text-soft);
}
.toc ul.toc-sub li a:hover{ color:var(--mint-strong); }

.related-posts{ margin:34px 0 6px; }
.related-posts .related-title{ font-size:15px; font-weight:800; margin:0 0 12px; }
.related-posts .related-list{ display:flex; flex-direction:column; gap:10px; }
.related-posts .related-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; box-shadow:var(--shadow-xs);
  transition:transform .16s ease, box-shadow .18s ease, border-color .16s ease;
}
.related-posts .related-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--m-300);
}
.related-posts .related-card .tag{
  display:inline-block; font-size:10.5px; font-weight:700; color:var(--tan-strong);
  background:var(--tan-tint); padding:2px 8px; border-radius:var(--radius-full); margin-bottom:6px;
}
.related-posts .related-card h3{
  font-size:14.5px; font-weight:800; margin:0 0 4px;
  color:var(--text); border-left:none; padding-left:0;
}
.related-posts .related-card p{ font-size:12.5px; color:var(--text-soft); line-height:1.6; margin:0; }

/* ============================================================================
   9. 데스크톱 레이아웃
   모바일 우선으로 짜여 있어, 넓은 화면에서만 여유를 더합니다.
   ========================================================================== */
@media (min-width: 768px){
  .site-nav{ padding:16px 20px 12px; }
  .nav-links{ flex-wrap:wrap; overflow:visible; margin:0; padding-left:0; padding-right:0; }
  .article-wrap{ padding:18px 20px 56px; }
  .article-wrap h1{ font-size:31px; }
  .article-wrap h2{ font-size:20px; margin-top:40px; }
  .article-wrap p,
  .article-wrap ol,
  .article-wrap ul{ font-size:15.5px; }
  .site-footer{ padding:26px 20px 48px; }
}

/* 데스크톱 2열(본문 + 고정 목차) 레이아웃은 의도적으로 넣지 않았습니다.
   목차(.toc)의 부모가 페이지마다 달라(main>article 18개 / main 직속 4개 /
   목차 없음 6개) 한 가지 선택자로 못 잡고, 일부만 940px로 넓어지면
   헤더·푸터와 폭이 어긋납니다. 본문 640px 한 줄 길이가 가독성에도 더 낫습니다. */

/* ============================================================================
   접근성 — 모션 최소화 설정 존중
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}