@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: 1.5em;
}

.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 태그에 적용)
═══════════════════════════════════════════ */

/* ── Phase 레이블 ───────────────────────── */
/* 사용법: <p class="phase-label">Phase 1 — 단계명</p> */
.entry-content .phase-label {
  display: inline-block;
  background: #1a73e8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 3px;
  margin-bottom: 10px;
  margin-top: 52px;
}

/* ── 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;
}

/* ── 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;
}

/* ═══════════════════════════════════════════
   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 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; }
  .entry-content .phase-label { margin-top: 40px; }
}