/*
Theme Name:   GeneratePress — Daon & Raon
Theme URI:    https://daonraonlife.com
Description:  Daon & Raon child theme. 디자인 토큰과 메인페이지 스타일은 여기에만 둔다.
              부모 테마(generatepress)와 cafe24 child(generatepress-cafe24)는 수정하지 않는다.
              토큰의 출처는 리포지토리의 DESIGN.md 이며, 값이 바뀌면 그쪽을 먼저 고친다.
Author:       Daon & Raon
Template:     generatepress
Version:      0.1.0
Text Domain:  generatepress-daonraon
*/


/* ─────────────────────────────────────────────────────────────
   폰트 — **로컬 호스팅** (CDN 미사용)
   ─────────────────────────────────────────────────────────────
   출처: MaruBuri(네이버 한글한글아름답게) · Pretendard(orioncactus)
   pyftsubset 로 **KS X 1001 완성형 2,350자** + 라틴 + 문장부호만 남겼다.
   전체 현대 음절(11,172자)로 잡으면 1,933 KB, KS 2,350자면 785 KB 다 (실측).
   ⚠️ KS 밖 음절(예: 쀼·똟)은 폴백 폰트로 그려진다. 이 블로그의 어휘로는 나오지 않지만
      원문 인용에 특이 음절이 있으면 그 글자만 다른 글꼴로 보인다 — 알고 감수한다.
   가변 Pretendard(2.0MB)는 전 굵기를 담아 커서 **정적 2굵기**로 바꿨다.

   ⚠️ 이 프로젝트가 쓰는 굵기는 400·600 둘뿐이다. 굵기를 늘리면 파일이 는다.
   ⚠️ font-display:swap — 폰트가 늦어도 글자는 먼저 보인다.
   ───────────────────────────────────────────────────────────── */
