/*
 * korea-dermatology.com — ojick.com 스타일 + 노랑 파스텔 팔레트
 *
 * 배포 위치: wp-content/themes/generatepress_child/css/CSS_OjYellow.css
 * 등록: inc/assets.php 에서 autopost-common 다음에 enqueue (아래 주석 참조)
 *
 * ── 왜 이런 구조인가 ────────────────────────────────────────────────
 * ojick.com 은 .entry-content .ojp-* 형태로 글 본문을 디자인한다. eyebrow + 번호 붙은
 * 섹션 헤더 + 왼쪽 강조선 박스 + Q 마커 FAQ + 참조 블록 + 관련글 카드가 그 언어다.
 * 이 사이트는 그 클래스를 쓰지 않고 세 가지 마크업이 섞여 있어서, 클래스를 갈아끼우지 않고
 * 같은 시각 언어를 각 마크업에 입힌다.
 *
 *   1) 시술 글 20개  : GenerateBlocks gb03-* (히어로·목차·본문 반복·FAQ·관련글)
 *   2) 지역 글 9개   : 순수 Gutenberg (표 중심)
 *   3) 페이지 11개+홈: 순수 Gutenberg (제목·목록·구분선)
 *
 * gb03-* 에는 GenerateBlocks 가 만든 인라인 스타일이 이미 있다(26종 중 25종).
 * 그건 단일 클래스 선택자라, 여기서는 `.entry-content` 를 앞에 붙여 특정도로 이긴다.
 * 로드 순서에 의존하지 않는다.
 *
 * ── 색 ──────────────────────────────────────────────────────────────
 * 노랑은 글자색으로 쓰면 대비가 거의 항상 깨진다. 그래서 노랑은 배경·테두리(파스텔 틴트)로만
 * 쓰고, 글자에 닿는 강조색은 같은 색조의 깊은 앰버로 내렸다. 실제로 확인한 값:
 *
 *   본문 9.91:1 · 제목 16.16:1 · 링크 4.87:1 · 링크(틴트 배경) 4.58:1
 *   강조색 위 흰 글자 4.87:1 · hover 7.13:1 · 보조 텍스트 4.62:1   → 미달 0건
 *
 * 더 밝은 노랑(#a87400, #b8860b, #c8890a)은 링크 대비가 2.8~4.1:1 로 전부 미달이라
 * 쓰지 않았다. 색을 바꿀 때는 그 점을 먼저 확인할 것.
 */

/* ============================================================
   1. 토큰
   ============================================================ */

:root {
  --kd-accent:    #9a6700;
  --kd-accent-dk: #785000;
  --kd-accent-lt: #fff8e1;
  --kd-ink:       #262015;
  --kd-body:      #4a4234;
  --kd-muted:     #7d7462;
  --kd-slate:     #6b6450;
  --kd-line:      #ece0c4;
  --kd-bg:        #ffffff;
  --kd-bg-alt:    #fffcf2;
  --kd-radius:    10px;
  --kd-maxw:      760px;
  --kd-font:      'Pretendard', 'Pretendard Variable', -apple-system,
                  BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
}

/* ============================================================
   1-b. 사이트 크롬 (헤더·내비·푸터·페이지 배경)
   ------------------------------------------------------------
   GeneratePress 는 --base / --contrast / --accent 전역 변수로 크롬을 칠하고,
   그 정의가 담긴 인라인 CSS 가 이 파일보다 뒤에 실린다. 그래서 :root(0,1,0) 로는
   못 이기고 html:root(0,1,1) 로 덮는다. 로드 순서에 의존하지 않는다.

   --base-3 (흰색)은 그대로 둔다. 헤더·푸터와 함께 .inside-article 배경이 이 값이라,
   바꾸면 글을 읽는 면이 틴트로 깔리고 위에서 검증한 대비값이 전부 달라진다.
   노랑은 카드 바깥(--base-2)에만 쓴다.
   ============================================================ */

