/* ============================================================
   OJICK 포스팅 (.ojp) — 시맨틱 HTML 전용 스타일
   ------------------------------------------------------------
   색 근거: cropped-Logo_orange_a.png 실측
     #f09030 주 오렌지 · #585878 슬레이트 · #404040 그레이
   의료·럭셔리 인상을 피하려고 세리프 표제와 웜톤(크림/골드)을 쓰지 않는다.
   파일명 CSS_zzz_ 로 assets.php glob 정렬에서 마지막 로드.
   ============================================================ */

:root {
  --oj-orange:      #f09030;
  --oj-orange-dk:   #c56f1a;
  --oj-orange-lt:   #fff3e6;
  --oj-slate:       #585878;
  --oj-ink:         #1c1c22;
  --oj-body:        #3c3c46;
  --oj-muted:       #7a7a8a;
  --oj-line:        #e4e4ec;
  --oj-bg-alt:      #f7f7fa;
  --oj-radius:      10px;
  --oj-font: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
             'Noto Sans KR','Malgun Gothic',sans-serif;

  /* 기존 CSS_blog.css(YBP, 골드 의료톤) 토큰도 오렌지로 덮는다 */
  --ybp-color-accent:       #f09030;
  --ybp-color-accent-light: #fff3e6;
  --ybp-color-accent-dark:  #c56f1a;
  --ybp-color-secondary:    #585878;
  --ybp-color-border:       #e4e4ec;
  --ybp-color-bg-alt:       #f7f7fa;
  --ybp-font-serif: 'Pretendard','Pretendard Variable',-apple-system,
                    BlinkMacSystemFont,'Noto Sans KR',sans-serif;
}

/* ============================================================
   래퍼
   ============================================================ */
.entry-content .ojp {
  font-family: var(--oj-font);
  color: var(--oj-body);
  font-size: 1.0125rem;
  line-height: 1.78;
  letter-spacing: -.003em;
  max-width: 820px;
  margin: 0 auto;
}
.entry-content .ojp p { margin: 0 0 1.05em; }
.entry-content .ojp a { color: var(--oj-orange-dk); text-decoration: none; border-bottom: 1px solid rgba(240,144,48,.35); }
.entry-content .ojp a:hover { color: var(--oj-ink); border-bottom-color: var(--oj-ink); }
.entry-content .ojp ul,
.entry-content .ojp ol { margin: 0 0 1.05em; padding-left: 1.2em; }
.entry-content .ojp li { margin-bottom: .42em; }
.entry-content .ojp strong { color: var(--oj-ink); font-weight: 700; }

/* ============================================================
   히어로
   ============================================================ */
.entry-content .ojp-hero {
  padding: 0 0 26px;
  margin: 0 0 34px;
  border-bottom: 1px solid var(--oj-line);
}
.entry-content .ojp-eyebrow {
  margin: 0 0 12px !important;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--oj-orange);
}
.entry-content .ojp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  margin-right: 9px;
  vertical-align: middle;
  background: var(--oj-orange);
}
.entry-content h1.ojp-title {
  margin: 0 0 16px;
  font-family: var(--oj-font);
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.028em;
  color: var(--oj-ink);
  text-align: left;
}
.entry-content .ojp-lead {
  margin: 0 !important;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--oj-muted);
}

/* ============================================================
   퀵 앤서
   ============================================================ */
.entry-content .ojp-quick {
  padding: 20px 24px;
  margin: 0 0 34px;
  background: var(--oj-orange-lt);
  border-left: 4px solid var(--oj-orange);
  border-radius: 0 var(--oj-radius) var(--oj-radius) 0;
}
.entry-content .ojp-quick-q {
  margin: 0 0 8px !important;
  font-weight: 800;
  color: var(--oj-ink);
  line-height: 1.5;
}
.entry-content .ojp-quick-a { margin: 0 !important; color: var(--oj-body); }

/* ============================================================
   목차
   ============================================================ */
.entry-content .ojp-toc {
  padding: 20px 24px;
  margin: 0 0 44px;
  background: var(--oj-bg-alt);
  border: 1px solid var(--oj-line);
  border-radius: var(--oj-radius);
}
.entry-content .ojp-toc-label {
  margin: 0 0 10px !important;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--oj-slate);
}
.entry-content ol.ojp-toc-list {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: ojtoc;
}
.entry-content ol.ojp-toc-list li {
  counter-increment: ojtoc;
  margin: 0 0 7px;
  padding-left: 30px;
  position: relative;
  font-size: .945rem;
}
.entry-content ol.ojp-toc-list li::before {
  content: counter(ojtoc, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-size: .715rem;
  font-weight: 800;
  color: var(--oj-orange);
  line-height: 1.95;
}
.entry-content ol.ojp-toc-list a { border-bottom: 0; color: var(--oj-body); }
.entry-content ol.ojp-toc-list a:hover { color: var(--oj-orange-dk); }

/* ============================================================
   본문 섹션
   ============================================================ */
.entry-content .ojp-sec { margin: 0 0 46px; scroll-margin-top: 90px; }
.entry-content .ojp-sec-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.entry-content .ojp-sec-nb {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--oj-orange);
  flex: none;
}
.entry-content .ojp-sec-ln {
  flex: 1;
  height: 1px;
  background: var(--oj-line);
}
.entry-content h2.ojp-h2 {
  margin: 0 0 16px;
  font-family: var(--oj-font);
  font-size: clamp(1.22rem, 2.3vw, 1.45rem);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.022em;
  color: var(--oj-ink);
  text-align: left;
}
.entry-content .ojp-sec h3 {
  margin: 26px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--oj-ink);
}

