/* === GLOBAL DESIGN MASTER (Blogger+Tistory unified) — v2025-09-01 ===
   - Single source of truth for palette, typography, components, mobile guard
   - Duplicates removed, one @media block, safe selectors for both platforms
   - Tight spacing fix for .ibox/.meta/.note/.source inner elements
============================================================================ */

/* 1) Palette */
:root{
  /* Text/Links */
  --gbl-text:#202428;
  --gbl-link:#1f49bf;
  --gbl-deep-blue:#0e1b4d;

  /* Hero */
  --hero-radius:12px;

  /* Meta (요약) */
  --meta-bg:#1f49bf; 
  --meta-text:#FFD400; 
  --meta-link:#FFEA00;

  /* TOC */
  --toc-bg:#cfe0ff; 
  --toc-border:#9bb8ff; 
  --toc-title:#153a9f;

  /* Section */
  --sec-bg:#d9e6ff; 
  --sec-border:#b5ccff; 
  --sec-text:#103079;

  /* Card */
  --ibox-bg:#f6f9ff; 
  --ibox-border:#e0e6f2;

  /* Note */
  --note-bg:#f7f7f7; 
  --note-border:#c9d3e0;

  /* Source */
  --source-bg:#f6f9ff; 
  --source-border:#d0e2ff; 
  --source-title:#1f49bf;

  /* Tags/Label */
  --label-btn-bg:#1f49bf; 
  --label-btn-text:#ffffff; 
  --tag-text:#333333;

  /* FAQ */
  --faq-q-bg:#e0ecff; 
  --faq-q-border:#c6d8ff; 
  --faq-q-text:#0f265c;
  --faq-a-bg:#fff9e0; 
  --faq-a-border:#f3d36a; 
  --faq-a-text:#4a3b10;

  /* Info */
  --info-bg:#eef7ff; 
  --info-border:#b9dbff; 
  --info-text:#0b2a5a;
}

/* 2) Typography & Spacing (global) — cross-platform containers */
.contents_style,
.entry-content,
.article_view,
.post-body{
  color:var(--gbl-text);
  line-height:1.78;
  font-size:16px;
}
.contents_style p,
.entry-content p,
.article_view p,
.post-body p{ margin:10px 0; }

.contents_style ul,.contents_style ol,
.entry-content ul,.entry-content ol,
.article_view ul,.article_view ol,
.post-body ul,.post-body ol{ margin:10px 0 10px 20px; }

/* Links */
.contents_style a,.entry-content a,.article_view a,.post-body a{
  color:var(--gbl-link);
  text-decoration:none;
}
.contents_style a:hover,.entry-content a:hover,.article_view a:hover,.post-body a:hover{
  text-decoration:underline;
}

/* System body fallback (safe) */
body{
  color:var(--gbl-text) !important;
  line-height:1.7 !important;
  font-size:16px;
  font-family:Pretendard,'Apple SD Gothic Neo',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans KR','Malgun Gothic',sans-serif;
}

/* 3) Post Title (optional strong style) */
.post-head{ margin:6px 0 16px; }
.post-head .title-strong{
  font-weight:800;
  font-size:clamp(1.22rem,2.8vw,1.4rem);
  color:var(--gbl-deep-blue);
  letter-spacing:-.2px;
}

/* 4) Hero (ratio box) */
.hero-ratio{
  position:relative;
  width:100%;
  padding-top:33.333%;
  border-radius:var(--hero-radius);
  overflow:hidden;
  margin:8px 0;
}
.hero-ratio img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* 5) Meta (요약박스) */
.meta-box{
  background:var(--meta-bg);
  color:var(--meta-text) !important;
  padding:18px;
  border-radius:10px;
  margin:10px 0;
}
.meta-box strong{ color:inherit !important; display:block; margin-bottom:6px; font-size:1.02rem; }
.meta-box p,.meta-box li,.meta-box div{ color:inherit !important; }
.meta-box a{ color:var(--meta-link) !important; text-decoration:underline; }

/* Tight spacing inside meta/note/source/ibox */
.meta-box> :first-child,
.note-box> :first-child,
.source-box> :first-child,
.ibox-bd> :first-child{ margin-top:0; }
.meta-box> :last-child,
.note-box> :last-child,
.source-box> :last-child,
.ibox-bd> :last-child{ margin-bottom:0; }

/* 6) TOC (manual .toc-box / auto #toc-ym / generic) */
.toc-box,
#toc-ym,
.table-of-contents,
.toc-widget,
#toc-container{
  display:block;
  background:var(--toc-bg);
  border:1px solid var(--toc-border);
  border-radius:12px;
  padding:14px;
  margin:20px 0;
}
.toc-box .toc-title,
.table-of-contents .toc-title{
  color:var(--toc-title);
  font-weight:900;
  margin-bottom:8px;
  display:block;
}
/* Auto TOC ribbon (for #toc-ym) */
#toc-ym::before{
  content:'목차';
  display:block; width:120px;
  margin:-28px auto 6px; padding:6px 0;
  text-align:center; font-weight:800; font-size:16px;
  color:var(--toc-title); background:#fff;
  border:1px solid var(--toc-border); border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.toc-box ol,.toc-box ul,
#toc-ym ol,#toc-ym ul,
.table-of-contents ol,.table-of-contents ul{
  list-style:decimal;
  margin:0 0 0 18px; padding:0;
}
.toc-box li,#toc-ym li,.table-of-contents li{ margin:6px 0; }
.toc-box a,#toc-ym a,.table-of-contents a{
  color:var(--toc-title); font-weight:700; text-decoration:none;
}
.toc-box a:hover,#toc-ym a:hover,.table-of-contents a:hover{
  text-decoration:underline; opacity:.9;
}
/* Prevent double numbering from theme counters */
.toc-box li::before,#toc-ym li::before,.table-of-contents li::before{ content:none; }