@font-face{ font-family:'MaruBuri'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/MaruBuri-Regular.subset.woff2') format('woff2'); }
@font-face{ font-family:'MaruBuri'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/MaruBuri-SemiBold.subset.woff2') format('woff2'); }
@font-face{ font-family:'Pretendard'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/Pretendard-Regular.subset.woff2') format('woff2'); }
@font-face{ font-family:'Pretendard'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/Pretendard-SemiBold.subset.woff2') format('woff2'); }

/* ─────────────────────────────────────────────────────────────
   디자인 토큰 — DESIGN.md §1 에서 추출. 여기서 값을 새로 만들지 않는다.
   ───────────────────────────────────────────────────────────── */
:root{
  --dr-bg:      #FAF7F1;  /* warm white — 페이지 바탕 */
  --dr-cream:   #F6EFE3;  /* 섹션 바탕 · 인용 카드 */
  --dr-card:    #E7DAC6;  /* beige — 아바타, 썸네일 그라데이션 */
  --dr-brown:   #8A6F56;  /* 보조 — 태그·링크·hover 밑줄 */
  --dr-text:    #4A3F33;  /* 본문 */
  --dr-meta:    #787167;  /* 보조 텍스트 — AA 최근접 조정값. §4 참조 */
  --dr-accent:  #D98A8A;  /* rose — 장식 전용. 텍스트 금지 */

  --dr-head:    #5B4636;  /* 헤드라인 · 섹션 h2 · 인용 */
  --dr-subcopy: #6B5D4D;  /* 서브카피 · 기록 철학 */
  --dr-line:    rgba(138,111,86,.16);   /* 카드 테두리 · footer 상단선 */
  --dr-line-2:  rgba(91,70,54,.25);     /* 배지 구분선 */

  --dr-serif:   'MaruBuri','Nanum Myeongjo',ui-serif,serif;
  /* ⚠️ 이모지 폴백을 반드시 남긴다. GeneratePress 기본 스택에는 있었는데
     이 토큰으로 덮으면서 빠뜨렸고, 카드 아이콘·아바타가 사라졌다 (2026-08-26). */
  --dr-emoji:   'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  --dr-sans:    'Pretendard',-apple-system,'Noto Sans KR',sans-serif,var(--dr-emoji);
  --dr-maxw:    1240px;
}

/* ⚠️ --dr-meta 는 프로토타입의 #8C8478 이 아니다.
   #8C8478 은 --dr-bg 위에서 대비 3.45 로 본문 AA(4.5) 미달이고,
   13.5px·12.5px 로 쓰이므로 "큰 글씨" 예외에도 해당하지 않는다.
   같은 색상 계열에서 4.5 를 **처음 넘는** 값이 #787167 이다 (bg 4.51 · #fff 4.82).
   ⚠️ 4.51 은 여유가 거의 없다. 폰트 렌더링이나 배경이 조금만 바뀌어도 떨어진다.
   여유를 두려면 #6F675C (bg 5.21 · #fff 5.57) 로 한 단계 더 내린다. (DESIGN.md §4) */

/* --dr-accent 는 장식 전용이다. 대비 2.47 로 어느 기준도 넘지 못한다.
   텍스트·링크·상태 표시에 쓰지 않는다. */

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   5.1 Header — SVG 워드마크 + 메뉴
   DESIGN.md §2(.logo-mark 24px serif / .logo-sub 9.5px letterspacing .28em)
   ───────────────────────────────────────────────────────────── */
.site-header{ background: var(--dr-bg); border-bottom: 1px solid var(--dr-line); }
.inside-header{ padding-top: 22px; padding-bottom: 22px; }

.dr-logo{ display:inline-flex; flex-direction:column; gap:3px;
          color: var(--dr-head); text-decoration:none; line-height:1.1; }
.dr-logo svg{ width:186px; height:auto; display:block; }
.dr-logo-sub{ font-family: var(--dr-sans); font-size:9.5px; letter-spacing:.28em;
              /* ⚠️ DESIGN.md §4 — --dr-brown 은 9.5px 텍스트에 쓸 수 없다 (4.38).
                 조정안으로 --dr-meta 를 쓴다. 원안 비교 캡처는 .dr-brown-orig 참조 */
              color: var(--dr-meta); }
.dr-logo:focus-visible{ outline:2px solid var(--dr-head); outline-offset:4px; border-radius:4px; }

.main-navigation, .main-navigation .main-nav > ul { background: transparent; }
.main-navigation .main-nav ul li a{
  color: var(--dr-text); font-family: var(--dr-sans); font-size:15px;
  padding:6px 2px; margin:0 17px; border-bottom:2px solid transparent;
  transition: border-color .2s;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus-visible{
  border-bottom-color: var(--dr-brown); background: transparent; color: var(--dr-text);
}
.main-navigation .menu-toggle{ color: var(--dr-text); background: transparent; }

/* 페이지 바탕 — GeneratePress 기본 회색(#f7f8f9)을 토큰으로 덮는다 */
body, .site-content, .site.grid-container, .separate-containers .site-main{ background: var(--dr-bg); }
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content{ background: var(--dr-bg); }
.site-footer, .site-info{ background: var(--dr-bg); color: var(--dr-meta);
  border-top:1px solid var(--dr-line); }

/* ─────────────────────────────────────────────────────────────
   5.2 Hero — 텍스트와 사진이 **독립적인** 2단
   ⛔ 프로토타입의 full-bleed 사진 + 그라데이션 veil 은 채택하지 않는다
      (DESIGN.md §7 · 지시문 5.2). 색·간격·타이포만 참조한다.
   ───────────────────────────────────────────────────────────── */
.dr-wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }

.dr-hero{ background: var(--dr-bg); padding: 56px 0 40px; }
.dr-hero-grid{ display:grid; grid-template-columns: 45% 55%; gap: 40px; align-items:center; }
.dr-hero-copy h1{
  font-family: var(--dr-serif); font-weight:600; color: var(--dr-head);
  font-size: clamp(32px, 3.8vw, 50px); line-height:1.5; letter-spacing:-.005em;
  margin:0 0 26px;
}
.dr-rule{ display:block; width:56px; height:2px; background: var(--dr-head); margin-bottom:24px; }
.dr-hero-sub{ font-size:16px; line-height:1.9; color: var(--dr-subcopy);
              max-width:40ch; margin:0 0 32px; }

/* CTA — **B 확정 (2026-08-26)**
   solid head #5B4636 / 흰 글씨 · 대비 8.27 (본문 AA 통과).
   A(solid brown 4.38) 는 15px 에서 AA 미달이라 탈락했고,
   C(outline) 는 hero 사진 옆에서 존재감이 약해 탈락했다.
   시안 코드는 남기지 않는다 — 미확정 분기가 코드에 남으면 다음 사람이 헷갈린다. */
.dr-cta-wrap{ margin:0 0 34px; }
.dr-cta{ display:inline-block; border-radius:999px; padding:14px 28px;
         font-family: var(--dr-sans); font-weight:600; font-size:15px;
         text-decoration:none; background: var(--dr-head); color:#fff;
         transition: background-color .2s; }
.dr-cta:hover{ background:#4a382a; }
.dr-cta:focus-visible{ outline:2px solid var(--dr-head); outline-offset:3px; }

/* 정보 요소 — "신뢰 배지" 라는 이름을 노출하지 않는다 (지시문 5.2) */
.dr-notes{ display:flex; gap:0; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.dr-notes li{ font-size:13px; color: var(--dr-head); white-space:nowrap;
              padding:0 18px; border-left:1px solid rgba(91,70,54,.25); }
.dr-notes li:first-child{ border-left:none; padding-left:0; }

.dr-hero-photo img{ width:100%; height:auto; border-radius:14px; display:block; }

/* 인용 배너 — cream 얇은 띠 */
.dr-quote{ background: var(--dr-cream); margin:0; padding:22px 32px; text-align:center; }
.dr-quote p{ font-family: var(--dr-serif); color: var(--dr-head);
             font-size: clamp(14.5px, 1.6vw, 18px); margin:0; }

/* 홈에서는 GeneratePress 의 페이지 제목과 컨테이너 여백을 쓰지 않는다 */
.home .entry-header, .home .page-header{ display:none; }
.home .site-content .content-area{ padding:0; }
.home .entry-content{ margin:0; }
.home .site-main > .entry-content > *{ margin-block-start:0; }

/* ── 홈은 GeneratePress 컨테이너를 쓰지 않는다 ────────────────────
   .dr-wrap 이 폭을 잡는다. GP 컨테이너를 남겨 두면 폭이 두 번 제한돼
   45% 열이 좁아지고 H1 이 깨진다 (2026-08-26 실측). */
.home .site-content{ display:block; }
.home .content-area,
.home .site-main{ width:100%; max-width:none; padding:0; margin:0; }
.home .inside-article{ padding:0; }
.home .entry-content > .dr-hero,
.home .entry-content > .dr-quote{ margin-left:0; margin-right:0; }

/* H1 은 45% 열 안에서 읽혀야 한다. 프로토타입의 50px 는 풀블리드 기준값이다 */
.dr-hero-copy h1{ font-size: clamp(30px, 2.7vw, 40px); line-height:1.45; }

.dr-hero-photo picture{ display:block; }
.dr-notes{ row-gap:10px; }

/* ─────────────────────────────────────────────────────────────
   5.4 카테고리 카드 · 5.5 Featured · 소개 · 반응형
   ───────────────────────────────────────────────────────────── */
.dr-section{ padding:72px 0 0; }
.dr-sec-head{ margin-bottom:32px; }
.dr-sec-head h2{ font-family:var(--dr-serif); font-size:26px; font-weight:600;
                 color:var(--dr-head); margin:0 0 8px; }
.dr-sec-head p{ color:var(--dr-meta); font-size:14.5px; margin:0; }

.dr-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dr-card{ background:#fff; border:1px solid var(--dr-line); border-radius:14px;
          padding:26px 22px; text-decoration:none; display:block; color:inherit;
          transition:transform .2s, box-shadow .2s; }
.dr-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -20px rgba(62,52,43,.35); }
.dr-card:focus-visible{ outline:2px solid var(--dr-head); outline-offset:3px; }
.dr-card h3{ font-size:16.5px; font-weight:600; margin:0 0 6px; color:var(--dr-text); }
.dr-card p{ font-size:13.5px; color:var(--dr-meta); line-height:1.6; margin:0; }
.dr-card .dr-go{ display:inline-block; margin-top:14px; font-size:13px;
  /* ⚠️ DESIGN.md §4 — --dr-brown(4.38) 은 13px 텍스트에 AA 미달.
     조정안으로 --dr-head 를 쓴다. 원안 비교는 .dr-brown-orig 캡처 참조 */
  color: var(--dr-head); }

.dr-feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dr-post{ background:#fff; border:1px solid var(--dr-line); border-radius:14px;
          overflow:hidden; text-decoration:none; color:inherit; display:block; }
.dr-thumb{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--dr-card),var(--dr-cream)); }
.dr-post-body{ padding:20px 22px 24px; }
.dr-tag{ display:inline-block; font-size:11.5px; letter-spacing:.06em;
  /* ⚠️ --dr-brown 11.5px 는 AA 미달 → 조정안 --dr-head */
  color: var(--dr-head); margin-bottom:8px; }
.dr-post h3{ font-family:var(--dr-serif); font-size:17.5px; font-weight:600;
             line-height:1.5; margin:0; color:var(--dr-text); }
.dr-post .dr-meta{ margin-top:10px; font-size:12.5px; color:var(--dr-meta); }

.dr-about{ background:var(--dr-cream); margin-top:76px; padding:60px 0; }
.dr-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:32px; }
.dr-cat{ background:var(--dr-bg); border-radius:14px; padding:26px 28px;
         display:flex; gap:18px; align-items:center; }
.dr-cat h3{ font-family:var(--dr-serif); font-size:19px; font-weight:600; margin:0; }
.dr-cat p{ font-size:13.5px; color:var(--dr-meta); margin:2px 0 0; }
.dr-philosophy{ text-align:center; font-family:var(--dr-serif); font-size:17px;
                color:var(--dr-subcopy); max-width:34em; margin:0 auto; }

.dr-disclaimer{ margin-top:16px; font-size:12.5px; color:var(--dr-meta);
                line-height:1.65; max-width:62ch; }

/* ── 반응형 4단계 (DESIGN.md §5 · 승인 2026-08-26) ────────────── */
@media (max-width:1199px){
  .dr-wrap{ padding:0 24px; }
  .main-navigation .main-nav ul li a{ margin:0 11px; }
}
@media (max-width:899px){
  /* 세로 재배치. 모바일 순서: 워드마크+햄버거 → headline → sub-copy
     → 사진(4:3) → CTA → 정보 요소 → 카테고리 2×2 (지시문 7단계) */
  .dr-hero-grid{ grid-template-columns:1fr; gap:24px; }
  .dr-hero-copy{ display:contents; }
  .dr-hero-copy h1{ order:1; }
  .dr-rule{ order:2; }
  .dr-hero-sub{ order:3; }
  .dr-hero-photo{ order:4; margin:0 -24px; }
  .dr-hero-photo img{ border-radius:0; }
  .dr-cta-wrap{ order:5; margin-bottom:24px; }
  .dr-notes{ order:6; }
  .dr-cards{ grid-template-columns:1fr 1fr; }
  .dr-feat{ grid-template-columns:1fr 1fr; }
  .dr-about-grid{ grid-template-columns:1fr; }
  .dr-quote{ padding:18px 24px; }
}
@media (max-width:599px){
  .dr-wrap{ padding:0 20px; }
  .dr-hero{ padding:32px 0 28px; }
  .dr-hero-photo{ margin:0 -20px; }
  .dr-hero-copy h1{ font-size:clamp(26px,7.2vw,32px); }
  .dr-feat{ grid-template-columns:1fr; }
  .dr-notes li{ padding:0 12px; font-size:12.5px; }
}

/* 5.8 Footer */
.dr-footer{ padding:40px 0 44px; text-align:left; }
.dr-foot-top{ display:flex; justify-content:space-between; gap:20px;
              flex-wrap:wrap; align-items:baseline; }
.dr-foot-site{ font-family:var(--dr-serif); font-size:15px; color:var(--dr-text); }
.dr-foot-nav{ font-size:13px; color:var(--dr-meta); }
.dr-foot-nav a{ color:var(--dr-meta); text-decoration:none; }
.dr-foot-nav a:hover, .dr-foot-nav a:focus-visible{ color:var(--dr-text); text-decoration:underline; }
/* 소개 · 문의 · 개인정보처리방침 — 카테고리 줄과 **다른 줄**에 둔다.
   섞으면 글 분류와 사이트 정보가 같은 무게로 읽힌다. */
.dr-foot-pages{ margin-top:12px; font-size:13px; color:var(--dr-meta); }
.dr-foot-pages a{ color:var(--dr-meta); text-decoration:none; }
.dr-foot-pages a:hover, .dr-foot-pages a:focus-visible{ color:var(--dr-text); text-decoration:underline; }
.dr-copy{ margin-top:12px; font-size:12.5px; color:var(--dr-meta); }
.site-info{ padding:0; }

/* 본문 폰트 — GeneratePress 기본 스택을 토큰으로 덮는다.
   :root 에 정의만 해 두면 body 규칙이 이긴다 (2026-08-26 실측). */
body, button, input, select, textarea,
.entry-content, .main-navigation a{ font-family: var(--dr-sans); }
h1,h2,h3,h4,h5,h6{ font-family: var(--dr-sans); }   /* 기본은 sans */
.dr-hero-copy h1, .dr-sec-head h2, .dr-post h3,
.dr-cat h3, .dr-philosophy, .dr-quote p,
.dr-foot-site, .entry-title{ font-family: var(--dr-serif); }

/* ─────────────────────────────────────────────────────────────
   글 상세 — v2.1 문체 요소가 깨지지 않게 한다
   ─────────────────────────────────────────────────────────────
   본문에 실제로 나오는 것: ① 원문 인용(blockquote) ② 정보 박스 ③ 실용 박스
   ④ 각주(D1…) ⑤ 판독 불가 █. 각각 눈으로 구분돼야 한다.
   ⛔ 정보 박스와 우리 기록이 같은 모양이면 일반론이 우리 고양이 이야기처럼 읽힌다. */
/* ⚠️ body 기준으로 쓴다.
   `.page:not(.home)` 은 <article class="page"> 를 잡는다 — .home 은 <body> 에
   붙으므로 article 은 언제나 :not(.home) 이고, **홈에서도 매치됐다.**
   그래서 홈 콘텐츠가 68ch(=689px)로 접혔다 (2026-08-26 실측). */
body.single .entry-content,
body.page:not(.home) .entry-content{
  max-width: 68ch; margin-left:auto; margin-right:auto;
  font-size:17px; line-height:1.85; color: var(--dr-text);
}
body.single .entry-title, body.page:not(.home) .entry-title{
  font-family: var(--dr-serif); color: var(--dr-head);
  font-size: clamp(26px,2.4vw,36px); line-height:1.45;
}
/* ⚠️ `body.single` 만 쓰면 **페이지는 이 타이포를 못 받는다.** 폭(68ch)·본문
   크기는 위에서 page 에도 주면서 h2/p 는 single 에만 줘서, 개인정보처리방침의
   절 제목이 sans 로 나오고 문단 간격이 없었다 (2026-08-26 실측). */
body.single .entry-content h2,
body.page:not(.home) .entry-content h2{
  font-family: var(--dr-serif); color: var(--dr-head);
  font-size:22px; margin:2.4em 0 .7em; }
body.single .entry-content p,
body.page:not(.home) .entry-content p{ margin:0 0 1.35em; }
body.page:not(.home) .entry-content ul{ margin:0 0 1.35em 1.15em; padding:0; }
body.page:not(.home) .entry-content li{ margin:.3em 0; }

/* 이메일 주소는 공백이 없어서 좁은 화면을 밀어낼 수 있다 — 끊을 수 있게 둔다.
   (긴 mailto 가 가로 스크롤을 만드는 것이 §5 검사 항목이다) */
.dr-privacy-contact{ overflow-wrap:anywhere; }
.dr-privacy-contact a{ color:var(--dr-head); text-underline-offset:3px; }

/* ① 원문 인용 — 노트에 적힌 말 그대로 */
body.single .entry-content blockquote{
  margin:1.8em 0; padding:14px 0 14px 20px;
  border-left:3px solid var(--dr-card); background:transparent;
  font-family: var(--dr-serif); font-size:17px; color: var(--dr-head);
}
body.single .entry-content blockquote p:last-child{ margin-bottom:0; }

/* ②③ 정보 박스 · 실용 박스 — **본문과 시각적으로 분리**한다 (v2.1 §0.1 조건) */
.dr-box{ background: var(--dr-cream); border-radius:14px;
         padding:22px 24px; margin:2em 0; font-size:15.5px; line-height:1.75; }
.dr-box > :first-child{ margin-top:0; }
.dr-box > :last-child{ margin-bottom:0; }
.dr-box-label{ display:block; font-size:12px; letter-spacing:.08em;
               color: var(--dr-meta); margin-bottom:8px; }
.dr-box ul{ margin:.6em 0 0 1.1em; padding:0; }
.dr-box li{ margin:.35em 0; }

/* ④ 각주 */
body.single .entry-content .wp-block-footnotes,
body.single .entry-content ol.footnotes{
  margin-top:3em; padding-top:1.4em; border-top:1px solid var(--dr-line);
  font-size:14px; color: var(--dr-meta); line-height:1.7;
}
/* ⑤ 판독 불가 — 지우거나 예쁘게 만들지 않는다. 있는 그대로 보인다 */
.dr-unreadable{ font-family: var(--dr-sans); }

/* 글 하단 의료 고지문 */
.dr-post-disclaimer{ margin-top:3em; padding-top:1.4em;
  border-top:1px solid var(--dr-line); font-size:13px; color: var(--dr-meta);
  line-height:1.7; font-style:normal; }

/* ─────────────────────────────────────────────────────────────
   web-design-guidelines 검사 반영 (2026-08-26)
   ───────────────────────────────────────────────────────────── */
/* 헤딩 줄바꿈을 균형 있게 — 두 줄짜리 제목이 한 단어만 남기지 않게 */
h1, h2, h3, .dr-hero-copy h1{ text-wrap: balance; }
.dr-hero-sub, .dr-card p, .dr-philosophy{ text-wrap: pretty; }

/* 탭 시 지연·하이라이트 */
a, button, .dr-cta, .dr-card{ touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(91,70,54,.12); }

/* 긴 제목·긴 인용이 넘치지 않게 */
.dr-card h3, .dr-post h3, .dr-cat h3, .dr-foot-site{ overflow-wrap:break-word; }
.dr-hero-copy h1{ overflow-wrap:break-word; }

/* 헤딩 앵커 이동 시 헤더에 가리지 않게 */
h2[id], h3[id]{ scroll-margin-top: 96px; }

/* 가로 스크롤바 방지 */
html, body{ overflow-x: hidden; }


/* ─────────────────────────────────────────────────────────────
   ① 홈 full-width — 사이드바 자리를 쓰지 않는다
   ─────────────────────────────────────────────────────────────
   GeneratePress 기본 레이아웃이 right-sidebar 다. 홈에서는 .widget-area 를
   내보내지 않고(functions.php) 콘텐츠가 1240px 를 온전히 쓴다. */
body.home .site-content{ display:block; }
body.home .content-area{ width:100%; max-width:none; float:none; padding:0; margin:0; }
body.home .widget-area{ display:none; }
body.home .site-main{ width:100%; max-width:none; padding:0; margin:0; }
body.home .entry-content{ max-width:none; margin:0; font-size:16px; line-height:1.7; }

/* 홈 컨테이너를 프로토타입 폭(1240)에 맞춘다 */
body.home .site-content,
body.home .site.grid-container{ max-width:1240px; }

/* ─────────────────────────────────────────────────────────────
   프로토타입 재현 — 아이콘 · 아바타 · ♡ · 인용 카드
   ⚠️ 유지: --dr-brown / --dr-meta 접근성 조정, 정보 요소 3개(배지 명칭 비노출)
   ───────────────────────────────────────────────────────────── */
.dr-heart{ color: var(--dr-accent); font-size:.55em; vertical-align:super; }

.dr-card .dr-ico{ display:block; font-size:22px; margin-bottom:14px; line-height:1; }
.dr-notes .dr-ico{ display:block; font-size:21px; opacity:.85; margin-bottom:9px; }
.dr-notes li{ display:flex; flex-direction:column; align-items:center; gap:0; }

.dr-avatar{ width:58px; height:58px; border-radius:50%; background:var(--dr-card);
            display:flex; align-items:center; justify-content:center;
            font-size:24px; flex-shrink:0; line-height:1; }

/* 인용 배너 — 프로토타입의 둥근 카드 + 그림자 */
.dr-quote{ background:rgba(250,247,241,.94); border-radius:16px;
           padding:20px 30px; text-align:center; margin:0 auto;
           width:min(880px, 100%);
           box-shadow:0 18px 40px -22px rgba(62,52,43,.4); }
.dr-hero{ padding-bottom:26px; }

.dr-philosophy{ line-height:1.7; }

/* 히어로 배경 — 프로토타입은 .hero{background:var(--cream)} 이다.
   풀블리드 사진+veil 은 채택하지 않지만(§7) **배경색 자체는 프로토타입 값**이다. */
.dr-hero{ background: var(--dr-cream); padding-bottom:0; }
.dr-hero > .dr-wrap:last-child{ padding-bottom:0; }
.dr-quote{ position:relative; bottom:-26px; }
.dr-section:first-of-type{ padding-top:98px; }


/* 이모지 요소는 이모지 폰트를 먼저 본다 */
.dr-ico, .dr-avatar, .dr-quote span[aria-hidden]{ font-family: var(--dr-emoji), var(--dr-sans); }

/* 모바일 정보 요소 — 프로토타입은 pill 이다 */
@media (max-width:899px){
  .dr-notes{ flex-wrap:wrap; gap:12px; }
  .dr-notes li{ flex-direction:row; align-items:center; gap:8px;
                border:1px solid rgba(138,111,86,.2); border-radius:999px;
                padding:8px 16px; background:#fff; }
  .dr-notes li:first-child{ padding-left:16px; }
  .dr-notes .dr-ico{ display:inline-block; margin-bottom:0; font-size:16px; }
}

/* ═════════════════════════════════════════════════════════════
   히어로 — **풀블리드 재작업** (사용자 확정 2026-08-26)
   ═════════════════════════════════════════════════════════════
   ⚠️ DESIGN.md §7 은 "풀블리드+그라데이션 미채택" 이었다. 그 결정을 뒤집는다.
      §7 도 함께 고쳤다. 여기 CSS 가 진실이 아니라 DESIGN.md 가 진실이다.

   스크림 농도는 실측으로 정했다 — 사진 좌측 42% 영역의 밝기가 평균 183 이지만
   TV·그림자 때문에 최소 0 까지 떨어진다. **순수 검정 위에서도 AA 를 넘는 0.92**
   를 텍스트가 놓이는 44% 까지 유지한 뒤 흐린다.
       0.92 스크림 위 H1 #5B4636 = 6.48 · 서브카피 #6B5D4D = 4.67  (둘 다 ≥4.5)
   ───────────────────────────────────────────────────────────── */
.dr-hero{ position:relative; overflow:hidden; background:var(--dr-cream);
          padding:0; min-height:560px; }
.dr-hero-bg{ position:absolute; inset:0; display:block; }
.dr-hero-bg img{ width:100%; height:100%; object-fit:cover;
                 object-position:62% 34%; display:block; }
.dr-hero-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(93deg,
    rgba(246,239,227,.98) 0%,
    rgba(246,239,227,.96) 30%,
    rgba(246,239,227,.92) 44%,
    rgba(246,239,227,.55) 56%,
    rgba(246,239,227,.12) 66%,
    rgba(246,239,227,0)   74%); }
.dr-hero-inner{ position:relative; min-height:560px; display:flex;
                flex-direction:column; justify-content:center;
                padding-top:56px; padding-bottom:76px; }
.dr-hero-copy{ max-width:520px; }
.dr-hero-photo{ display:none; }          /* 2단 시절의 우측 사진은 쓰지 않는다 */
.dr-hero-grid{ display:block; }

/* 인용 배너 — 히어로 하단 경계에 걸친다 */
.dr-quote-wrap{ position:relative; margin-top:-38px; z-index:2; }
.dr-quote{ position:static; bottom:auto; }

@media (max-width:899px){
  .dr-hero{ min-height:0; }
  .dr-hero-inner{ min-height:0; padding-top:32px; padding-bottom:40px; }
  .dr-hero-copy{ max-width:100%; }
  .dr-hero-scrim{ background:linear-gradient(180deg,
      rgba(246,239,227,.97) 0%, rgba(246,239,227,.95) 62%,
      rgba(246,239,227,.86) 82%, rgba(246,239,227,.80) 100%); }
  .dr-hero-bg img{ object-position:60% 30%; }
  .dr-quote-wrap{ margin-top:-26px; }
}

/* 히어로를 뷰포트 전체 폭으로 빼낸다.
   .entry-content 는 1240 으로 묶여 있으므로 그 밖으로 나가야 풀블리드가 된다. */
body.home .dr-hero{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
/* 정보 요소가 인용 카드에 가리지 않도록 히어로 아래 여백을 넉넉히 둔다 */
.dr-hero-inner{ padding-bottom:118px; }
.dr-quote{ width:min(880px,100%); margin:0 auto; }
@media (max-width:899px){
  .dr-hero-inner{ padding-bottom:66px; }
}

/* 앞서 2단 시절에 넣은 margin 리셋이 풀블리드를 막는다. 명시적으로 이긴다. */
body.home .entry-content > .dr-hero{
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}
/* 인용 카드 — 프로토타입처럼 히어로 **안에서** 하단에 절대배치 */
.dr-hero{ min-height:640px; }
.dr-hero-inner{ min-height:640px; padding-bottom:150px; }
.dr-quote-wrap{ position:absolute; left:0; right:0; bottom:26px;
                margin:0 auto; z-index:2; }
@media (max-width:899px){
  .dr-hero, .dr-hero-inner{ min-height:0; }
  .dr-hero-inner{ padding-bottom:24px; }
  .dr-quote-wrap{ position:static; margin-top:0; padding-bottom:26px; }
}

/* ═════════════════════════════════════════════════════════════
   타이포그래피 패스 — 목업 인상 재현 (2026-08-26)
   ═════════════════════════════════════════════════════════════
   헤드라인·인용 = MaruBuri(부리 서체) · 워드마크 = Dancing Script · 본문 = Pretendard
   라이선스: MaruBuri 상업적 사용 허용(네이버 한글한글아름답게) ·
             Dancing Script SIL OFL 1.1 — 둘 다 자체 호스팅 가능
   ───────────────────────────────────────────────────────────── */
@font-face{ font-family:'Dancing Script'; font-style:normal; font-weight:700;
  font-display:swap; src:url('assets/fonts/DancingScript.subset.woff2') format('woff2'); }

/* 워드마크 — 스크립트체. 부제는 산세리프 소형 대문자 유지 */
.dr-logo svg{ width:196px; }
.dr-logo-sub{ font-family:var(--dr-sans); font-size:9.5px; letter-spacing:.28em;
              text-transform:uppercase; }

/* H1 — 목업처럼 크게, 행간 1.4, 자간 약간 좁게, 3행 유지 */
.dr-hero-copy h1{
  font-family:var(--dr-serif); font-weight:600;
  font-size:clamp(34px, 3.55vw, 51px);
  line-height:1.4; letter-spacing:-.018em;
  margin:0 0 30px; text-wrap:balance;
}
.dr-heart{ font-size:.5em; }

/* 구분선 — 목업 비율 */
.dr-rule{ width:58px; height:1.5px; background:var(--dr-head);
          margin:0 0 26px; opacity:.85; }

/* 서브카피 — 행간 여유 */
.dr-hero-sub{ font-size:15.5px; line-height:2.0; letter-spacing:-.005em;
              color:var(--dr-subcopy); margin:0 0 34px; max-width:42ch; }

/* 메뉴 · 정보 요소 라벨 — 자간 */
.main-navigation .main-nav ul li a{ font-size:14.5px; letter-spacing:.01em; }
.dr-notes li{ font-size:12.5px; letter-spacing:.02em; }

/* 섹션 제목 · 카드 제목 · 인용 — 부리 서체 일관 적용 */
.dr-sec-head h2{ font-family:var(--dr-serif); font-size:27px; font-weight:600;
                 letter-spacing:-.012em; }
.dr-card h3{ font-family:var(--dr-serif); font-size:17px; letter-spacing:-.01em; }
.dr-quote p{ font-family:var(--dr-serif); font-size:clamp(15px,1.35vw,18px);
             letter-spacing:-.008em; color:var(--dr-head); }
.dr-cat h3{ font-family:var(--dr-serif); }
.dr-philosophy{ font-family:var(--dr-serif); font-size:17.5px; line-height:1.85;
                letter-spacing:-.008em; }
.dr-foot-site{ font-family:var(--dr-serif); }

/* ── 모바일 B안 확정: 세로 스택 (사진 상단 → 텍스트) ────────────── */
@media (max-width:899px){
  .dr-hero-bg{ position:relative; inset:auto; height:auto; }
  .dr-hero-bg img{ height:auto; aspect-ratio:4/3; object-position:60% 32%; }
  .dr-hero-scrim{ display:none; }
  .dr-hero-inner{ padding-top:30px; padding-bottom:26px; }
  .dr-quote-wrap{ position:static; padding-bottom:28px; }
  .dr-hero-copy h1{ font-size:clamp(27px,7.1vw,33px); line-height:1.42; }
  .dr-hero-sub{ font-size:15px; line-height:1.9; }
}

/* ─────────────────────────────────────────────────────────────
   아이콘을 CSS 로 그린다 — **DB 를 거치지 않는다**
   ─────────────────────────────────────────────────────────────
   이 사이트의 DB 는 utf8(3바이트)라 4바이트 이모지가 저장 중 사라지거나
   다른 코드포인트로 바뀐다. 실제로 두 번 겪었다 (2026-08-26):
     · 첫 저장에서 🩺🍚🏠🐈 가 빈 칸이 됐다
     · 수치 참조로 넣었더니 🤍(U+1F90D)가 U+1F88D 로 변형됐다
     · 다시 저장하니 📔🗓️ 가 사라졌다
   CSS 의 content 는 스타일시트 파일에 있으므로 MySQL 을 거치지 않는다.
   근본 해결은 DB 를 utf8mb4 로 올리는 것이며 그건 사용자 결정 사항이다.
   ───────────────────────────────────────────────────────────── */
.dr-notes .dr-ico:empty::before,
.dr-card .dr-ico:empty::before,
.dr-avatar:empty::before{ font-family:var(--dr-emoji); }

.dr-notes li:nth-child(1) .dr-ico::before{ content:"\1F4D4"; }   /* 📔 */
.dr-notes li:nth-child(2) .dr-ico::before{ content:"\1F5D3\FE0F"; } /* 🗓️ */
.dr-notes li:nth-child(3) .dr-ico::before{ content:"\2661"; }    /* ♡ */
.dr-notes .dr-ico{ font-family:var(--dr-emoji), var(--dr-sans); }

.dr-cards .dr-card:nth-child(1) .dr-ico::before{ content:"\1FA7A"; } /* 🩺 */
.dr-cards .dr-card:nth-child(2) .dr-ico::before{ content:"\1F35A"; } /* 🍚 */
.dr-cards .dr-card:nth-child(3) .dr-ico::before{ content:"\1F3E0"; } /* 🏠 */
.dr-cards .dr-card:nth-child(4) .dr-ico::before{ content:"\270D\FE0F"; } /* ✍️ */

.dr-about-grid .dr-cat:nth-child(1) .dr-avatar::before{ content:"\1F408"; }        /* 🐈 */
.dr-about-grid .dr-cat:nth-child(2) .dr-avatar::before{ content:"\1F408\200D\2B1B"; } /* 🐈‍⬛ */
.dr-quote p span[aria-hidden]::before{ content:"\1F43E"; }        /* 🐾 */

/* ═════════════════════════════════════════════════════════════
   투명 헤더 — **홈에서만**
   ═════════════════════════════════════════════════════════════
   히어로를 화면 최상단까지 올리고 헤더를 그 위에 얹는다.
   홈 외 페이지·글 상세는 현행 불투명 헤더 그대로 둔다.

   AA: 헤더가 놓이는 상단 좌측은 스크림 0.98~0.96 구간이라 로고·메뉴(#5B4636)가
       검정 화소 위에서도 6.48 이상이다. 우측 메뉴는 스크림이 0 인 구간에 걸리므로
       **상단 전용 세로 스크림**을 따로 깐다.
   ───────────────────────────────────────────────────────────── */
body.home .site-header{
  position:absolute; top:0; left:0; right:0; z-index:10;
  background:transparent; border-bottom:none;
}
body.home .dr-hero{ margin-top:0; }
body.home .dr-hero-inner{ padding-top:150px; }   /* 헤더 높이만큼 밀어낸다 */

/* 상단 세로 스크림 — 우측 메뉴가 사진 위에 걸릴 때 대비를 확보한다 */
body.home .dr-hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:190px; z-index:1;
  background:linear-gradient(180deg,
    rgba(246,239,227,.94) 0%, rgba(246,239,227,.86) 45%,
    rgba(246,239,227,.45) 78%, rgba(246,239,227,0) 100%);
  pointer-events:none;
}
body.home .dr-hero-inner, body.home .dr-quote-wrap{ z-index:2; }
body.home .dr-logo, body.home .main-navigation .main-nav ul li a{ color:var(--dr-head); }
body.home .dr-logo-sub{ color:var(--dr-brown); }

@media (max-width:899px){
  /* 모바일 B(세로 스택): 사진이 헤더 아래 별도 블록이므로 투명 헤더를 쓰지 않는다.
     사진 위에 헤더가 없기 때문에 투명하게 둘 이유가 없고, 크림 배경이 더 읽힌다. */
  body.home .site-header{ position:static; background:var(--dr-bg);
                          border-bottom:1px solid var(--dr-line); }
  body.home .dr-hero::before{ display:none; }
  body.home .dr-hero-inner{ padding-top:30px; }
}

/* ═════════════════════════════════════════════════════════════
   히어로 배경 = final.png (사용자 확정 2026-08-26)
   ═════════════════════════════════════════════════════════════
   ⚠️ 이 이미지는 **GPT 생성물**이며 홈 히어로 한정 예외다.
      글 본문·Featured·소개 사진은 실사진 원칙 그대로다.

   구워진 텍스트는 없었다 — 로고·메뉴·H1·서브카피·정보 요소·인용 배너 자리의
   국소 표준편차가 1.1~18.8 이었다 (글자가 있으면 45 이상). 인페인팅 불필요.

   스크림은 실측으로 최소화했다. 텍스트 열(뷰포트 9~42%)의 1퍼센타일 밝기가
   147 이다 — 대부분 밝은 벽(평균 235)이지만 오른쪽 끝에서 라온의 털이 걸린다.
       스크림 0.45 · 서브카피를 #5B4636 로  → H1·서브 모두 ≥4.5
   고양이가 있는 56% 이후는 스크림 0 이라 사진이 그대로 보인다.
   ───────────────────────────────────────────────────────────── */
.dr-hero-scrim{
  background:linear-gradient(93deg,
    rgba(246,239,227,.54) 0%,
    rgba(246,239,227,.50) 34%,
    rgba(246,239,227,.45) 44%,
    rgba(246,239,227,.16) 56%,
    rgba(246,239,227,0)   64%);
}
/* 사진 위 서브카피는 한 단계 진하게 — 대비 조건이 종이 위와 다르다 */
.dr-hero-sub{ color:var(--dr-head); }
.dr-hero-copy{ max-width:480px; }
.dr-hero-bg img{ object-position:50% 42%; }

/* 상단 스크림도 이 이미지에 맞춰 옅게 (벽이 이미 밝다) */
body.home .dr-hero::before{
  background:linear-gradient(180deg,
    rgba(246,239,227,.72) 0%, rgba(246,239,227,.58) 45%,
    rgba(246,239,227,.26) 78%, rgba(246,239,227,0) 100%);
}

/* ═════════════════════════════════════════════════════════════
   홈 = 히어로 + Footer  ·  배경 = finalv3 (2026-08-26)
   ═════════════════════════════════════════════════════════════
   ⚠️ finalv3 에는 **로고 · 정보 요소 4종 · 인용 배너가 이미 그려져 있다.**
      국소 표준편차로 확인했다 — 로고 42.0 · 정보요소 34.1 · 인용 25.0
      (있음) / 메뉴 12.7 · H1 8.2 · 서브카피 8.7 (비어 있음).
      그래서 그 셋은 HTML 로 그리지 않고 sr-only 로만 남긴다.
      이미지 안의 글자는 보조기술이 읽지 못하기 때문이다.
   ⚠️ 이미지를 **자르지 않는다.** 구워진 요소가 가장자리에 있어 crop 하면 잘린다.
      히어로 높이는 이미지 비율(3:2)이 정한다.
   ───────────────────────────────────────────────────────────── */
.dr-sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.dr-hero{ min-height:0; aspect-ratio:1536/1024; }
.dr-hero-bg{ position:absolute; inset:0; }
.dr-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.dr-hero-inner{ position:absolute; inset:0; min-height:0; display:block;
                padding:0; max-width:none; }
/* 텍스트를 이미지의 빈 자리에 %로 앉힌다 — 폭이 바뀌어도 같은 자리에 온다 */
.dr-hero-copy{ position:absolute; left:4.6%; top:18.6%; width:34%; max-width:none; }
.dr-hero-copy h1{ font-size:clamp(24px,2.5vw,36px); line-height:1.45; margin:0 0 18px; }
.dr-rule{ width:46px; margin-bottom:18px; }
.dr-hero-sub{ font-size:clamp(12px,1.02vw,15px); line-height:1.95; margin:0; max-width:none; }
.dr-quote-wrap, .dr-cta-wrap, .dr-notes{ display:none; }

/* 1. 헤더를 아래로 — 목업의 로고가 y 3~16% 에 있다 */
body.home .inside-header{ padding-top:44px; padding-bottom:24px; }
body.home .dr-logo{ visibility:hidden; }   /* 로고는 이미지에 있다. 링크는 남긴다 */
body.home .dr-hero::before{ height:150px;
  background:linear-gradient(180deg, rgba(246,239,227,.55) 0%,
    rgba(246,239,227,.34) 50%, rgba(246,239,227,0) 100%); }

/* 스크림 — v3 는 좌측이 매우 밝다. 최소한만 */
.dr-hero-scrim{
  background:linear-gradient(93deg, rgba(246,239,227,.34) 0%,
    rgba(246,239,227,.28) 34%, rgba(246,239,227,.18) 44%,
    rgba(246,239,227,.05) 56%, rgba(246,239,227,0) 64%); }

@media (max-width:899px){
  .dr-hero{ aspect-ratio:1456/1024; }
  .dr-hero-copy{ left:5%; top:17%; width:44%; }
  .dr-hero-copy h1{ font-size:clamp(15px,3.6vw,24px); line-height:1.4; margin:0 0 10px; }
  .dr-rule{ width:30px; margin-bottom:10px; }
  .dr-hero-sub{ font-size:clamp(9px,1.9vw,13px); line-height:1.7; }
  body.home .site-header{ position:absolute; background:transparent; border:none; }
  body.home .inside-header{ padding-top:16px; }
  body.home .dr-hero::before{ display:none; }
}

/* 2. Footer — 좌측 정렬, 자연 개행 */
.dr-footer{ text-align:left; }
.dr-foot-top{ display:block; }
.dr-foot-site{ display:block; margin-bottom:10px; }
.dr-foot-nav{ display:block; margin-bottom:18px; }
.dr-disclaimer{ max-width:none; margin:0 0 10px; }
.dr-copy{ margin-top:0; }
.site-info, .site-footer .inside-site-info{ text-align:left; }

/* Footer 컨테이너 이중 제한 해제 — .dr-wrap 이 폭을 잡는다.
   GeneratePress 의 .inside-site-info 가 따로 max-width 를 걸어
   푸터가 가운데로 몰려 있었다 (2026-08-26 실측: x=485). */
.site-info .inside-site-info{ max-width:none; padding:0; width:100%; }
.site-footer{ padding:0; }

/* .inside-site-info 가 flex 라 .copyright-bar 가 내용 폭(465px)으로 줄어
   푸터가 가운데로 몰렸다. 블록으로 되돌리고 폭을 채운다. */
.site-info .inside-site-info{ display:block; }
.site-info .copyright-bar{ width:100%; }

/* ═════════════════════════════════════════════════════════════
   홈 히어로 = final_v4_ko  (2026-08-26)
   ═════════════════════════════════════════════════════════════
   이 판은 **메뉴와 푸터를 뺀 전부가 이미지에 그려져 있다** —
   로고 · H1 4행 · 구분선 · 정보 요소 4종 · 인용 박스.
   그래서 HTML 로 겹쳐 그리는 것은 없고, sr-only 로만 남긴다.

   ⚠️ 한 화면에 담는다. 이전 판은 히어로가 이미지 비율(3:2)을 그대로 따라
      1440 폭에서 960px 이 됐고 푸터까지 1184px → 화면(900)을 284px 넘겼다.
      이제 **화면 높이가 히어로 높이를 정한다.** 이미지는 잘리지 않고
      (object-fit:contain) 남는 자리는 크림으로 채운다 —
      구워진 로고·인용 박스가 가장자리에 있어 자르면 사라지기 때문이다.
   ───────────────────────────────────────────────────────────── */
body.home .dr-hero{
  aspect-ratio:auto;
  height:calc(100svh - var(--dr-foot-h, 172px));  /* 푸터 실측 172px */
  min-height:340px;
  background:var(--dr-cream);
}
body.home .dr-hero-bg img{ object-fit:contain; object-position:center bottom; }
body.home .dr-hero-scrim, body.home .dr-hero::before{ display:none; }
body.home .dr-hero-inner{ display:none; }

/* 메뉴 — 이미지 위에 얹힌다. 우상단 띠는 밝지만 TV 가장자리가 걸려
   최소 11 까지 떨어진다. 옅은 크림 판을 깔아 대비를 확보한다. */
body.home .site-header{ position:absolute; top:0; left:0; right:0; z-index:10;
                        background:transparent; border:none; }
body.home .inside-header{ padding-top:34px; padding-bottom:20px; }
body.home .main-navigation .main-nav ul li a{
  color:var(--dr-head);
  background:rgba(246,239,227,.82); border-radius:999px;
  padding:7px 13px; margin:0 3px; border-bottom:none;
}
body.home .main-navigation .main-nav ul li a:hover,
body.home .main-navigation .main-nav ul li a:focus-visible{
  background:rgba(246,239,227,.97); border-bottom:none; }

/* 푸터 — 인용 박스 바로 아래에 붙인다 */
body.home .site-footer{ background:var(--dr-cream); }
body.home .dr-footer{ padding:22px 0 26px; }
body.home .dr-foot-site{ margin-bottom:6px; }
body.home .dr-foot-nav{ margin-bottom:10px; }
body.home .dr-disclaimer{ margin:0 0 6px; }

@media (max-width:899px){
  body.home .dr-hero{ height:auto; aspect-ratio:1536/1024; }
  body.home .dr-hero-bg img{ object-fit:cover; }
  body.home .site-header{ position:static; background:var(--dr-bg);
                          border-bottom:1px solid var(--dr-line); }
  body.home .main-navigation .main-nav ul li a{ background:transparent; padding:6px 2px; }
}

/* ═════════════════════════════════════════════════════════════
   히어로 = final_v6_ko (16:9) + 박스 안 HTML footer  (2026-08-26)
   ═════════════════════════════════════════════════════════════
   이미지 실측 (1672x941):
       흰 박스 상단 82.8% · 좌 2.8% · 하단 = 이미지 하단 · 높이 17.2%
       박스 내부 표준편차 3.9 → 글자 없음 (비어 있는 디자인 요소)
       박스 1퍼센타일 밝기 222 → #5B4636 6.57 · #6B5D4D 4.73 (둘 다 AA 통과)

   16:9 라 cover 로 채워도 대부분의 화면에서 거의 잘리지 않는다.
   footer 는 히어로 **안에** 절대배치한다 — 바깥에 높이를 더하지 않는다.
   ───────────────────────────────────────────────────────────── */
body.home .dr-hero{
  height:100svh; min-height:420px; aspect-ratio:auto;
  background:var(--dr-cream); position:relative; overflow:hidden;
}
body.home .dr-hero-bg{ position:absolute; inset:0; }
body.home .dr-hero-bg img{ width:100%; height:100%; object-fit:cover;
                           object-position:center center; }

/* 상단 메뉴 — 텍스트만. pill·배경 없음 */
body.home .site-header{ position:absolute; top:0; left:0; right:0; z-index:10;
                        background:transparent; border:none; }
body.home .inside-header{ padding-top:30px; padding-bottom:18px; }
body.home .main-navigation .main-nav ul li a{
  background:transparent; border-radius:0; padding:6px 2px; margin:0 14px;
  color:var(--dr-head); border-bottom:2px solid transparent; }
body.home .main-navigation .main-nav ul li a:hover,
body.home .main-navigation .main-nav ul li a:focus-visible{
  background:transparent; opacity:.7; border-bottom-color:transparent; }

/* ── 흰 박스 안의 footer ─────────────────────────────────────── */
.dr-hero-footer{
  position:absolute; left:2.8%; right:2.8%; bottom:0; z-index:5;
  height:17.2%; min-height:74px;
  display:flex; flex-direction:column; justify-content:center; gap:.5em;
  padding:0 clamp(16px, 3.2vw, 54px);
  font-family:var(--dr-sans); color:var(--dr-head);
  text-align:center;
}
.dr-hf-line1{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.28em .5em; font-size:clamp(11.5px, .95vw, 14px);
  letter-spacing:-.005em; line-height:1.5;
}
.dr-hf-group{ display:inline-flex; flex-wrap:wrap; gap:.28em .42em; align-items:center; }
.dr-hf-site{ font-family:var(--dr-serif); }
.dr-hero-footer a{ color:var(--dr-head); text-decoration:none;
                   transition:opacity .18s; }
.dr-hero-footer a:hover{ opacity:.62; }
.dr-hero-footer a:focus-visible{ outline:2px solid var(--dr-head);
                                 outline-offset:3px; border-radius:3px; }
.dr-foot-pending{ opacity:.5; cursor:default; }   /* 아직 없는 페이지 */
.dr-dot, .dr-bar{ opacity:.42; }
.dr-bar{ margin:0 .18em; }
.dr-hf-line2{
  margin:0; font-size:clamp(10.5px, .82vw, 12.5px); line-height:1.55;
  color:var(--dr-subcopy); letter-spacing:-.004em;
}
.dr-hf-copy{ white-space:nowrap; margin-left:.4em; }

@media (max-width:899px){
  /* 세로 화면에서는 16:9 를 cover 로 넣으면 좌우가 대부분 잘린다.
     이미지는 자연 비율로 두고 footer 는 그 아래 흐름에 둔다 —
     박스 안에 억지로 넣으면 글자가 너무 작아진다. */
  body.home .dr-hero{ height:auto; min-height:0; }
  body.home .dr-hero-bg{ position:relative; inset:auto; }
  body.home .dr-hero-bg img{ height:auto; }
  .dr-hero-footer{ position:static; height:auto; min-height:0;
                   padding:18px 20px 24px; background:var(--dr-cream);
                   text-align:left; gap:.7em; }
  .dr-hf-line1{ justify-content:flex-start; font-size:13px; gap:.4em .55em;
                line-height:1.9; }
  .dr-hf-line2{ font-size:12px; }
  .dr-bar{ display:none; }
  .dr-hf-group{ width:100%; }
  body.home .site-header{ position:static; background:var(--dr-bg);
                          border-bottom:1px solid var(--dr-line); }
  body.home .inside-header{ padding-top:16px; padding-bottom:16px; }
}

/* 16:10 화면(1440x900 · 1680x1050)에서는 cover 가 좌우를 5%씩 자른다.
   이미지의 로고·H1 이 좌측 4.5% 부터 시작하므로 **왼쪽을 기준으로 정렬**한다.
   잘리는 쪽은 오른쪽 이불 영역이라 안전하다. */
body.home .dr-hero-bg img{ object-position:left center; }

/* 1px 세로 초과 제거 — 100svh 반올림에서 생긴다 */
body.home .site-content, body.home .entry-content,
body.home .content-area, body.home .site-main{ margin:0; padding:0; line-height:0; }
body.home .dr-hero{ display:block; line-height:normal; }

/* 홈의 테마 푸터는 내용을 비웠지만 껍데기가 1px 남아 스크롤을 만든다.
   히어로 안의 .dr-hero-footer 가 유일한 푸터이므로 완전히 감춘다. */
body.home .site-footer{ display:none; }

/* ═════════════════════════════════════════════════════════════
   모바일 — 세로판 mobile_v1_ko (941x1672)
   ═════════════════════════════════════════════════════════════
   실측: 흰 박스 상단 76.8% · 높이 23.2% · 좌 3% · 하단 = 이미지 하단
        박스 내부 표준편차 6.5 → 글자 없음
        박스 1퍼센타일 212 → #5B4636 5.97 ✓ / #6B5D4D 4.30 ✗
        → 모바일 2줄도 #5B4636 을 쓴다

   ⚠️ cover 로 채우지 않는다. 375x812(0.462) 에 0.563 이미지를 cover 하면
      좌우가 9%씩 잘려 박스 왼쪽(3%)이 사라진다. 자연 비율로 둔다.
   ───────────────────────────────────────────────────────────── */
@media (max-width:899px){
  body.home .dr-hero{ height:auto; min-height:0; position:relative; overflow:visible; }
  body.home .dr-hero-bg{ position:relative; inset:auto; display:block; }
  body.home .dr-hero-bg img{ width:100%; height:auto; object-fit:fill;
                             object-position:center; display:block; }

  /* footer 를 다시 박스 안으로 — 데스크톱과 같은 방식, 좌표만 다르다 */
  .dr-hero-footer{
    position:absolute; left:3%; right:2.8%; bottom:0; top:auto;
    height:23.2%; min-height:0;
    display:flex; flex-direction:column; justify-content:center;
    gap:.45em; padding:0 6%;
    background:transparent; text-align:center;
  }
  .dr-hf-line1{ justify-content:center; font-size:clamp(11px,3.05vw,13px);
                gap:.3em .45em; line-height:1.75; }
  .dr-hf-line2{ font-size:clamp(9.5px,2.6vw,11.5px); line-height:1.6;
                color:var(--dr-head); }   /* 박스 대비상 진한 쪽을 쓴다 */
  .dr-hf-group{ width:auto; }
  .dr-bar{ display:inline; }
}
@media (max-width:430px){
  .dr-hf-line1{ font-size:11px; gap:.24em .36em; line-height:1.7; }
  .dr-hf-line2{ font-size:9.5px; }
  .dr-hero-footer{ padding:0 4%; gap:.35em; }
}

/* img 의 width/height 속성이 데스크톱 판(1672x941)이라 브라우저가 그 비율로
   상자를 잡는다. 모바일에서는 세로판(941x1672)이 오므로 비율을 다시 준다.
   안 하면 세로 사진이 16:9 로 눌린다 (실측: 375px 에서 높이 281px). */
@media (max-width:899px){
  body.home .dr-hero-bg img{ aspect-ratio:941/1672; object-fit:cover; }
}

/* ═════════════════════════════════════════════════════════════
   히어로 위 애니메이션 오버레이 (2026-08-26)
   ═════════════════════════════════════════════════════════════
   목표는 "애니메이션이 있다" 가 아니라 **"빛과 공기가 아주 천천히
   움직인다"** 이다. 사진의 색을 덮지 않는다.

   ⚠️ 배경 사진·이미지 안 글자·메뉴·레이아웃·이미지 크기는 건드리지 않는다.
      이 레이어는 `.dr-hero` 안의 형제 div 하나이고 `pointer-events:none`,
      `aria-hidden` 이며 **transform/opacity 만** 애니메이션한다 (reflow 0).

   ⚠️ `.dr-hero-fx` 에 z-index·opacity·filter·contain 을 주지 않는다.
      넷 중 하나라도 주면 **쌓임 맥락이 생겨 aurora 의 mix-blend-mode 가
      사진이 아니라 빈 배경과 섞인다** — 블렌드가 통째로 죽는다.
      순서만으로 충분하다: <picture> 다음에 오고, 푸터는 z-index:5 라 위에 있다.

   ⚠️ 흰 박스(하단 17.2% · 모바일 23.2%)는 덮지 않는다 — 푸터 글자가 산다.
      그래서 버블이 박스 윗변에서 솟아오르는 것처럼 보인다. */
body.home .dr-hero-fx{
  position:absolute; left:0; right:0; top:0; bottom:17.2%;
  pointer-events:none; overflow:hidden;
}

/* ── A. Aurora — 2겹, 사진 색을 덮지 않을 만큼만 ──────────────── */
.dr-fx-aurora{ position:absolute; inset:0; }
.dr-fx-aurora > span{
  position:absolute; border-radius:50%;
  filter: blur(52px); mix-blend-mode: screen;
  will-change: transform;
}
.dr-fx-aurora > span:nth-child(1){
  left:16%; top:4%; width:44%; height:64%; opacity:.15;
  background: radial-gradient(closest-side,
    rgba(255,196,224,.55), rgba(216,198,255,.30) 56%, rgba(192,226,255,0) 100%);
  animation: dr-aur-a 19s ease-in-out infinite alternate;
}
.dr-fx-aurora > span:nth-child(2){
  left:44%; top:18%; width:50%; height:66%; opacity:.14;
  background: radial-gradient(closest-side,
    rgba(190,242,224,.50), rgba(198,222,255,.30) 56%, rgba(255,216,238,0) 100%);
  animation: dr-aur-b 22s ease-in-out infinite alternate;
}
@keyframes dr-aur-a{
  from{ transform: translate3d(-3%,  2%, 0) scale(1);    }
  to  { transform: translate3d( 5%, -3%, 0) scale(1.10); }
}
@keyframes dr-aur-b{
  from{ transform: translate3d( 3%, -2%, 0) scale(1.08); }
  to  { transform: translate3d(-4%,  3%, 0) scale(1);    }
}

/* ── B. Bubble — 아래에서 위로, 좌우로 아주 조금 ─────────────── */
/* 각 버블은 **컨테이너 높이만큼의 세로 기둥**이고, 그 기둥이 -100%
   올라간다. 이렇게 하면 이동 거리를 vh 로 추측할 필요가 없다 —
   데스크톱과 모바일에서 히어로 높이가 달라도 같은 규칙이 맞는다. */
.dr-fx-bubbles{ position:absolute; inset:0; }
.dr-fx-bubbles > span{
  position:absolute; bottom:0; left:var(--l);
  width:var(--s); height:100%; opacity:0;
  animation: dr-rise var(--d) linear var(--dl) infinite;
  will-change: transform, opacity;
}
/* ⚠️ 버블을 흰색으로 칠하면 **이 사진에서는 보이지 않는다.**
   실측(2026-08-26): 버블이 지나는 x29~60% 띠는 창가라 밝기 228~252 로
   화면에서 가장 밝다. 흰 원을 얹었더니 최대 픽셀차가 10/255 였다.
   그래서 속을 칠하지 않고 **가장자리의 굴절만 그린다** — 실제 비눗방울이
   밝은 창 앞에서 보이는 방식이 그렇다. 바깥 1px 어두운 선이 형태를 만든다. */
.dr-fx-bubbles > span > i{
  position:absolute; left:0; bottom:calc(-1 * var(--s));
  width:100%; aspect-ratio:1; border-radius:50%;
  background:
    /* 무지개 막 — 안쪽 52% 는 완전히 투명하다 (비쳐 보여야 한다) */
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0)   52%,
      rgba(255,188,222,.30) 67%,
      rgba(192,210,255,.40) 79%,
      rgba(178,238,210,.34) 89%,
      rgba(255,228,176,.28) 97%,
      rgba(255,255,255,0)  100%),
    /* 정반사 — 어두운 구간을 지날 때만 드러난다 */
    radial-gradient(circle at 31% 27%,
      rgba(255,255,255,.70), rgba(255,255,255,0) 34%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),      /* 안쪽 밝은 테 */
    inset 0 -5px 11px rgba(140,116,172,.16),    /* 아래쪽 그늘 → 구체감 */
    0 0 0 1px rgba(122,104,146,.22),            /* ← 밝은 배경에서 형태를 만드는 선 */
    0 2px 9px rgba(122,104,146,.10);
  animation: dr-sway var(--w) ease-in-out var(--dl) infinite alternate;
  will-change: transform;
}
@keyframes dr-rise{
  0%  { transform: translate3d(0,0,0);     opacity:0; }
  12% {                                    opacity: var(--o); }
  80% {                                    opacity: calc(var(--o) * .78); }
  100%{ transform: translate3d(0,-100%,0); opacity:0; }
}
@keyframes dr-sway{
  from{ transform: translate3d(calc(-1 * var(--x)), 0, 0); }
  to  { transform: translate3d(var(--x), 0, 0); }
}
/* ⚠️ x 범위를 29~60% 로 묶는다.
   실측(1440x900): 고양이 얼굴은 x 62~95% · y 15~50%, 헤드라인은 x 5~27%.
   그 사이의 밝은 창가 띠가 버블이 가장 자연스럽게 읽히는 자리다. */
