@charset "utf-8";

/*
  Skin Name: SEO & AdSense Optimized
  Description: 구글 블로거 스타일 기반 SEO 및 애드센스 최적화 스킨
  Author: My Blog
  Updated: v2.0 — 본문 가독성 강화 (callout / note / phase-label / item-list)
*/

/* --- 웹 폰트 로드 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ═══════════════════════════════════════════
   1. 기본 초기화 (Reset)
═══════════════════════════════════════════ */
html, body, div, span, h1, h2, h3, p, a, img, ul, li, header, main, aside, footer, article {
  margin: 0; padding: 0; border: 0; box-sizing: border-box;
}
body {
  background-color: #f0f2f5;
  font-family: 'Noto Sans KR', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   2. 전체 레이아웃
═══════════════════════════════════════════ */
#wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 10px;
  gap: 20px;
}

/* 상단 헤더 */
header {
  width: 100%;
  background: #fff;
  padding: 25px 0;
  text-align: center;
  border-radius: 12px;
  border: 1px solid #eef0f2;
  margin-bottom: 10px;
}
header a {
  text-decoration: none;
  color: #1a73e8;
  font-size: 26px;
  font-weight: 700;
}

/* 메인 및 사이드바 배분 */
main {
  flex: 1;
  min-width: 0;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #eee;
}
aside {
  width: 280px;
}