/* ============================================================
   FAQ
   ============================================================ */
.entry-content dl.ojp-faq { margin: 0; }
.entry-content .ojp-faq-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--oj-line);
}
.entry-content .ojp-faq-item:first-child { border-top: 1px solid var(--oj-line); }
.entry-content dt.ojp-faq-q {
  position: relative;
  padding-left: 27px;
  margin-bottom: 9px;
  font-weight: 800;
  color: var(--oj-ink);
  line-height: 1.55;
}
.entry-content dt.ojp-faq-q::before {
  content: "Q";
  position: absolute; left: 0; top: 0;
  font-weight: 800;
  color: var(--oj-orange);
}
.entry-content dd.ojp-faq-a {
  margin: 0;
  padding-left: 27px;
  color: var(--oj-body);
}

/* ============================================================
   정리(요약)
   ============================================================ */
.entry-content .ojp-summary {
  padding: 26px 28px;
  margin: 0 0 40px;
  background: var(--oj-bg-alt);
  border-radius: var(--oj-radius);
}
.entry-content h2.ojp-summary-h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--oj-ink);
  text-align: left;
}
.entry-content .ojp-summary p:last-child { margin-bottom: 0; }

/* ============================================================
   참고 자료
   ============================================================ */
.entry-content .ojp-refs {
  padding: 24px 26px;
  margin: 0 0 34px;
  background: #fff;
  border: 1px solid var(--oj-line);
  border-left: 4px solid var(--oj-slate);
  border-radius: 0 var(--oj-radius) var(--oj-radius) 0;
}
.entry-content h2.ojp-refs-h2 {
  margin: 0 0 6px;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oj-slate);
  text-align: left;
}
.entry-content .ojp-refs-note {
  margin: 0 0 14px !important;
  font-size: .83rem;
  color: var(--oj-muted);
}
.entry-content ul.ojp-refs-list { margin: 0; padding-left: 1.05em; }
.entry-content ul.ojp-refs-list li { font-size: .9rem; line-height: 1.62; }

/* ============================================================
   관련 글
   ============================================================ */
.entry-content .ojp-related { margin: 0 0 40px; }
.entry-content .ojp-related-label {
  margin: 0 0 12px !important;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--oj-slate);
}
.entry-content ul.ojp-related-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.entry-content ul.ojp-related-list li { margin: 0; }
.entry-content ul.ojp-related-list a {
  display: block;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--oj-line);
  border-radius: var(--oj-radius);
  color: var(--oj-ink);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.45;
  transition: .18s ease;
}
.entry-content ul.ojp-related-list a:hover {
  border-color: var(--oj-orange);
  color: var(--oj-orange-dk);
  transform: translateY(-1px);
}

/* ============================================================
   표
   ============================================================ */
.entry-content .ojp table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 24px;
  font-size: .93rem;
}
.entry-content .ojp thead th {
  padding: 11px 14px;
  background: var(--oj-ink);
  color: #fff;
  font-weight: 700;
  text-align: left;
}
.entry-content .ojp tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--oj-line);
}
.entry-content .ojp tbody tr:nth-child(even) { background: var(--oj-bg-alt); }
.entry-content .ojp td.oj-hi { color: var(--oj-orange-dk); font-weight: 700; }

/* ============================================================
   CTA
   ============================================================ */