.dr-fx-bubbles > span:nth-child(1){ --l:29%; --s:44px; --d:15s;   --dl:0s;    --w:5s;   --x:9px;  --o:.82; }
.dr-fx-bubbles > span:nth-child(2){ --l:37%; --s:24px; --d:12.5s; --dl:3.2s;  --w:4.2s; --x:7px;  --o:.70; }
.dr-fx-bubbles > span:nth-child(3){ --l:44%; --s:58px; --d:18s;   --dl:6.5s;  --w:6s;   --x:12px; --o:.62; }
.dr-fx-bubbles > span:nth-child(4){ --l:52%; --s:30px; --d:14s;   --dl:9s;    --w:4.6s; --x:8px;  --o:.74; }
.dr-fx-bubbles > span:nth-child(5){ --l:57%; --s:20px; --d:12s;   --dl:11.5s; --w:3.8s; --x:6px;  --o:.66; }
.dr-fx-bubbles > span:nth-child(6){ --l:33%; --s:34px; --d:16.5s; --dl:4.5s;  --w:5.4s; --x:10px; --o:.72; }
.dr-fx-bubbles > span:nth-child(7){ --l:48%; --s:26px; --d:17s;   --dl:7.8s;  --w:5.8s; --x:7px;  --o:.58; }

/* ── C. Sparkle — 별이 아니라 **순간 반짝이는 아주 작은 빛** ──── */
.dr-fx-sparks{ position:absolute; inset:0; }
/* ⚠️ 흰 스파클은 **이 사진에서 사라진다** (실측: 밝은 창가 밝기 250, 최대차 3).
   그래서 웜앰버로 칠한다. 크림색 배경(252,250,246) 위에서 밝기는 거의 그대로인데
   **청색 채널이 80 넘게 떨어져** 형태가 읽힌다. 어두운 침대·벽에서는 그대로 빛난다.
   색도 사이트 팔레트(크림·갈색) 안이라 튀지 않는다.

   ⚠️ `--tp` 는 히어로가 아니라 **`.dr-hero-fx` 높이(82.8% / 모바일 76.8%) 기준**이다.
      화면 y S% 에 두려면 S/0.828 을 적는다. 처음에 이걸 빠뜨려 좌표가 어긋났다. */