/* 사이드바 위젯 스타일 */
.widget-box {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.widget-box h3 {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 700;
  color: #1a73e8;
  border-bottom: 2px solid #f1f3f4;
  padding-bottom: 8px;
}

/* ═══════════════════════════════════════════
   3. 목록 페이지 (리스트 스타일)
═══════════════════════════════════════════ */
.post-list { display: flex; flex-direction: column; gap: 20px; }
.post-item {
  display: flex; gap: 20px; align-items: center; background: #fff;
  padding: 20px; border-radius: 12px; border: 1px solid #eee; transition: box-shadow 0.2s;
}
.post-item:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

.post-info { flex: 1; }
.post-info h2 { font-size: 18px; margin-bottom: 8px; font-weight: 700; }
.post-info h2 a { color: #222; text-decoration: none; }
.post-info h2 a:hover { color: #1a73e8; }
.post-info p {
  color: #666; font-size: 14px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.post-thumb {
  width: 120px; height: 120px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: #f8f9fa;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════
   4. 본문 헤더
═══════════════════════════════════════════ */
.entry-header-box {
  background: #1a73e8; color: #fff; padding: 40px 30px;
  border-radius: 12px; margin-bottom: 30px; box-shadow: 0 4px 20px rgba(26,115,232,0.2);
}
.entry-title { font-size: 26px; font-weight: 700; margin-bottom: 15px; line-height: 1.4; }
.entry-meta { font-size: 13.5px; opacity: 0.85; }

/* ═══════════════════════════════════════════
   5. 본문 내용 — 기본 타이포그래피
═══════════════════════════════════════════ */
.entry-content {
  font-size: 18px;
  line-height: 2.1;
  color: #333;
  word-break: keep-all;
  /* 가독성을 위해 본문 최대 너비 제한 */
  max-width: 760px;
}

.entry-content p {
  margin-bottom: 2.2em;   /* ★ 문단 아래 간격 — 숫자 조절로 넓이 변경 */
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* h2 소제목 — 기존 스타일 유지 */
.entry-content h2 {
  background: #f1f3f4;
  border-left: 6px solid #1a73e8;
  padding: 15px 18px;
  margin: 52px 0 20px;
  font-size: 22px;
  font-weight: 700;
  border-radius: 0 8px 8px 0;
  line-height: 1.4;
  color: #1a1a1a;
}

/* h3 소제목 */
.entry-content h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 36px 0 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  color: #1a73e8;
  letter-spacing: 0.02em;
}

/* h4 소제목 */
.entry-content h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 8px;
  color: #333;
}

/* blockquote */
.entry-content blockquote {
  background: #f8f9fa;
  border-left: 4px solid #ccc;
  padding: 15px 20px;
  margin: 24px 0;
  color: #555;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

/* 구분선 */
.entry-content hr,
.entry-content .divider {
  border: none;
  border-top: 1px solid #e8eaed;
  margin: 52px 0;
}

/* ═══════════════════════════════════════════
   6. 본문 내용 — 가독성 강화 컴포넌트
   (프롬프트에서 AI가 생성하는 HTML 태그에 적용)
═══════════════════════════════════════════ */

/* ── H2 자동 섹션 번호 (CSS 카운터 방식) ────
   AI가 숫자를 직접 생성하지 않아도
   h2 앞에 자동으로 번호가 붙음
   → 떠있는 숫자 문제 원천 차단
────────────────────────────────────────── */

/* 본문 영역에 카운터 초기화 */
.entry-content,
.tt_article_useless_p_margin,
.area_view,
.post-content,
.contents_style {
  counter-reset: section-num;
}

/* h2마다 카운터 증가 + 번호 표시 */
.entry-content h2::before,
.tt_article_useless_p_margin h2::before,
.area_view h2::before,
.post-content h2::before,
.contents_style h2::before {
  counter-increment: section-num;
  content: counter(section-num) ". ";
  color: #1a73e8;
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 2px;
  opacity: 0.9;
}

/* phase-label은 혹시 AI가 생성해도 숨김 처리 */
.entry-content .phase-label,
.tt_article_useless_p_margin .phase-label,
.area_view .phase-label,
.post-content .phase-label,
.contents_style .phase-label,
p.phase-label {
  display: none;
}

/* ── Callout 박스 (핵심 팁, Pro Tip) ────── */
/* 사용법:
   <div class="callout">
     <strong>💡 핵심 포인트</strong>
     <p>내용</p>
   </div>
*/
.entry-content .callout {
  background: #e8f0fe;
  border-left: 5px solid #1a73e8;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.8;
}
.entry-content .callout strong {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1a73e8;
  font-size: 15px;
}
.entry-content .callout p {
  margin: 0;
  color: #2d3748;
}

/* ── 단락 간격 보정 — 박스 내부 p는 margin 0 유지 ──
   .entry-content p 의 2.2em이 박스 안 p에도 적용되지 않도록 명시적 차단
─────────────────────────────────────────────────── */
.entry-content .callout p,
.entry-content .note p,
.entry-content .warning p,
.entry-content .summary-box p,
.entry-content .step-card p,
.tt_article_useless_p_margin .callout p,
.tt_article_useless_p_margin .note p,
.tt_article_useless_p_margin .warning p,
.tt_article_useless_p_margin .summary-box p,
.area_view .callout p,
.area_view .note p,
.area_view .warning p,
.area_view .summary-box p {
  margin: 0 !important;
}

/* ── Note 박스 (참고, 주의) ─────────────── */
/* 사용법:
   <div class="note">
     <strong>⚠️ 참고</strong>
     <p>내용</p>
   </div>
*/
.entry-content .note {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.8;
}
.entry-content .note strong {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: #555;
  font-size: 14px;
}
.entry-content .note p {
  margin: 0;
  color: #666;
}

/* ── 경고 박스 (Warning) ────────────────── */
/* 사용법: <div class="warning"><strong>🚨 주의</strong><p>내용</p></div> */
.entry-content .warning {
  background: #fff8f0;
  border-left: 5px solid #e8710a;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.8;
}
.entry-content .warning strong {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #e8710a;
  font-size: 15px;
}
.entry-content .warning p {
  margin: 0;
  color: #2d3748;
}

/* ── 원칙/항목 카드 리스트 ──────────────── */
/* 사용법:
   <ul class="item-list">
     <li><strong>항목 제목</strong> 설명 내용</li>
   </ul>
*/
.entry-content .item-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.entry-content .item-list li {
  padding: 16px 20px 16px 48px;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  font-size: 16px;
  line-height: 1.8;
  background: #fff;
}
.entry-content .item-list li:last-child {
  border-bottom: none;
}
.entry-content .item-list li::before {
  content: "→";
  position: absolute;
  left: 18px;
  color: #1a73e8;
  font-weight: 700;
}
.entry-content .item-list li strong {
  display: block;
  font-weight: 700;
  margin-bottom: 3px;
  color: #222;
}

/* ── 번호 카드 리스트 (pitfalls 스타일) ─── */
/* 사용법:
   <ol class="num-list">
     <li><strong>항목 제목</strong> 설명 내용</li>
   </ol>
*/
.entry-content .num-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 32px;
  counter-reset: numlist;
}
.entry-content .num-list li {
  counter-increment: numlist;
  padding: 16px 20px 16px 60px;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  font-size: 16px;
  line-height: 1.8;
}
.entry-content .num-list li:last-child {
  border-bottom: none;
}
.entry-content .num-list li::before {
  content: counter(numlist, decimal-leading-zero);
  position: absolute;
  left: 10px;
  top: 14px;
  font-size: 22px;
  font-weight: 900;
  color: #1a73e8;
  opacity: 0.25;
  font-family: Georgia, serif;
}
.entry-content .num-list li strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: #222;
}

/* ── 요약 정리 박스 ─────────────────────── */
/* 사용법:
   <div class="summary-box">
     <strong>✅ 핵심 정리</strong>
     <p>내용</p>
   </div>
*/
.entry-content .summary-box {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
  border: 1.5px solid #b8d4f8;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 36px 0;
  font-size: 16px;
  line-height: 1.85;
}
.entry-content .summary-box strong {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a73e8;
  font-size: 15px;
}
.entry-content .summary-box p {
  margin: 0;
  color: #2d3748;
}

/* ── 단계 카드 (Step 표시) ──────────────── */
/* 사용법:
   <div class="step-card">
     <span class="step-num">01</span>
     <div><strong>단계 제목</strong><p>설명</p></div>
   </div>
*/
.entry-content .step-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #e2e8f0;
}
.entry-content .step-card:last-of-type {
  border-bottom: none;
}
.entry-content .step-card .step-num {
  font-size: 28px;
  font-weight: 900;
  color: #1a73e8;
  opacity: 0.25;
  font-family: Georgia, serif;
  flex-shrink: 0;
  min-width: 40px;
  line-height: 1;
  padding-top: 4px;
}
.entry-content .step-card strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 16px;
  color: #222;
}
.entry-content .step-card p {
  margin: 0;
  font-size: 15px;
  color: #555;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════
   7. 애드센스 광고 삽입 공간
═══════════════════════════════════════════ */
.adsense-box {
  margin: 30px 0;
  padding: 20px;
  background: #fafafa;
  border: 1px dashed #ccc;
  text-align: center;
  color: #999;
  border-radius: 8px;
  font-size: 14px;
}


/* ═══════════════════════════════════════════
   티스토리 다중 본문 클래스 대응
   (.entry-content 외에 다른 클래스도 커버)
═══════════════════════════════════════════ */

/* ── 문단 간격 — 티스토리 내부 클래스 전체 적용 ── */
.tt_article_useless_p_margin p,
.area_view p,
.post-content p,
.contents_style p {
  margin-bottom: 2.2em;   /* ★ .entry-content p 와 동일하게 유지 */
}
.tt_article_useless_p_margin h2,
.area_view h2,
.post-content h2,
.contents_style h2 {
  background: #f1f3f4;
  border-left: 6px solid #1a73e8;
  padding: 15px 18px;
  margin: 52px 0 20px;
  font-size: 22px;
  font-weight: 700;
  border-radius: 0 8px 8px 0;
  line-height: 1.4;
  color: #1a1a1a;
}
.tt_article_useless_p_margin h3,
.area_view h3 {
  font-size: 17px; font-weight: 700;
  margin: 36px 0 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  color: #1a73e8;
}
.tt_article_useless_p_margin .callout,
.area_view .callout,
.post-content .callout {
  background: #e8f0fe;
  border-left: 5px solid #1a73e8;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.8;
}
.tt_article_useless_p_margin .callout strong,
.area_view .callout strong { display:block; font-weight:700; margin-bottom:8px; color:#1a73e8; font-size:15px; }
.tt_article_useless_p_margin .callout p,
.area_view .callout p { margin:0; color:#2d3748; }

.tt_article_useless_p_margin .note,
.area_view .note,
.post-content .note {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.8;
}
.tt_article_useless_p_margin .note strong,
.area_view .note strong { display:block; font-weight:700; margin-bottom:6px; color:#555; }
.tt_article_useless_p_margin .note p,
.area_view .note p { margin:0; color:#666; }

.tt_article_useless_p_margin .warning,
.area_view .warning {
  background: #fff8f0;
  border-left: 5px solid #e8710a;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.8;
}
.tt_article_useless_p_margin .warning strong,
.area_view .warning strong { display:block; font-weight:700; margin-bottom:8px; color:#e8710a; }
.tt_article_useless_p_margin .warning p,
.area_view .warning p { margin:0; color:#2d3748; }

.tt_article_useless_p_margin .item-list,
.area_view .item-list {
  list-style:none; padding:0; margin:20px 0 32px;
  border:1px solid #e2e8f0; border-radius:8px; overflow:hidden;
}
.tt_article_useless_p_margin .item-list li,
.area_view .item-list li {
  padding:16px 20px 16px 48px; border-bottom:1px solid #e2e8f0;
  position:relative; font-size:16px; line-height:1.8; background:#fff;
}
.tt_article_useless_p_margin .item-list li:last-child,
.area_view .item-list li:last-child { border-bottom:none; }
.tt_article_useless_p_margin .item-list li::before,
.area_view .item-list li::before { content:"→"; position:absolute; left:18px; color:#1a73e8; font-weight:700; }
.tt_article_useless_p_margin .item-list li strong,
.area_view .item-list li strong { display:block; font-weight:700; margin-bottom:3px; color:#222; }

.tt_article_useless_p_margin .num-list,
.area_view .num-list { list-style:none; padding:0; margin:20px 0 32px; counter-reset:numlist; }
.tt_article_useless_p_margin .num-list li,
.area_view .num-list li {
  counter-increment:numlist; padding:16px 20px 16px 60px;
  border-bottom:1px solid #e2e8f0; position:relative; font-size:16px; line-height:1.8;
}
.tt_article_useless_p_margin .num-list li:last-child,
.area_view .num-list li:last-child { border-bottom:none; }
.tt_article_useless_p_margin .num-list li::before,
.area_view .num-list li::before {
  content:counter(numlist, decimal-leading-zero); position:absolute; left:10px; top:14px;
  font-size:22px; font-weight:900; color:#1a73e8; opacity:0.25; font-family:Georgia,serif;
}
.tt_article_useless_p_margin .num-list li strong,
.area_view .num-list li strong { display:block; font-weight:700; margin-bottom:4px; color:#222; }

.tt_article_useless_p_margin .summary-box,
.area_view .summary-box {
  background: linear-gradient(135deg,#f0f7ff 0%,#e8f4ff 100%);
  border: 1.5px solid #b8d4f8;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 36px 0;
  font-size: 16px;
  line-height: 1.85;
}
.tt_article_useless_p_margin .summary-box strong,
.area_view .summary-box strong { display:block; font-weight:700; margin-bottom:10px; color:#1a73e8; font-size:15px; }
.tt_article_useless_p_margin .summary-box p,
.area_view .summary-box p { margin:0; color:#2d3748; }

/* ═══════════════════════════════════════════
   8. 모바일 반응형
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  #wrap { flex-direction: column; padding: 10px; }
  main { padding: 15px; }
  aside { width: 100%; }
  .post-item { flex-direction: column; align-items: flex-start; }
  .post-thumb { width: 100%; height: 200px; }
  .entry-header-box { padding: 30px 20px; }
  .entry-title { font-size: 22px; }

  /* 본문 모바일 */
  .entry-content { font-size: 16px; line-height: 1.95; }
  .entry-content p { margin-bottom: 1.8em; }  /* ★ 모바일: PC보다 약간 좁게 */
  .tt_article_useless_p_margin p,
  .area_view p,
  .post-content p,
  .contents_style p { margin-bottom: 1.8em; }
  .entry-content h2 { font-size: 19px; padding: 12px 14px; }
  .entry-content h3 { font-size: 16px; }
  .entry-content .callout,
  .entry-content .note,
  .entry-content .warning,
  .entry-content .summary-box { padding: 16px 18px; font-size: 15px; }
  .entry-content .item-list li { padding: 14px 16px 14px 42px; font-size: 15px; }
  /* phase-label: CSS 카운터 방식으로 대체됨 */
}