/**
 * guide/guide.css — Sprint 16
 * 로그인 없이 보는 공개 콘텐츠 페이지(육아 정보 가이드 / 정책 페이지) 전용 스타일.
 * 앱 본체(css/main.css 등)와는 독립적으로 동작 — SEO를 위해 순수 정적 HTML로 서빙되는
 * 페이지라, 앱 전용 스타일(topbar/캘린더 그리드 등)을 끌어오지 않고 필요한 것만 담음.
 * 색상·타이포는 UI_GUIDELINE.md의 브랜드 톤을 그대로 따름.
 */

/* v0.0.3: 앱 본체와 동일하게 손글씨 폰트 "온글잎 박다현체"로 전면 교체.
   Regular 굵기 파일만 있어서 제목/로고도 font-weight:normal로 통일함 (css/main.css와 동일 정책)
   v0.0.4: 항목 설명(.g-item p)·정책 페이지 본문(.g-doc)처럼 정보성 긴 글은 손글씨 폰트가
   가독성을 해친다는 피드백 — Pretendard를 다시 불러와서 해당 텍스트에만 한정 적용
   v0.0.5: 위 "정보성 긴 글" 텍스트를 Pretendard 대신 오뮤 다예쁨체로 교체(앱 본체와 동일) */
@font-face {
  font-family: 'OwnglyphParkDahyun';
  src: url('../fonts/OwnglyphParkDahyun.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OmyuPretty';
  src: url('../fonts/OmyuPretty.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --pk:  #F06292;
  --pkl: #FFF0F5;
  --pkd: #C2185B;
  --pk2: #CE93D8;
  --mn:  #4DB6AC;
  --mnl: #E0F2F1;
  --pu:  #9575CD;
  --pul: #EDE7F6;
  --tx:  #2D2D3A;
  --txl: #8A849A;
  --bg:  #F8F4FA;
  --card: #ffffff;
  --card-shadow: 0 2px 16px rgba(160,80,140,.09);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 19px; } /* Sprint 28: 부드러운 스크롤 / v0.0.4: 전체 글자 크기 확대 / v0.0.8: 기본값 17→19px(보통) */
/* v0.0.7: 설정 탭의 글자 크기 조절이 육아정보 페이지에도 동일하게 적용되도록 앱 본체(css/main.css)와
   똑같은 값을 정의 — 값이 하나라도 어긋나면 두 곳의 글자 크기가 달라지니 항상 같이 수정할 것
   v0.0.8: 3단계 → 5단계로 확장(매우작게/작게/보통/크게/매우크게), 기본값 19px(구 "크게") */
html[data-fontsize="xs"] { font-size: 15px; }
html[data-fontsize="sm"] { font-size: 17px; }
html[data-fontsize="lg"] { font-size: 21px; }
html[data-fontsize="xl"] { font-size: 23px; }

body {
  margin: 0;
  font-family: 'OwnglyphParkDahyun', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--tx);
  line-height: 1.7;
}

/* v0.0.3: 제목(h1~h3)·로고 전부 같은 손글씨 폰트로 통일 */
h1, h2, h3 {
  font-family: 'OwnglyphParkDahyun', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-weight: 400;
}
.g-logo {
  font-family: 'OwnglyphParkDahyun', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-weight: 400;
}

a { color: var(--pkd); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 상단 헤더 ── */
.g-header {
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(240,98,146,.12);
  position: sticky; top: 0; z-index: 10;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.g-logo {
  font-size: 2.2rem; letter-spacing: -.3px; line-height: 1;
  background: linear-gradient(135deg, #F06292, #9C27B0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Sprint 24: 로고 옆 하트 이모지 대신 실제 마스코트 캐릭터 이미지
   v0.0.2: 앱 본체 topbar와 크기가 다르게 남아있던 것을 통일(1.35em → 1.9em), 로고 글씨도 확대
   v0.0.4: 앱 본체와 동일하게 마스코트 크기를 고정값으로 분리하고 글씨만 확대(1.5rem→2.2rem) */
.brand-mark {
  height: 2.85rem;
  width: auto;
  vertical-align: -.75rem;
  margin-left: 2px;
}
.g-cta {
  background: linear-gradient(135deg, #F06292, #9C27B0);
  color: #fff; font-weight: 600; font-size: .82rem;
  padding: 9px 16px; border-radius: 40px;
  box-shadow: 0 4px 14px rgba(200,80,180,.28);
}
.g-cta:hover { opacity: .88; text-decoration: none; }

/* ── 히어로 ── */
.g-hero {
  background: linear-gradient(135deg, #F48FB1 0%, #CE93D8 50%, #90CAF9 100%);
  color: #fff; padding: 24px 20px; text-align: center; /* v0.0.5: 배너가 너무 크다는 피드백 — 위아래 여백만 축소(40px→24px) */
}
.g-hero h1 { font-size: 1.5rem; font-weight: 900; margin: 0 0 8px; }
.g-hero p  { font-size: .9rem; opacity: .95; margin: 0; max-width: 520px; margin: 0 auto; }

/* ── 본문 레이아웃 ── */
.g-wrap { max-width: 720px; margin: 0 auto; padding: 28px 20px 60px; }

.g-breadcrumb { font-size: .78rem; color: var(--txl); margin-bottom: 18px; }
.g-breadcrumb a { color: var(--txl); }

.g-intro {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow);
  padding: 20px 22px; margin-bottom: 26px; font-size: .88rem; color: var(--tx); font-weight: 600;
  font-family: 'OmyuPretty', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* v0.0.6: 정보 글 폰트 통일 */
}

/* ── 허브 페이지: 카테고리 카드 ── */
.g-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .g-card-grid { grid-template-columns: 1fr 1fr; } }

.g-cat-card {
  display: block; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--card-shadow); padding: 22px; transition: transform .2s, box-shadow .2s;
}
.g-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(180,80,160,.18); text-decoration: none; }
.g-cat-card .ico { font-size: 1.8rem; margin-bottom: 10px; }
.g-cat-card h2 { font-size: 1.02rem; font-weight: 900; margin: 0 0 6px; color: var(--tx); }
.g-cat-card p  { font-size: .8rem; color: var(--txl); margin: 0; font-weight: 700; }

/* ── 상세 콘텐츠: 월령/주차별 섹션 ── */
.g-section {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow);
  padding: 22px; margin-bottom: 18px;
  scroll-margin-top: 76px; /* Sprint 28: 탭에서 점프했을 때 sticky 헤더에 안 가리도록 */
}
.g-section h2 {
  font-size: 1rem; font-weight: 900; color: var(--pkd); margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--pkl);
}

/* ── Sprint 28: 카테고리 탭 바 — 계속 스크롤 안 해도 원하는 구간으로 바로 이동 ── */
/* Sprint 29: 항목이 많아 옆으로 넘칠 때 마우스로 잡아끌거나(드래그) 휠로도 넘길 수 있게 함 */
.g-cat-tabs {
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 18px; padding-bottom: 2px;
  cursor: grab;
}
.g-cat-tabs.dragging { cursor: grabbing; user-select: none; }
.g-cat-tabs::-webkit-scrollbar { display: none; }
.g-cat-tab {
  flex-shrink: 0; white-space: nowrap;
  padding: 8px 14px; border-radius: 40px;
  background: var(--card); border: 1.5px solid #EEE0F0;
  font-size: .78rem; font-weight: 600; color: var(--tx);
  box-shadow: var(--card-shadow);
}
.g-cat-tab:hover { border-color: var(--pk); color: var(--pkd); text-decoration: none; }

/* ── Sprint 29: 다른 육아정보 페이지로 이동하는 탭 (상단, 페이지 간 이동) ── */
.g-page-nav {
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 16px; padding-bottom: 2px; cursor: grab;
}
.g-page-nav.dragging { cursor: grabbing; user-select: none; }
.g-page-nav::-webkit-scrollbar { display: none; }
.g-page-nav-tab {
  flex-shrink: 0; white-space: nowrap;
  padding: 9px 15px; border-radius: 40px;
  background: var(--pkl); color: var(--pkd);
  font-size: .78rem; font-weight: 600;
}
.g-page-nav-tab:hover { text-decoration: none; opacity: .85; }
.g-page-nav-tab.on {
  background: linear-gradient(135deg, #F06292, #9C27B0);
  color: #fff;
}

/* ── Sprint 29: 맨 위로 가기 버튼 ── */
.g-top-btn {
  position: fixed; right: 18px; bottom: 22px; z-index: 20;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #F06292, #9C27B0);
  color: #fff; font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(200,80,180,.35);
}
.g-top-btn:hover { text-decoration: none; opacity: .9; }

.g-item { padding: 14px 0; border-bottom: 1px solid #F3EAF2; scroll-margin-top: 76px; }
.g-item:last-child { border-bottom: none; padding-bottom: 0; }
.g-item:target { background: var(--pkl); border-radius: 12px; padding: 14px 12px; margin: 0 -12px; }
.g-item h3 {
  font-size: .88rem; font-weight: 800; color: var(--tx); margin: 0 0 6px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.g-item .req { display: inline-block; background: #FFEBEE; color: #C62828; font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 8px; }
.g-item .opt { display: inline-block; background: var(--mnl); color: #00695C; font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 8px; }
.g-item p {
  font-size: .82rem; color: var(--tx); margin: 0; opacity: .88;
  font-family: 'OmyuPretty', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* v0.0.5: Pretendard→오뮤 다예쁨체 */
}

/* ── Sprint 21: 검색창 (허브 페이지 전체 검색 / 카테고리 페이지 내 검색 공용) ── */
.g-search { position: relative; margin-bottom: 22px; }
.g-search-input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; border-radius: 40px;
  border: 1.5px solid #EEE0F0; background: var(--card);
  font-family: inherit; font-size: .88rem; color: var(--tx);
  box-shadow: var(--card-shadow);
}
.g-search-input:focus { outline: none; border-color: var(--pk); }
.g-search-count { font-size: .74rem; color: var(--txl); font-weight: 700; margin: 8px 4px 0; }
.g-search-results {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow);
  max-height: 340px; overflow-y: auto; z-index: 5;
}
.g-search-results.show { display: block; }
.g-search-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid #F3EAF2; color: var(--tx);
}
.g-search-item:last-child { border-bottom: none; }
.g-search-item:hover { background: var(--pkl); text-decoration: none; }
.g-search-item-title { font-size: .84rem; font-weight: 800; }
.g-search-item-cat { font-size: .68rem; color: var(--txl); font-weight: 700; white-space: nowrap; }
.g-search-empty { padding: 16px; font-size: .8rem; color: var(--txl); text-align: center; }

/* ── 정책 페이지(개인정보처리방침/이용약관) ── */
.g-doc h2 { font-size: 1rem; font-weight: 900; color: var(--tx); margin: 26px 0 10px; }
.g-doc h2:first-child { margin-top: 0; }
.g-doc p, .g-doc li {
  font-size: .86rem; color: var(--tx);
  font-family: 'OmyuPretty', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* v0.0.5: Pretendard→오뮤 다예쁨체 */
}
.g-doc ul { padding-left: 20px; }
.g-doc .updated { font-size: .76rem; color: var(--txl); margin-bottom: 20px; }

/* ── 문의 페이지 ── */
.g-contact-box {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow);
  padding: 26px; text-align: center;
}
.g-contact-box .ico { font-size: 2rem; margin-bottom: 10px; }
.g-contact-box a.email {
  display: inline-block; margin-top: 14px; font-weight: 800; font-size: .92rem;
  background: var(--pkl); color: var(--pkd); padding: 10px 20px; border-radius: 40px;
}

/* ── 하단 네비게이션 (허브로) ── */
.g-nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0; }
.g-nav-links a {
  background: #EEE5F4; color: var(--txl); font-size: .76rem; font-weight: 800;
  padding: 8px 14px; border-radius: 40px;
}
.g-nav-links a:hover { background: var(--pkl); color: var(--pkd); text-decoration: none; }

/* ── 하단 CTA 배너 ── */
.g-cta-banner {
  background: linear-gradient(135deg, #F06292, #9C27B0); color: #fff;
  border-radius: var(--radius); padding: 26px; text-align: center; margin: 30px 0;
}
.g-cta-banner h2 { font-size: 1.05rem; font-weight: 900; margin: 0 0 8px; }
.g-cta-banner p { font-size: .82rem; opacity: .92; margin: 0 0 16px; }
.g-cta-banner a {
  display: inline-block; background: #fff; color: var(--pkd); font-weight: 600;
  font-size: .85rem; padding: 10px 22px; border-radius: 40px;
}
.g-cta-banner a:hover { text-decoration: none; opacity: .9; }

/* ── 안내 문구 ── */
.g-disclaimer {
  font-size: .74rem; color: var(--txl); background: #F5F0F6; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 24px; line-height: 1.6;
  font-family: 'OmyuPretty', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* v0.0.6: 정보 글 폰트 통일 */
}

/* ── 푸터 ── */
/* v0.0.2: 앱 본체(css/main.css의 .site-footer*)와 항상 동일한 스타일로 유지 —
   두 곳의 푸터 구조/문구/버전 표시가 어긋나지 않도록 함 */
.site-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 20px 10px;
  text-align: center;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  font-size: .72rem;
}
.site-footer-links a { color: var(--txl); }
.site-footer-version {
  text-align: center;
  padding-bottom: 40px;
  font-size: .62rem;
  color: var(--txl);
  opacity: .6;
}

/* ═══════════════════════════════════════════════════
 *  DARK MODE (v0.0.8) — 앱 본체(css/main.css)와 동일한 <html data-theme="dark"> 방식.
 *  이전 버전까지는 육아정보 페이지가 다크 모드 대상 밖이었는데, "앱과 같이 연동되면
 *  좋겠다"는 요청으로 지원 시작. 앱 본체와 반드시 같은 변수값을 유지할 것(핵심 개발 원칙 9번).
 *  단, 이 페이지엔 다크 모드를 껐다 켜는 토글이 따로 없음 — 앱 설정 탭에서 고른 값을
 *  scripts/build-guide.mjs의 head() 인라인 스크립트가 읽어서 그대로 적용만 함
 * ═══════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:  #17151D;
  --card: #221F29;
  --card-shadow: 0 2px 16px rgba(0,0,0,.4);
  --tx:  #EDE8F2;
  --txl: #9C93AC;
  --pkl: #3A2430;
  --mnl: #1E332F;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--tx); }
html[data-theme="dark"] .g-header { background: rgba(30,27,38,.95); border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .g-cat-tab,
html[data-theme="dark"] .g-search-input { border-color: rgba(255,255,255,.1); background: var(--card); color: var(--tx); }
html[data-theme="dark"] .g-nav-links a { background: #2A2733; }
html[data-theme="dark"] .g-disclaimer { background: #241F2C; }
html[data-theme="dark"] .g-item .req { background: #3A2323; color: #EF9A9A; }
html[data-theme="dark"] .g-item .opt { color: #80CBC4; }