.dr-fx-sparks > span{
  position:absolute; left:var(--l); top:var(--tp);
  width:4px; height:4px; border-radius:50%; opacity:0;
  background: rgb(255,246,222);
  box-shadow: 0 0 4px 1.5px rgba(255,214,150,.85),
              0 0 11px 4px  rgba(255,196,120,.45),
              0 0 24px 9px  rgba(255,190,110,.16);
  animation: dr-twinkle var(--d) ease-in-out var(--dl) infinite;
}
/* 한 주기의 대부분은 **꺼져 있다.** 그래야 '반짝' 으로 읽힌다 */
@keyframes dr-twinkle{
  0%,  100%{ opacity:0;   transform:scale(.45); }
  8%       { opacity:.85; transform:scale(1);   }
  20%      { opacity:0;   transform:scale(.45); }
}
/* 주석의 y 는 **화면 기준**, --tp 는 그것을 0.828 로 나눈 값이다 */
.dr-fx-sparks > span:nth-child(1){ --l:40%; --tp:21.7%; --d:4.5s; --dl:0s;   }  /* 화면 y18% · 창가 252 */
.dr-fx-sparks > span:nth-child(2){ --l:49%; --tp:39.9%; --d:5.5s; --dl:1.3s; }  /* y33% · 250 */
.dr-fx-sparks > span:nth-child(3){ --l:57%; --tp:29.0%; --d:3.6s; --dl:2.6s; }  /* y24% · 237 */
.dr-fx-sparks > span:nth-child(4){ --l:44%; --tp:72.5%; --d:6s;   --dl:3.9s; }  /* y60% · 250 */
.dr-fx-sparks > span:nth-child(5){ --l:60%; --tp:87.0%; --d:4.2s; --dl:5.1s; }  /* y72% · 침대 그림자 144 */
.dr-fx-sparks > span:nth-child(6){ --l:88%; --tp:74.9%; --d:5.2s; --dl:2.0s; }  /* y62% · 80 */
.dr-fx-sparks > span:nth-child(7){ --l:96%; --tp:54.3%; --d:4.8s; --dl:6.4s; }  /* y45% · 70 — 얼굴 상자 밖 */

