/* =========================================================================
 * magazine.css  —  두칭 /brain/ 웹 전용 매거진 스타일 (앱 매거진과 분리)
 * 작성일: 2026-06-23  /  작성: A2 매거진 에이전트 (Claude)
 * 목적: /brain/ 공개 웹 매거진 아티클 페이지 공통 스타일
 *       (시니어 고가독 + AdSense 슬롯 + 앱 설치 CTA + SEO)
 * 비고: 앱(/brainapp)의 style.css 와 별개 파일. 본 파일만 매거진 전용.
 *       하단에 스타일 변형 3종(.style-a / .style-b / .style-c) 구분 주석.
 * 변경이력:
 *   2026-06-23  최초 작성(샘플 3종용 공통 베이스 + 변형)  - Claude
 * ========================================================================= */

/* ---- 0. 기본/리셋 (2026-06-23) ---- */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Malgun Gothic","맑은 고딕",sans-serif;
  color:#222; background:#f4f5f7; line-height:1.75;
  -webkit-text-size-adjust:100%;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
.mz-wrap { max-width:520px; margin:0 auto; background:#fff; min-height:100vh; }

/* ---- 1. 상단 네비/브레드크럼 (웹 전용 — 앱 history.back 대체) (2026-06-23) ---- */
.mz-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:20;
}
.mz-nav .home { font-weight:800; color:#2E9E5B; font-size:18px; }
.mz-nav .crumb { font-size:14px; color:#888; }

/* ---- 2. 오디오 낭독 버튼 (상단 고정 위치) (2026-06-23) ---- */
.mz-audio {
  display:flex; align-items:center; gap:12px; margin:16px;
  padding:14px 18px; border-radius:14px; background:#2E9E5B; color:#fff; cursor:pointer;
  box-shadow:0 4px 14px rgba(46,158,91,.25);
}
.mz-audio .ico { font-size:46px; line-height:1; }  /* 헤드폰 아이콘 확대 (2026-06-24) */
.mz-audio .txt b { font-size:17px; }
.mz-audio .txt span { font-size:13px; opacity:.9; display:block; }
/* 재생/정지 버튼 — magazine.js가 주입, 상태에 따라 ▶ / ❚❚ (2026-06-24) */
.mz-audio .play{margin-left:auto;flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#fff;color:#2E9E5B;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.22);}
.mz-audio.playing .play{color:#E8590C;}

/* ---- 3. 히어로/인트로 (2026-06-23) ---- */
.mz-hero img { width:100%; }
.mz-intro { padding:22px 18px 8px; }
.mz-intro .title { font-size:26px; font-weight:800; line-height:1.4; margin-bottom:14px; word-break:keep-all; }
.mz-intro .desc { font-size:18px; color:#333; white-space:pre-line; }

/* ---- 4. 본문 섹션 (2026-06-23) ---- */
.mz-section { padding:10px 18px 18px; }
.mz-section .subject { display:flex; align-items:center; gap:10px; margin:18px 0 12px; }
.mz-section .subject .num {
  width:34px; height:34px; border-radius:50%; background:#2E9E5B; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; flex:0 0 auto;
}
.mz-section .subject h2 { font-size:21px; font-weight:800; word-break:keep-all; }
.mz-section .photo { border-radius:14px; overflow:hidden; margin:10px 0; }
.mz-section .photo img { width:100%; }  /* item 이미지 풀폭 채움 (2026-06-24) */
.mz-section .desc { font-size:18px; color:#333; white-space:pre-line; }

/* ---- 5. AdSense 슬롯 (2026-06-23) ----
 * 실서비스: 아래 .mz-ad 안에 AdSense <ins class="adsbygoogle" ...> 삽입.
 * 샘플: 광고 위치를 명확히 보이도록 라벨 박스로 표기. */
.mz-ad {
  margin:18px; min-height:110px; border:2px dashed #cdd5db; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fafbfc; color:#9aa6b0; text-align:center; padding:14px;
}
.mz-ad .lbl { font-size:12px; letter-spacing:.04em; }
.mz-ad .ph { font-size:15px; font-weight:700; margin-top:4px; }

/* ---- 6. 앱 설치 CTA (전환 핵심) (2026-06-23) ---- */
.mz-cta {
  margin:18px; padding:22px 18px; border-radius:18px; text-align:center;
  background:linear-gradient(135deg,#14233A,#2E9E5B); color:#fff;
}
.mz-cta h3 { font-size:21px; font-weight:800; line-height:1.4; margin-bottom:6px; word-break:keep-all; }
.mz-cta p { font-size:15px; opacity:.92; margin-bottom:16px; }
.mz-cta .stores { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.mz-cta .store-btn {
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:#14233A;
  font-weight:800; font-size:16px; padding:14px 20px; border-radius:12px; min-height:52px;
}
.mz-cta .store-btn .ico { font-size:20px; }

/* 하단 고정(sticky) CTA 바 — 샘플 A 전용 (2026-06-23) */
.mz-sticky {
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
  max-width:520px; margin:0 auto; padding:12px 16px;
  background:#14233A; color:#fff; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:0 -4px 16px rgba(0,0,0,.18);
}
.mz-sticky .t { font-size:15px; font-weight:700; }
.mz-sticky .b { background:#2E9E5B; color:#fff; font-weight:800; padding:12px 18px; border-radius:10px; font-size:15px; white-space:nowrap; }

/* ---- 7. 슬로건/로고 (2026-06-23) ---- */
.mz-slogan { text-align:center; padding:64px 18px 14px; }
.mz-slogan h3 { font-size:24px; line-height:1.45; font-weight:800; color:#2E9E5B; }
.mz-slogan p { font-size:14px; color:#888; margin-top:4px; }
.mz-slogan .logo img { width:168px; margin:18px auto 0; }

/* ---- 8. 매거진 더보기 (내부링크 — 진성 탐색) (2026-06-23) ---- */
.mz-more { padding:18px; }
.mz-more h3 { font-size:19px; font-weight:800; margin-bottom:12px; }
.mz-more ul { display:grid; grid-template-columns:1fr 1fr; gap:10px; list-style:none; }
.mz-more li img { border-radius:12px; }

/* ---- 9. 푸터 (2026-06-23) ---- */
.mz-foot { padding:22px 18px 90px; text-align:center; color:#aaa; font-size:12px; border-top:1px solid #eee; }
.mz-foot a { color:#2E9E5B; }

/* =========================================================================
 * 스타일 변형 3종 (샘플 비교용) — 2026-06-23
 *  .style-a  상단 강전환형 : 인사이트보다 전환 우선(상단 CTA + 하단 sticky 강조)
 *  .style-b  인콘텐츠 자연형 : 콘텐츠 몰입 + 섹션 사이 자연 삽입
 *  .style-c  시니어 최적형 : 초대형 글자·큰 버튼·고대비, 단순 레이아웃
 * ========================================================================= */

/* style-a : 전환 강조 — CTA 더 크게, 액센트 강하게 */
.style-a .mz-cta { background:linear-gradient(135deg,#E8590C,#F08C00); }
.style-a .mz-cta .store-btn { color:#E8590C; }
.style-a .mz-sticky { display:flex; }

/* style-b : 콘텐츠 자연형 — CTA를 카드처럼 본문에 녹임, 차분한 톤 */
.style-b .mz-cta { background:#fff; color:#14233A; border:2px solid #2E9E5B; }
.style-b .mz-cta p { color:#555; opacity:1; }
.style-b .mz-cta .store-btn { background:#2E9E5B; color:#fff; }
.style-b .mz-ad { border-style:solid; border-color:#e6eaed; }
/* style-b 글자 확대 — 시니어 고가독(샘플 C 수준 글자 크기). 색/톤·레이아웃은 B 그대로 (2026-06-23) */
.style-b .mz-intro .title { font-size:30px; }
.style-b .mz-intro .desc, .style-b .mz-section .desc { font-size:21px; line-height:1.85; }
.style-b .mz-section .subject h2 { font-size:24px; }
.style-b .mz-cta h3 { font-size:24px; }
.style-b .mz-cta .store-btn { font-size:18px; padding:18px 24px; min-height:60px; width:100%; justify-content:center; }
.style-b .mz-audio .txt b { font-size:19px; }

/* style-c : 시니어 최적 — 글자/버튼 초대형, 고대비 */
.style-c { background:#fff; }
.style-c .mz-wrap { max-width:560px; }
.style-c .mz-intro .title { font-size:30px; }
.style-c .mz-intro .desc, .style-c .mz-section .desc { font-size:21px; color:#1a1a1a; line-height:1.85; }
.style-c .mz-section .subject h2 { font-size:24px; }
.style-c .mz-cta h3 { font-size:24px; }
.style-c .mz-cta .store-btn { font-size:18px; padding:18px 24px; min-height:60px; width:100%; justify-content:center; }
.style-c .mz-audio .txt b { font-size:19px; }

/* =========================================================================
 * 매거진 허브/리스트 + 공통 헤더 네비 (2026-06-23 추가)
 *  /brain/magazine/ 아티클 누적 리스트 + 허브·아티클 공통 상단 네비
 * ========================================================================= */
/* 공통 헤더 (메인·허브·아티클 공통) — 2026-06-23 탭 구조로 변경
 *  로고=홈(/brain/, 기본=두칭이란 탭) / 탭바: [두칭이란] [매거진] (현재 탭 활성) */
.mz-header{position:sticky;top:0;z-index:30;background:#fff;max-width:560px;margin:0 auto;border-bottom:1px solid #eee;transition:transform .25s ease;}
.mz-header.hide{transform:translateY(-105%);}
.mz-topnav{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;}
.mz-topnav .brand{font-weight:800;color:#2E9E5B;font-size:18px;}
.mz-topnav .brand img{height:27px;display:block;}  /* 홈 메인 로고 PNG (2026-06-23) */
.mz-topnav .cta{color:#fff;background:#2E9E5B;padding:8px 15px;border-radius:9px;font-weight:800;font-size:15px;white-space:nowrap;box-shadow:0 3px 10px rgba(46,158,91,.35);}  /* 앱설치 버튼 강조·확대 (2026-06-24) */
.mz-tabbar{display:flex;gap:4px;padding:0 10px;}
.mz-tabbar a{font-size:15px;font-weight:800;color:#999;padding:9px 13px;border-bottom:3px solid transparent;}
.mz-tabbar a.on{color:#2E9E5B;border-bottom-color:#2E9E5B;}
/* 허브 헤더 — 제목 + 부제목 한 줄(옆으로) (2026-06-23) */
.mz-hubhead{max-width:560px;margin:0 auto;padding:18px 18px 8px;background:#fff;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.mz-hubhead h1{font-size:26px;font-weight:800;}
.mz-hubhead p{font-size:14px;color:#888;}
/* 카테고리 탭 (가로 스크롤) */
.mz-cat{max-width:560px;margin:0 auto;background:#fff;display:flex;gap:8px;overflow-x:auto;padding:12px 16px;border-bottom:1px solid #eee;}
.mz-cat a{flex:0 0 auto;font-size:15px;font-weight:700;color:#555;background:#f1f3f5;padding:8px 16px;border-radius:20px;white-space:nowrap;}
.mz-cat a.on{background:#2E9E5B;color:#fff;}
/* 롤링(추천) 가로 스크롤 */
.mz-rolling{max-width:560px;margin:0 auto;background:#fff;display:flex;gap:10px;overflow-x:auto;padding:14px 16px;}
.mz-rolling a{flex:0 0 78%;}
.mz-rolling img{width:100%;height:160px;object-fit:cover;border-radius:14px;display:block;}  /* 롤링 배너 높이 고정(거대화 방지) (2026-06-24) */
/* 아티클 카드 리스트 (누적·최신순) */
.mz-list2{max-width:560px;margin:0 auto;background:#fff;padding:6px 14px 10px;}
.mz-list2 .card{display:flex;gap:12px;padding:14px 4px;border-bottom:1px solid #f0f0f0;align-items:stretch;}
.mz-list2 .card .thumb{flex:0 0 116px;}/* 폭 고정 (2026-06-24) */
/* 이미지가 카드 높이(제목~마지막 태그)에 맞춰 늘어나고, 제목보다 위로 안 올라감 (2026-06-24) */
.mz-list2 .card .thumb img{border-radius:12px;width:116px;height:100%;object-fit:cover;display:block;}
.mz-list2 .card .body h3{font-size:18px;font-weight:800;line-height:1.35;word-break:keep-all;}
.mz-list2 .card .body .sub{font-size:14px;color:#888;margin-top:5px;line-height:1.4;word-break:keep-all;}  /* 카드 소제목 (2026-06-24) */
.mz-list2 .card .body .tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.mz-list2 .card .body .tags span{font-size:12px;color:#2E9E5B;background:#eaf6ef;padding:3px 8px;border-radius:6px;}
.mz-list2 .card .body .new{font-size:11px;color:#fff;background:#E8590C;padding:2px 7px;border-radius:5px;font-weight:800;margin-right:6px;}
.mz-more-btn{max-width:560px;margin:0 auto;padding:6px 16px 30px;background:#fff;}
.mz-more-btn a{display:block;text-align:center;font-weight:800;color:#2E9E5B;border:2px solid #2E9E5B;border-radius:12px;padding:14px;font-size:16px;}
/* 아티클 브레드크럼 (헤더 탭바 아래) (2026-06-23) */
.mz-crumb{max-width:560px;margin:0 auto;padding:9px 16px;font-size:13px;color:#888;background:#fff;display:flex;align-items:center;}
.mz-crumb a{color:#888;font-weight:700;}
.mz-crumb .mz-back{color:#1a1a1a;font-weight:800;margin-right:auto;text-decoration:none;font-size:19px;}

/* =========================================================================
 * AdSense 슬롯 — 승인 전 두칭 하우스 배너(앱설치/매거진 추천) (2026-06-24)
 *  승인 후: 같은 .mz-ad 자리에 AdSense <ins class="adsbygoogle"> 코드로 교체.
 *  .mz-house = 승인 전 임시 자체 배너(빈 공백 방지 + 앱 전환).
 * ========================================================================= */
.mz-ad.mz-house{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  text-align:left;min-height:0;padding:16px 18px;border:none;border-radius:16px;
  background:linear-gradient(135deg,#eaf6ef,#d6efdf);box-shadow:0 5px 16px rgba(46,158,91,.20);}
.mz-ad.mz-house .lbl{flex:0 0 auto;font-size:13px;font-weight:800;color:#fff;background:#2E9E5B;padding:7px 14px;border-radius:20px;letter-spacing:0;}
.mz-ad.mz-house .ph{flex:1;font-size:16px;font-weight:800;color:#14233A;margin:0;line-height:1.4;}
.mz-ad.mz-house::after{content:"\203A";font-size:28px;color:#2E9E5B;font-weight:900;flex:0 0 auto;line-height:1;}
/* 게시일 표시 (헤더 아래, 날짜 있는 글만) (2026-06-24) */
.mz-date{max-width:560px;margin:0 auto;background:#fff;padding:2px 18px 0;font-size:13px;color:#aaa;text-align:right;}
/* 맨 위로 버튼 — 스크롤 후 노출 (2026-06-24) */
.mz-top{position:fixed;right:16px;bottom:20px;z-index:50;width:50px;height:50px;border-radius:50%;
  background:#14233A;color:#fff;border:none;display:none;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;}
.mz-top.show{display:flex;}

.mz-cta .cta-promo{display:block;width:100%;border-radius:14px;margin-bottom:18px;}
/* 이어보기(주제 순환 배너) 2026-06-25 v11 - 아래3줄 17px·볼드제거 */
.mz-next{padding:0 18px;margin:28px 0 12px;}
.mz-next h3{font-size:20px;color:#14233A;margin:0 0 16px;font-weight:800;}
.mz-next a{display:flex;align-items:center;gap:22px;padding:30px 26px;background:#fff6e3;border:1.5px solid #ffce7a;border-radius:20px;text-decoration:none;box-shadow:0 3px 14px rgba(255,170,40,.15);}
.mz-next a .thumb{flex:0 0 auto;width:138px;height:138px;border-radius:14px;object-fit:cover;}
.mz-next a .txt{display:flex;flex-direction:column;min-width:0;}
.mz-next a .hook{font-size:22px;font-weight:800;color:#1a1a1a;line-height:1.4;word-break:keep-all;}
.mz-next a .sub{font-size:17px;font-weight:400;color:#1a1a1a;line-height:1.4;margin-top:9px;word-break:keep-all;}
.mz-next a .bridge{font-size:17px;font-weight:400;color:#1a1a1a;line-height:1.4;margin-top:20px;word-break:keep-all;}
.mz-next a .ttl{font-size:17px;font-weight:400;color:#2E9E5B;line-height:1.4;margin-top:6px;word-break:keep-all;}
.mz-next a .ttl::after{content:" \203A";color:#2E9E5B;font-weight:900;}