html:root {
  --accent:     #9a6700;  /* 기본값이 파랑(#1e73be)이라 노랑 사이트와 부딪혔다 */
  --base-2:     #fdf8ea;  /* 본문 카드 바깥 페이지 배경 → 파스텔 노랑 */
  --base:       #f2e9d4;
  --contrast:   #262015;  /* 중립 검정 → 따뜻한 잉크 */
  --contrast-2: #4a4234;
}

/* 헤더 아래 얇은 앰버 선 — ojick 의 상단 구분 */
.site-header {
  border-bottom: 1px solid var(--kd-line);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a {
  color: var(--kd-accent-dk);
}

.site-info,
.footer-widgets {
  border-top: 1px solid var(--kd-line);
}

/* ============================================================
   2. 사이트 전반
   ============================================================ */

body {
  background: var(--kd-bg);
  color: var(--kd-body);
}

.entry-content {
  font-family: var(--kd-font);
  color: var(--kd-body);
  line-height: 1.75;
}

.entry-content a {
  color: var(--kd-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--kd-line);
  transition: color .15s ease, border-color .15s ease;
}

.entry-content a:hover,
.entry-content a:focus {
  color: var(--kd-accent-dk);
  border-bottom-color: var(--kd-accent);
}

.entry-title,
h1.entry-title {
  font-family: var(--kd-font);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.3;
  color: var(--kd-ink);
}

/* 글 제목 아래 얇은 구분선 — ojick 의 히어로 마감 */
.single .entry-header,
.page .entry-header {
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--kd-line);
}

/* ============================================================
   3. 순수 Gutenberg (지역 글 9개 · 페이지 11개 · 홈)
   ============================================================ */

.entry-content h2.wp-block-heading {
  position: relative;
  margin: 46px 0 16px;
  padding-top: 14px;
  font-family: var(--kd-font);
  font-size: clamp(1.22rem, 2.3vw, 1.45rem);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.022em;
  color: var(--kd-ink);
  border-top: 1px solid var(--kd-line);
}

/* 섹션 번호 대신 짧은 앰버 선 — ojick 의 sec-nb/sec-ln 대응 */
.entry-content h2.wp-block-heading::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--kd-accent);
}

.entry-content h2.wp-block-heading:first-child {
  margin-top: 0;
}

.entry-content h3.wp-block-heading {
  margin: 28px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kd-ink);
}

.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list {
  padding-left: 1.15em;
}

.entry-content ul.wp-block-list li,
.entry-content ol.wp-block-list li {
  margin-bottom: 7px;
}

.entry-content ul.wp-block-list li::marker {
  color: var(--kd-accent);
}

.entry-content .wp-block-separator {
  height: 1px;
  margin: 40px 0;
  border: 0;
  background: var(--kd-line);
  opacity: 1;
}

/* ---- 표 (지역 글의 병원 목록) ---- */

.entry-content .wp-block-table {
  margin: 0 0 32px;
}

.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-radius);
  overflow: hidden;
}

.entry-content .wp-block-table th {
  padding: 11px 13px;
  text-align: left;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kd-slate);
  background: var(--kd-accent-lt);
  border-bottom: 2px solid var(--kd-accent);
  white-space: nowrap;
}

.entry-content .wp-block-table td {
  padding: 11px 13px;
  vertical-align: top;
  color: var(--kd-body);
  border-bottom: 1px solid var(--kd-line);
}

.entry-content .wp-block-table tbody tr:nth-child(even) td {
  background: var(--kd-bg-alt);
}

.entry-content .wp-block-table tbody tr:last-child td {
  border-bottom: 0;
}

/* 첫 열이 순번이면 앰버로 세운다. 순번은 노출 순서일 뿐이므로 강조는 최소한으로. */
.entry-content .wp-block-table td:first-child {
  font-weight: 800;
  color: var(--kd-accent);
  width: 3.2em;
}

.entry-content .wp-element-caption,
.entry-content figcaption {
  margin-top: 9px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--kd-muted);
}

/* ============================================================
   4. 시술 글 (GenerateBlocks gb03-*)
   ============================================================ */

/* ---- 히어로 ---- */