/* ── 모바일: 세로판이라 좌표가 다르고, 입자 수를 줄인다 ────────── */
/* 실측(390x693): 라온 얼굴 x45~62% · 다온 얼굴 x72~88%, 둘 다 y 35~52%.
   텍스트 블록은 x 5~40%. 그래서 버블은 두 얼굴 사이(65%)와 양 바깥으로만. */
@media (max-width:899px){
  body.home .dr-hero-fx{ bottom:23.2%; }
  .dr-fx-bubbles > span:nth-child(n+4){ display:none; }   /* 7개 → 3개 */
  /* ⚠️ --o 는 데스크톱과 같은 척도여야 한다. 처음엔 '흰 원' 설계의 낮은 값이
     남아 있어 모바일에서만 버블이 보이지 않았다 (실측 0.26~0.31). */
  .dr-fx-bubbles > span:nth-child(1){ --l:41%; --s:18px; --d:14s;   --dl:0s;   --w:4.6s; --x:5px; --o:.80; }
  .dr-fx-bubbles > span:nth-child(2){ --l:65%; --s:26px; --d:17s;   --dl:5.5s; --w:6s;   --x:7px; --o:.68; }
  .dr-fx-bubbles > span:nth-child(3){ --l:91%; --s:21px; --d:15.5s; --dl:9s;   --w:5.2s; --x:6px; --o:.74; }
  /* 모바일 실측(390x693): 라온 얼굴 x45~62%·y35~52%, 다온 x72~88%·y35~52%,
     텍스트 x5~40%·y8~55%, 아이콘 x5~35%·y55~72%. --tp 는 화면 y / 0.768 */
  .dr-fx-sparks  > span:nth-child(n+5){ display:none; }   /* 7개 → 4개 */
  .dr-fx-sparks  > span:nth-child(1){ --l:47%; --tp:28.6%; }  /* 화면 y22% · 워드마크·헤드라인 사이 여백 */
  .dr-fx-sparks  > span:nth-child(2){ --l:65%; --tp:18.2%; }  /* y14% · 207 */
  .dr-fx-sparks  > span:nth-child(3){ --l:92%; --tp:72.9%; }  /* y56% · 90 */
  .dr-fx-sparks  > span:nth-child(4){ --l:84%; --tp:82.0%; }  /* y63% · 98 */
  .dr-fx-aurora  > span:nth-child(1){ left:4%;  top:6%;  width:66%; height:44%; }
  .dr-fx-aurora  > span:nth-child(2){ left:28%; top:34%; width:70%; height:46%; }
}