/* 7) Section Title */
.sec-title{
  background:var(--sec-bg);
  border:1px solid var(--sec-border);
  border-radius:10px;
  padding:10px 12px;
  margin:28px 0 10px;
  font-size:1.12rem; font-weight:800; color:var(--sec-text);
}

/* 8) Card (.ibox) */
.ibox{
  border:1px solid var(--ibox-border);
  border-radius:10px;
  background:var(--ibox-bg);
  margin:16px 0;
  box-shadow:0 8px 22px rgba(13,35,98,.06);
}
.ibox-bd{ padding:12px 14px; }

/* 9) Note */
.note-box{
  background:var(--note-bg);
  border:1px dashed var(--note-border);
  border-radius:8px;
  padding:14px;
  margin:22px 0;
  font-size:.96rem;
}

/* 10) Source */
.source-box{
  background:var(--source-bg);
  border:1px solid var(--source-border);
  border-radius:10px;
  padding:16px;
  margin:28px 0;
}
.source-box h3{ margin:0 0 10px; font-size:1.02rem; color:var(--source-title); }
.source-box ul{ margin:0 0 0 18px; padding:0; }
.source-box li{ margin:6px 0; }

/* 11) Recommended Tags */
.recomm-tags{ margin-top:22px; text-align:center; font-size:.95rem; }
.recomm-tags .label-btn{
  background:var(--label-btn-bg);
  color:var(--label-btn-text);
  border:none;
  padding:6px 12px;
  font-weight:800;
  margin-right:10px;
  border-radius:8px;
}
.recomm-tags .tag{ font-weight:700; color:var(--tag-text); }

/* 12) FAQ */
.faq-wrap{ margin:20px 0; }
.faq-item{ margin-bottom:12px; }

/* 질문 블록 */
.faq-q{
  background:var(--faq-q-bg);
  padding:10px;
  border-radius:8px;
  font-weight:800;
  color:var(--faq-q-text);
  border:1px solid var(--faq-q-border);
  /* 포커스/호버 대비 향상 시 전환 */
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* 답변 블록 */
.faq-a{
  background:var(--faq-a-bg);
  color:var(--faq-a-text);
  border:1px solid var(--faq-a-border);
  padding:12px;
  border-radius:8px;
  margin-top:6px;
  /* 가독성 보강 */
  line-height:1.6;
}

/* 키보드 포커스 가시성 강화 */
.faq-q:focus{
  outline:2px solid var(--brand, #3b82f6);
  outline-offset:2px;
}

/* 호버/포커스 시 미세 강조(선택 적용) */
.faq-q:hover,
.faq-q:focus{
  border-color:var(--faq-q-border-focus, var(--brand, #3b82f6));
  background:var(--faq-q-bg-focus, rgba(59,130,246,0.06));
}

/* 시맨틱이 버튼이 아닐 때 접근성 힌트 */
.faq-q[role="button"]{ cursor:pointer; }
.faq-q[role="button"]:active{ transform:translateY(0.5px); }

/* 라이트 모드 기본값(전부 단일 팔레트로 통일) */
:root{
  /* FAQ 컬러: 디노공감님 지정값으로 고정 */
  --faq-q-bg:#e0ecff; 
  --faq-q-border:#c6d8ff; 
  --faq-q-text:#0f265c;

  --faq-a-bg:#fff9e0; 
  --faq-a-border:#f3d36a; 
  --faq-a-text:#4a3b10;

  /* 포커스/강조 */
  --brand:#3b82f6;
  --faq-q-border-focus:#3b82f6;
  --faq-q-bg-focus:rgba(59,130,246,0.06);
}

/* 시스템 다크 모드에서도 동일 색으로 유지(같은 값 재선언) */
@media (prefers-color-scheme: dark){
  :root{
    --faq-q-bg:#e0ecff; 
    --faq-q-border:#c6d8ff; 
    --faq-q-text:#0f265c;

    --faq-a-bg:#fff9e0; 
    --faq-a-border:#f3d36a; 
    --faq-a-text:#4a3b10;

    --brand:#3b82f6;
    --faq-q-border-focus:#3b82f6;
    --faq-q-bg-focus:rgba(59,130,246,0.06);
  }
}

/* 13) Info Note */
.info-note{
  background:var(--info-bg);
  color:var(--info-text);
  border:1px solid var(--info-border);
  border-radius:8px;
  padding:12px 14px;
  margin:18px 0;
  font-size:.96rem;
}
.info-note strong{ color:inherit; }

/* 14) Image center & responsive (Blogger/Tistory) */
.post-body .separator,
.post-body .separator a{
  display:block; text-align:center;
  margin-left:auto; margin-right:auto;
}
.post-body img{
  display:block; margin:0 auto;
  max-width:100%; height:auto; padding:0;
}
/* Table/caption safety */
.post-body table img{ max-width:100%; height:auto; }

/* 15) Mobile guard (single @media) */
@media (max-width:768px){
  /* Keep meta colors consistent on mobile overlays */
  :root{ --meta-text:#FFD400; --meta-link:#FFEA00; }
  .meta-box{ color:var(--meta-text) !important; }
  .meta-box p,.meta-box li,.meta-box div,.meta-box strong{ color:inherit !important; }
  .meta-box a{ color:var(--meta-link) !important; }
}
/* === END GLOBAL DESIGN MASTER === */