.entry-content .gb-element-gb03-hero-wrap {
  display: block;
  min-height: 0;
  margin: 0 0 34px;
  padding: 0 0 26px;
  background: none;
  background-image: none;
  border-radius: 0;
  border-bottom: 1px solid var(--kd-line);
  overflow: visible;
}

.entry-content .gb-element-gb03-hero-content {
  max-width: var(--kd-maxw);
  margin: 0 auto;
  padding: 0;
  flex: none;
}

.entry-content .gb-text-gb03-hero-eyebrow {
  margin: 0 0 12px;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kd-accent);
}

.entry-content .gb-text-gb03-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 9px;
  vertical-align: middle;
  background: var(--kd-accent);
}

.entry-content .gb-text-gb03-hero-h1 {
  margin: 0 0 16px;
  font-family: var(--kd-font);
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.028em;
  color: var(--kd-ink);
}

.entry-content .gb-text-gb03-hero-intro {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--kd-muted);
}

/* 그라데이션 히어로 안에 있던 장식 바는 숨긴다 */
.entry-content .gb-element-gb03-hero-bar {
  display: none;
}

/* ---- 목차 ---- */

.entry-content .gb-element-gb03-toc-wrap {
  max-width: var(--kd-maxw);
  margin: 0 auto 44px;
  padding: 20px 24px;
  background: var(--kd-bg-alt);
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-radius);
}

.entry-content .gb-element-gb03-toc-item-wrap {
  counter-reset: kdtoc;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 28px;
}

.entry-content [class*="gb-element-gb03-toc-item-"] {
  counter-increment: kdtoc;
  position: relative;
  padding-left: 30px;
}

.entry-content [class*="gb-element-gb03-toc-item-"]::before {
  content: counter(kdtoc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: .715rem;
  font-weight: 800;
  line-height: 1.95;
  color: var(--kd-accent);
}

.entry-content .gb-text-gb03-toc-text {
  margin: 0;
  font-size: .945rem;
  line-height: 1.5;
  color: var(--kd-body);
}

/* ---- 리드 / 스니펫 답변 ---- */

.entry-content .gb-text-gb03-p1-title {
  max-width: var(--kd-maxw);
  margin: 0 auto 8px;
  font-family: var(--kd-font);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--kd-ink);
}

/* 첫 답변 문단을 ojick 의 quick 박스처럼 */
.entry-content .gb-text-e54f0610 {
  max-width: var(--kd-maxw);
  margin: 0 auto 34px;
  padding: 20px 24px;
  background: var(--kd-accent-lt);
  border-left: 4px solid var(--kd-accent);
  border-radius: 0 var(--kd-radius) var(--kd-radius) 0;
  color: var(--kd-body);
}

/* ---- 본문 섹션 ---- */

.entry-content .gb-element-gb03-body-wrap {
  max-width: var(--kd-maxw);
  margin: 0 auto;
}

.entry-content .gb-element-gb03-body-repeat {
  counter-reset: kdsec;
}

.entry-content .gb-element-gb03-body-repeat > div {
  counter-increment: kdsec;
  margin-bottom: 46px;
  scroll-margin-top: 90px;
}

.entry-content .gb-element-gb03-body-repeat > div > h2 {
  position: relative;
  margin: 0 0 16px;
  padding-top: 20px;
  font-family: var(--kd-font);
  font-size: clamp(1.22rem, 2.3vw, 1.45rem);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.022em;
  color: var(--kd-ink);
  border-top: 1px solid var(--kd-line);
}

/* 번호 + 선 — ojick 의 sec-hd 를 한 요소로 압축 */
.entry-content .gb-element-gb03-body-repeat > div > h2::before {
  content: counter(kdsec, decimal-leading-zero);
  position: absolute;
  top: -.62em;
  left: 0;
  padding-right: 9px;
  background: var(--kd-bg);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--kd-accent);
}

.entry-content .gb-element-gb03-body-repeat > div > div > h3,
.entry-content [class*="gb-text-section-body-h3-"] {
  margin: 26px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kd-ink);
}