/* 움직임을 원하지 않는 사람에게는 **아무것도 움직이지 않는다.**
   opacity 만 남기지 않고 통째로 숨긴다 — 정지한 무지개 원은 얼룩으로 읽힌다. */
@media (prefers-reduced-motion: reduce){
  body.home .dr-hero-fx{ display:none; }
}

/* 본문 맨 끝에 오는 philosophy 한 줄 — 홈 섹션의 그것과 같은 서체·정렬이지만
   글 끝에 놓이므로 위쪽에 선과 여백을 준다. 새 class 를 만들지 않는다. */
body.page:not(.home) .entry-content > .dr-philosophy{
  margin:2.8em 0 0; padding-top:1.6em;
  border-top:1px solid var(--dr-line);
}

/* /about 안에 놓인 소개 블록 — 홈 섹션용 여백(76px/60px)이 그대로 들어와서
   본문 폭 안에서는 위쪽이 크게 비어 보였다(실측 1440px). 페이지 안일 때만 줄인다.
   `.dr-about-grid` 은 카드 두 장이 같은 높이여야 하므로 stretch 로 맞춘다. */
body.page:not(.home) .entry-content .dr-about{
  margin-top:2.2em; padding:34px 0 30px; border-radius:14px;
}
body.page:not(.home) .entry-content .dr-about .dr-wrap{ padding:0 28px; }
body.page:not(.home) .entry-content .dr-sec-head{ margin-bottom:22px; }
.dr-about-grid{ align-items:stretch; }
.dr-about-grid .dr-cat{ height:100%; }