.entry-content .ojp-cta {
  position: relative;
  padding: 34px 30px;
  margin: 46px 0 0;
  background: var(--oj-ink);
  border-radius: var(--oj-radius);
  text-align: center;
}
.entry-content .ojp-cta::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--oj-orange);
  border-radius: var(--oj-radius) var(--oj-radius) 0 0;
}
.entry-content .ojp-cta-label {
  margin: 0 0 10px !important;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oj-orange);
}
.entry-content .ojp-cta-h {
  margin: 0 0 8px !important;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.42;
  color: #fff;
}
.entry-content .ojp-cta-sub {
  margin: 0 0 20px !important;
  font-size: .89rem;
  color: rgba(255,255,255,.62);
}
.entry-content a.ojp-cta-btn {
  display: inline-block;
  padding: 13px 32px;
  background: var(--oj-orange);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.entry-content a.ojp-cta-btn:hover { background: #fff; color: var(--oj-ink); }
.entry-content .ojp-cta-note {
  margin: 16px 0 0 !important;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}
.entry-content .ojp-cta-note a { color: rgba(255,255,255,.8); border-bottom-color: rgba(255,255,255,.3); }
.entry-content .ojp-cta-note a:hover { color: #fff; border-bottom-color: #fff; }

/* ============================================================
   intent 별 강조색 — 같은 골격, 다른 표정
   ============================================================ */
.entry-content .ojp--compare  .ojp-sec-nb,
.entry-content .ojp--compare  .ojp-eyebrow { color: var(--oj-slate); }
.entry-content .ojp--compare  .ojp-eyebrow::before { background: var(--oj-slate); }
.entry-content .ojp--compare  .ojp-quick { background: #f3f3f8; border-left-color: var(--oj-slate); }

.entry-content .ojp--decide   .ojp-quick { background: #fff; border: 1px solid var(--oj-line); border-left: 4px solid var(--oj-orange); }

.entry-content .ojp--vertical .ojp-sec-hd .ojp-sec-ln { background: linear-gradient(90deg, var(--oj-orange) 0, var(--oj-line) 56px); }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 768px) {
  .entry-content .ojp { font-size: .985rem; }
  .entry-content .ojp-hero { padding-bottom: 20px; margin-bottom: 26px; }
  .entry-content .ojp-quick,
  .entry-content .ojp-toc { padding: 16px 18px; margin-bottom: 28px; }
  .entry-content .ojp-sec { margin-bottom: 34px; }
  .entry-content .ojp-summary,
  .entry-content .ojp-refs { padding: 18px 18px; }
  .entry-content ul.ojp-related-list { grid-template-columns: 1fr; }
  .entry-content .ojp-cta { padding: 26px 18px; }
  .entry-content .ojp table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   목록·검색·페이지에서 제목 복구
   ------------------------------------------------------------
   CSS_common.css 61행이 .entry-header 를 전역으로 display:none 처리한다.
   단일 글은 본문의 .ojp 히어로가 h1 을 갖고 있어 문제가 없지만,
   아카이브·검색 결과·일반 페이지에서는 제목이 «유일한 클릭 지점»이라
   숨겨지면 목록에서 글로 들어갈 수가 없다.
   .ojp 히어로를 가진 글에만 body.oj-has-hero 가 붙으므로 그 외에는 되살린다.
   CSS_common.css 는 수정하지 않는다.
   ============================================================ */
body:not(.oj-has-hero) .entry-header { display: block; }

/* 목록 제목 */
body:not(.oj-has-hero) .entry-header .entry-title {
  margin: 0 0 10px;
  font-family: var(--oj-font);
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.022em;
  text-align: left;
}
body:not(.oj-has-hero) .entry-header .entry-title a {
  color: var(--oj-ink);
  text-decoration: none;
  border-bottom: 0;
  transition: color .16s ease;
}
body:not(.oj-has-hero) .entry-header .entry-title a:hover {
  color: var(--oj-orange-dk);
}

/* 목록 메타 */
body:not(.oj-has-hero) .entry-header .entry-meta {
  margin: 0 0 6px;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--oj-muted);
}
body:not(.oj-has-hero) .entry-header .entry-meta a { color: var(--oj-muted); border-bottom: 0; }
body:not(.oj-has-hero) .entry-header .entry-meta a:hover { color: var(--oj-orange-dk); }

/* 목록 카드 */
body.archive .inside-article,
body.search .inside-article,
body.blog .inside-article {
  padding: 22px 24px;
  border: 1px solid var(--oj-line);
  border-radius: var(--oj-radius);
  background: #fff;
  height: 100%;
  transition: border-color .16s ease, transform .16s ease;
}
body.archive .inside-article:hover,
body.search .inside-article:hover,
body.blog .inside-article:hover {
  border-color: var(--oj-orange);
  transform: translateY(-1px);
}
body.archive .entry-summary,
body.search .entry-summary,
body.blog .entry-summary {
  font-size: .92rem;
  line-height: 1.66;
  color: var(--oj-body);
}

/* 일반 페이지 제목 */
body.page:not(.oj-has-hero) .entry-header .entry-title {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--oj-line);
}

@media (max-width: 768px) {
  body.archive .inside-article,
  body.search .inside-article,
  body.blog .inside-article { padding: 16px 16px; }
  body:not(.oj-has-hero) .entry-header .entry-title { font-size: 1.06rem; }
}

/* ============================================================
   히어로 대비 교정 — 2026-09-17
   히어로 섹션이 color:#fff 를 상속시키는데 배경 그라데이션이
   위는 rgba(252,190,3,.61), 아래는 #fff 라서 흰 글자가 읽히지 않았다.
   실측 대비: 흰 배경 위 1.00(완전 비가시), 노랑 위 1.48.
   (WCAG 최소 기준은 큰 글자 3.0, 일반 4.5)
   배경을 살리고 글자를 본문색으로 내린다. --contrast(#222) 기준
   흰 배경 15.9, 노랑 9.6 으로 그라데이션 전 구간에서 통과한다.
   선택자에 요소를 섞지 않아도 (0,2,0) 이라 블록의 (0,1,0) 을 이긴다.
   ============================================================ */
.gbp-section.gb-element-cd1537d2,
.gbp-section.gb-element-cd1537d2 .gb-text {
    color: var(--contrast);
}