.entry-content [class*="gb-text-section-body-p-"],
.entry-content .gb-element-gb03-body-repeat > div p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--kd-body);
  margin: 0 0 16px;
}

.entry-content [class*="gb-text-section-body-ol-item-"],
.entry-content [class*="gb-text-section-body-label-p-"] {
  color: var(--kd-body);
  line-height: 1.7;
}

.entry-content .gb-element-section-body-ol-0 {
  padding-left: 1.15em;
}

.entry-content .gb-element-section-body-ol-0 li::marker {
  color: var(--kd-accent);
  font-weight: 700;
}

/* ---- FAQ (h4 질문 + p 답변) ---- */

.entry-content .gb-text-e83493c2,
.entry-content .gb-text-17acd1af {
  max-width: var(--kd-maxw);
  margin: 0 auto 14px;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: left;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kd-slate);
}

.entry-content [class*="gb-text-a436ab9e"] {
  position: relative;
  max-width: var(--kd-maxw);
  margin: 0 auto;
  padding: 16px 0 9px 27px;
  border-top: 1px solid var(--kd-line);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--kd-ink);
}

.entry-content [class*="gb-text-a436ab9e"]::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 16px;
  font-weight: 800;
  color: var(--kd-accent);
}

.entry-content [class*="gb-text-4e3a4511"] {
  max-width: var(--kd-maxw);
  margin: 0 auto 16px;
  padding-left: 27px;
  color: var(--kd-body);
}

/* ---- 관련글 ---- */

.entry-content .gb-element-gb03-internal-links,
.entry-content .autopost-internal-links {
  max-width: var(--kd-maxw);
  margin: 40px auto 0;
  padding: 0;
  background: none;
  border: 0;
}

.entry-content .gb-element-gb03-internal-links::before {
  content: "Keep reading";
  display: block;
  margin-bottom: 12px;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kd-slate);
}

.entry-content .autopost-internal-links h2 {
  margin: 0 0 12px;
  padding-top: 0;
  border-top: 0;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kd-slate);
}

.entry-content .autopost-internal-links h2::before {
  display: none;
}

.entry-content ul.autopost-internal-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.entry-content ul.autopost-internal-links-list li {
  margin: 0;
}

.entry-content ul.autopost-internal-links-list a {
  display: block;
  padding: 13px 16px;
  background: var(--kd-bg);
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-radius);
  color: var(--kd-ink);
  font-size: .93rem;
  font-weight: 600;
}

.entry-content ul.autopost-internal-links-list a:hover,
.entry-content ul.autopost-internal-links-list a:focus {
  border-color: var(--kd-accent);
  color: var(--kd-accent-dk);
}

/* ============================================================
   5. 출처 블록 (있는 글에만)
   ============================================================ */

.entry-content .tbr-sources,
.entry-content .kd-refs {
  max-width: var(--kd-maxw);
  margin: 40px auto 0;
  padding: 24px 26px;
  background: var(--kd-bg);
  border: 1px solid var(--kd-line);
  border-left: 4px solid var(--kd-slate);
  border-radius: 0 var(--kd-radius) var(--kd-radius) 0;
}

.entry-content .tbr-sources-title {
  margin: 0 0 6px;
  padding-top: 0;
  border-top: 0;
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kd-slate);
}

.entry-content .tbr-sources-title::before {
  display: none;
}

/* ============================================================
   6. 모바일
   ============================================================ */

@media (max-width: 767px) {
  .entry-content .gb-element-gb03-toc-item-wrap {
    grid-template-columns: 1fr;
  }
  .entry-content .gb-element-gb03-toc-wrap,
  .entry-content .gb-text-e54f0610 {
    padding: 16px 18px;
  }
  .entry-content .wp-block-table table {
    font-size: .86rem;
  }
  .entry-content .wp-block-table th,
  .entry-content .wp-block-table td {
    padding: 9px 10px;
  }
  /* 표가 넓으면 가로 스크롤을 준다 */
  .entry-content .wp-block-table {
    overflow-x: auto;
  }
}