/* iOS·인앱 브라우저(카카오톡 등)가 본문 글자를 임의로 키우는 것을 막는다.
   이 설정이 없으면 같은 CSS인데도 인앱에서만 글자가 커져 레이아웃이 무너진다.
   확대 자체를 막는 user-scalable=no·maximum-scale은 접근성상 쓰지 않는다. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; }

@font-face {
  font-family: "GmarketSans";
  src: url("/assets/gmarket-bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  /* optional: 서체가 제때 도착하면 쓰고, 늦으면 이번 화면은 그냥 기본 서체로 둔다.
     swap으로 두면 늦게 도착한 서체가 로고 폭을 바꿔 헤더 전체가 밀린다(0.0075 → 0.0803).
     preload로 같은 출처에서 미리 받으므로 거의 항상 제때 도착하고, 한 번 받으면 캐시된다. */
  font-display: optional;
}

/* TabTalk 블로그 — 랜딩과 같은 톤(Pretendard · 블루 포인트 · 화이트 카드) */
:root {
  --blue: #3182f6;
  --blue-dark: #1b64da;
  --blue-soft: #e8f3ff;
  --gray900: #191f28;
  --gray800: #333d4b;
  --gray700: #4e5968;
  --gray600: #6b7684;
  --gray500: #8b95a1;
  --gray300: #d1d6db;
  --gray200: #e5e8eb;
  --gray100: #f2f4f6;
  --bg: #f7f8fa;
  --white: #fff;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--gray900);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 네비 */
/* 스크롤바 자리 상시 예약 — 앱과 동일. 페이지 간 이동 시 헤더 로고가 좌우로 안 튄다 */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
.nav { background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray200); position: sticky; top: 0; z-index: 10; }
/* 홈화면(index.html)의 헤더와 같은 치수 — 페이지를 오갈 때 로고·탭 크기가 달라지지 않게 */
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px;
  max-width: 1120px; padding: 0 24px; /* 헤더 폭 — 전 페이지 공통(본문 760px과 무관) */ }

/* ── 로고 서체 ──
   TabTalk 워드마크만 GmarketSans Bold(700)을 쓴다(본문은 Pretendard 그대로).
   자간은 px가 아니라 em으로 준다 — 로고 크기가 화면마다 달라(20·22px)
   px로 박으면 작은 쪽에서만 과하게 붙는다. 원안의 48px/-1.5px = -0.031em. */
.brand { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1.2; /* 전 페이지 공통 */
  font-family: "GmarketSans", "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700; letter-spacing: -0.031em; color: #191f28; }
/* 헤더 로고 아이콘 — 파비콘과 같은 그림. blog.css는 styles.css를 안 불러오므로 여기에도 필요하다 */
.brand-mark { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; flex: 0 0 24px; }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 700; }
.nav-links a { color: var(--gray600); }
.nav-links a.is-active { color: var(--gray900); }
/* 홈화면 .btn과 같은 상자가 되도록 — body의 line-height(1.75)를 물려받으면
   같은 패딩이어도 2px 더 높아진다. inline-flex + line-height 1.5로 맞춘다. */
/* 카카오톡 채널 추가 — 홈과 같은 규격(공식 로고 아이콘 버튼) */
.kakao-ch { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  transition: background .15s ease; }
.kakao-ch:hover { background: var(--gray100); text-decoration: none; }
.kakao-ch img { width: 30px; height: 30px; display: block; }

.nav-feedback { border: 0; background: none; padding: 0; font-family: inherit;
  font-size: inherit; font-weight: inherit; line-height: inherit;
  color: var(--gray600); cursor: pointer; white-space: nowrap; }
.nav-feedback:hover { color: var(--gray900); }

/* 블로그 히어로 */
.blog-hero { padding: 56px 0 36px; text-align: center; }
.eyebrow { display: inline-block; background: var(--blue-soft); color: var(--blue-dark);
  font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.blog-hero h1 { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 12px; }
.blog-hero .lead { color: var(--gray600); font-size: 16.5px; margin: 0; }

/* 글 목록 */
.post-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 16px; }
.post-card[hidden] { display: none; }
/* 페이지네이션 — 목록 하단 페이지 버튼(글 20개 초과 시 노출) */
.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 48px; }
.blog-pager[hidden] { display: none; }
.pager-btn { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--gray200);
  border-radius: 12px; background: var(--white); color: var(--gray700);
  font-size: 15px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.pager-btn:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.pager-btn.is-current { background: var(--blue); border-color: var(--blue); color: #fff; cursor: default; }
.pager-btn.pager-nav { font-weight: 700; color: var(--gray600); }
.post-card { background: var(--white); border: 1px solid var(--gray200); border-radius: 18px;
  box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.09); }
.post-card a { display: block; padding: 24px 26px; color: inherit; }
.post-card a:hover { text-decoration: none; }
.post-card .tag { display: inline-block; background: var(--gray100); color: var(--gray600);
  font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.post-card h2 { font-size: 21px; font-weight: 800; margin: 12px 0 8px; line-height: 1.4; }
.post-card p { color: var(--gray600); font-size: 15px; margin: 0 0 12px; }
.post-card .meta { color: var(--gray500); font-size: 13.5px; }

/* 글 본문 */
.post { background: var(--white); border: 1px solid var(--gray200); border-radius: 20px;
  box-shadow: var(--shadow); padding: 44px 44px 36px; margin: 36px 0 40px; }
.post-head { border-bottom: 1px solid var(--gray200); padding-bottom: 24px; margin-bottom: 8px; }
.post-head .tag { display: inline-block; background: var(--blue-soft); color: var(--blue-dark);
  font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.post-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; margin: 16px 0 10px; }
.post-head .meta { color: var(--gray500); font-size: 14px; }
.post-head .summary { color: var(--gray700); font-size: 16.5px; margin: 16px 0 0;
  background: var(--gray100); padding: 16px 18px; border-radius: 12px; }
.post h2 { font-size: 22px; font-weight: 800; margin: 40px 0 12px; letter-spacing: -.01em; }
.post h3 { font-size: 18px; font-weight: 700; margin: 28px 0 8px; }
.post p { color: var(--gray800); font-size: 16.5px; margin: 0 0 16px; }
.post ul, .post ol { color: var(--gray800); font-size: 16.5px; padding-left: 22px; margin: 0 0 18px; }
.post li { margin: 8px 0; }
.post strong { color: var(--gray900); font-weight: 700; }
.post blockquote { margin: 22px 0; padding: 16px 20px; background: var(--blue-soft);
  border-radius: 12px; color: #1b4fa0; font-size: 16px; }
.post hr { border: none; border-top: 1px solid var(--gray200); margin: 36px 0; }

/* 글 하단 CTA */
.post-cta { background: linear-gradient(160deg, #f3f8ff, #fff); border: 1px solid var(--gray200);
  border-radius: 16px; padding: 26px; text-align: center; margin-top: 12px; }
.post-cta h3 { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.post-cta p { color: var(--gray600); font-size: 15px; margin: 0 0 16px; }

/* 목록 하단 CTA 배너 */
.cta-band { background: linear-gradient(160deg, #f3f8ff, #fff); border: 1px solid var(--gray200);
  border-radius: 20px; padding: 34px; text-align: center; margin-bottom: 56px; }
.cta-band h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.cta-band p { color: var(--gray600); margin: 0 0 18px; }

.btn { display: inline-block; background: var(--blue); color: #fff !important; font-weight: 800;
  font-size: 15px; padding: 13px 24px; border-radius: 12px; }
.btn:hover { background: var(--blue-dark); text-decoration: none; }

.back-link { display: inline-block; color: var(--gray600); font-size: 14.5px; font-weight: 700; margin-top: 8px; }

footer { border-top: 1px solid var(--gray200); padding: 28px 0 40px; text-align: center;
  color: var(--gray500); font-size: 14px; }
footer a { color: var(--gray500); }
footer .sep { margin: 0 8px; color: var(--gray300); }

@media (max-width: 640px) {
  .blog-hero h1 { font-size: 30px; }
  .post { padding: 28px 22px 24px; border-radius: 16px; }
  .post-head h1 { font-size: 25px; }
  .post p, .post ul, .post ol { font-size: 16px; }
  .nav-links { gap: 12px; font-size: 14px; }
  /* 홈과 동일: 셋(카카오·집중 가이드·의견 보내기)이 좁아도 한 줄에 들어간다 */
}

/* 광고 자리 (카카오 애드핏 300x250 · 본문 중간)
   ins의 display 제어는 SDK 몫이라 여기서 건드리지 않는다.
   바깥 div만 잡아 가운데 정렬하고 본문 흐름과 간격을 준다. */
.ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 광고(300x250)가 늦게 뜨거나 안 떠도 아래 콘텐츠가 밀리지 않도록 자리를 미리 잡는다.
     슬롯 높이를 광고 규격에 맞춰 두면 로딩 전후로 레이아웃이 움직이지 않는다. */
  min-height: 250px;
  margin: 36px 0;
}

/* 사업자 정보 — 카카오 비즈니스 채널 심사에서 사업자↔채널 연관성 확인에 쓰인다 */
.biz-info { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: var(--gray500); }
.biz-info .sep { margin: 0 6px; color: var(--gray300); }

/* 가이드 하단 CTA — 홈화면 모드 카드와 같은 색을 써서 어느 모드인지 바로 알게 한다
   (타이머 #1b64da · 집중 케어 #5a3fce) */
.cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-btns .btn { flex: 0 1 auto; }
/* 글 하단 시작 버튼 — 모드를 고르게 하지 않고 앱으로 하나로 보낸다 */
.btn-start { background: #1b64da !important; }
.btn-start:hover { background: #144da8 !important; }
.btn-start .btn-arrow { margin-left: 2px; }
@media (max-width: 480px) {
  .cta-btns { flex-direction: column; }
  .cta-btns .btn { width: 100%; }
}

/* 각주 번호 + 출처 목록 — 근거를 문장 옆과 글 하단에서 바로 확인 */
sup.fn { font-size: 0.7em; font-weight: 700; }
sup.fn a { color: var(--blue, #3182f6); text-decoration: none; }
sup.fn a:hover { text-decoration: underline; }
.post-sources { margin: 40px 0 8px; padding: 20px 22px; background: #f7f9fb;
  border-radius: 14px; border: 1px solid #e5e8eb; }
.post-sources h2 { font-size: 15px; margin: 0 0 12px; color: #4e5968; }
.post-sources ol { margin: 0; padding-left: 20px; }
.post-sources li { font-size: 13px; line-height: 1.7; color: #6b7684; margin-bottom: 8px; word-break: break-word; }
.post-sources a { color: #3182f6; text-decoration: none; }
.post-sources a:hover { text-decoration: underline; }

/* 푸터 고객센터 링크 — 사업자 정보와 같은 톤, 굵기만 한 단계 */
.biz-link { color: var(--gray700); font-weight: 700; }

/* 광고 안전 가드 — 화면을 덮는 형식 차단 + 가로 넘침 방지 (앱·랜딩과 동일 규칙) */
ins.adsbygoogle[data-anchor-status],
ins.adsbygoogle[data-vignette-loaded],
.adsbygoogle[style*="position: fixed"],
.adsbygoogle[style*="position:fixed"] { display: none !important; }
ins.adsbygoogle, .adsbygoogle { max-width: 100% !important; overflow: hidden !important; }
ins.adsbygoogle { margin-block: 24px !important; }