/* ==========================================================================
   BENURD — brand layer over Source
   About 페이지에서 직접 쓰신 언어를 테마 전역으로 끌어올린다:
   모노톤 잉크 · Georgia 라틴 디스플레이 · 넘버링 섹션(01 / BEGINNING) ·
   영문 캡스 부제 · 노트 인용 · 팩트 그리드. 색은 잉크 블랙과 레드 하나뿐.
   Source의 변수를 덮어쓰는 방식이라 Ghost 업데이트/설정 변경에 그대로 따라간다.
   ========================================================================== */

:root {
    --benurd-ink: #111111;
    --benurd-red: #c30013;          /* 로고 태그라인에서 추출 */
    --benurd-paper: #f4f2ed;
    --benurd-line: rgba(17, 17, 17, .16);
    /* 배경 #f4f2ed 위에서 rgb(116,112,106) → 대비 4.40으로 WCAG AA(4.5) 미달이었다.
       캡션·라벨·요약 등 43곳에 쓰이는 색이라 알파만 올려 4.9로 맞춘다(실측). */
    --benurd-faint: rgba(17, 17, 17, .60);

    /* About 페이지가 Georgia로 쓰여 있다 → 라틴은 Georgia, 한글은 시스템 고딕.
       EB Garamond(테마 동봉)는 unicode-range가 라틴 전용이라 한글엔 적용되지 않는다. */
    --font-serif: "EB Garamond", Georgia, "Times New Roman", "Apple SD Gothic Neo",
                  "Malgun Gothic", serif;
    --font-serif-alt: var(--font-serif);
}

body {
    /* 배경은 Source의 --background-color(관리자 > 디자인 설정)를 그대로 따른다.
       여기서 하드코딩하면 배경색 설정이 무력화된다. */
    color: var(--benurd-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---- 헤더 : 얇은 잉크 라인 + 넉넉한 여백 -------------------------------- */

.gh-navigation {
    border-bottom: 1px solid var(--benurd-line);
    /* 배경색은 Source 기본값(=사이트 배경 설정)을 그대로 쓴다.
       transparent로 덮으면 모바일 햄버거 메뉴가 전체화면 오버레이로 열릴 때
       (.is-open#gh-navigation{position:fixed;inset:0}) 뒤 본문이 비쳐 글자가 겹친다. */
}

/* 모바일 메뉴 열림 상태 — 반드시 불투명 배경이어야 한다 */
.gh-navigation.is-open,
.is-open#gh-navigation {
    background-color: var(--background-color, #f4f2ed);
}

.is-open#gh-navigation .gh-navigation-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    margin: 4rem 0 0;
}

.is-open#gh-navigation .gh-navigation-menu a {
    font-size: 2rem;
    letter-spacing: .12em;
}

/* 로고에 srcset과 width/height 속성을 넣은 뒤 max-height만으로는 크기가 안 잡혀
   데스크톱에서 로고가 커지고 메뉴가 "..."로 접혔다 → 높이를 직접 못박는다. */
.gh-navigation-logo img { height: 38px; width: auto; max-height: 38px; max-width: 220px; object-fit: contain; }

/* 로고가 화면 맨 위·왼쪽 모서리에 붙어 답답했다. 상하 여백을 주고
   좌측 기준선을 본문 컨테이너와 맞춘다. */
/* 헤더 기준선을 본문과 맞춘다.
   .gh-navigation(=gh-outer)이 이미 좌우 여백을 주는데 inner에 또 줘서
   로고가 본문보다 22px 안으로 들어가 있었다(실측 로고 40px vs 본문 18px).
   여백은 바깥 한 곳에서만 준다. */
.gh-navigation { padding-left: max(4vmin, 20px); padding-right: max(4vmin, 20px); }
.gh-navigation-inner { padding-left: 0; padding-right: 0; }
/* 로고 위아래 여백은 헤더 높이로만 조절한다.
   여기서 height:auto를 주면 grid 박스가 0으로 무너져 닫힘 정렬이 깨지고
   열린 메뉴에서는 밑줄이 로고를 관통한다(실측). 패딩만 뺀다. */
.gh-navigation-brand { padding: 0; }
.gh-navigation-logo { display: inline-flex; align-items: center; }

.gh-navigation-menu a,
.gh-footer-menu a {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* 버튼: 라운드 알약 → 각진 잉크 블록(브랜드의 손글씨/각진 톤) */
.gh-button,
.gh-form-input + button,
button.gh-button {
    border-radius: 0 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
}

.gh-form-input { border-radius: 0 !important; }

/* ---- 글 목록 : 잡지 인덱스처럼 ------------------------------------------ */

.gh-container-title,
.gh-sidebar-title,
.gh-featured-title {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--benurd-faint);
    border-bottom: 1px solid var(--benurd-ink);
    padding-bottom: 1.2rem;
}

.gh-card-title {
    font-family: var(--font-serif);
    letter-spacing: -.02em;
}

.gh-card-link:hover .gh-card-title { text-decoration-color: var(--benurd-red); }

.gh-card-image img { border-radius: 0; }

.gh-card-meta,
.gh-article-meta,
.gh-card-date {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--benurd-faint);
}

.gh-card-tag { color: var(--benurd-red); }

/* ---- 글 본문 ------------------------------------------------------------ */

.gh-article-title {
    font-family: var(--font-serif);
    letter-spacing: -.035em;
}

.gh-content a { text-decoration-color: var(--benurd-red); }

.gh-content blockquote:not([class]) {
    border-left: 3px solid var(--benurd-red);
    font-style: normal;
}

.gh-content hr {
    border: 0;
    border-top: 1px solid var(--benurd-line);
}

/* ---- 푸터 : 먹지 블록으로 마감(블랙이 화면을 잡아준다) ------------------ */

.gh-footer {
    background-color: var(--benurd-ink);
    color: var(--benurd-paper);
    margin-top: 8rem;
}

.gh-footer a,
.gh-footer .gh-footer-copyright,
.gh-footer .gh-footer-signup-subhead { color: var(--benurd-paper); }

.gh-footer .gh-footer-bar { border-top-color: rgba(244, 242, 237, .18); }

.gh-footer-signup-header {
    font-family: var(--font-serif);
    letter-spacing: -.03em;
}

/* 푸터 태그라인 — 왼쪽 구석에 붙어 어정쩡했다. 가운데로 옮기고 양옆에 레드 헤어라인을
   달아 하나의 표식처럼 세운다. 설정 API로 문구를 못 바꾸므로 테마가 책임진다. */
.gh-footer-inner::before {
    content: "BE NURD, BE YOURSELF.";
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .42em;
    text-indent: .42em;            /* 자간 때문에 오른쪽으로 밀리는 걸 보정 */
    color: var(--benurd-red);
    text-align: center;
    padding: 4.5rem 0 4rem;
    margin: 0 auto 3.5rem;
    max-width: 62rem;
    border-bottom: 1px solid rgba(195, 0, 19, .35);
}

/* ==========================================================================
   ba-* : About 페이지에서 쓰신 컴포넌트를 전역 클래스로 승격.
   앞으로 어떤 글에서도 <div class="ba-section">…처럼 바로 쓸 수 있다
   (지금은 About 본문에 CSS를 직접 붙여 쓰고 계셔서 글마다 복붙이 필요했다).
   ========================================================================== */

.ba-section {
    margin: 9rem 0 3.2rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--benurd-ink);
}

.ba-section-no {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--benurd-faint);
    margin-bottom: 1.6rem;
}

/* 국문 제목 아래 영문 한 줄 — About 전반의 기본 리듬 */
.ba-eng {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--benurd-faint);
    margin-top: .8rem;
}

.ba-quote {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    line-height: 1.5;
    letter-spacing: -.03em;
    text-align: center;
    margin: 5rem auto;
    max-width: 62rem;
    word-break: keep-all;
}

/* 노트/편지 인용 — "ORIGINAL NOTE / EARLY BENURD · 2026" 블록 */
.ba-archive {
    border: 1px solid var(--benurd-ink);
    padding: 3.6rem 3.2rem;
    margin: 5rem 0;
    background: transparent;
}

.ba-archive-label {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--benurd-red);
    margin-bottom: 2rem;
}

.ba-archive-quote {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1.55;
    letter-spacing: -.03em;
    word-break: keep-all;
}

.ba-archive-note {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    letter-spacing: .04em;
    color: var(--benurd-faint);
    margin-top: 1.8rem;
}

/* BEGINNING 2026 / DESIGNER 22 YEARS OLD / STATUS STILL CREATING */
.ba-fact {
    display: inline-block;
    vertical-align: top;
    min-width: 18rem;
    margin: 0 4rem 2.4rem 0;
}

.ba-fact-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--benurd-faint);
    margin-bottom: .8rem;
}

.ba-fact-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.2rem;
    letter-spacing: -.02em;
}

@media (max-width: 640px) {
    .ba-quote { font-size: 2.2rem; }
    .ba-archive { padding: 2.6rem 2rem; }
    .ba-archive-quote { font-size: 2rem; }
    .ba-fact { margin-right: 2.4rem; min-width: 14rem; }
    .gh-footer-inner::before { letter-spacing: .22em; }
}

/* ==========================================================================
   다크(블랙 사이트) — Source가 배경 밝기를 계산해 :root.has-light-text 를 붙인다.
   토큰만 뒤집으면 헤더·본문·컴포넌트가 전부 따라온다.
   관리자 > 디자인 > site background color 를 바꿔도 그대로 동작한다.
   ========================================================================== */

:root.has-light-text {
    --benurd-ink: #f4f2ed;
    --benurd-paper: #0e0e0e;
    --benurd-line: rgba(244, 242, 237, .22);
    --benurd-faint: rgba(244, 242, 237, .62);
}

/* 로고 원본이 블랙 아트라 어두운 배경에서 사라진다 → 헤더에서도 반전
   (hue-rotate로 레드 태그라인 색조를 되돌린다. grayscale을 걸면 레드가 죽는다.) */
:root.has-light-text .gh-navigation-logo img { filter: invert(1) hue-rotate(180deg); }

/* 다크에서는 푸터를 같은 먹지로 두고 레드 헤어라인으로만 끊는다(하나의 덩어리로) */
:root.has-light-text .gh-footer {
    background-color: transparent;
    border-top: 2px solid var(--benurd-red);
}

:root.has-light-text .gh-footer-logo img { filter: invert(1) hue-rotate(180deg); height: 34px; width: auto; max-width: 200px; object-fit: contain; }

:root.has-light-text .gh-button {
    background-color: var(--benurd-ink);
    color: var(--benurd-paper);
    border-color: var(--benurd-ink);
}

/* ==========================================================================
   홈 히어로 / 빈 상태 — 글이 0편이어도 첫 화면이 비지 않게
   ========================================================================== */

.ba-hero {
    padding: 11rem max(4vmin, 20px) 7rem;
    border-bottom: 1px solid var(--benurd-line);
}

.ba-hero-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--benurd-faint);
    margin-bottom: 3.2rem;
}

.ba-hero-title {
    font-family: var(--font-serif);
    font-size: 9.6rem;
    line-height: .98;
    font-weight: 400;
    letter-spacing: -.05em;
    margin: 0 0 4rem;
}

.ba-hero-lead {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1.72;
    letter-spacing: -.025em;
    word-break: keep-all;
    margin: 0 0 2rem;
    max-width: 60rem;
}

.ba-hero-eng {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--benurd-faint);
    margin: 0 0 5rem;
}

.ba-hero-facts {
    border-top: 1px solid var(--benurd-ink);
    padding-top: 3rem;
    margin-bottom: 4rem;
}

.ba-hero-link {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--benurd-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--benurd-red);
    padding-bottom: .6rem;
}

.ba-hero-link:hover { color: var(--benurd-red); }

.ba-empty { padding: 5.5rem max(4vmin, 20px) 4rem; }

.ba-empty-note {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--benurd-red);
    margin-bottom: 1.6rem;
}

.ba-empty-text {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.7;
    letter-spacing: -.02em;
    color: var(--benurd-faint);
    word-break: keep-all;
}

@media (max-width: 880px) {
    .ba-hero { padding: 7rem max(4vmin, 20px) 5rem; }
    .ba-hero-title { font-size: 5.6rem; }
    .ba-hero-lead { font-size: 1.9rem; }
}

/* ---- 먹지 푸터 대비 보정 ------------------------------------------------ */

/* 로고는 흰 반전만 하고 채도는 유지(그레이스케일을 걸면 레드 태그라인이 죽는다) */
.gh-footer-logo img { filter: invert(1) hue-rotate(180deg); height: 34px; width: auto; max-width: 200px; object-fit: contain; }

/* 어두운 배경에서 입력창이 묻히던 문제 */
.gh-footer .gh-form-input,
.gh-footer input[type="email"] {
    background-color: rgba(244, 242, 237, .07);
    border: 1px solid rgba(244, 242, 237, .34);
    color: var(--benurd-paper);
}

.gh-footer .gh-form-input::placeholder,
.gh-footer input[type="email"]::placeholder { color: rgba(244, 242, 237, .5); }

.gh-footer .gh-button {
    background-color: var(--benurd-paper);
    color: var(--benurd-ink);
    border: 1px solid var(--benurd-paper);
}

.gh-footer .gh-social-links a { color: var(--benurd-paper); }

/* Source의 .gh-outer{padding:0}가 뒤에서 이기므로 히어로/빈상태는 자체 폭을 잡는다 */
.ba-hero > .gh-inner,
.ba-empty > .gh-inner { max-width: 118rem; margin: 0 auto; width: 100%; }

/* ==========================================================================
   내비게이션 — 로고는 좌측 상단, 메뉴(HOME/ABOUT)는 화면 정중앙
   navigation_layout 설정값은 이미 저장돼 있어 테마 기본값으로는 못 바꾼다 → CSS로 배치
   ========================================================================== */

/* Source의 접기 JS 조건: nav(ul).offsetWidth + 64 > menu.offsetWidth 이면 항목을
   "..." 드롭다운으로 옮긴다. 메뉴 컨테이너를 내용 폭으로 줄이면(absolute/flex:0 0 auto)
   조건이 항상 참이 돼 메뉴가 통째로 사라진다 → 컨테이너를 넓게 두고 안에서 가운데 정렬. */
@media (min-width: 992px) {
    .gh-navigation .gh-navigation-inner { display: flex; align-items: center; }
    /* 카테고리가 6개라 메뉴 폭이 부족하면 접기 JS가 "..."로 숨긴다.
       가운데 칸을 넉넉히 주고 항목 간격·자간을 줄여 한 줄에 들어가게 한다. */
    .gh-navigation .gh-navigation-brand { flex: 0 1 auto; min-width: 0; }
    .gh-navigation .gh-navigation-menu {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 2.4rem;
        justify-content: center;
    }
    .gh-navigation .gh-navigation-menu .nav { gap: 2.2rem; }
    /* 2026-08-17 실측: PC 메뉴가 12.5px 였다 — 본문 17px·로고 38px 옆에서 너무 작다.
       메뉴 여섯 개가 쓰는 폭이 1280px 화면에서 762px 뿐이라 자리는 남는다.
       14px 로 올리고 자간을 .1em → .09em 으로 조금 좁혀 폭 증가를 상쇄한다.
       누르는 자리도 15px 밖에 안 됐다 → 위아래 여백으로 36px 을 만든다(마우스도 편해진다). */
    .gh-navigation .gh-navigation-menu a { letter-spacing: .09em; font-size: 1.4rem;
        padding-top: 1rem; padding-bottom: 1rem; }
}
/* 글자를 키우자 992~1199px 구간에서 접기 JS 가 DOWNLOAD 를 숨겼다(실측) —
   무료 배포물로 가는 입구라 이건 절대 사라지면 안 된다. 그 구간만 간격·자간을 줄여 일곱 개를 다 세운다. */
@media (min-width: 992px) and (max-width: 1199px) {
    .gh-navigation .gh-navigation-menu .nav { gap: 1.5rem; }
    .gh-navigation .gh-navigation-menu a { font-size: 1.3rem; letter-spacing: .06em; }
    .gh-navigation .gh-navigation-menu { margin: 0 1.4rem; }
    .gh-navigation .gh-navigation-actions {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
    }
    .gh-navigation .gh-navigation-menu .nav > li { opacity: 1; }
}

/* ==========================================================================
   홈 히어로 2단 — 오른쪽 여백을 실제 스케치로 채운다
   ========================================================================== */

.ba-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 5rem;
    align-items: center;
    margin-bottom: 5rem;
}

.ba-hero-art { margin: 0; }

.ba-hero-art img {
    display: block;
    width: 100%;
    height: auto;
    /* 블렌드 모드를 쓰지 않는다 — transform(회전)과 함께 쓰면 스크롤 중
       합성 레이어가 배경을 잃어 이미지가 사라진다.
       종이색(#f4f2ed)을 이미지 자체에 구워서 해결했다. */
}

.ba-hero-art figcaption,
.ba-strip figcaption {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--benurd-faint);
    margin-top: 1.4rem;
}

.ba-hero-text { min-width: 0; }

/* ---- 스케치 스트립 ------------------------------------------------------ */

.ba-strip {
    padding: 6rem max(4vmin, 20px) 2rem;
    border-top: 1px solid var(--benurd-line);
}

.ba-strip > .gh-inner { max-width: 118rem; margin: 0 auto; width: 100%; }

.ba-strip-title {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--benurd-red);
    margin-bottom: 3.2rem;
}

.ba-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.2rem;
}

.ba-strip-grid figure { margin: 0; }
.ba-strip-grid a { display: block; text-decoration: none; color: inherit; }
/* 판지 룩은 인물이 위쪽에 있다 — 가운데 기준으로 자르면 머리가 날아간다 */
.ba-strip-grid img.is-kraft { object-position: center 20%; }
/* 연습장 컷은 가로로 길어(600x242) 카드에 맞추면 좌우가 크게 잘린다.
   가운데 기준이면 왼쪽 제목 '선(Line)'이 날아가서 왼쪽을 고정한다(실측). */
.ba-strip-grid img.is-left { object-position: left center; }
/* 연습장 썸네일은 가로로 긴 지면이라 타일에 44%만 들어간다. 왼쪽을 보이면
   제목 "선(Line) 하나가 그림을 만든다"가 낱말 중간에서 잘린다(실측).
   오른쪽을 보이면 직선·곡선 연습 칸이 통째로 들어와 잘린 글자가 없다. */
.ba-strip-grid img.is-right { object-position: right center; }
/* 기획서 지면은 세로로 긴 A4 라 가운데를 자르면 본문 중간만 나와 무엇인지 모른다.
   위쪽(제목과 첫 줄)이 보이면 "손으로 적은 기획서"라는 게 읽힌다 — 2026-08-17 12칸으로 줄이면서. */
.ba-strip-grid img.is-top { object-position: center top; }
.ba-strip-grid a:hover img { border-color: var(--benurd-ink); }
.ba-strip-grid a:hover figcaption { color: var(--benurd-ink); }

.ba-strip-grid img {
    display: block;
    width: 100%;
    height: 20rem;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--benurd-line);
}

/* 2026-08-13: 스케치 넉 장 중 **한 컷만** 움직인다.
   그리드에서 튀면 안 되므로 이미지 타일과 규격을 똑같이 맞춘다(높이·자르기·테두리).
   영상도 원본 그림을 변형한 것이라 재료가 바뀌지 않는다 — 같은 종이 위에서 걷는다. */
.ba-strip-grid video {
    display: block;
    width: 100%;
    height: 20rem;
    object-fit: cover;
    object-position: center 20%;      /* 판지 룩은 인물이 위쪽에 있다 */
    border: 1px solid var(--benurd-line);
}
.ba-strip-grid a:hover video { border-color: var(--benurd-ink); }

.ba-strip-grid figcaption {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--benurd-faint);
}

/* 다크 배경에서는 흰 종이 스케치를 반전시켜 잉크가 살아나게 한다.
   단 갈색 판지 스케치는 종이색 자체가 재료라 반전하면 파랗게 뒤집힌다 → 제외. */
:root.has-light-text .ba-hero-art img,
:root.has-light-text .ba-strip-grid img:not(.is-kraft) { filter: invert(1); }

@media (max-width: 900px) {
    .ba-hero-grid { grid-template-columns: 1fr; gap: 3.2rem; }
    .ba-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .ba-strip-grid img { height: 15rem; }
}

/* ==========================================================================
   본문 이미지 — 규칙 없이 자른다
   같은 네모를 반복하지 않는다. 찢은 종이·비스듬한 컷·각진 다각형을 섞고
   폭과 기울기를 제각각으로 둔다. 브랜드 태도("정해진 정답을 만들지 않는다")를
   레이아웃에 그대로 옮긴 것.
   ========================================================================== */

.gh-content figure.ba-cut { margin: 5.5rem 0; }
.gh-content figure.ba-cut img,
.gh-content figure.ba-cut video { display: block; width: 100%; height: auto; }
/* 움직이는 그림 — 그림과 같은 자리, 같은 크기. 누르면 멈춘다는 것만 커서로 알린다. */
.gh-content figure.ba-cut video[data-ba-move] { cursor: pointer; background: #d5b581; }

/* 1) 아래쪽을 찢은 종이처럼 — 크게, 살짝 왼쪽으로 */
.ba-cut-torn img {
    clip-path: polygon(0 0, 100% 2%, 100% 93%, 88% 97%, 72% 92%, 55% 98%, 36% 93%, 18% 99%, 0 94%);
    transform: rotate(-.7deg);
}

/* 2) 비스듬히 오려낸 사선 컷 */
.ba-cut-slash img {
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    transform: rotate(.5deg);
}

/* 3) 모서리를 각지게 뜯어낸 다각형 */
.ba-cut-chip img {
    clip-path: polygon(3% 0, 100% 4%, 96% 100%, 8% 96%, 0 48%);
    transform: rotate(-1.1deg);
}

/* 4) 위아래를 찢은 가로 띠 — 좁고 길게 */
.ba-cut-strip img {
    clip-path: polygon(0 12%, 14% 4%, 33% 11%, 52% 3%, 71% 10%, 90% 2%, 100% 9%,
                       100% 90%, 82% 97%, 63% 89%, 44% 98%, 25% 90%, 9% 97%, 0 88%);
}

/* 5) 손으로 찢은 듯 한쪽만 거친 컷 */
.ba-cut-rip img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 76% 94%, 58% 100%, 39% 93%, 20% 99%, 0 92%);
    transform: rotate(.8deg);
}

/* ---- 폭·정렬도 제각각으로 ---------------------------------------------- */

.ba-w-full  { width: 100%; }
.ba-w-bleed { width: calc(100% + 12rem); margin-left: -6rem; margin-right: -6rem; }
.ba-w-left  { width: 74%; margin-right: auto; }
.ba-w-right { width: 68%; margin-left: auto; }
.ba-w-tight { width: 56%; margin-left: auto; margin-right: auto; }

.gh-content figure.ba-cut figcaption {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    letter-spacing: .02em;
    color: var(--benurd-faint);
    margin-top: 1.6rem;
    text-align: left;
}

.ba-w-right figcaption, .ba-w-tight figcaption { text-align: right; }

/* 다크 배경에서는 종이 스케치를 반전 */
:root.has-light-text .gh-content figure.ba-cut img,
:root.has-light-text .gh-content figure.ba-cut video { filter: invert(1); }

@media (max-width: 900px) {
    /* bleed 만 100%로 되돌린다 — 좁은 화면에서 여백 밖으로 나가면 가로 스크롤이 생긴다 */
    .ba-w-bleed { width: 100%; margin-left: 0; margin-right: 0; }
    .gh-content figure.ba-cut { margin: 3.6rem 0; }
}

/* 폭 변화를 모바일·태블릿에도 살린다 (2026-08-11)
   ------------------------------------------------------------------
   전에는 여기서 left·right·tight 를 **전부 100%** 로 덮고 있었다. 그 결과:
     · 지침 3·4가 말하는 "폭을 제각각으로 배치해 리듬 만들기"가
       **1024px 이상에서만** 보였다. 정작 이 브랜드를 보는 사람은 대부분 모바일이다(지침 10).
       실측: 390px 에서 서로 다른 폭이 **1종**(전부 341px), 1024px 에서 12종.
     · 태블릿(768 DPR2)에서 모든 그림이 ~715css → **1,430 실픽셀**을 요구했다.
       원본이 그만큼 큰 것이 거의 없어 선명도 중앙값이 **57%** 까지 떨어졌다.
   칸을 줄이니 두 문제가 같이 풀린다(768 실측: 폭 9종→12종, 중앙값 57%→68%).

   모바일은 데스크톱 비율(74/68/56%)을 그대로 쓰면 232px 밑으로 내려가 스케치가 안 보인다.
   실제로 띄워 보고 **86/80/68%** 로 완만하게 잡았다(390px 기준 293·273·232px).
   ------------------------------------------------------------------ */
@media (min-width: 701px) and (max-width: 900px) {
    .ba-w-left  { width: 74%; margin-right: auto; }
    .ba-w-right { width: 68%; margin-left: auto; }
    .ba-w-tight { width: 56%; margin-left: auto; margin-right: auto; }
}
@media (max-width: 700px) {
    .ba-w-left  { width: 86%; margin-right: auto; }
    .ba-w-right { width: 80%; margin-left: auto; }
    .ba-w-tight { width: 68%; margin-left: auto; margin-right: auto; }
}

/* 메뉴가 6개라 1440px 안팎에서 접히던 문제 — 가운데 칸에 남은 폭을 전부 준다 */
@media (min-width: 992px) {
    .gh-navigation .gh-navigation-menu { flex: 1 1 100%; }
}

/* 표지(feature image) — 본문 대비 너무 커서 첫 화면을 다 먹지 않게 폭을 줄인다 */
.gh-article-image { max-width: 76rem; margin-left: auto; margin-right: auto; }
.gh-article-image img { width: 100%; height: auto; }

@media (max-width: 900px) { .gh-article-image { max-width: 100%; } }

/* 히어로를 압축해 글 목록이 첫 화면 안에 들어오게 한다(사용자 지시 2026-08-08) */
.ba-hero { padding: 6.5rem max(4vmin, 20px) 5rem; }
.ba-hero-title { font-size: 7.2rem; margin-bottom: 3rem; }
.ba-hero-lead { font-size: 2rem; line-height: 1.62; margin-bottom: 1.6rem; }
.ba-hero-eng { margin-bottom: 3rem; }
.ba-hero-grid { margin-bottom: 0; }
.ba-hero-link { margin-top: .6rem; }

/* 글 목록을 히어로 바로 아래 붙이고 제목을 눈에 띄게 */
.gh-container.is-list { padding-top: 4rem; }
.gh-container-title { font-size: 1.4rem; letter-spacing: .3em; color: var(--benurd-red); }

/* 스케치 스트립은 하단 보조 영역 */
.ba-strip { padding-top: 5rem; }
.ba-strip .ba-hero-facts { margin-bottom: 4.5rem; }

@media (max-width: 900px) {
    .ba-hero { padding: 4.5rem max(4vmin, 20px) 3.5rem; }
    .ba-hero-title { font-size: 4.8rem; margin-bottom: 2.2rem; }
}

/* 작성자 아이콘 — 로고의 비니 캐릭터.
   Source는 아바타를 <a>(position:relative, 56px)로 감싸고 그 안의 img에
   position:absolute; inset:0; width/height:100% 를 건다.
   실명 파생 슬러그(/author/…) 링크를 없애려고 <a>를 제거했더니 기준점이 사라져
   img가 페이지 좌상단에 절대배치되고 크기도 폭주했다(흰 원이 본문을 덮음).
   → 래퍼 div를 새 기준점으로 삼고 크기를 못박는다. */
.gh-article-author-image {
    position: relative;
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid var(--benurd-line);
}
.gh-article-author-image :is(img, svg),
.ba-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
}

/* ==========================================================================
   홈 재설계 — 글이 주인공. 20대 감각으로 과감하게.
   브랜드 문장은 얇은 띠로 압축하고, 최신 글을 대형 피처로 화면 위에 세운다.
   ========================================================================== */

/* 이전 히어로는 홈에서 쓰지 않는다 */
.ba-hero { display: none; }

/* ---- 1) 브랜드 띠 ------------------------------------------------------- */
.ba-band { padding: 2.6rem max(4vmin, 20px); border-bottom: 1px solid var(--benurd-line); }
.ba-band-inner {
    max-width: 118rem; margin: 0 auto; width: 100%;
    display: flex; align-items: baseline; justify-content: space-between; gap: 2.4rem;
}
/* h1으로 올렸다(홈에 h1이 아예 없었다 — 실측). 보이는 모양은 그대로 두려고
   브라우저·Source의 h1 기본값(큰 글씨·굵기·위아래 마진)을 여기서 눌러준다. */
.ba-band-line {
    font-family: var(--font-serif); font-size: 1.7rem; letter-spacing: -.02em;
    color: var(--benurd-ink); word-break: keep-all;
    margin: 0; font-weight: 400; line-height: 1.5;
}
.ba-band-mark {
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800;
    letter-spacing: .26em; color: var(--benurd-red); margin-right: 1.4rem; white-space: nowrap;
}
.ba-band-link {
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800; letter-spacing: .22em;
    color: var(--benurd-ink); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid var(--benurd-red); padding-bottom: .4rem;
}

/* ---- 2) 최신 글 대형 피처 ---------------------------------------------- */
.ba-feature { padding: 5rem max(4vmin, 20px) 3rem; }
.ba-feature-link { display: block; text-decoration: none; color: inherit; }
.ba-feature-inner {
    max-width: 118rem; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 4.5rem; align-items: center;
}
.ba-feature-art { position: relative; }
.ba-feature-art img {
    display: block; width: 100%; height: auto;
    clip-path: polygon(0 2%, 100% 0, 100% 96%, 84% 100%, 62% 95%, 38% 100%, 16% 96%, 0 100%);
    transform: rotate(-.6deg);
}
.ba-feature-no {
    display: block; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800;
    letter-spacing: .3em; color: var(--benurd-red); margin-bottom: 2rem;
}
.ba-feature-title {
    font-family: var(--font-serif); font-size: 5.4rem; line-height: 1.08; font-weight: 700;
    letter-spacing: -.045em; word-break: keep-all; margin-bottom: 2rem;
}
.ba-feature-link:hover .ba-feature-title { text-decoration: underline; text-decoration-color: var(--benurd-red); text-underline-offset: .8rem; }
.ba-feature-excerpt {
    font-size: 1.7rem; line-height: 1.75; color: var(--benurd-faint);
    word-break: keep-all; margin-bottom: 2.4rem;
}
.ba-feature-meta {
    display: block; font-family: var(--font-sans); font-size: 1.25rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--benurd-faint); margin-bottom: 2.4rem;
}
.ba-feature-cta {
    display: inline-block; font-family: var(--font-sans); font-size: 1.35rem; font-weight: 800;
    letter-spacing: .2em; padding: 1.1rem 2.2rem;
    background: var(--benurd-ink); color: var(--benurd-paper);
}
.ba-feature-link:hover .ba-feature-cta { background: var(--benurd-red); }

/* ---- 3) 번호 인덱스 ----------------------------------------------------- */
.ba-index { padding: 3rem max(4vmin, 20px) 2rem; }
.ba-index > .gh-inner { max-width: 118rem; margin: 0 auto; width: 100%; }
.ba-index-title {
    font-family: var(--font-sans); font-size: 1.25rem; font-weight: 800; letter-spacing: .3em;
    color: var(--benurd-faint); border-bottom: 2px solid var(--benurd-ink);
    padding-bottom: 1.2rem; margin-bottom: 0;
}
/* 목록 위 한 줄 — 몇 편이고 어디서 시작하는지. 제목 아래 선과 목록 사이에 놓는다. */
.ba-index-note {
    margin: 1.4rem 0 0; font-size: 1.5rem; line-height: 1.7;
    color: var(--benurd-faint);
}
@media (max-width: 900px) { .ba-index-note { font-size: 1.42rem; margin-top: 1.2rem; } }
.ba-index-list { list-style: none; margin: 0; padding: 0; }
.ba-index-item { border-bottom: 1px solid var(--benurd-line); }
.ba-index-item a {
    display: grid; grid-template-columns: 6rem minmax(0, 1fr) 12rem;
    gap: 2rem; align-items: start;
    padding: 2.8rem 0; text-decoration: none; color: inherit;
}
.ba-index-no {
    font-family: var(--font-sans); font-size: 1.3rem; font-weight: 800;
    line-height: 1.9; letter-spacing: .16em; color: var(--benurd-red);
}
/* 한 자리 번호를 01·02로 보이게 — 본문의 RECORD 01 표기와 통일.
   단 카테고리/이어보기 목록은 '그 목록 안의 순번'이라 RECORD 접두를 붙이면
   전역 기록 번호와 어긋난다(예: PHILOSOPHY에는 1번·3번 글이 들어간다). */
.ba-index-no::before { content: "RECORD 0"; letter-spacing: .16em; }
.ba-index-list.is-archive .ba-index-no::before { content: "0"; }
@media (max-width: 480px) { .ba-index-no::before { content: "0"; } }
.ba-index-item a:hover .ba-index-no { color: var(--benurd-red); }
.ba-index-name {
    display: block; font-family: var(--font-serif); font-size: 2.6rem; line-height: 1.28;
    letter-spacing: -.035em; word-break: keep-all;
}
.ba-index-item a:hover .ba-index-name { text-decoration: underline; text-decoration-color: var(--benurd-red); text-underline-offset: .6rem; }
.ba-index-sub {
    display: block; font-size: 1.5rem; line-height: 1.7; color: var(--benurd-faint);
    margin-top: .8rem; word-break: keep-all;
}
.ba-index-date {
    font-family: var(--font-sans); font-size: 1.2rem; letter-spacing: .14em;
    color: var(--benurd-faint); text-align: right;
}

/* ---- 스케치 스트립은 보조 영역으로 낮춘다 ------------------------------- */
.ba-strip { padding-top: 6rem; opacity: .96; }
.ba-strip .ba-hero-facts { margin-top: 4.5rem; margin-bottom: 0; border-top: 1px solid var(--benurd-line); padding-top: 3rem; }

@media (max-width: 900px) {
    .ba-band-inner { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
    .ba-band-line { font-size: 1.5rem; }
    .ba-feature-inner { grid-template-columns: 1fr; gap: 2.8rem; }
    .ba-feature-title { font-size: 3.4rem; }
    .ba-index-item a { grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1.6rem; }
    .ba-index-no { font-size: 2.4rem; line-height: 1.28; }
    .ba-index-name { font-size: 2rem; }
    .ba-index-date { display: none; }
}


/* ==========================================================================
   모바일 우선 보정 — 20~30대는 모바일로 본다(지침 10)
   ========================================================================== */

@media (max-width: 480px) {
    /* 탭 영역 최소 44px 확보 */
    .gh-navigation-menu a,
    .ba-band-link,
    /* 2026-08-11: APP + 버튼도 같이 키운다. 빼놨더니 좁은 화면에서 ABOUT 만
       44px 이 되고 이쪽은 22px 이라 빨간 밑줄 두 개가 11px 어긋났다(실측). */
    .ba-band-app,
    .ba-feature-cta,
    .ba-index-item a { min-height: 44px; display: flex; align-items: center; }
    /* 탭 영역 확보하려고 center를 줬는데, 번호가 제목이 아니라 '제목+요약 덩어리'
       한가운데로 내려가 어긋나 보였다(실측 번호 top=421 · 제목 top=363).
       start로 되돌리고 번호 줄높이를 제목과 맞춰 첫 줄에 붙인다. */
    .ba-index-item a { display: grid; align-items: start; min-height: 64px; }

    .gh-navigation-logo img { height: 30px; max-height: 30px; max-width: 170px; }
    /* 상단 여백 정리.
       Source: .gh-navigation{height:64px} · .gh-navigation-inner{height:100%}이고
       inner가 grid인데 행 높이가 64px로 잡힌다. 여기에 패딩을 주면 행이 안쪽 영역을
       넘쳐 위로 붙고, 그만큼 로고가 아래로 밀린다(실측 위 25 / 아래 9).
       패딩을 빼서 행과 영역을 일치시키고, 높이는 58px로 조여 위 공간을 줄인다.
       Source가 #gh-navigation{height:64px} 로 ID 선택자를 쓴다. 클래스 규칙으로는
       이길 수 없어 예전에 넣었던 .gh-navigation{height:76px}도 죽은 코드였다(실측 64px).
       ID로 맞받되 :not(.is-open)으로 전체화면 메뉴는 건드리지 않는다. */
    #gh-navigation:not(.is-open) { height: 62px; }
    .gh-navigation-inner { padding-top: 0; padding-bottom: 0; }
    /* Source가 inner·brand에 ID로 64px을 박아둔다. 헤더만 58px로 줄이면 6px이 삐져나가
       내용이 위아래로 밀린다. 세 값을 같은 58px로 맞춰야 진짜 정가운데가 된다.
       (열린 메뉴는 전체화면이라 :not(.is-open)으로 제외) */
    #gh-navigation:not(.is-open) .gh-navigation-inner,
    #gh-navigation:not(.is-open) .gh-navigation-brand { height: 62px; min-height: 0; }
    /* 본문(.ba-band 등)이 max(4vmin,18px)를 쓰므로 헤더도 같은 값으로 */
    .gh-navigation { padding-left: max(4vmin, 18px); padding-right: max(4vmin, 18px); }
    /* 아이콘 버튼이 32px라 손가락 기준(44px)에 못 미쳤다.
       탭 영역만 키우고 아이콘 크기는 그대로 둔다. */
    .gh-navigation .gh-icon-button { width: 44px; height: 44px; }
    /* 44px 안에서 아이콘이 6px 안쪽에 놓인다 → 마지막 버튼만 그만큼 당겨 여백선에 맞춘다 */
    .gh-navigation .gh-burger { margin-right: -6px; }

    /* 브랜드 띠 — 모바일에선 마크를 윗줄로 */
    /* 브랜드 띠가 177px을 차지해 첫 글이 그만큼 아래로 밀려 있었다(실측).
       탭 영역 44px은 지키면서 위아래 여백과 줄 간격만 조인다. */
    .ba-band { padding: 1.4rem max(4vmin, 18px); }
    .ba-band-mark { display: block; margin: 0 0 .6rem; font-size: 1.15rem; letter-spacing: .2em; }
    .ba-band-line { font-size: 1.6rem; line-height: 1.5; margin-bottom: -.4rem; }
    .ba-band-link { font-size: 1.15rem; letter-spacing: .18em; padding-bottom: .2rem; }
    /* 세로로 쌓일 때 문장과 ABOUT 사이가 벌어져 있었다 */
    .ba-band-inner { gap: .8rem; }

    /* 표지 위 여백도 함께 줄여 글이 한 줄 더 올라오게 한다 */
    .ba-feature { padding: 2rem max(4vmin, 18px) 2rem; }

    /* 최신 글 피처 — 이미지 먼저, 제목은 꽉 차게 (여백은 위에서 정함) */
    .ba-feature-title { font-size: 2.9rem; line-height: 1.16; letter-spacing: -.04em; }
    .ba-feature-excerpt { font-size: 1.55rem; line-height: 1.72; }
    .ba-feature-cta { width: 100%; justify-content: center; text-align: center; }

    /* 본문 이미지 컷 — 좁은 화면에선 기울기를 **줄인다**. 없애지 않는다.
       2026-08-11: 여기가 `transform: none` 이라 **모바일에서 기울기가 통째로 0°** 였다
       (실측: 64장 전부 0°, 데스크톱은 -1.1°~0.8°). 찢긴 모양(clip-path)만 남고
       지침 3 이 말하는 "살짝 기울인 배치"가 사라져 있었다 — 이 사이트를 보는 사람은
       대부분 모바일인데(지침 10) 브랜드 태도가 가장 안 보이는 화면이 된 셈이다.
       원래 없앤 이유는 '잘림 방지'였다. 그래서 각도를 데스크톱의 절반쯤으로 낮춰
       360·390px 에서 직접 확인했다 — **화면 밖으로 나간 이미지 0장, 가로 스크롤 없음.**
       (html·body 가 overflow-x:hidden 이라 이중으로 막혀 있기도 하다.) */
    .gh-content figure.ba-cut-torn  img { transform: rotate(-.5deg); }
    .gh-content figure.ba-cut-slash img { transform: rotate(.4deg); }
    .gh-content figure.ba-cut-chip  img { transform: rotate(-.7deg); }
    .gh-content figure.ba-cut-rip   img { transform: rotate(.55deg); }
    .gh-content figure.ba-cut-strip img { transform: rotate(-.4deg); }
    .gh-content figure.ba-cut-plain img { transform: none; }
    .gh-content figure.ba-cut { margin: 3rem 0; }

    /* 캡션이 12.5px였다(2026-08-10 390px 실측). 본문 16.8px의 74%다.
       이 사이트의 캡션은 장식이 아니라 내용을 담는다 — "제가 산 스티커 종이입니다.
       프린터로 뽑아 쓰는 것이고, 무광에 두께 0.1mm라고 적혀 있습니다" 같은 문장이
       71곳에 들어 있다. 12.5px 한글은 모바일에서 읽히지 않는다.
       14.2px로 올리고 줄간격도 함께 준다(대비는 4.76:1로 이미 기준을 넘긴다). */
    .gh-content figure.ba-cut figcaption { font-size: 1.42rem; line-height: 1.66; }

    /* 본문 가독성 */
    .gh-content p { font-size: 1.68rem; line-height: 1.86; }
    .gh-article-title { font-size: 3.2rem; line-height: 1.18; }
    .gh-content h2 { font-size: 2.4rem; line-height: 1.3; }

    /* 스케치 스트립 2열 유지하되 높이 축소 */
    .ba-strip { padding-top: 4rem; }
    .ba-strip-grid { gap: 1.4rem; }
    .ba-strip-grid img { height: 12rem; }
    /* 스트립 캡션 13px → 본문 캡션과 같은 14.2px로 맞춘다(2026-08-10).
       이것도 "이름을 반복해 적어본 자리"처럼 그림이 뭔지 알려주는 유일한 문장이다.
       타일 높이는 이미지가 정하므로(12rem 고정) 글자만 키워도 격자가 안 흔들린다. */
    .ba-strip-grid figcaption { font-size: 1.42rem; line-height: 1.6; }

    /* 팩트 3단 — 가로 배치가 좁아 깨지므로 2열 그리드 */
    .ba-hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
    .ba-fact { min-width: 0; margin: 0; }

    /* 푸터 태그라인 */
    .gh-footer-inner::before {
        font-size: 1.05rem; letter-spacing: .26em; text-indent: .26em;
        padding: 3.2rem 0 2.8rem; margin-bottom: 2.6rem;
    }
    .gh-footer { margin-top: 5rem; }
}

/* 가로 스크롤 방지 — 전면 확장 이미지가 좁은 화면에서 넘치지 않게 */
html, body { overflow-x: hidden; }


/* 공유 버튼 — 'SHARE'가 모바일에서 'SHAR / E'로 줄바꿈되던 문제.
   글자를 쪼개지 않게 nowrap을 걸고 아이콘을 붙여 폭을 예측 가능하게 만든다. */
.ba-share {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    white-space: nowrap;
    flex: none;
    padding: 1rem 1.8rem;
    letter-spacing: .1em;
}
.ba-share-icon { width: 1.6rem; height: 1.6rem; flex: none; }
.ba-share-text { line-height: 1; }

/* 메타 줄이 좁아지면 버튼이 눌려 찌그러진다 → 줄바꿈 허용 + 버튼은 축소 금지 */
.gh-meta-share { flex-wrap: wrap; gap: 1.6rem; }
.gh-article-meta { min-width: 0; }

@media (max-width: 480px) {
    .ba-share { padding: 1rem 1.4rem; min-height: 44px; }
    .ba-share-text { font-size: 1.25rem; }
}


/* ==========================================================================
   모바일 햄버거 메뉴 — 밋밋한 가운데 정렬 목록을 브랜드 언어로 다시 짠다.
   About 페이지의 "01 / BEGINNING" 넘버링 + 국문 부제 구조를 그대로 가져온다.
   ========================================================================== */

/* 데스크톱에서는 부제를 숨긴다(가로 메뉴이므로) */
.ba-nav-sub { display: none; }

/* 2026-08-12: 메뉴에 받아가기(Download) 항목을 넣으면서 — 푸터 메뉴와 같은 빨간 점으로
   "성격이 다른 항목"임을 표시한다(.ba-footer-nav a.ba-footer-give::before 와 같은 모양).
   서랍(모바일)에서는 a::before 가 이미 01·02… 번호 자리라 붙이면 번호를 덮어쓴다.
   그래서 **닫힌 가로 메뉴에서만** 건다. */
.gh-navigation:not(.is-open) .nav-give > a { display: inline-flex; align-items: center; }
.gh-navigation:not(.is-open) .nav-give > a::before {
    content: ""; width: 5px; height: 5px; margin-right: .6rem; border-radius: 50%;
    background: var(--benurd-red); flex: 0 0 auto;
}

/* 열림 상태 = 전체화면 오버레이 */
.is-open#gh-navigation .gh-navigation-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 4rem;
}

.is-open#gh-navigation .gh-navigation-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    counter-reset: banav;
}

/* Source가 열린 메뉴 컨테이너에 gap:48px을 준다. 로고 밑줄과 MENU 사이가
   82px이나 비어 첫 항목이 한참 아래에서 시작했다(실측). 절반 이하로 줄인다. */
#gh-navigation.is-open .gh-navigation-inner { gap: 1.6rem; }

/* 헤더와 첫 항목 사이가 그냥 빈 공간이었다 → 표식을 넣어 여백에 의미를 준다 */
.is-open#gh-navigation .gh-navigation-menu::before {
    content: "MENU";
    display: block;
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .38em;
    text-indent: .38em;
    color: var(--benurd-faint);
    padding: 2.6rem 0 1.6rem;
}

/* 열림 상태에서도 로고는 같은 자리에 고정되어 보이게 */
.is-open#gh-navigation .gh-navigation-brand {
    padding-top: .8rem;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--benurd-ink);
}

.is-open#gh-navigation .gh-navigation-menu .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* Source가 가운데 정렬해 줄 너비가 제각각이 된다 */
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    /* Source가 .gh-navigation .nav에 white-space:nowrap을 걸어둔다.
       메뉴가 세로로 열릴 때도 그게 남아 설명글이 줄바꿈을 못 하고
       화면 밖으로 잘려 나갔다(가로 스크롤까지 생김). 열린 상태에서만 푼다. */
    white-space: normal;
}

/* 좌우 여백을 로고와 맞춘다 */
.is-open#gh-navigation .gh-navigation-inner { padding-left: 0; padding-right: 0; }

.is-open#gh-navigation .nav > li {
    opacity: 1;
    width: 100%;
    text-align: left;
    counter-increment: banav;
    border-top: 1px solid var(--benurd-line);
}
.is-open#gh-navigation .nav > li:last-child { border-bottom: 1px solid var(--benurd-line); }

.is-open#gh-navigation .nav > li > a {
    width: 100%;
    justify-content: start;
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1.4rem;
    padding: 2.2rem .4rem;
    min-height: 44px;
    text-decoration: none;
    color: var(--benurd-ink);
    letter-spacing: normal;
    font-size: inherit;
}

/* 01 02 03 … 자동 번호 */
.is-open#gh-navigation .nav > li > a::before {
    content: "0" counter(banav);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--benurd-red);
    padding-top: .7rem;
}

.is-open#gh-navigation .ba-nav-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 3.2rem;
    line-height: 1.06;
    letter-spacing: -.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.is-open#gh-navigation .ba-nav-sub {
    /* a의 자식은 ::before(번호)·label·sub 셋이라, 2열 그리드에서 sub는
       자동으로 2행 1열(=번호 칸, 4.6rem)로 떨어진다. 그래서 설명글이
       손가락 두 개 폭에 갇혀 있었다. 라벨과 같은 열로 못박는다. */
    grid-column: 2;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--benurd-faint);
    margin-top: .7rem;
    text-transform: none;
    word-break: keep-all;
    overflow-wrap: break-word;
    /* 카테고리 설명은 태그 페이지용이라 길다. 메뉴에서는 두 줄까지만 보여
       항목 높이를 고르게 유지한다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.is-open#gh-navigation .nav > li > a:active .ba-nav-label { color: var(--benurd-red); }

/* 메뉴 하단 브랜드 표식 */
.is-open#gh-navigation .gh-navigation-menu::after {
    content: "BE NURD, BE YOURSELF.";
    display: block;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .34em;
    text-indent: .34em;
    color: var(--benurd-red);
    text-align: center;
    padding: 4rem 0 1rem;
}

@media (max-width: 380px) {
    .is-open#gh-navigation .ba-nav-label { font-size: 2.8rem; }
    .is-open#gh-navigation .nav > li > a { grid-template-columns: 4rem minmax(0, 1fr); padding: 1.9rem .2rem; }
}


/* 공유 완료 피드백 */
.ba-share.is-done { background: var(--benurd-red); color: #fff; border-color: var(--benurd-red); }
.ba-share { cursor: pointer; }


/* 라이트박스 연동 — figure에 kg-image-card를 붙여 PhotoSwipe가 잡게 했다.
   Source의 kg-image-card 기본 여백·정렬이 ba-cut 레이아웃을 흔들지 않게 되돌린다. */
.gh-content figure.ba-cut.kg-image-card { max-width: none; }
.gh-content figure.ba-cut .kg-image { cursor: zoom-in; }
.gh-content figure.ba-cut.ba-w-left  { margin-left: 0; margin-right: auto; }
.gh-content figure.ba-cut.ba-w-right { margin-left: auto; margin-right: 0; }
.gh-content figure.ba-cut.ba-w-tight { margin-left: auto; margin-right: auto; }


/* 스케치 확대 오버레이 — 탭 토글 */
/* 글 하단 — 카테고리 칩 + 다음 경로 */
.ba-post-foot { margin: 6rem auto 0; padding-top: 3.2rem; border-top: 2px solid var(--benurd-ink); }
.ba-post-tags-label {
    display: block; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800;
    letter-spacing: .26em; text-transform: uppercase; color: var(--benurd-faint); margin-bottom: 1.6rem;
}
.ba-post-chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.ba-chip {
    display: inline-flex; align-items: center; min-height: 40px;
    font-family: var(--font-sans); font-size: 1.3rem; font-weight: 700; letter-spacing: .06em;
    color: var(--benurd-ink); text-decoration: none;
    border: 1.5px solid var(--benurd-ink); border-radius: 999px; padding: 0 1.6rem;
}
.ba-chip:hover { background: var(--benurd-ink); color: var(--benurd-paper); }
.ba-post-more { display: flex; flex-wrap: wrap; gap: 1.2rem 2.8rem; align-items: baseline; margin-top: 3.6rem; }
.ba-post-more-link {
    font-family: var(--font-sans); font-size: 1.4rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--benurd-ink); text-decoration: none;
    border-bottom: 2px solid var(--benurd-red); padding-bottom: .5rem; min-height: 44px;
    display: inline-flex; align-items: center;
}
.ba-post-more-link.is-sub {
    font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; text-transform: none;
    color: var(--benurd-faint); border-bottom-color: var(--benurd-line);
}
.ba-post-more-link:hover { color: var(--benurd-red); }
/* 작성자 아바타가 이제 링크가 아니므로 커서 정리 */
.gh-article-author-image .ba-avatar { cursor: default; }

@media (max-width: 480px) {
    .ba-post-foot { margin-top: 4.5rem; padding-top: 2.6rem; }
    .ba-post-more { flex-direction: column; gap: 1.4rem; }
}


/* 카테고리 아카이브 — 홈과 같은 편집 언어 */
.ba-arch { padding: 5.5rem max(4vmin, 20px) 2.4rem; border-bottom: 1px solid var(--benurd-line); }
.ba-arch > .gh-inner { max-width: 118rem; margin: 0 auto; width: 100%; }
.ba-arch-kicker {
    display: block; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800;
    letter-spacing: .3em; text-transform: uppercase; color: var(--benurd-red); margin-bottom: 2rem;
}
.ba-arch-title {
    font-family: var(--font-serif); font-size: 6.4rem; line-height: 1.02; font-weight: 700;
    letter-spacing: -.05em; text-transform: uppercase; margin-bottom: 1.6rem;
}
.ba-arch-desc {
    font-family: var(--font-serif); font-size: 2rem; line-height: 1.6;
    letter-spacing: -.02em; color: var(--benurd-ink); word-break: keep-all; margin-bottom: 1.2rem;
}
.ba-arch-count {
    font-family: var(--font-sans); font-size: 1.25rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--benurd-faint);
}
.ba-arch-back { margin-top: 2.8rem; }

/* 다른 카테고리 칩 — 메뉴에 없는 아카이브로 건너가는 유일한 길 */
.ba-arch-more { margin-top: 4rem; padding-top: 2.4rem; border-top: 1px solid var(--benurd-line); }
.ba-arch-more-label {
    display: block; font-family: var(--font-sans); font-size: 1.15rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--benurd-faint);
    margin-bottom: 1.4rem;
}
/* 한글에 자간을 크게 주면 낱글자로 흩어진다 — 라벨은 영문으로 두되 안전하게 --*/
.ba-arch-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.ba-chip {
    display: inline-flex; align-items: baseline; gap: .5rem;
    padding: .7rem 1.3rem; border: 1px solid var(--benurd-line); border-radius: 999px;
    font-family: var(--font-sans); font-size: 1.45rem; font-weight: 500;
    letter-spacing: -.01em; color: var(--benurd-ink); text-decoration: none;
    background: transparent; transition: background .15s, color .15s, border-color .15s;
}
.ba-chip span { font-size: 1.15rem; color: var(--benurd-faint); font-variant-numeric: tabular-nums; }
.ba-chip:hover { background: var(--benurd-ink); border-color: var(--benurd-ink); color: #fff; }
.ba-chip:hover span { color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
    .ba-arch { padding-top: 3.6rem; }
    .ba-arch-title { font-size: 4rem; }
    .ba-arch-desc { font-size: 1.7rem; }
    /* 모바일은 손가락으로 누른다 — 칩을 키우고 간격을 넓힌다 */
    .ba-arch-chips { gap: .7rem; }
    .ba-chip { padding: .9rem 1.4rem; font-size: 1.5rem; }
    .ba-chip:hover { background: transparent; border-color: var(--benurd-line); color: var(--benurd-ink); }
    .ba-chip:hover span { color: var(--benurd-faint); }
}


/* 글 하단 이어보기 — 홈의 번호 인덱스와 같은 언어 */
/* 반응 버튼과 이어보기가 시각 간격 0px로 붙어 한 덩어리로 읽혔다(실측).
   구분선 안 / 여백만 안 / 반응 아래 선 안을 실제로 렌더해 비교했고,
   바로 아래 '이어서 볼 기록'에 굵은 괘선이 이미 있어 선을 더하면
   짧은 구간에 가로선이 3개가 된다 → 여백만 주는 쪽을 남긴다. */
.ba-next { padding: 2rem max(4vmin, 20px) 4rem; }
.ba-next > .gh-inner { max-width: 118rem; margin: 0 auto; width: 100%; }
.ba-next-title {
    font-family: var(--font-sans); font-size: 1.25rem; font-weight: 800; letter-spacing: .3em;
    color: var(--benurd-faint); border-bottom: 2px solid var(--benurd-ink);
    padding-bottom: 1.2rem; margin-bottom: 0;
}


/* 404 — 브랜드 톤 안내 + 돌아갈 경로 */
.ba-404 { padding: 7rem max(4vmin, 20px) 4rem; }
.ba-404 > .gh-inner { max-width: 92rem; margin: 0 auto; width: 100%; }
.ba-404-code {
    display: block; font-family: var(--font-sans); font-size: 1.3rem; font-weight: 800;
    letter-spacing: .34em; color: var(--benurd-red); margin-bottom: 2.4rem;
}
.ba-404-title {
    font-family: var(--font-serif); font-size: 5.6rem; line-height: 1.08; font-weight: 700;
    letter-spacing: -.045em; word-break: keep-all; margin-bottom: 2.6rem;
}
.ba-404-lead {
    font-size: 1.7rem; line-height: 1.8; color: var(--benurd-faint);
    word-break: keep-all; margin-bottom: 3.6rem;
}
.ba-404-links { display: flex; flex-wrap: wrap; gap: 1.2rem 2.8rem; align-items: baseline; }
.ba-404-index { margin-top: 5.5rem; }

/* 캐릭터를 글 왼쪽에 세운다. 그림 폭은 고정, 글은 남는 폭을 다 쓴다.
   width/height를 박아 두었으므로 자리는 로드 전에 이미 잡혀 있다(CLS 0). */
.ba-404-grid {
    display: grid; grid-template-columns: 230px minmax(0, 1fr);
    /* 위아래 1fr 행이 남는 높이를 반씩 흡수한다. 이게 없으면 그림이 글보다 길 때
       모자란 만큼이 문단 사이 간격으로 벌어지고(실측: 제목~설명 58px),
       아래로만 흘리면 글이 위에 붙어 그림 하단이 텅 빈다. */
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 5rem; align-items: start;
}
.ba-404-figure {
    grid-column: 1; grid-row: 1 / -1; align-self: center;
}
.ba-404-grid > :not(.ba-404-figure) { grid-column: 2; min-width: 0; }
/* 네 조각 모두 행을 못 박는다. 하나만 지정하면 나머지가 1행부터 자동 배치돼
   위쪽 1fr을 밟는다(실측: 제목만 맨 위로 올라가고 404가 아래로 갔다). */
.ba-404-code  { grid-row: 2; }
.ba-404-title { grid-row: 3; }
.ba-404-lead  { grid-row: 4; }
.ba-404-links { grid-row: 5; }
.ba-404-figure img {
    display: block; width: 100%; height: auto;
    /* 종이 위에 놓인 그림처럼 아주 옅은 그림자만. 카드 테두리는 두지 않는다. */
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .07));
}

@media (max-width: 900px) {
    .ba-404 { padding-top: 3.4rem; }
    .ba-404-title { font-size: 3.4rem; }
    .ba-404-lead { font-size: 1.55rem; }
    .ba-404-links { flex-direction: column; gap: 1.4rem; }
    /* 폰에서 캐릭터를 맨 위에 두었더니 첫 화면을 통째로 먹고
       "여기엔 아무것도 남아 있지 않습니다"가 스크롤 아래로 밀렸다(실측: 사용자 화면).
       404를 보는 사람은 무슨 일이 났는지부터 알아야 한다.
       → 제목까지 먼저 읽히게 하고 캐릭터는 그 아래, 설명 앞에 둔다.
       세로로 긴 그림이라 폭도 130px로 줄여 설명·링크가 첫 화면에 남게 한다. */
    .ba-404-grid { display: flex; flex-direction: column; align-items: flex-start; }
    .ba-404-code   { order: 1; margin-bottom: 1.6rem; }
    .ba-404-title  { order: 2; margin-bottom: 2.2rem; }
    .ba-404-figure { order: 3; width: 130px; margin: 0 0 2.4rem; }
    .ba-404-lead   { order: 4; }
    .ba-404-links  { order: 5; }
}

/* About 끝의 기록 링크 — 정체성 페이지에서 글로 건너가는 길.
   About 본문은 HTML 카드라 자체 스타일을 쓰지만, 이 블록은 테마가 책임진다. */
.ba-about-records {
    margin: 7rem 0 5rem;
    padding-top: 2.6rem;
    border-top: 1px solid var(--benurd-ink);
}
.ba-abr-label {
    font-family: var(--font-sans); font-size: 1.35rem; font-weight: 600;
    letter-spacing: -.01em; color: var(--benurd-faint); margin-bottom: 2.4rem;
    word-break: keep-all;
}
.ba-abr-list { list-style: none; margin: 0; padding: 0; }
.ba-abr-list li + li { border-top: 1px solid var(--benurd-line); }
.ba-abr-list a {
    display: flex; align-items: baseline; gap: 1.6rem;
    padding: 1.8rem 0; text-decoration: none; color: var(--benurd-ink);
}
.ba-abr-no {
    flex: none; font-family: var(--font-sans); font-size: 1.6rem; font-weight: 800;
    color: var(--benurd-red); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ba-abr-body { display: block; }
.ba-abr-name {
    display: block; font-family: var(--font-serif); font-size: 2.1rem; line-height: 1.35;
    letter-spacing: -.03em; word-break: keep-all;
}
.ba-abr-sub {
    display: block; margin-top: .6rem; font-size: 1.45rem; line-height: 1.55;
    color: var(--benurd-faint); word-break: keep-all;
}
.ba-abr-list a:hover .ba-abr-name { text-decoration: underline; text-decoration-color: var(--benurd-red); }
.ba-abr-tags { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem; }
.ba-abr-tags a {
    padding: .8rem 1.4rem; border: 1px solid var(--benurd-line); border-radius: 999px;
    font-family: var(--font-sans); font-size: 1.4rem; font-weight: 500;
    color: var(--benurd-ink); text-decoration: none;
}
.ba-abr-tags a:hover { background: var(--benurd-ink); border-color: var(--benurd-ink); color: #fff; }

@media (max-width: 900px) {
    .ba-about-records { margin: 5rem 0 3.5rem; }
    /* 모바일은 손가락 기준 — 링크 세로 여백을 늘려 탭 영역을 44px 이상으로 */
    .ba-abr-list a { padding: 1.9rem 0; gap: 1.2rem; }
    .ba-abr-name { font-size: 1.85rem; }
    .ba-abr-sub { font-size: 1.4rem; }
    .ba-abr-tags a:hover { background: transparent; border-color: var(--benurd-line); color: var(--benurd-ink); }
}

/* 읽기 진행바 — 글 페이지 상단. 헤더가 sticky가 아니므로 화면 맨 위에 고정한다. */
.ba-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 9999; pointer-events: none; background: transparent;
}
.ba-progress span {
    display: block; height: 100%; width: 0;
    background: var(--benurd-red);
    transform-origin: left center;
    transition: width .08s linear;
}
@media (max-width: 900px) {
    /* 모바일은 화면이 좁아 진행바가 잘 보인다 — 조금 더 굵게 */
    .ba-progress { height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .ba-progress span { transition: none; }
}

/* 익명 반응 — 글 끝, 이어보기 앞. 로그인 없이 한 번 누르면 끝난다. */
.ba-react { padding: 1rem max(4vmin, 20px) 5rem; }
.ba-react .gh-inner { max-width: 72rem; }
.ba-react-q {
    font-family: var(--font-sans); font-size: 1.35rem; font-weight: 700;
    letter-spacing: -.01em; color: var(--benurd-faint); margin-bottom: 1.4rem;
}
.ba-react-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.ba-react-btn {
    flex: 0 1 auto; min-height: 44px; padding: .9rem 1.6rem;
    border: 1px solid var(--benurd-line); border-radius: 0; background: transparent;
    font-family: var(--font-sans); font-size: 1.45rem; font-weight: 600;
    letter-spacing: -.01em; color: var(--benurd-ink); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ba-react-btn:hover { border-color: var(--benurd-ink); }
.ba-react-btn.is-on {
    background: var(--benurd-ink); border-color: var(--benurd-ink); color: #fff;
}
.ba-react-thanks {
    margin-top: 1.2rem; font-family: var(--font-sans); font-size: 1.3rem;
    color: var(--benurd-red); font-weight: 600;
}
@media (max-width: 900px) {
    .ba-react { padding: 1rem max(4vmin, 18px) 4.4rem; }
    /* 좁은 화면에서는 세 개가 두 줄로 접힌다 — 줄바꿈이 어색하지 않게 폭을 키운다 */
    .ba-react-btn { flex: 1 1 calc(50% - .4rem); padding: 1rem 1.2rem; font-size: 1.4rem; }
    .ba-react-btn:hover { border-color: var(--benurd-line); }
}

/* 드로잉 노트 다운로드 — 프린트해서 쓰라는 안내가 목적이라 크게 눈에 띄게 */
.ba-dl { border: 2px solid var(--benurd-ink); padding: 2.6rem 2.4rem; margin: 4rem 0 3rem; }
.ba-dl-label {
    font-family: var(--font-sans); font-size: 1.15rem; font-weight: 800;
    letter-spacing: .28em; text-transform: uppercase; color: var(--benurd-red); margin-bottom: 1.2rem;
}
.ba-dl-title { font-family: var(--font-serif); font-size: 2.4rem; line-height: 1.35;
    letter-spacing: -.03em; word-break: keep-all; margin-bottom: .8rem; }
.ba-dl-note { font-size: 1.45rem; line-height: 1.7; color: var(--benurd-faint); word-break: keep-all; }
.ba-dl-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.ba-dl-btn {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 48px;
    padding: 1rem 2rem; background: var(--benurd-ink); color: #fff !important;
    font-family: var(--font-sans); font-size: 1.45rem; font-weight: 700;
    letter-spacing: -.01em; text-decoration: none !important; border: 1px solid var(--benurd-ink);
}
.ba-dl-btn.is-ghost { background: transparent; color: var(--benurd-ink) !important; }
.ba-dl-btn:hover { opacity: .85; }
/* 낱장 받기 — 예전엔 맨 링크 4개를 나열했는데, 모바일에서 한 줄씩 쌓여
   밑줄만 그어진 채 늘어졌다(실측). 만들다 만 화면처럼 보여서 칩으로 바꿨다. */
.ba-dl-each { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--benurd-line); }
.ba-dl-each-label { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--benurd-faint); margin-bottom: 1rem; }
/* 낱장 파일의 실제 사양. 라벨은 대문자·자간이 넓은 딱지라 그대로 이어 쓰면 읽기 나쁘다
   → 옆에 소문자 톤으로 붙인다(2026-08-11, 낱장을 A4 300dpi 로 교체하면서). */
.ba-dl-each-sub {
    display: inline-block; margin-left: .8rem; font-weight: 500;
    letter-spacing: .02em; text-transform: none; opacity: .85;
}
.ba-dl-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.ba-dl-chips a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem; min-height: 48px; padding: .8rem .4rem;
    border: 1px solid var(--benurd-line); background: transparent;
    color: var(--benurd-ink) !important; text-decoration: none !important;
    font-family: var(--font-sans); line-height: 1.2;
}
.ba-dl-chips a:hover { border-color: var(--benurd-ink); }
.ba-dl-chips b { font-size: 1.1rem; font-weight: 800; letter-spacing: .06em; color: var(--benurd-red); }
.ba-dl-chips span { font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }

/* COMING SOON — 아직 안 나온 것도 기록의 일부다 */
.ba-soon { border-top: 1px solid var(--benurd-line); border-bottom: 1px solid var(--benurd-line);
    padding: 2.4rem 0; margin: 3.5rem 0; text-align: center; }
.ba-soon-mark { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800;
    letter-spacing: .4em; text-indent: .4em; color: var(--benurd-red); }
.ba-soon-txt { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.5;
    letter-spacing: -.02em; margin-top: 1rem; word-break: keep-all; }

@media (max-width: 900px) {
    .ba-dl { padding: 2rem 1.6rem; margin: 3rem 0 2.4rem; }
    .ba-dl-title { font-size: 2rem; }
    .ba-dl-row { flex-direction: column; }
    .ba-dl-btn { justify-content: center; }
    .ba-dl-chips { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 푸터 빈 구멍 정리 -------------------------------------------------
   Source 기본값이 .gh-footer-signup / .gh-footer-bar 에 각각 margin-bottom:120px 를
   준다. 글이 많고 링크가 여러 줄인 사이트를 전제로 한 값이라, 구독 폼 하나뿐인
   이 푸터에서는 SUBSCRIBE 아래와 저작권 아래에 120px씩 빈 칸으로 남았다(실측).
   bar는 마지막 요소라 아래 여백이 통째로 새어 나가 페이지 끝이 비어 보였다. */
.gh-footer .gh-footer-signup { margin-bottom: 8rem; }
.gh-footer .gh-footer-bar { margin-bottom: 0; }
@media (max-width: 900px) {
    .gh-footer .gh-footer-signup { margin-bottom: 5.6rem; }
}

/* 2026-08-12: 이메일 입력칸 자리를 대신하는 RSS 줄(footer.hbs 주석 참고).
   글 끝의 .ba-inline-sub-links 와 같은 모양으로 맞춘다 — 사이트 안에서
   "다음으로 갈 곳"은 전부 이 생김새다. 폼(56px)이 빠진 만큼 위아래로
   여백을 조금 주고, 탭 영역 44px 는 그대로 지킨다. */
.ba-footer-follow { margin: 2.4rem 0 0; display: flex; justify-content: center; }
.ba-footer-rss {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600;
    letter-spacing: -.02em; color: inherit; text-decoration: none; word-break: keep-all;
}
.ba-footer-rss:hover { text-decoration: underline; text-decoration-color: var(--benurd-red); }

/* 글쓴이 이름을 h4 → p로 내리면서(h1 다음에 h4가 와서 제목 단계를 건너뛰었다)
   본문 줄높이를 물려받아 높이가 19 → 26px로 커졌다. 원래 모양으로 되돌린다. */
.gh-article-author-name { line-height: 1.2; }

/* 서명 줄 — "글쓴이" 라벨은 이름보다 작고 흐리게(이름이 주인공) */
.ba-byline-label {
    font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700;
    letter-spacing: .12em; color: var(--benurd-faint); margin-right: .5rem;
}
.ba-updated { white-space: nowrap; }

/* 표 — 사이트에 표가 처음 들어간다(연습장 네 장 요약).
   모바일에서 가로로 넘치면 페이지 전체가 흔들리므로 표만 따로 스크롤시킨다. */
.ba-table-wrap { margin: 3rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ba-table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: 1.45rem; }
.ba-table th, .ba-table td {
    border-bottom: 1px solid var(--benurd-line); padding: 1.2rem 1rem;
    text-align: left; vertical-align: top; word-break: keep-all; line-height: 1.6;
}
.ba-table thead th {
    font-family: var(--font-sans); font-size: 1.15rem; font-weight: 800;
    letter-spacing: .14em; color: var(--benurd-faint); text-transform: uppercase;
    border-bottom: 2px solid var(--benurd-ink); white-space: nowrap;
}
.ba-table td b { color: var(--benurd-red); font-family: var(--font-sans); font-size: 1.3rem; letter-spacing: .04em; }
.ba-table tbody tr:last-child td { border-bottom: 0; }
.ba-table-wrap figcaption {
    margin-top: 1rem; font-size: 1.25rem; color: var(--benurd-faint); line-height: 1.6;
}

/* 순서 정리 목록 — 이야기 글에 '그래서 어떻게 하나'를 한 번 정리해주는 자리.
   번호를 크게 세워 스캔되게 하되, 카드·아이콘은 쓰지 않는다(과대 디자인 금지). */
.ba-steps { list-style: none; counter-reset: s; margin: 2.6rem 0; padding: 0; }
.ba-steps li {
    counter-increment: s; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 1.4rem; padding: 1.8rem 0; border-bottom: 1px solid var(--benurd-line);
}
.ba-steps li:last-child { border-bottom: 0; }
.ba-steps li::before {
    content: counter(s, decimal-leading-zero);
    font-family: var(--font-sans); font-size: 2rem; font-weight: 800;
    line-height: 1.25; letter-spacing: .02em; color: var(--benurd-red);
}
/* li의 자식이 ::before·b·span 셋인데 칸은 둘이라, span이 두 번째 줄의 좁은
   번호 칸(2.8rem)으로 밀려 한 어절씩 세로로 쪼개졌다(실측). 둘 다 2열에 고정한다. */
.ba-steps b, .ba-steps span { grid-column: 2; }
.ba-steps b {
    display: block; font-family: var(--font-serif); font-size: 1.95rem; line-height: 1.35;
    letter-spacing: -.03em; word-break: keep-all; margin-bottom: .5rem;
}
.ba-steps span {
    display: block; font-size: 1.5rem; line-height: 1.75;
    color: var(--benurd-faint); word-break: keep-all;
}
@media (max-width: 900px) {
    .ba-steps li { grid-template-columns: 2.8rem minmax(0, 1fr); gap: 1.1rem; padding: 1.5rem 0; }
    .ba-steps li::before { font-size: 1.7rem; }
    .ba-steps b { font-size: 1.75rem; }
}

/* 글 끝 인라인 구독 — 푸터 폼까지 못 내려오는 사람을 위한 자리.
   푸터와 같은 폼을 쓰되 어두운 배경 없이 본문 톤으로 얇게 둔다. */
.ba-inline-sub { margin-top: 3.4rem; padding-top: 2.8rem; border-top: 1px solid var(--benurd-line); }
.ba-inline-sub-line {
    font-size: 1.45rem; line-height: 1.7; color: var(--benurd-faint);
    word-break: keep-all; margin: 0 0 1.4rem;
}
.ba-inline-sub .gh-form { max-width: 46rem; }
.ba-inline-sub .gh-form-input { background: transparent; border-color: var(--benurd-line); }
/* 2026-08-10: 폼 대신 실제로 되는 두 가지를 줄로 둔다(post.hbs 주석 참고).
   사이트의 다른 이동 표시와 같은 모양 — 빨간 화살표, 밑줄은 누를 때만.
   모바일에서는 세로로 쌓아 탭 영역 44px 를 지킨다. */
.ba-inline-sub-links {
    margin: 0; display: flex; flex-wrap: wrap; gap: 1rem 3.2rem;
}
.ba-inline-sub-links a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600;
    letter-spacing: -.02em; color: inherit; text-decoration: none; word-break: keep-all;
}
.ba-inline-sub-links a:hover { text-decoration: underline; text-decoration-color: var(--benurd-red); }
@media (max-width: 640px) {
    .ba-inline-sub-links { flex-direction: column; gap: 0; }
}

/* 홈 브랜드 문단 — 스케치 아래에 짧게. 카드·배경 없이 본문 톤 그대로 둔다. */
.ba-strip-note { margin-top: 4rem; max-width: 62rem; }
.ba-strip-note p {
    font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.85;
    letter-spacing: -.015em; color: var(--benurd-ink); word-break: keep-all; margin: 0 0 1.2rem;
}
.ba-strip-note p:last-child { margin-bottom: 0; color: var(--benurd-faint); }
@media (max-width: 900px) { .ba-strip-note { margin-top: 3.2rem; } .ba-strip-note p { font-size: 1.55rem; } }

/* 글자가 내용인 이미지(연습장 제목 모음 등)에는 찢긴 가장자리를 쓰지 않는다.
   clip-path가 첫 줄 제목을 대각선으로 잘라먹었다(실측). 테두리만 남긴다. */
.ba-cut.ba-cut-plain img { clip-path: none; }

/* 스케치 스트립이 글 수만큼 늘어난다. 4칸 격자에 다섯 번째가 붙으면 마지막 칸이
   혼자 남으므로, 홀수 항목은 남은 폭을 다 쓰게 한다(모바일 2칸에서도 같은 규칙). */
.ba-strip-grid figure.is-wide { grid-column: span 4; }
.ba-strip-grid figure.is-wide img { height: 24rem; }
/* 2026-08-14: 노트북 사진은 4.8:1 로 잘린다. 가운데를 보이면 키보드만 남고
   정작 붙인 스티커(왼쪽 아래)가 날아간다(실측) → 아래쪽을 보인다. */
.ba-strip-grid figure.is-wide img.is-low { object-position: center 70%; }
@media (max-width: 900px) {
    .ba-strip-grid figure.is-wide { grid-column: span 2; }
    .ba-strip-grid figure.is-wide img { height: 18rem; }
}

/* ── 한글 줄바꿈 (낱말 중간 분리 방지) ─────────────────────────────
   Source 기본값은 .gh-content 안에서 word-break: break-word 라서,
   한글이 CJK 규칙대로 음절 단위로 끊긴다("다/섯 줄로", "나다움/을").
   글5 한 편에서만 51군데가 이렇게 끊겨 있었다.
   keep-all 로 어절(공백) 기준으로만 끊고, 대신 URL·긴 영문 한 덩어리가
   화면을 밀어내지 않도록 overflow-wrap: break-word 를 함께 둔다. */
.gh-content p,
.gh-content li,
.gh-content h1, .gh-content h2, .gh-content h3, .gh-content h4,
.gh-content blockquote,
.gh-content figcaption,
.gh-content td, .gh-content th,
.gh-content dt, .gh-content dd,
.gh-article-title,
.gh-article-excerpt,
.gh-card-title, .gh-card-excerpt,
.ba-feature-title, .ba-feature-excerpt,
.ba-index-title, .ba-index-sum,
.gh-footer p, .gh-footer h2 {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── 글 안 섹션 건너뛰기 ────────────────────────────────
   글이 3,000자 안팎이라 모바일에서 30화면쯤 스크롤해야 끝난다.
   "목차" 같은 라벨은 쓰지 않는다(지침 8) — 줄 하나 긋고 제목만 나열한다.
   H2가 5개 이상인 글에만 붙인다. */
.ba-jump {
    margin: 3.2rem 0 4.2rem;
    padding: 1.8rem 0 2rem;
    border-top: 1px solid var(--benurd-line);
    border-bottom: 1px solid var(--benurd-line);
}
.ba-jump-label {
    /* 영문용 넓은 자간을 한글에 걸면 "건 너 뛰 기"로 벌어진다. */
    font-size: 1.2rem; letter-spacing: .02em;
    color: var(--benurd-faint); margin: 0 0 1.1rem;
}
/* 본문 구분선 바로 뒤에 오면 선이 두 줄로 겹친다. 위 선을 뺀다. */
.ba-jump.is-after-rule { border-top: none; padding-top: .4rem; margin-top: 1.6rem; }
.ba-jump ol { list-style: none; margin: 0; padding: 0; counter-reset: jump; }
.ba-jump li { counter-increment: jump; margin: 0; }
.ba-jump a {
    display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem;
    align-items: baseline;
    padding: .62rem 0; min-height: 44px; align-content: center;
    font-size: 1.6rem; line-height: 1.45; letter-spacing: -.02em;
    color: var(--benurd-ink); text-decoration: none;
    word-break: keep-all; overflow-wrap: break-word;
}
.ba-jump a::before {
    content: counter(jump, decimal-leading-zero);
    font-size: 1.15rem; color: var(--benurd-faint); letter-spacing: .04em;
}
.ba-jump a:hover { text-decoration: underline; text-decoration-color: var(--benurd-red); }
@media (max-width: 900px) {
    .ba-jump { margin: 2.6rem 0 3.4rem; }
    .ba-jump a { font-size: 1.55rem; }
}

/* 본문 그림은 탭하면 커진다(default.hbs의 ba-zoom).
   예전엔 Source의 kg-image 클래스를 얹어 커서를 줬는데, 그 클래스를 붙이면
   PhotoSwipe까지 같이 걸려 뷰어가 두 개 뜬다(2026-08-09 실측). 커서만 직접 준다. */
.gh-content figure.ba-cut img { cursor: zoom-in; }

/* 글 끝 공유 버튼. 위쪽 버튼과 같은 모양이되, 다 읽은 자리라 조금 띄운다. */
.ba-post-share-end { margin: 3rem 0 1.4rem; }
.ba-post-share-end .gh-button-share { display: inline-flex; }
@media (max-width: 900px) { .ba-post-share-end { margin: 2.4rem 0 1.2rem; } }

/* ── 표: 모바일에서는 옆으로 밀지 말고 접는다 ──────────────────
   min-width 52rem짜리 표를 좁은 화면에서 가로 스크롤로 두었더니,
   실제로는 오른쪽 글자가 잘린 채 끝나고 네 번째 열("하루 목표")은
   아예 안 보였다. 스크롤된다는 표시도 없었다(360~430px 전부 실측).
   좁은 화면에서는 한 행을 카드처럼 세로로 쌓고, 각 칸 앞에
   그 열의 제목을 붙인다(data-th는 default.hbs 스크립트가 넣는다). */
@media (max-width: 700px) {
    .ba-table-wrap { overflow-x: visible; }
    .ba-table { min-width: 0; display: block; }
    .ba-table thead { display: none; }
    .ba-table tbody, .ba-table tr, .ba-table td { display: block; width: 100%; }
    .ba-table tr {
        padding: 1.4rem 0;
        border-bottom: 1px solid var(--benurd-line);
    }
    .ba-table tbody tr:last-child { border-bottom: 0; }
    /* 2026-08-10: 여기가 `display: grid`였다. 그러면 칸 안의 **문장과 링크가 각각 별개
       그리드 항목**이 되어 갈라진다. 실측(320px): "…그려둔 얼굴입니다 —" 에서 줄표가 허공에
       끊기고 링크 "02 캐릭터"가 아래 줄 왼쪽으로 떨어져 나갔다. 문장 끝에 붙인 문맥 링크라
       붙어 있어야 뜻이 통한다(글 3편에 같은 표가 있다).
       라벨만 왼쪽 여백에 절대배치하고 칸 내용은 **하나의 텍스트 흐름**으로 둔다.
       보이는 모양(라벨 왼쪽·본문 오른쪽)은 그대로다.
       덤으로 링크가 다시 inline 이 되어 탭 영역 검사의 '문장 속 링크' 면제에도 맞는다. */
    .ba-table td {
        border-bottom: 0;
        padding: .3rem 0 .3rem 9.4rem;
        position: relative;
        line-height: 1.7;
    }
    .ba-table td::before {
        content: attr(data-th);
        position: absolute; left: 0; top: .3rem; width: 8.6rem;
        font-family: var(--font-sans); font-size: 1.1rem; font-weight: 800;
        letter-spacing: .1em; text-transform: uppercase;
        color: var(--benurd-faint); line-height: 1.7;
    }
    /* 첫 칸(No.1 같은 식별자)은 제목 없이 크게 */
    .ba-table td:first-child { padding-left: 0; margin-bottom: .3rem; }
    .ba-table td:first-child::before { content: none; }
    .ba-table td:first-child b { font-size: 1.5rem; }
}

/* ── 표지 이미지 자리 예약 ────────────────────────────────
   Source는 .gh-article-image에 grid-column: wide 를 준다. 이건 "wide-start
   선에서 한 칸"이라는 뜻이라, 실제로는 폭 0.016px짜리 빈 트랙에 배치된다.
   이미지가 도착하면 그 칸을 넘쳐 379px로 그려지고 본문이 199px 아래로 밀린다
   (About 430px에서 10회 중 2회 CLS 0.1677 실측 — 표지 높이와 정확히 같다).
   영역 전체(wide-start ~ wide-end)를 잡게 해 로딩 전에도 폭이 정해지게 한다. */
.gh-article-image { grid-column: wide-start / wide-end; width: 100%; }
/* Source는 표지 img에 width를 주지 않는다. 그래서 로딩 전 고유 크기 0을 써서
   폭 0 → aspect-ratio로도 높이를 못 잡는다(실측 computed width: 0px).
   폭을 못박아야 치수 속성(1200x630 / 2000x1200)이 자리를 예약한다. */
.gh-article-image img { width: 100%; height: auto; }

/* 푸터 메뉴 — 긴 글 맨 아래에서 갈 곳이 없던 문제. 눈에 띄게 만들지 않고
   가로 한 줄로만 둔다. 좁은 화면에서는 줄바꿈되며 탭 영역 44px을 지킨다. */
.ba-footer-nav {
    display: flex; flex-wrap: wrap; gap: 0 2.4rem;
    padding-top: 2.6rem; margin-bottom: .6rem;
    border-top: 1px solid var(--benurd-line);
}
.ba-footer-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700;
    letter-spacing: .08em; color: var(--benurd-faint);
    text-decoration: none; word-break: keep-all;
}
/* 2026-08-11(사용자 신고): 마우스를 올리면 글자가 사라졌다.
   `color: var(--benurd-ink)`(어두운 잉크)를 줬는데 **푸터 배경이 검정**이라
   올린 항목만 통째로 안 보이고 빨간 밑줄만 남았다.
   .ba-footer-give 에서 똑같은 실수를 한 적이 있다(위 주석) — 세 번째다.
   푸터 안에서는 글자색을 건드리지 않는다. 표시는 빨간 밑줄로 충분하다. */
.ba-footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--benurd-red); }
/* 무료 배포물 입구 — 다른 메뉴(이동)와 성격이 달라서(가져가는 것) 점 하나를 앞에 찍는다.
   색은 절대 덮어쓰지 않는다. 처음에 `color: var(--benurd-ink)`(어두운 잉크)를 줬다가
   **푸터가 어두운 배경이라 글자가 통째로 사라졌다**(2026-08-11 실측 — 빨간 점만 보였다).
   푸터 안 글자색은 문맥에 따라 바뀌므로 형제 링크와 같은 것을 그대로 물려받게 둔다. */
.ba-footer-nav a.ba-footer-give::before {
    content: ""; width: 5px; height: 5px; margin-right: .7rem; border-radius: 50%;
    background: var(--benurd-red); flex: 0 0 auto;
}
/* 홈 화면에 붙이기 — 형제 링크와 같은 모양으로 둔다(버튼 티를 내지 않는다).
   ★ 색: 푸터를 밝게 만드는 규칙은 `.gh-footer a { color: var(--benurd-paper) }` 라
   **a 에만 걸린다.** 이건 <button> 이라 그 그물에 안 걸려 어두운 잉크색으로 남았고,
   어두운 푸터 위에서 거의 안 보였다(실측: rgba(17,17,17,.6) vs 형제 rgb(244,242,237)).
   같은 자리에서 두 번째로 밟은 함정이라(위 .ba-footer-give 주석) 아래에 못을 박아둔다.
   아이콘은 글자색을 따라오게 stroke="currentColor" 로 그린다. */
.gh-footer .ba-footer-app,
.gh-footer .ba-footer-app-note { color: var(--benurd-paper); }
.ba-footer-app {
    display: inline-flex; align-items: center; gap: .7rem; min-height: 44px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700;
    letter-spacing: .08em; color: var(--benurd-faint); word-break: keep-all;
}
.ba-footer-app:hover { text-decoration: underline; text-decoration-color: var(--benurd-red); }
.ba-footer-app:focus { outline: none; }
.ba-footer-app:focus-visible { outline: 3px solid var(--benurd-red); outline-offset: 4px; }
.ba-footer-app-icon { width: 16px; height: 16px; flex: 0 0 auto; }
/* 설치를 못 거는 브라우저에서만 뜨는 한 줄 안내(푸터 전용).
   <p> 기본 여백·본문 글꼴이면 푸터 메뉴와 따로 놀아서 크기를 맞춰준다. */
.ba-footer-app-note {
    margin: .8rem 0 0; font-family: var(--font-sans);
    font-size: 1.25rem; line-height: 1.7; word-break: keep-all;
}

/* ── 홈 히어로 ABOUT 옆의 설치 입구 (2026-08-11, 사용자 지정 자리) ──────
   ABOUT 과 같은 모양(빨간 밑줄 + 대문자)으로 두고 기호만 → / + 로 나눈다.
   <button> 이라 기본 테두리·배경·정렬을 지운다. 안내 문구는 한 줄 아래로 떨군다
   (flex-basis:100% — 옆에 끼면 제목 칸을 밀어낸다). */
.ba-band-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.6rem; }
.ba-band-app {
    border: 0; border-bottom: 2px solid var(--benurd-red);
    background: none; cursor: pointer; font: inherit;
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800;
    letter-spacing: .22em; color: var(--benurd-ink);
    padding: 0 0 .4rem;
    /* 공유 클래스(.ba-footer-app)가 inline-flex + min-height:44px 이라
       여기서는 높이가 44px 이 되어 ABOUT(25px)과 밑줄이 어긋났다(실측).
       마우스 화면에서는 글자 높이로 되돌린다. 손가락 화면에서는 뒤쪽
       `@media (pointer: coarse)` 블록이 .ba-band-link 를 44px 로 다시 키운다
       — 이 버튼도 그 클래스를 갖고 있어 같이 적용된다. */
    display: inline-block; min-height: 0; vertical-align: baseline;
}
.ba-band-app:focus { outline: none; }
.ba-band-app:focus-visible { outline: 3px solid var(--benurd-red); outline-offset: 4px; }
.ba-band-app-note {
    flex: 0 0 100%; font-family: var(--font-sans); font-size: 1.2rem; line-height: 1.7;
    font-weight: 500; letter-spacing: normal; color: var(--benurd-faint);
    word-break: keep-all;
}
/* 좁은 화면에서는 ABOUT 은 왼쪽, APP + 는 오른쪽 끝으로 벌린다(사용자 지시).
   .ba-band-inner 가 세로로 쌓이면서 두 링크가 왼쪽에 붙어 있었다. */
@media (max-width: 900px) {
    .ba-band-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
    .ba-band-app { font-size: 1.15rem; letter-spacing: .18em; padding-bottom: .2rem; }
}

/* (상단 메뉴에 뒀던 설치 버튼 CSS 는 버튼과 함께 제거했다 — 2026-08-11) */

@media (max-width: 900px) {
    .ba-footer-nav { gap: 0 1.8rem; padding-top: 2.2rem; }
}

/* ── 아카이브 목록에서는 번호를 뺀다 ─────────────────────────
   카테고리·이어보기 목록의 번호는 '그 목록 안의 순번'이라, 최신순이면
   가장 최근 글이 "01"이 된다. 그런데 같은 글이 본문·홈·About에서는 "05"다
   — 한 글에 번호가 둘로 보였다(2026-08-09 실측).
   전체 기록 번호를 계산해 넣으려 중첩 {{#get}}을 두 방식으로 시도했으나
   필터가 안 먹어 목록이 통째로 비어 즉시 원복했다(tag.hbs 주석 참고).
   순번 자체가 정보 가치가 낮고 옆에 날짜가 이미 있으므로, 아카이브에서는
   번호 칸을 없앤다. 홈의 기록 번호(RECORD 01…)는 그대로 둔다. */
.ba-index-list.is-archive .ba-index-no { display: none; }
.ba-index-list.is-archive .ba-index-item a { grid-template-columns: minmax(0, 1fr) 12rem; }
@media (max-width: 900px) {
    .ba-index-list.is-archive .ba-index-item a { grid-template-columns: minmax(0, 1fr) 9rem; }
}

/* 아카이브에서 번호를 뺐으니 모바일에도 시간 단서를 남긴다.
   기존 규칙이 좁은 화면에서 날짜를 숨기고 있어(실측 display:none),
   번호까지 없으면 순서를 알 방법이 사라진다. 한 줄 아래로 내려 보여준다. */
@media (max-width: 900px) {
    .ba-index-list.is-archive .ba-index-item a { grid-template-columns: minmax(0, 1fr); }
    .ba-index-list.is-archive .ba-index-date {
        display: block; text-align: left; margin-top: 1rem;
    }
}

/* 카테고리 목록 썸네일 — 텍스트만 있던 아카이브에 표지를 한 컷 건다.
   치수(2000x1200)를 태그에 박아 로딩 전에도 자리가 잡힌다. */
/* ── RECORD 카테고리에서만 번호를 되살린다 (2026-08-11) ───────────────
   위 .is-archive 규칙은 "목록 안 순번이라 전역 기록 번호와 어긋난다"는 이유로
   번호를 통째로 감췄다. 그런데 RECORD 분기만은 tag:record 를 오래된 순으로
   전부 불러오므로 순번이 곧 기록 번호다(실측: 1~7 = 본문 RECORD 01~07).
   RECORD는 이 사이트에서 "지우지 않고 남긴 발자취"이자 번호가 곧 서사라,
   정작 그 발자취를 훑는 지면에만 번호가 없던 셈이다. 여기서만 되살린다.
   나머지 태그와 글 하단 이어보기는 마크업에서 아예 뺐다(tag.hbs·post.hbs). */
.ba-index-list.is-archive.has-no .ba-index-no { display: block; }
/* 글 하단 '기록 순서'는 썸네일이 없다(그림 10여 장을 지나온 자리라 더 얹지 않는다) */
.ba-index-list.is-archive.has-no .ba-index-item a,
.ba-index-list.is-archive.has-no .ba-index-item.is-here {
    display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 12rem;
    gap: 2rem; align-items: start; padding: 2.8rem 0;
}
/* 지금 보는 글 — 링크가 아니라 현재 위치 표시다. 눌러도 제자리인 링크를 없앤다. */
.ba-index-item.is-here .ba-index-name { color: var(--benurd-faint); }
.ba-index-item.is-here .ba-index-no { color: var(--benurd-ink); }
.ba-index-item.is-here .ba-index-sub { color: var(--benurd-red); }
.ba-index-item.is-here { background: rgba(0, 0, 0, .028); border-left: 3px solid var(--benurd-red); }
.ba-index-item.is-here .ba-index-no { padding-left: .8rem; }
.ba-index-list.is-archive.has-no.has-thumb .ba-index-item a {
    grid-template-columns: 4.6rem 148px minmax(0, 1fr) 12rem;
}
@media (max-width: 900px) {
    /* 좁은 화면은 날짜가 본문 아래로 내려가므로 3칸이 된다.
       번호 칸이 생기면 글자 칸이 246px → 200px로 줄어 제목이 한 줄씩 더 늘어난다
       (실측: 문서 3,299px → 3,503px). 썸네일을 92 → 72px로 줄이고 번호를
       1.9rem으로 낮춰 그만큼을 돌려줬다 — 글자 230px·문서 3,310px로
       번호가 없던 때와 사실상 같다(브라우저에서 네 안을 재보고 고름). */
    .ba-index-list.is-archive.has-no.has-thumb .ba-index-item a {
        grid-template-columns: 2.8rem 72px minmax(0, 1fr); gap: 1rem;
    }
    .ba-index-list.is-archive.has-no .ba-index-no { font-size: 1.9rem; }
    .ba-index-list.is-archive.has-no .ba-index-date { grid-column: 3; }
    /* 썸네일 없는 '기록 순서'는 2칸 */
    .ba-index-list.is-archive.has-no:not(.has-thumb) .ba-index-item a,
    .ba-index-list.is-archive.has-no:not(.has-thumb) .ba-index-item.is-here {
        grid-template-columns: 2.8rem minmax(0, 1fr); gap: 1.2rem;
    }
    .ba-index-list.is-archive.has-no:not(.has-thumb) .ba-index-date { grid-column: 2; }
    /* 좁은 화면은 발췌를 숨기는 규칙이 있어 '지금 보고 계신 기록입니다.'까지
       같이 사라졌다(실측). 이 한 줄은 발췌가 아니라 현재 위치 표시라서 남긴다. */
    /* 뒤쪽(2357행 부근)에 `.ba-next .ba-index-list.is-archive .ba-index-sub{display:none}`이
       있어 같은 특이도로는 진다 — .ba-next 를 붙여 한 단계 올린다. */
    .ba-next .ba-index-list.is-archive .ba-index-item.is-here .ba-index-sub {
        display: block; margin-top: .5rem;
    }
}

.ba-index-list.has-thumb .ba-index-item a { grid-template-columns: 148px minmax(0, 1fr) 12rem; }
.ba-index-thumb { display: block; }
.ba-index-thumb img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
    .ba-index-list.has-thumb .ba-index-item a { grid-template-columns: 92px minmax(0, 1fr); gap: 1.4rem; }
    .ba-index-list.has-thumb .ba-index-date { grid-column: 2; }
}



/* 맨 위로 — 처음부터 fixed라 문서 흐름을 건드리지 않는다(CLS 0 유지).
   브랜드 톤에 맞춰 테두리만 있는 사각형으로 두고, 탭 영역은 44px을 지킨다. */
.ba-top {
    position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 800;
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--background-color, #f4f2ed);
    border: 1px solid var(--benurd-line); border-radius: 0;
    color: var(--benurd-ink); cursor: pointer;
}
.ba-top[hidden] { display: none; }
.ba-top svg { width: 18px; height: 18px; }
.ba-top:hover { border-color: var(--benurd-red); color: var(--benurd-red); }
@media (min-width: 901px) { .ba-top { right: 2.4rem; bottom: 2.4rem; } }

/* ── 키보드 포커스 표시 ─────────────────────────────────
   Source가 버튼·입력칸의 outline을 지워두어(computed outline-style: none),
   탭으로 이동할 때 지금 어디에 있는지 보이지 않았다(실측: 헤더 검색 버튼,
   구독 입력칸). 링크는 브라우저 기본 표시가 살아 있어 문제가 없었다.
   :focus-visible만 쓰므로 마우스 클릭에는 테두리가 뜨지 않는다. */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--benurd-red);
    outline-offset: 2px;
}
/* 어두운 푸터에서는 빨강이 배경과 2.3:1밖에 안 나온다(UI 요소 기준 3:1 미달).
   그 구역만 지면색으로 바꿔 또렷하게 보이게 한다. */
.gh-footer button:focus-visible,
.gh-footer input:focus-visible,
.gh-footer a:focus-visible {
    outline: 2px solid var(--benurd-paper);
    outline-offset: 2px;
}

/* 본문으로 건너뛰기 — 포커스를 받을 때만 화면에 들어온다. */
.ba-skip {
    position: fixed; top: 0; left: 0; z-index: 1000;
    transform: translateY(-120%);
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 1.6rem; margin: .8rem;
    background: var(--benurd-ink); color: var(--benurd-paper);
    font-family: var(--font-sans); font-size: 1.35rem; font-weight: 700;
    letter-spacing: -.01em; text-decoration: none; border-radius: 0;
}
.ba-skip:focus { transform: translateY(0); outline: 2px solid var(--benurd-red); outline-offset: 2px; }
.gh-main:focus { outline: none; }

/* 목록 항목 제목을 span → 제목 요소로 바꿨다(카테고리 h2, 홈·이어보기 h3).
   카테고리 페이지에 제목이 h1 하나뿐이라 낭독기로 글 사이를 건너뛸 수 없었다(실측).
   보이는 모양은 그대로 두려고 제목 태그의 기본 여백·굵기를 모두 지운다. */
h2.ba-index-name, h3.ba-index-name {
    /* 크기는 지정하지 않는다. 여기에 font-size를 쓰면 (요소+클래스 우선순위가
       .ba-index-name보다 높아) 480px 이하에서 2rem으로 줄이던 규칙을 덮어써
       모바일 제목이 26px로 커진다(실측). 여백·굵기만 되돌린다. */
    margin: 0; font-weight: inherit;
}

/* 동작 줄이기를 켜면 색·테두리 전환도 멈춘다. 기존에는 읽기 진행바만 대응돼 있었다. */
@media (prefers-reduced-motion: reduce) {
    .ba-share, .ba-react-btn, .ba-top, .ba-skip,
    .gh-button, .ba-chip, .ba-index-item a, .ba-footer-nav a {
        transition: none !important;
    }
    html { scroll-behavior: auto !important; }
}


/* 홈 스트립 마지막 타일 — 표지와 같은 사진이 두 번 나오고 있었다(실측: 피처 카드
   표지 c5.jpg와 스트립 brandstory.jpg가 같은 종이의 같은 구도). 재료가 다른 컷으로
   바꾸는데, 이 시트는 가로 4.6:1이라 타일 비율(2:1)로 자르면 세 칸 중 하나만 남는다.
   → 이 타일만 높이를 풀고 원본 비율을 지킨다. */
.ba-strip-grid figure.is-sheet img { height: auto; aspect-ratio: 1024 / 223; object-fit: contain; background: #fff; }
@media (max-width: 900px) { .ba-strip-grid figure.is-sheet img { height: auto; } }
/* 색 견본은 반전시키면 안 된다 — 빨강이 청록이 된다(다크 모드 반전 대상에서 뺀다) */
:root.has-light-text .ba-strip-grid img.is-flat { filter: none; }

/* B안(CORE VALUE 보드를 꽉 채우기)도 만들어 390px에서 비교했다. 읽히기는 하지만
   검은 덩어리가 손그림 넉 장을 눌러버리고, "SKETCH / 2026" 아래에서 가장 브랜드 덱처럼
   보이는 요소가 된다 → A안(컬러/서체 시트)을 남긴다. corevalue.jpg는 지운다. */


/* ── 인쇄 ─────────────────────────────────────────────────────────
   글4가 "프린트해서 쓰세요"라고 안내하는 사이트인데 @media print가 하나도
   없었다(실측). 글을 그냥 인쇄하면 내비게이션·구독폼·반응버튼·이어보기 목록·
   공유 버튼·읽기 진행바가 전부 따라 나온다. 종이에서 누를 수 없는 것들이다.
   연습장 4장은 본문의 PDF 버튼으로 받는 쪽이 정석이지만, 글 자체를 인쇄하는
   사람도 있으므로 종이에 남을 것만 남긴다. */
@media print {
    .gh-navigation, .gh-footer, .ba-progress, .ba-top, .ba-skip,
    .ba-react, .ba-inline-sub, .ba-next, .ba-post-share-end, .ba-mid,
    .gh-button-share, .ba-share, .ba-footer-nav, .ba-post-more,
    /* 섹션 건너뛰기 목록은 JS가 만들어 넣는다(원본 HTML에 없어 grep에 안 잡힌다).
       종이에서는 누를 수 없는 링크라 뺀다 — 소제목이 이미 목차 역할을 한다. */
    .ba-jump { display: none !important; }

    /* 화면용 어두운 배경·반전이 종이에서는 잉크만 먹는다 */
    :root, body, .gh-viewport, .gh-main { background: #fff !important; }
    body, .gh-content, .gh-article-title, .gh-article-excerpt { color: #000 !important; }
    .ba-strip-grid img, .gh-content img { filter: none !important; }

    /* 그림과 표가 페이지 경계에서 잘리지 않게 */
    .gh-content figure, .gh-content img, .gh-content table, .ba-table-wrap { break-inside: avoid; page-break-inside: avoid; }
    .gh-content h2, .gh-content h3 { break-after: avoid; page-break-after: avoid; }
    .gh-content img { max-width: 100% !important; height: auto !important; }
    /* 그림이 A4 한 쪽(약 1,000px)보다 크면 break-inside:avoid 를 지킬 수가 없어
       앞 쪽에 큰 공백이 생기고 그림도 결국 갈라진다
       (실측 2026-08-10: 한 글에서 1,434 · 1,502 · 2,157px짜리가 나왔다).
       캡션 자리까지 감안해 한 쪽에 들어가게 줄인다. 비율은 그대로 유지된다. */
    /* 2026-08-12: 18cm 은 여전히 컸다. A4 인쇄 영역이 약 25.7cm 인데 그림 18cm +
       위아래 여백(화면값 5.5rem = 약 2.3cm씩) + 캡션이면 21cm 을 넘어, 남은 자리에
       못 들어가는 순간 통째로 다음 장으로 밀린다.
       실측(글4 인쇄): 18cm 이면 13쪽에 쪽 평균 하단여백 14.8%, 2쪽은 54.6% 가 비었다.
       값을 바꿔가며 같은 글을 다섯 번 뽑아 비교했다(마지막 쪽 제외 평균):
         18cm 13쪽 14.8% · 14cm 12쪽 15.4% · 12.5cm 12쪽 17.7% · **10cm 9쪽 2.5%**
       10cm 에서 그림과 글이 한 쪽에 같이 앉기 시작해 빈 쪽이 사라진다(30%+ 빈 쪽 0개).
       종이 넉 장이 덜 나간다. 화면에는 영향이 없다(@media print 안이다). */
    .gh-content figure img { max-height: 10cm; width: auto; margin-left: auto; margin-right: auto; }
    .gh-content figure.ba-cut { margin: 1.4rem 0 !important; }
    .gh-content figure figcaption { margin-top: .5rem !important; }

    /* 접어둔 내용도 종이에서는 펼쳐서 보여준다 */
    details { display: block !important; }
    details > summary { list-style: none; }
    details:not([open]) > *:not(summary) { display: revert !important; }

    /* 본문이 화면 폭 제약 없이 종이 폭을 쓰게 한다 */
    .gh-canvas > *, .gh-content > * { grid-column: main-start / main-end !important; }
    a { text-decoration: underline; }

    /* 2026-08-11: 앞·다음 기록도 종이에서는 누를 수 없는 링크다.
       같은 성격인 .ba-post-more·.ba-next 는 이미 빼뒀는데 이것만 빠져 있었다(실측). */
    .ba-seq { display: none !important; }

    /* 받기 블록은 남긴다 — 이 글의 본론이고, 맨 위에 글 주소가 찍혀 있어
       종이를 보고 다시 찾아올 수 있다. 다만 **검정 배경에 흰 글자**라
       브라우저 인쇄 기본값(배경 그림 끄기)에서는 글자가 통째로 사라진다(실측).
       배경에 기대지 않게 흰 바탕·검정 글자·테두리로 바꾼다. */
    .ba-dl, .ba-dl-btn, .ba-dl-chips a {
        background: #fff !important; color: #000 !important; border-color: #111 !important;
    }
    .ba-dl-btn { border: 1px solid #111 !important; }
    .ba-dl-label, .ba-dl-title, .ba-dl-note, .ba-dl-meta,
    .ba-dl-each-label, .ba-dl-each-sub, .ba-dl-chips b, .ba-dl-chips span {
        color: #000 !important;
    }
}

/* 홈 목록 오른쪽 칸 — 날짜 네 개가 전부 같은 날이라(2026.08.08) 아무 정보도 주지 않았다.
   카테고리를 함께 보여 목록을 훑을 때 종류가 구분되게 한다. */
.ba-index-cat { display:block; font-family: var(--font-sans); font-size:1.1rem; letter-spacing:.12em;
    text-transform:uppercase; color: var(--benurd-red); margin-bottom:.5rem; }
.ba-index-day { display:block; }
/* 모바일에서는 이 칸이 통째로 숨겨져 있어(위 .ba-index-date display:none)
   목록에 메타가 하나도 없었다. 날짜는 계속 감추고 카테고리 한 줄만 되살린다. */
@media (max-width: 900px) {
    .ba-index-list:not(.is-archive) .ba-index-date {
        display: block; grid-column: 2; text-align: left; margin-top: .9rem;
    }
    .ba-index-list:not(.is-archive) .ba-index-day { display: none; }
    .ba-index-cat { margin-bottom: 0; }
}

/* About FAQ — 스키마(FAQPage) 4문항이 화면에 하나도 없었다(실측).
   구글은 FAQ 구조화 데이터가 사용자에게 보이는 내용이어야 한다고 요구한다.
   기록 목록(.ba-abr-*)과 같은 언어로 짠다. 라벨은 관공서 말투를 피한다(지침 8). */
.ba-about-faq { margin: 9rem 0 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--benurd-ink); }
.ba-about-faq .ba-afq-item + .ba-afq-item { margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid var(--benurd-line); }
.ba-afq-q {
    margin: 0 0 .8rem; font-family: var(--font-serif); font-size: 2.1rem; line-height: 1.35;
    letter-spacing: -.03em; font-weight: 600; word-break: keep-all;
}
.ba-afq-a {
    margin: 0; font-size: 1.55rem; line-height: 1.75; color: var(--benurd-faint); word-break: keep-all;
}

/* 카테고리 h1 — 영문 대문자만 있어서 한국어 검색에 신호가 없었다.
   큰 영문은 브랜드 서명이라 그대로 두고 그 아래 한국어 이름을 붙인다. */
.ba-arch-ko {
    display: block; margin-top: .8rem;
    font-family: var(--font-sans); font-size: 1.6rem; font-weight: 600;
    letter-spacing: -.01em; text-transform: none; color: var(--benurd-faint);
    word-break: keep-all;
}

/* 스트립 둘째 줄 — 새 글 타일(1칸) + 컬러 시트(3칸)로 4칸을 꽉 채운다.
   모바일(2칸)에서는 둘 다 한 줄씩 쓰게 한다. */
.ba-strip-grid figure.is-three { grid-column: span 3; }
.ba-strip-grid figure.is-three img { height: 20rem; }
@media (max-width: 900px) {
    .ba-strip-grid figure.is-three { grid-column: span 2; }
    .ba-strip-grid figure.is-three img { height: auto; }
    /* 예전엔 다섯 번째 타일을 한 줄로 폈다(타일이 6개일 때 2칸 격자에서 혼자 남아서).
       글7이 들어와 7개가 되자 그 규칙이 오히려 5·6·7을 한 줄씩 떨어뜨렸다(실측).
       홀수 개일 때 옆이 비는 것은 '마지막' 타일이므로, 순번을 박지 않고
       마지막 타일만 편다. 타일이 더 늘어도 다시 손댈 일이 없다. */
    .ba-strip-grid figure:last-child:nth-child(odd) { grid-column: span 2; }
    .ba-strip-grid figure:last-child:nth-child(odd) img { height: 24rem; }
    /* 위 규칙은 '홀수 번째 = 혼자 남는다'로 세었는데, 중간에 2칸짜리(is-two)가 있으면
       셈이 한 칸 밀려 **짝이 맞는데도** 마지막 타일이 펴진다. 그러면 350px 자리에
       360px 짜리 그림이 들어가 뭉개진다(2026-08-17 글11 타일에서 실측 1.03배).
       앞에 2칸짜리가 있으면 되돌린다. */
    .ba-strip-grid figure.is-two ~ figure:last-child:nth-child(odd) { grid-column: auto; }
    .ba-strip-grid figure.is-two ~ figure:last-child:nth-child(odd) img { height: 15rem; }
}

/* 페이지 넘김 — 한 카테고리가 13편(posts_per_page 12)을 넘기면 나타난다.
   지금은 나오지 않지만, 없으면 옛 글이 링크 없이 사라진다. 탭 영역 44px을 지킨다. */
.ba-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
    margin-top: 4.8rem; padding-top: 2.4rem; border-top: 1px solid var(--benurd-line);
}
.ba-pager-link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--font-sans); font-size: 1.45rem; font-weight: 600;
    letter-spacing: -.01em; text-decoration: none; color: var(--benurd-ink);
}
.ba-pager-link:hover { text-decoration: underline; text-decoration-color: var(--benurd-red); }
.ba-pager-now { font-family: var(--font-sans); font-size: 1.3rem; letter-spacing: .1em; color: var(--benurd-faint); }

/* ── 탭 영역 최소 크기 (WCAG 2.5.8 Target Size Minimum, AA = 24x24) ──────────
   390px에서 단독 컨트롤을 전수로 재보니 두 개가 미달이었다(실측).
   · 글 제목 위 카테고리 칩 21px  → AA 기준 24px에도 못 미친다
   · 헤더 로고 링크 30px          → AA는 통과하지만 모바일 권장 44px에 못 미친다
   문장 속 인라인 링크는 규격상 예외라 건드리지 않는다.
   보이는 모양은 그대로 두고 여백만 키운 뒤, 음수 마진으로 배치를 되돌린다
   (레이아웃이 밀리면 CLS가 생기므로 반드시 상쇄한다). */
.gh-article-tag {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-top: .8rem; padding-bottom: .8rem;
    margin-top: -.8rem; margin-bottom: -.8rem;
}
.gh-navigation-logo {
    min-height: 44px; padding-top: .7rem; padding-bottom: .7rem;
    margin-top: -.7rem; margin-bottom: -.7rem;
}

/* 홈 — 무료로 받아 갈 수 있는 것. 목록과 스트립 사이에 조용히 둔다. */
.ba-give { padding-top: 5.6rem; }
/* 자간 .3em은 영문 라벨(PAST RECORDS·SKETCH)용이다. 한글에 그대로 주면
   "받 아  가 셔 도"처럼 벌어져 읽기 나쁘다(실측) → 한글 라벨은 자간을 주지 않는다. */
.ba-give-title {
    font-family: var(--font-sans); font-size: 1.35rem; font-weight: 700;
    letter-spacing: -.01em; color: var(--benurd-red); margin: 0 0 1rem;
}
.ba-give-lead { margin: 0 0 2.4rem; font-size: 1.5rem; color: var(--benurd-faint); word-break: keep-all; }
.ba-give-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--benurd-line); }
.ba-give-list li { border-bottom: 1px solid var(--benurd-line); }
/* 2026-08-11: 실물 썸네일을 붙이면서 가로 배치로 바꿨다.
   alt 는 빈 문자열로 둔다 — 바로 옆 .ba-give-name 이 같은 것을 이미 말하고 있어
   읽어주면 같은 말을 두 번 듣게 된다(장식용 이미지). */
.ba-give-list a {
    display: flex; gap: 1.6rem; align-items: flex-start;
    padding: 2.2rem 0; min-height: 44px; text-decoration: none; color: inherit;
}
.ba-give-thumb {
    flex: 0 0 auto; width: 88px; aspect-ratio: 1 / 1; overflow: hidden;
    border: 1px solid var(--benurd-line); background: #fff;
    /* 규칙 없이 — 두 장을 서로 반대로 살짝 기울인다(지침 3). */
    transform: rotate(-1.5deg);
}
.ba-give-list li:nth-child(2n) .ba-give-thumb { transform: rotate(1.2deg); }
.ba-give-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 글자가 길어질 때 썸네일을 밀지 않게 한다(한글은 keep-all 이라 덩어리가 크다). */
.ba-give-text { display: block; min-width: 0; }
@media (min-width: 901px) {
    .ba-give-list a { gap: 2.2rem; }
    .ba-give-thumb { width: 120px; }
}
.ba-give-name {
    display: block; font-family: var(--font-serif); font-size: 2rem; line-height: 1.35;
    letter-spacing: -.03em; word-break: keep-all;
}
/* ↓ 였다. 그런데 이 링크는 파일이 아니라 글로 간다 — 파일은 그 글 안에 있다.
   정작 진짜 받기 버튼(.ba-dl-btn)에는 화살표가 없어서 방향이 반대로 붙어 있었다.
   사이트의 다른 이동 표시(READ → · ABOUT → · 다음 기록 → · 다른 기록 보기 →)와 맞춘다. */
.ba-give-name::after { content: "\00a0\2192"; color: var(--benurd-red); }
.ba-give-sub {
    display: block; margin-top: .6rem; font-size: 1.45rem; line-height: 1.55;
    color: var(--benurd-faint); word-break: keep-all;
}
.ba-give-list a:hover .ba-give-name { text-decoration: underline; text-decoration-color: var(--benurd-red); }
@media (max-width: 900px) { .ba-give { padding-top: 4rem; } .ba-give-name { font-size: 1.8rem; } }

/* 본문 스케치 확대 — 누를 수 있다는 걸 알려주는 최소한의 표시.
   모바일은 hover가 없으므로 캡션 옆에 조용한 안내 한 줄만 둔다(아이콘 배지는 그림을 가린다). */
.gh-content figure img.gh-content figure { position: relative; }
.gh-content figure figcaption::after {
    content: " · 눌러서 크게";
    color: var(--benurd-faint, #8a8579);
    opacity: .65;
    font-size: .92em;
}
@media (hover: hover) {
    /* 커서가 있는 환경에선 캡션 안내를 빼고 커서 모양으로만 알린다(문구 중복 방지). */
    .gh-content figure figcaption::after { content: ""; }
}
/* PhotoSwipe 배경 — 기본 검정 위에 종이색 캡션이 뜨면 튀어서, 잉크 블랙으로 맞춘다. */
.pswp__bg { background: #0e0e0e; }
.pswp__caption__center { text-align: center; font-size: 1.3rem; line-height: 1.6; }
/* 확대 화면 캡션 — PhotoSwipe 기본 캡션이 한 장 밀려 나와서 직접 그린다(default.hbs 참고). */
.ba-pswp-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1550;
    padding: 1.4rem max(4vmin, 16px) calc(1.4rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(14,14,14,.92), rgba(14,14,14,0));
    color: #e9e6df; font-size: 1.35rem; line-height: 1.6; text-align: center;
    word-break: keep-all; pointer-events: none;
}
.ba-pswp-cap[hidden] { display: none; }

/* 폰에서 글머리가 한 화면을 다 먹는다 — 본문 첫 글자까지 812px(=1.0화면)를 내려야 했다.
   메타 줄이 ①글쓴이 ②날짜(2줄로 넘침) ③공유 버튼 = 세 덩어리로 쌓여 116px를 썼다.
   공유 버튼을 오른쪽에 고정해 첫 줄로 끌어올린다. 정보는 하나도 빼지 않는다.
   버튼은 flex:none이라 찌그러지지 않고, 44px 탭 영역도 그대로다. */
@media (max-width: 600px) {
    .gh-meta-share { flex-wrap: nowrap; align-items: flex-start; gap: 1.2rem; }
    .gh-article-meta { flex: 1 1 auto; min-width: 0; }
    .ba-share { flex: none; margin-left: auto; }
}
/* 날짜·분량이 낱글자로 쪼개졌다("… — 7 / 분 분량"). 항목 단위로만 줄바꿈되게 한다. */
.gh-article-meta-content { display: flex; flex-wrap: wrap; gap: 0 .5rem; }
.gh-article-meta-date,
.gh-article-meta-length { white-space: nowrap; }
@media (max-width: 600px) {
    .ba-share { min-height: 44px; }
}

/* 다운로드 버튼에 뭘 받는지 적어둔다. 배경화면 원본이 3.7MB인데 눌러보기 전에는
   알 수가 없었다(모바일 데이터로 말없이 당겨진다). 형식·크기·용량을 미리 보여준다.
   해상도를 적는 이유: 폰 배경으로 쓰는 파일이라 1024x1536이 자기 폰에 맞는지
   본인이 판단할 수 있어야 한다. */
.ba-dl-btn { flex-direction: column; align-items: flex-start; gap: .35rem; line-height: 1.3; }
.ba-dl-btn .ba-dl-meta {
    font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600;
    letter-spacing: .04em; opacity: .72; text-transform: none;
}
.ba-dl-foot {
    margin-top: 1.4rem; font-family: var(--font-sans); font-size: 1.15rem;
    letter-spacing: .03em; color: var(--benurd-faint); opacity: .9;
}
@media (max-width: 600px) { .ba-dl-btn { align-items: center; } }
/* 칩이 하나뿐인 글에서는 4칸(모바일 2칸) 격자가 남아 빈 칸이 생기고 글자가 쪼개졌다.
   혼자일 때는 한 칸으로 편다. :has를 모르는 브라우저는 지금 모양 그대로 나온다. */
.ba-dl-chips:has(> a:only-child) { grid-template-columns: 1fr; }

/* 글7이 늘면서 둘째 줄이 5칸이 됐다. 컬러 시트를 3칸에서 2칸으로 줄여 4칸을 맞춘다.
   (is-three는 다른 곳에서 쓸 수 있으므로 지우지 않고 is-two를 따로 둔다.) */
.ba-strip-grid figure.is-two { grid-column: span 2; }
.ba-strip-grid figure.is-two img { height: 20rem; }
@media (max-width: 700px) {
    .ba-strip-grid figure.is-two { grid-column: span 2; }
    .ba-strip-grid figure.is-two img { height: auto; }
}

/* 팔레트 시트(1024:223)는 아주 납작하다. 뒤에 오는 span 규칙이 높이를 강제하면
   object-fit:contain 때문에 위아래가 흰 여백으로 크게 남는다.
   실측(2026-08-09, 사용자 제보): 모바일에서 350x240 상자에 350x76 이미지가 들어가
   164px가 빈 흰 칸이었다. 원인은 내가 넣은 figure:last-child:nth-child(odd) 높이 규칙이
   .is-sheet 의 height:auto 를 덮은 것. 앞으로 어떤 span 규칙이 붙어도 안 깨지게 못박는다. */
.ba-strip-grid figure.is-sheet img { height: auto !important; }
/* 스티커 붙인 폰 컷은 원래 세로 600x875였다. 가로 타일에 넣으니 70%가 잘려
   BENURD 레터링이 글자 중간에서 끊겼다(실측: 768px 343x150 상자).
   object-position으로 위치만 옮겨봤지만 잘리는 양은 그대로여서,
   타일용 이미지 자체를 가로(600x429, 1.40)로 다시 잘랐다.
   캡션이 "스티커로 뽑아 붙여본 것"이므로 실제로 오려 붙인 아래쪽 패널이 들어가게 했다. */

/* RECORD 페이지에서 번호를 다시 보이게 해봤다가 되돌렸다(2026-08-09 실측).
   오름차순으로 뒤집어 번호가 실제 기록 번호와 맞게 되긴 했지만, 번호 칸이 생기면
   모바일에서 제목이 6줄·발췌가 10줄로 쪼개진다(홈 목록에 썸네일을 붙였을 때와 같은 증상).
   목록의 좁은 폭에는 번호·썸네일 중 하나만 들어간다. 썸네일 쪽을 남긴다. */

/* 섹션 바로가기·목차로 건너뛰면 제목이 화면 맨 끝(0px)에 딱 붙어 멈춘다(실측).
   글자가 화면 테두리에 닿아 있으면 어디로 왔는지 알아보기 어렵다.
   앵커로 도착할 때만 위쪽 여백을 준다 — 평소 레이아웃에는 영향이 없다. */
.gh-content h2[id],
.gh-content h3[id] { scroll-margin-top: 2.4rem; }
@media (max-width: 600px) {
    .gh-content h2[id],
    .gh-content h3[id] { scroll-margin-top: 1.6rem; }
}

/* 구독 실패 안내 — Ghost가 넣는 영문 원문 대신 한국어와 실제로 되는 대안을 보인다.
   실측(2026-08-10): 제출하면 send-magic-link가 500이고 폼에 .error가 붙으면서
   "Failed to send magic link email"이 그대로 노출됐다. 회원은 생성되지 않는다. */
.ba-form-fail { display: none; }
.gh-form.error [data-members-error] { display: none; }
.gh-form.error .ba-form-fail {
    /* 폼은 position:relative 이고 입력창·버튼·Ghost 오류가 전부 absolute다.
       내 안내만 static으로 두면 폼 높이를 혼자 차지해 입력창이 그 위에 겹쳐 찍혔다
       (실측 2026-08-10, 글 안 구독 블록). Ghost 오류와 같은 방식으로 아래에 띄운다. */
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: .8rem;
    font-family: var(--font-sans);
    font-size: 1.3rem; line-height: 1.65;
    /* 푸터(어두움)와 글 본문(밝음) 양쪽에 같은 폼이 들어간다.
       고정 색(--benurd-faint)을 쓰면 푸터에서 rgba(17,17,17,.6)로 풀려
       대비 1.11:1로 사실상 안 보였다(실측 2026-08-10).
       주변 글자색을 물려받아 어느 쪽에서도 읽히게 한다. */
    color: currentColor;
    opacity: .8;
    word-break: keep-all;
}
.gh-form.error .ba-form-fail a { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
/* 섹션 목록 — 좁은 화면에서는 접어 둔다.
   펴 두면 목록만 475~698px(거의 한 화면)라 본문 시작이 그만큼 밀렸다(실측 2026-08-10).
   접으면 70px이 되고 첫 소제목이 430px 앞당겨진다.
   데스크톱은 폭이 넉넉해 JS가 열어 둔다. details라 크롤러·인쇄에는 그대로 다 들어간다. */
.ba-jump-det > summary {
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer; list-style: none;
    min-height: 44px; padding: .6rem 1.4rem;
    border: 1px solid var(--benurd-line, #dedbd5);
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600;
    letter-spacing: .04em;
}
.ba-jump-det > summary::-webkit-details-marker { display: none; }
.ba-jump-det > summary::after { content: "▾"; opacity: .55; font-size: 1.1em; }
.ba-jump-det[open] > summary::after { content: "▴"; }
.ba-jump-det > summary:hover { border-color: var(--benurd-ink, #000); }


/* 본문 중간 「다음 기록」 (post.hbs 끝 스크립트가 62% 지점 소제목 앞에 끼운다) ----
   글이 모바일에서 1만~1만6천px 인데 다음 글 입구가 맨 아래에만 있었다.
   본문을 끊는 자리라 **카드로 만들지 않는다** — 위아래 실선 사이에 두 줄뿐이다.
   소제목 바로 앞에 붙으므로 아래 여백은 소제목의 margin 이 맡는다. */
.ba-mid {
    display: block; margin: 4.4rem 0 0; padding: 2rem 0;
    border-top: 1px solid var(--benurd-line);
    border-bottom: 1px solid var(--benurd-line);
}
.ba-mid-lab {
    display: block; margin-bottom: .8rem;
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: 700;
    letter-spacing: .16em; color: var(--benurd-red);
}
.ba-mid-lab::after { content: "\00a0\2192"; }
.ba-mid-link {
    display: inline-block; min-height: 44px;
    font-family: var(--font-serif); font-size: 1.8rem; line-height: 1.4;
    letter-spacing: -.02em; word-break: keep-all;
    text-decoration: none; color: inherit;
}
.ba-mid-link:hover {
    text-decoration: underline; text-decoration-color: var(--benurd-red);
    text-underline-offset: .5rem;
}

/* 바로 앞·뒤 기록 (post.hbs .ba-seq) -------------------------------------
   아래 "이어서 볼 기록"은 여섯 편 전체 목록이라 순서 감각을 못 준다.
   여기는 한 칸 앞뒤만. 화살표는 라벨 쪽에 붙여 제목이 잘려도 방향이 남게 한다.
   한쪽만 있을 때(첫 글·마지막 글) 다음 기록이 오른쪽에 붙도록 margin-left:auto. */
.ba-seq {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin: 3.2rem 0 0; padding-top: 2.8rem;
    border-top: 1px solid var(--benurd-line);
}
.ba-seq-link {
    display: flex; flex-direction: column; gap: .6rem;
    flex: 1 1 0; min-width: 0; min-height: 44px;
    text-decoration: none; color: inherit;
}
.ba-seq-link.is-next { text-align: right; margin-left: auto; }
.ba-seq-lab {
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: 700;
    letter-spacing: .16em; color: var(--benurd-red);
}
.ba-seq-link.is-prev .ba-seq-lab::before { content: "\2190\00a0"; }
.ba-seq-link.is-next .ba-seq-lab::after  { content: "\00a0\2192"; }
.ba-seq-name {
    font-family: var(--font-serif); font-size: 1.7rem; line-height: 1.4;
    letter-spacing: -.02em; word-break: keep-all;
}
.ba-seq-link:hover .ba-seq-name {
    text-decoration: underline; text-decoration-color: var(--benurd-red);
    text-underline-offset: .5rem;
}
@media (max-width: 600px) {
    /* 390px에서 두 칸을 나란히 두면 제목이 각각 5~6줄로 쪼개진다(실측).
       위아래로 쌓고 둘 다 왼쪽 정렬로 되돌린다.
       flex: 1 1 0 을 반드시 풀 것 — 세로 배치에서는 그 basis가 '높이'에 걸려
       링크 상자가 min-height 44px로 눌리고 두 줄짜리 제목이 밖으로 넘친다.
       그러면 다음 링크의 라벨이 앞 제목에 달라붙는다(2026-08-10 화면에서 확인). */
    .ba-seq { flex-direction: column; gap: 2.4rem; }
    .ba-seq-link { flex: 0 0 auto; }
    .ba-seq-link.is-next { text-align: left; margin-left: 0; }
    .ba-seq-name { font-size: 1.75rem; }
}


/* 본문까지 찾는 검색 (partials/site-search.hbs) ---------------------------
   Ghost 기본 검색은 제목·발췌만 본다 → "비니"(본문 6편)로 아무것도 안 나왔다.
   화면은 종이 톤 그대로, 카드·그림자 없이 글자와 선으로만 짠다. */
.ba-search {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(17, 17, 17, .38);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 1.6rem 2rem;
    overscroll-behavior: contain;
}
.ba-search[hidden] { display: none; }
.ba-search-panel {
    width: 100%; max-width: 64rem; max-height: 84vh; overflow: auto;
    background: var(--background-color, #f4f2ed);
    border: 1px solid var(--benurd-ink);
    padding: 2.4rem 2.4rem 2.8rem;
}
.ba-search-bar { display: flex; gap: 1.2rem; align-items: center; }
.ba-search-input {
    flex: 1 1 auto; min-width: 0; min-height: 44px;
    background: transparent; border: 0; border-bottom: 1px solid var(--benurd-line);
    border-radius: 0; padding: .4rem 0;
    font-family: var(--font-serif); font-size: 2.2rem; color: var(--benurd-ink);
}
.ba-search-input:focus { outline: none; border-bottom-color: var(--benurd-red); }
.ba-search-input::-webkit-search-cancel-button { display: none; }
.ba-search-close {
    flex: none; min-height: 44px; padding: 0 1.2rem;
    background: transparent; border: 1px solid var(--benurd-line); border-radius: 0;
    font-family: var(--font-sans); font-size: 1.3rem; letter-spacing: .1em;
    color: var(--benurd-ink); cursor: pointer;
}
.ba-search-close:hover { border-color: var(--benurd-red); color: var(--benurd-red); }
.ba-search-note {
    margin: 1rem 0 0; font-family: var(--font-sans); font-size: 1.3rem;
    color: currentColor; opacity: .6;
}
.ba-search-msg { margin: 2.4rem 0 0; font-size: 1.5rem; color: currentColor; opacity: .7; }
.ba-search-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.ba-search-list li { border-top: 1px solid var(--benurd-line); }
.ba-search-list a {
    display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1.4rem;
    padding: 1.8rem 0; min-height: 44px; text-decoration: none; color: inherit;
}
.ba-search-no {
    font-family: var(--font-sans); font-size: 1.3rem; font-weight: 800;
    letter-spacing: .12em; color: var(--benurd-red);
}
.ba-search-title {
    display: block; font-family: var(--font-serif); font-size: 1.9rem;
    line-height: 1.32; letter-spacing: -.025em; word-break: keep-all;
}
.ba-search-snip {
    display: block; margin-top: .6rem; font-size: 1.45rem; line-height: 1.66;
    color: currentColor; opacity: .72; word-break: keep-all;
}
.ba-search-snip mark { background: rgba(195, 0, 19, .16); color: inherit; padding: 0 .1em; }
.ba-search-cnt {
    display: inline-block; margin-top: .6rem;
    font-family: var(--font-sans); font-size: 1.2rem; letter-spacing: .1em;
    color: currentColor; opacity: .55;
}
.ba-search-list a:hover .ba-search-title {
    text-decoration: underline; text-decoration-color: var(--benurd-red); text-underline-offset: .5rem;
}
@media (max-width: 600px) {
    .ba-search { padding: 4vh 1.2rem 1.2rem; }
    .ba-search-panel { padding: 1.8rem 1.6rem 2.2rem; max-height: 90vh; }
    .ba-search-input { font-size: 2rem; }
    .ba-search-title { font-size: 1.8rem; }
}


/* "이어서 볼 기록" 목록 — 모바일에서 발췌를 접는다 (2026-08-10 시험)
   글 하나가 모바일 18~19화면인데 본문 뒤 마무리 블록이 2,947px(18~19%)이고
   이 목록 혼자 1,542px다(마무리의 52%, 1.8화면). 여섯 편을 번호·제목·발췌로 전부 편다.
   몇 사이클 전 '앞의 기록 / 다음 기록'을 붙이면서 바로 앞뒤는 이미 제목까지 보인다.
   여기는 "그 밖에 뭐가 있나"를 훑는 자리라 제목만으로 충분하다 —
   제목이 서술형이라 소제목 시험에서도 내용이 전달됐다.
   링크는 DOM에 그대로 있으므로 인바운드·검색에는 영향이 없다.
   데스크톱은 자리가 넉넉하니 그대로 둔다. */
@media (max-width: 600px) {
    .ba-next .ba-index-list.is-archive .ba-index-sub { display: none; }
    .ba-next .ba-index-list.is-archive a { padding: 1.6rem 0; }
}


/* 손가락으로 누르는 기기에서는 화면이 넓어도 44px을 지킨다 --------------------
   지금까지 탭 영역은 화면 '너비'로만 맞춰 왔다. 그런데 폰을 가로로 돌리면 844px이
   되어 데스크톱 헤더가 나오고, 그 버튼들은 마우스를 전제로 32px이다.
   실측(2026-08-10, 844x390 터치): More 32px · 검색 32px · nav 링크 34px · ABOUT → 25px.
   브라우저가 pointer:coarse 로 손가락임을 알려주므로, 너비가 아니라 그걸 기준으로 삼는다.
   마우스 쓰는 데스크톱에는 적용되지 않아 기존 디자인이 그대로 남는다. */
@media (pointer: coarse) {
    .gh-icon-button,
    .gh-navigation-menu a,
    .gh-navigation-actions a,
    .ba-band-link,
    .ba-footer-nav a,
    /* 공유 버튼은 390px 세로에서만 44px을 맞춰뒀었다. 가로로 돌리면 38px로 돌아간다. */
    .ba-share,
    .gh-button-share,
    /* 카테고리 칩. 태블릿(1024 터치)에서 40px이었다 — 서로 붙어 있어 오히려 더 눌리기 어렵다. */
    .ba-chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* 아이콘 버튼은 가로도 좁으면 누르기 어렵다 */
    .gh-icon-button { min-width: 44px; justify-content: center; }
    /* 2026-08-18 사장님 발견: 터치 지원 PC(넓은 화면)에서 위 display:inline-flex 가
       숨겨 둔 햄버거(.gh-burger, 767px 이하 전용)까지 되살려 로고 밑에 나타났다.
       넓은 화면에서는 도로 숨긴다 — 좁은 화면(터치폰)에서는 원래대로 보인다. */
    @media (min-width: 768px) { .gh-navigation .gh-burger { display: none; } }
}

/* 읽은 만큼 보여주는 선 — default.hbs 의 스크립트가 만든다.
   헤더가 고정이 아니라 화면 맨 위는 늘 비어 있다. 그 자리에 2px 만 쓴다.
   transition 은 짧게(.08s) — 길면 스크롤을 멈춰도 선이 계속 따라와 어수선하다. */
.ba-prog {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--benurd-red); z-index: 99;
    transition: width .08s linear; pointer-events: none;
}
@media print { .ba-prog { display: none; } }

/* 태블릿(701~900px)에서 스케치 스트립을 3열로 (2026-08-11)
   ------------------------------------------------------------------
   왜 바꿨나: 2열이면 한 칸이 343css px 이고 DPR2 화면에서는 **687 실픽셀**을 요구한다.
   그런데 스케치 원본 크롭은 600px 한 벌뿐이라 **7장이 전부 흐렸다**(currentSrc 실측).
   원본을 늘리는 건 뭉개므로 못 한다(1,400px 재추출은 소유자 몫).
   대신 **칸을 줄여서** 요구 픽셀을 낮췄다 — 3열이면 222css → 444 실픽셀이라 600px 으로 충분하다.
   결과(768px DPR2 실측): 흐린 것 7장 → **0장**, 그리드 높이 816px → 555px.

   시안 세 개를 실제로 띄워 비교하고 이걸 남겼다:
     B  3열 그대로            → 선명해졌지만 팔레트 컷이 222px 로 좁아 글씨가 안 읽혔다
     C  팔레트 span 2 추가    → **안 먹었다.** `figure:last-child:nth-child(odd)`(0,3,1)가
                               `figure.is-two`(0,1,1)보다 특정성이 높아 grid-column:auto 로 덮였다
     D  그 규칙에서 is-two 제외 → 팔레트 464css, 전부 선명. 이걸 쓴다.
   ------------------------------------------------------------------ */
@media (min-width: 701px) and (max-width: 900px) {
    .ba-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 홀수 번째 마지막 컷을 2칸으로 늘리는 기존 규칙은 팔레트에는 적용하지 않는다 */
    /* 2026-08-24: is-wide 도 같은 이유로 빼야 한다. 글13 타일(13번째 = 마지막이자 홀수)이
       이 규칙에 걸려 `grid-column:auto` 로 덮이면서, 768px 에서 3칸 줄에 한 칸만 차지하고
       옆 두 칸이 비었다(실측). 위 D 와 똑같은 함정 — 특정성(0,3,1) > (0,1,1). */
    .ba-strip-grid figure:last-child:nth-child(odd):not(.is-two):not(.is-wide) { grid-column: auto; }
    .ba-strip-grid figure:last-child:nth-child(odd):not(.is-two):not(.is-wide) img { height: 20rem; }
    .ba-strip-grid figure.is-two { grid-column: span 2; }
    .ba-strip-grid figure.is-two img { height: 20rem; }
    /* 같은 특정성(0,2,1)으로 쓰면 위쪽 `@media (max-width:900px)` 의 span 2 를 못 이긴다
       — 순서상 뒤인데도 실측으로 span 2 가 남았다(브라우저에서 확인). 부모 클래스를 하나
       더 붙여 (0,3,1) 로 올린다. 인라인/특정성 올린 규칙으로는 707px 전폭이 되는 것을 실측함. */
    .ba-strip .ba-strip-grid figure.is-wide { grid-column: span 3; }
    .ba-strip .ba-strip-grid figure.is-wide img { height: 22rem; }
}

/* 좁은 화면에서 '넘침(bleed)' 컷을 진짜로 넘치게 (2026-08-11)
   ------------------------------------------------------------------
   `@media (max-width:900px)` 에서 bleed 를 100% 로 되돌려 두었더니
   **모바일에서 bleed 와 full 이 똑같아져** 폭 다섯 종 중 하나가 죽어 있었다(실측: 둘 다 341px).
   지침 3 이 말하는 "전면·본문폭·좁게"의 '전면'이 사라진 셈이다.
   화면 끝까지 붙이면 손글씨 컷이 시원하게 살아난다(390px 에서 341 → 390px).

   대가도 재봤다 — 넘침 컷의 선명도 중앙값이 106% → 92% 로 내려간다. 눈에 띄지 않는 수준이다.
   다만 700px 에서는 82% → 75% 까지 떨어져서 **600px 이하에만** 적용한다.
   가로 스크롤은 4개 폭(390·430·600·700)에서 모두 없음을 확인했다.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .gh-content figure.ba-cut.ba-w-bleed {
        width: 100vw; max-width: 100vw;
        margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    }
    /* 그림만 넘치고 캡션은 본문 줄에 맞춘다 — 캡션까지 끝에 붙으면 읽는 줄이 어긋난다 */
    .gh-content figure.ba-cut.ba-w-bleed figcaption { padding: 0 2.4rem; }
}

/* 데스크톱에서 '받아 가셔도 됩니다'를 2단으로 (2026-08-11)
   ------------------------------------------------------------------
   두 항목이 1,208px 폭을 한 줄씩 쓰고 있었다. 썸네일 120px + 글자 몇 줄이라
   **오른쪽이 통째로 비어**, 바로 위 PAST RECORDS(제목·카테고리·날짜로 폭을 다 쓰는 목록)와
   아래 스케치 스트립(4열) 사이에서 이 블록만 성겨 보였다(1280px 실측).
   나란히 놓으면 폭이 채워지고 둘이 한 쌍으로 읽힌다 — 블록 높이 461px → 296px.
   모바일·태블릿은 그대로 세로로 둔다(칸이 좁아 나란히 두면 글자가 깨진다).
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
    .ba-give-list {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem;
        border-top: 1px solid var(--benurd-line);
    }
    .ba-give-list li { border-bottom: 1px solid var(--benurd-line); }
}

/* 지금 보고 있는 페이지 표시 (2026-08-11)
   default.hbs 의 스크립트가 aria-current="page" 를 붙인다.
   글자를 키우거나 색을 바꾸지 않는다 — 메뉴는 조용해야 한다.
   푸터·헤더 메뉴는 밑줄 한 줄, 카테고리 칩은 테두리를 진하게. */
.ba-footer-nav a[aria-current="page"],
.gh-navigation-menu a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: .4em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--benurd-red);
}
.ba-chip[aria-current="page"] {
    border-color: var(--benurd-ink);
    color: var(--benurd-ink);
}

/* 인쇄물에 돌아올 주소 한 줄 (2026-08-11)
   화면에서는 완전히 숨긴다 — 읽는 사람에게는 주소창이 이미 있다.
   인쇄에서만 제목 아래에 작게 나온다. 슬러그가 길어 줄바꿈을 허용한다. */
.ba-print-url { display: none; }
@media print {
    .ba-print-url {
        display: block;
        margin: .6rem 0 0;
        font-family: var(--font-sans);
        font-size: 1.05rem;
        letter-spacing: 0;
        color: #555;
        word-break: break-all;
    }
}

/* 넘침 컷이 좁은 데스크톱 폭에서 오른쪽으로 잘리던 것 (2026-08-11)
   ------------------------------------------------------------------
   `.ba-w-bleed` 는 `calc(100% + 12rem)` 인데, `.gh-content figure.ba-cut` 쪽에서
   margin-left 가 0 으로 덮여 있어 **왼쪽은 그대로 두고 오른쪽으로만 120px 뻗는다.**
   본문 칸이 720px 로 고정되는 901px 부터, 창이 960px 이 안 되면 오른쪽이 화면 밖으로 나간다.
   실측(글5 기준): 901px 에서 30px, 932px(아이폰 가로)에서 14px 잘림.
   overflow-x:hidden 이라 스크롤바는 안 생기고 **그냥 잘려 나간다** — 그래서 눈에 안 띄었다.
   1000px 부터는 여유가 생겨 정상이다.
   이 구간에서만 넘침을 접는다(캡션은 원래 안 잘렸다).
   ------------------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 999px) {
    .gh-content figure.ba-cut.ba-w-bleed { width: 100%; margin-left: 0; margin-right: 0; }
}

/* 확대되는 그림은 초점을 받는다 — 어디에 있는지 보이게 (2026-08-11)
   마우스로 눌렀을 때는 테두리가 뜨지 않게 :focus-visible 만 쓴다. */
.gh-content figure.ba-cut img.ba-zoomable:focus { outline: none; }
.gh-content figure.ba-cut img.ba-zoomable:focus-visible {
    outline: 3px solid var(--benurd-red);
    outline-offset: 3px;
}

/* (히어로 설치 안내 상자는 없앴다 — 구분선을 걸쳐 어색했다. 버튼 글자만 잠깐 바뀐다.) */

/* 설치 진단 패널 — ?appcheck=1 일 때만 스크립트가 만든다. 평소에는 DOM 에도 없다. */
.ba-appcheck {
    position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 60;
    max-width: 52rem; margin: 0 auto; padding: 1.6rem 1.8rem;
    background: #111; color: #f4f2ed; border: 2px solid var(--benurd-red);
    font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.6;
    max-height: 70vh; overflow: auto; word-break: break-all;
}
.ba-appcheck h2 { margin: 0 0 1rem; font-size: 1.3rem; letter-spacing: .18em; color: var(--benurd-red); }
.ba-appcheck div { display: flex; gap: 1rem; padding: .35rem 0; border-top: 1px solid rgba(244,242,237,.14); }
.ba-appcheck b { flex: 0 0 16rem; font-weight: 700; }
.ba-appcheck .ba-ac-note { margin: 1rem 0 0; opacity: .75; border: 0; }
@media (max-width: 600px) { .ba-appcheck div { flex-direction: column; gap: .2rem; } .ba-appcheck b { flex: none; } }

/* ── [hidden] 이 안 먹던 문제 (2026-08-11) ─────────────────────────────
   설치 버튼에 display:inline-flex / flex 를 직접 줘놨는데, 브라우저 기본
   `[hidden]{display:none}` 은 특이도가 낮아 그 선언에 진다.
   그래서 스크립트가 b.hidden = true 로 감춰도 **화면에는 그대로 남아 있었다**
   (실측: hidden=true 인데 높이 44px). 내가 "숨김"이라고 재던 값은 속성이었고
   화면이 아니었다 — 여러 차례 오판의 원인이다.
   버튼과 안내 문구에 한해 못을 박는다. */
.ba-footer-app[hidden],
.ba-band-app[hidden],
.ba-footer-app-note[hidden] { display: none !important; }

/* 이름 뜻 한 줄 (2026-08-12) — 주제문 아래에 작게 붙인다.
   h1 안이라 검색·AI 가 제목 문맥으로 같이 읽는다. 띠가 두꺼워지지 않게
   글자만 작고 흐리게 두고, 좁은 화면에서는 줄만 바꾼다. */
.ba-band-mean {
    display: block; margin: .5rem 0 0;
    font-family: var(--font-sans); font-size: 1.25rem; font-weight: 500;
    letter-spacing: -.01em; line-height: 1.6; color: var(--benurd-faint);
    word-break: keep-all;
}
@media (max-width: 480px) { .ba-band-mean { font-size: 1.2rem; margin-top: .6rem; } }

/* 무료 배포물 아래 사용 조건 한 줄 (2026-08-12) */
.ba-give-terms {
    margin: 2.4rem 0 0; font-size: 1.35rem; line-height: 1.7;
    color: var(--benurd-faint); word-break: keep-all;
}
.ba-give-terms a {
    color: var(--benurd-ink); text-decoration: none; font-weight: 600;
    border-bottom: 1px solid var(--benurd-red); padding-bottom: .1rem;
}
.ba-give-terms a:hover { border-bottom-width: 2px; }

/* 페이지(About·사용조건)의 분량 표시 (2026-08-12).
   글은 메타 줄 안에 들어가지만 페이지에는 메타 줄 자체가 없다 —
   제목·발췌 아래 한 줄로만 둔다. 값이 정해졌을 때만 스크립트가 보여준다. */
.ba-page-rt {
    margin: 1.2rem 0 0; font-family: var(--font-sans); font-size: 1.25rem;
    letter-spacing: .04em; color: var(--benurd-faint);
}
.ba-page-rt[hidden] { display: none !important; }


/* ── 원본 ↔ 움직임 전환 (2026-08-13) ─────────────────────────────────
   그림이 움직이면 "원본은 어땠더라"가 궁금해진다. 나란히 놓으면 자리를 두 배로
   먹고 어느 쪽이 원본인지 헷갈린다. 겹쳐 두고 버튼 하나로 바꾼다.
   (재생·정지는 이미 video[data-ba-move] 가 화면 진입 기준으로 처리한다.)

   2026-08-13 수정: 처음엔 원본만 덮어씌웠더니 **영상이 뒤로 비쳤다** — 원본과 영상의
   비율이 달라 위아래에 영상이 그대로 남았다. 그래서 전환할 때 영상 자체를 숨기고,
   빈자리는 흰색이 아니라 **크래프트지 색**으로 채운다(흰 여백은 종이 위에서 튄다). */
.gh-content figure.ba-cut .ba-move-stage {
    position: relative;
    background: #d3b98f;                 /* 종이색 — 비율이 남는 자리를 메운다 */
}
.gh-content figure.ba-cut .ba-move-stage video { transition: opacity .16s; }
.gh-content figure.ba-cut.is-orig .ba-move-stage video { opacity: 0; }
.gh-content figure.ba-cut .ba-move-stage img.ba-move-orig {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; opacity: 0; transition: opacity .16s; pointer-events: none;
}
.gh-content figure.ba-cut.is-orig .ba-move-stage img.ba-move-orig { opacity: 1; }

/* 버튼도 손으로 그린 것처럼 — 반듯한 네모는 이 종이 위에서 남의 것처럼 보인다.
   모서리 반지름을 네 귀퉁이 다르게 주고 살짝 기울여 마커로 친 상자에 가깝게 만든다. */
/* 2026-08-14: 이 버튼이 33px 높이라 손가락 기준(44px)에 못 미쳤다(site_check 실측, 세 폭 모두).
   글자 크기는 그대로 두고 위아래 여백만 늘려 눌리는 넓이를 키운다. */
.ba-move-toggle {
    display: inline-flex; align-items: center; min-height: 44px;
    margin-left: .9rem; padding: .28em .95em;
    font-family: var(--font-sans); font-size: 1.25rem; letter-spacing: .04em;
    color: var(--benurd-ink); background: transparent;
    border: 2px solid var(--benurd-ink);
    border-radius: 14px 5px 16px 6px / 6px 15px 5px 14px;
    transform: rotate(-.8deg);
    cursor: pointer; transition: transform .12s, box-shadow .12s, color .12s;
}
.ba-move-toggle:hover {
    color: var(--benurd-red); border-color: var(--benurd-red);
    transform: rotate(-.8deg) translateY(-1px);
    box-shadow: 2px 3px 0 rgba(17, 17, 17, .18);   /* 종이에서 살짝 뜬 것처럼 */
}
.ba-move-toggle:active { transform: rotate(-.8deg) translateY(1px); box-shadow: none; }
.ba-move-toggle[aria-pressed="true"] {
    color: var(--benurd-red); border-color: var(--benurd-red);
    transform: rotate(.7deg);                       /* 눌린 상태는 기운 방향이 반대 */
}


/* ── 움직이는 카드는 **판 전체**를 오린다 (2026-08-13) ────────────────
   찢은 종이 모양이 `img` 에만 걸려 있어서, 원본으로 바꾸면 이미지만 지그재그로
   잘리고 **그 바깥으로 영상 판이 그대로 보였다**(실측: 모바일에서 액자가 두 겹).
   모양·기울기를 판(.ba-move-stage)에 옮기고, 안에 든 영상·이미지는 오리지 않는다. */
.gh-content figure.ba-cut.ba-move .ba-move-stage {
    clip-path: polygon(0 0, 100% 2%, 100% 93%, 88% 97%, 72% 92%, 55% 98%, 36% 93%, 18% 99%, 0 94%);
    transform: rotate(-.7deg);
    background: none;
}
.gh-content figure.ba-cut.ba-move .ba-move-stage img,
.gh-content figure.ba-cut.ba-move .ba-move-stage video {
    clip-path: none;
    transform: none;
}
@media (max-width: 900px) {
    .gh-content figure.ba-cut.ba-move .ba-move-stage { transform: rotate(-.5deg); }
    .gh-content figure.ba-cut.ba-move .ba-move-stage img,
    .gh-content figure.ba-cut.ba-move .ba-move-stage video { transform: none; }
}


/* ══ 기념일 두들 (2026-08-13) ═══════════════════════════════════════════
   구글 두들처럼, 정해둔 날에만 로고 주변이 조금 달라진다.
   **새 그림은 그리지 않는다** — 브랜드 기준이 "지어내지 않는다"라서,
   기념 연출은 색·기울기·움직임과 이미 있는 그림만으로 만든다.
   미리보기: 주소 뒤에 ?doodle=newyear 를 붙이면 그날인 것처럼 보인다. */
.gh-navigation-logo { position: relative; }

/* 공통 — 마커로 그은 밑줄.
   2026-08-13 수정: 처음엔 <a> 에 붙였는데 그 링크가 **272px 로 늘어나 있어**(로고 그림은 98px)
   밑줄이 헤더를 가로질렀다(모바일 실측). 그래서 그림을 감싼 <picture> 에 붙여 폭을 맞춘다. */
html[data-doodle] .gh-navigation-logo picture { position: relative; display: inline-block; }
html[data-doodle] .gh-navigation-logo picture::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px;
    background: var(--benurd-red);
    border-radius: 8px 3px 9px 2px / 3px 8px 2px 9px;
    transform: rotate(-.8deg);
    animation: ba-doodle-draw .7s ease-out both;
}
@keyframes ba-doodle-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 로고가 한 번 끄덕인다. 계속 흔들리면 시끄러워서 처음 한 번만. */
html[data-doodle] .gh-navigation-logo picture,
html[data-doodle] .gh-navigation-logo img {
    animation: ba-doodle-nod 1.1s ease-in-out .25s 1 both;
    transform-origin: 50% 80%;
}
@keyframes ba-doodle-nod {
    0%, 100% { transform: rotate(0deg); }
    22% { transform: rotate(-3.2deg); }
    54% { transform: rotate(2.4deg); }
    78% { transform: rotate(-1deg); }
}

/* 무슨 날인지 — **로고 그림 바로 오른쪽**에 작게. 그 자리가 어차피 비어 있다.
   2026-08-13: 처음엔 로고 링크(<a>) 기준이라 272px 밖, 검색·메뉴 아이콘 쪽으로 밀려 안 보였다.
   그림(<picture>, 98px) 기준으로 바꿔 로고 옆에 딱 붙인다. */
html[data-doodle] .gh-navigation-logo picture::before {
    content: attr(data-doodle-label);
    position: absolute; left: calc(100% + 9px); top: 50%;
    transform: translateY(-50%) rotate(-1.2deg);
    font-family: var(--font-sans); font-size: 1.05rem; letter-spacing: .06em; white-space: nowrap;
    color: var(--benurd-faint);
    border: 1px solid var(--benurd-line);
    border-radius: 10px 4px 12px 5px / 5px 11px 4px 10px;
    padding: .1em .5em;
}
@media (max-width: 400px) {
    html[data-doodle] .gh-navigation-logo picture::before { font-size: .92rem; left: calc(100% + 6px); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-doodle] .gh-navigation-logo::after,
    html[data-doodle] .gh-navigation-logo picture,
    html[data-doodle] .gh-navigation-logo img { animation: none; }
}

/* 날마다 밑줄 색 — 그날의 성격만 아주 조금 (요란하지 않게) */

/* 옆에 자리가 없을 때 — 로고 오른쪽 **아래**로. 헤더가 잘라내지 않도록 겹침만 피한다. */
html[data-doodle] .gh-navigation-logo.is-doodle-below picture::before {
    /* 2026-08-13: 로고에 너무 붙어 답답해 보였다 — 위 여백을 조금 더 주고 오른쪽으로 살짝 민다. */
    left: auto; right: -10px; top: calc(100% + 9px);
    transform: rotate(-1.2deg);
    font-size: .95rem;
}

html[data-doodle] .gh-navigation-logo.is-doodle-below { overflow: visible; }
html[data-doodle] .gh-navigation-logo.is-doodle-below picture { overflow: visible; }


/* ── 브랜드 필름 띠 (2026-08-13) ─────────────────────────────────────
   푸터 바로 위. 훑고 지나가는 자리라 소리도 글자도 최소한만 둔다.
   높이를 고정하고 넘치는 부분은 자른다 — 화면이 좁아도 띠의 두께가 그대로다. */
.ba-film-band { margin: 7rem 0 0; }
.ba-film-band-link { display: block; text-decoration: none; color: inherit; }
.ba-film-band video,
.ba-film-band img {
    display: block; width: 100%; height: 15rem;
    object-fit: cover; object-position: center;
    background: #141414;
}
.ba-film-band-cap {
    display: block; margin-top: 1.1rem; text-align: right;
    font-family: var(--font-sans); font-size: 1.2rem; letter-spacing: .12em;
    color: var(--benurd-faint);
}
.ba-film-band-link:hover .ba-film-band-cap { color: var(--benurd-red); }
@media (max-width: 700px) { .ba-film-band video, .ba-film-band img { height: 11rem; } }


/* 브랜드 필름 진행 막대 — 조작 없이 **진행만** 보여준다 (2026-08-14) */
.ba-film-progress {
    display: block; width: 100%; max-width: 340px; margin: .6rem auto 0;
    height: 3px; background: rgba(17, 17, 17, .12); overflow: hidden;
}
.ba-film-progress > i {
    display: block; height: 100%; width: 0;
    background: var(--benurd-red); transition: width .18s linear;
}


/* 마커로 그은 빨간 줄 — 조건이나 부탁을 적을 때. 굵은 글씨보다 덜 딱딱하다 (2026-08-14) */
.ba-mark-red {
    background-image: linear-gradient(var(--benurd-red), var(--benurd-red));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 88%;
    padding-bottom: 1px;
}

/* 표지 자리 필름 (2026-08-14). 그림과 **똑같은 자리**에 겹쳐 두고, 실제로 재생될 때만 보인다.
   그림을 지우지 않는 이유: 못 트는 브라우저에서 검은 네모가 남지 않게. */
figure.gh-article-image { position: relative; }
figure.gh-article-image video.ba-cover-film {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity .5s ease;
}
figure.gh-article-image.has-film video.ba-cover-film { opacity: 1; }

/* 색을 바꿔 본 시험 (2026-08-14 사용자 지시).
   원본 그림은 그대로 두고 **버튼을 눌렀을 때만** 아래에 결과가 펼쳐진다.
   "버튼은 눈에 잘 띄게" — 종이 위에서 유일하게 채워진 상자로 만든다(빨강 테두리 + 잉크 바탕). */
.ba-try { margin: -1.2rem 0 3.2rem; text-align: center; }
.ba-try-btn {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
    padding: .5em 1.5em; cursor: pointer;
    font-family: var(--font-sans); font-size: 1.45rem; letter-spacing: .02em;
    color: var(--benurd-paper, #f4f2ed); background: var(--benurd-ink);
    border: 2px solid var(--benurd-red);
    border-radius: 16px 6px 18px 7px / 7px 17px 6px 16px;
    transform: rotate(-.6deg);
    transition: transform .12s, box-shadow .12s, background .12s;
}
.ba-try-btn::before { content: "◑"; color: var(--benurd-red); font-size: 1.6rem; line-height: 1; }
.ba-try-btn:hover { transform: rotate(-.6deg) translateY(-2px); box-shadow: 3px 4px 0 var(--benurd-red); }
.ba-try-btn[aria-expanded="true"] { background: var(--benurd-red); border-color: var(--benurd-ink); }
.ba-try-panel { display: none; margin-top: 1.6rem; }
.ba-try-panel.is-open { display: block; }
.ba-try-panel img { display: block; width: 100%; max-width: 720px; margin: 0 auto;
                    border: 1px solid var(--benurd-line); }
.ba-try-note { max-width: 720px; margin: .9rem auto 0; font-size: 1.35rem; line-height: 1.7;
               color: var(--benurd-faint); text-align: left; }

/* 받기 블록이 본문 60~70% 지점에 있다(실측). 검색으로 들어온 사람은 거기까지 안 내려간다.
   맨 위에 **한 줄만** 걸어 바로 갈 수 있게 한다 — 배너처럼 크게 만들지 않는다. */
.ba-dl-jump { margin: 0 0 2.6rem; }
.ba-dl-jump a {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
    font-family: var(--font-sans); font-size: 1.45rem; letter-spacing: .01em;
    color: var(--benurd-ink); text-decoration: none;
    border-bottom: 2px solid var(--benurd-red); padding-bottom: .1rem;
}
.ba-dl-jump a::after { content: "↓"; color: var(--benurd-red); font-size: 1.5rem; }
.ba-dl-jump a:hover { color: var(--benurd-red); }
/* 눌러서 내려갔을 때 상자가 화면 맨 끝에 딱 붙으면 답답하다 — 한 뼘 띄운다. */
.ba-dl#give, #give { scroll-margin-top: 2.4rem; }

/* ==BA-DOODLE-GALLERY-BEGIN== */

/* ── 기념일 로고: 소품 + 손그림 밑줄 (2026-08-16, 사용자가 고른 1+4 안) ──
   자리는 반드시 <picture> 기준이다 — 링크(<a>)는 좁은 화면에서 272px 로 늘어나 소품이 날아간다.
   picture::before 는 이름표가 쓰고 있어서, ::after 하나를 **그림 위아래로 넓힌 투명 상자**로 만들고
   배경 두 겹(위=소품, 아래=밑줄)을 얹었다. 가상요소를 늘리지 않아 기존 배치 로직은 그대로다. */
html[data-doodle] .gh-navigation-logo picture { overflow: visible; }
/* 소품이 헤더 위로 잘려 나가지 않게, 두들이 켜진 날만 헤더 위를 한 뼘 넓힌다.
   2026-08-16 실측: 안 넓히면 데스크톱에서 딱 붙고 휴대폰에서는 7px 잘렸다. */
html[data-doodle] .gh-navigation { padding-top: 22px; padding-bottom: 16px; }
/* 아래도 같이 넓힌다 — 안 넓히면 헤더 밑줄(구분선)이 로고 밑줄과 맞붙어 깨져 보인다
   (2026-08-16 사용자 지적, 휴대폰 실측). 여백을 준 만큼 구분선이 아래로 내려간다. */
/* 휴대폰(≤480px)에서는 헤더 높이가 **ID 선택자**로 62px 에 못박혀 있어(#gh-navigation)
   클래스 규칙의 padding 이 먹지 않는다 — 그래서 로고 밑줄이 헤더 구분선을 뚫고 나왔다
   (2026-08-16 사용자 지적 · 실측 -6px). 같은 ID 로 높이를 키운다. */
@media (max-width: 480px) {
    html[data-doodle] .gh-navigation { padding-top: 0; padding-bottom: 0; }
    html[data-doodle] #gh-navigation:not(.is-open),
    html[data-doodle] #gh-navigation:not(.is-open) .gh-navigation-brand { height: 86px; }
}
html[data-doodle] .gh-navigation-logo picture::after {
    left: 0; right: 0; top: -62%; bottom: -30%; height: auto;
    background: none; border-radius: 0; transform: none; pointer-events: none;
    animation: ba-doodle-rise .8s ease-out both;
}
@keyframes ba-doodle-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-doodle] .gh-navigation-logo picture::after { animation: none; }
}
/* 이름표 — 그날 색으로 또렷하게 (사용자: "약간 더 눈에 띄어도 좋아") */
html[data-doodle] .gh-navigation-logo picture::before { font-weight: 800; border-width: 2px; }

/* 목록(기념일 로고 페이지) — 같은 소품·같은 밑줄을 카드에서도 */
.ba-dood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.8rem; margin: 2.8rem 0; list-style: none; padding: 0; }
.ba-dood { display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--benurd-line); background: #fff;
    border-radius: 14px 5px 16px 6px / 6px 15px 5px 14px; padding: 3.6rem 1.6rem 1.5rem; }
.ba-dood, .ba-dood *, .ba-dood:hover * { text-decoration: none !important; }
.ba-dood:hover { box-shadow: 0 3px 16px rgba(0,0,0,.08); }
.ba-dood-logo { position: relative; display: inline-block; }
.ba-dood-logo img { display: block; width: 150px; height: auto; }
.ba-dood-logo::before { content: ""; position: absolute; right: 0; top: -56%; width: 100%; height: 60%; }
.ba-dood-logo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 9px; }
.ba-dood-name { display: inline-block; margin-top: 1.7rem;
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: 800; letter-spacing: .06em;
    color: var(--benurd-faint); border: 2px solid var(--benurd-line);
    border-radius: 10px 4px 12px 5px / 5px 11px 4px 10px; padding: .18em .6em; }
.ba-dood-when { display: block; margin-top: .8rem; font-size: 1.3rem; color: var(--benurd-faint); }
.ba-dood-go { display: block; margin-top: .5rem; font-size: 1.25rem; color: var(--benurd-red); font-weight: 700; }

html[data-doodle="sinjeong"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20130%20120%22%3E%20%3Ccircle%20cx%3D%2265%22%20cy%3D%2272%22%20r%3D%2234%22%20fill%3D%22%23e8563a%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M65%2022%20v-14%20M28%2036%20l-9-10%20M102%2036%20l9-10%20M14%2074%20h-12%20M116%2074%20h12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top 0 right 3% / auto 34% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c30013%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="sinjeong"] .gh-navigation-logo picture::before { color: #c30013; border-color: #c30013; }
html[data-doodle="seollal"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20130%22%3E%20%3Cpath%20d%3D%22M32%2044%20C22%2066%2024%2098%2042%20112%20C56%20122%2070%20122%2084%20112%20C102%2098%20104%2066%2094%2044%20Z%22%20fill%3D%22%23c8102e%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M30%2046%20C48%2036%2078%2036%2096%2046%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M46%2044%20C46%2022%2078%2022%2080%2044%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%20fill%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2263%22%20cy%3D%2278%22%20r%3D%2212%22%20fill%3D%22%23f0c419%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%224%22%2F%3E%3C%2Fsvg%3E") top 0 right 3% / auto 34% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="seollal"] .gh-navigation-logo picture::before { color: #c8102e; border-color: #c8102e; }
html[data-doodle="samil"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20150%22%3E%20%3Cpath%20d%3D%22M22%20148%20C20%20110%2021%2066%2023%2012%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2016%20C52%2010%2084%2015%20110%2011%20C112%2034%20111%2052%20109%2070%20C82%2066%2050%2072%2025%2076%20Z%22%20fill%3D%22%23fdfcfa%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20transform%3D%22translate%2866%2C42%29%20rotate%2890%29%20scale%28.95%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2217%22%20fill%3D%22%230047a0%22%2F%3E%20%3Cpath%20d%3D%22M0%20-17%20A17%2017%200%200%201%200%2017%20A8.5%208.5%200%200%201%200%200%20A8.5%208.5%200%200%200%200%20-17Z%22%20fill%3D%22%23c8102e%22%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M36%2026%20h9%20M36%2032%20h9%20M36%2038%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2026%20h9%20M92%2032%20h9%20M92%2038%20h9%22%2F%3E%20%3Cpath%20d%3D%22M36%2050%20h9%20M36%2056%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2050%20h9%20M92%2056%20h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top 0 right 3% / auto 40% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%230047a0%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="samil"] .gh-navigation-logo picture::before { color: #0047a0; border-color: #0047a0; }
html[data-doodle="buddha"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20140%22%3E%20%3Cpath%20d%3D%22M55%208%20v14%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cellipse%20cx%3D%2255%22%20cy%3D%2262%22%20rx%3D%2236%22%20ry%3D%2240%22%20fill%3D%22%23f0b429%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cpath%20d%3D%22M55%2022%20v80%20M25%2044%20C46%2052%2064%2052%2085%2044%20M25%2080%20C46%2072%2064%2072%2085%2080%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%224%22%20fill%3D%22none%22%20opacity%3D%22.55%22%2F%3E%20%3Cpath%20d%3D%22M40%20104%20v22%20M55%20104%20v28%20M70%20104%20v22%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") top 0 right 3% / auto 40% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23e0a63c%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="buddha"] .gh-navigation-logo picture::before { color: #a9761f; border-color: #a9761f; }
html[data-doodle="children"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20150%22%3E%20%3Cellipse%20cx%3D%2255%22%20cy%3D%2250%22%20rx%3D%2238%22%20ry%3D%2244%22%20fill%3D%22%23e63946%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cpath%20d%3D%22M48%2094%20l7%2010%20l7-10%22%20fill%3D%22%23241f1b%22%2F%3E%20%3Cpath%20d%3D%22M55%20104%20C64%20120%2044%20128%2055%20146%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%224.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cellipse%20cx%3D%2241%22%20cy%3D%2236%22%20rx%3D%228%22%20ry%3D%2211%22%20fill%3D%22%23fff%22%20opacity%3D%22.55%22%20transform%3D%22rotate%28-20%2041%2036%29%22%2F%3E%3C%2Fsvg%3E") top 0 right 3% / auto 40% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23e63946%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%232a9d8f%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="children"] .gh-navigation-logo picture::before { color: #2a9d8f; border-color: #2a9d8f; }
html[data-doodle="hyeonchung"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%234a4a4a%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="hyeonchung"] .gh-navigation-logo picture::before { color: #4a4a4a; border-color: #4a4a4a; }
html[data-doodle="birthday"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20150%22%3E%20%3Cg%20transform%3D%22rotate%2818%2055%2075%29%22%3E%20%3Cpath%20d%3D%22M40%2018%20h30%20v92%20l-15%2026%20l-15%20-26%20Z%22%20fill%3D%22%23f0c419%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M40%20110%20h30%20M40%2018%20h30%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M48%20136%20l7%20-14%20l7%2014%20Z%22%20fill%3D%22%23241f1b%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top 0 right 3% / auto 38% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c30013%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="birthday"] .gh-navigation-logo picture::before { color: #c30013; border-color: #c30013; }
html[data-doodle="gwangbok"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20150%22%3E%20%3Cpath%20d%3D%22M22%20148%20C20%20110%2021%2066%2023%2012%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2016%20C52%2010%2084%2015%20110%2011%20C112%2034%20111%2052%20109%2070%20C82%2066%2050%2072%2025%2076%20Z%22%20fill%3D%22%23fdfcfa%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20transform%3D%22translate%2866%2C42%29%20rotate%2890%29%20scale%28.95%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2217%22%20fill%3D%22%230047a0%22%2F%3E%20%3Cpath%20d%3D%22M0%20-17%20A17%2017%200%200%201%200%2017%20A8.5%208.5%200%200%201%200%200%20A8.5%208.5%200%200%200%200%20-17Z%22%20fill%3D%22%23c8102e%22%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M36%2026%20h9%20M36%2032%20h9%20M36%2038%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2026%20h9%20M92%2032%20h9%20M92%2038%20h9%22%2F%3E%20%3Cpath%20d%3D%22M36%2050%20h9%20M36%2056%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2050%20h9%20M92%2056%20h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top 0 right 3% / auto 40% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%230047a0%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="gwangbok"] .gh-navigation-logo picture::before { color: #c8102e; border-color: #c8102e; }
html[data-doodle="chuseok"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2258%22%20r%3D%2244%22%20fill%3D%22%23f4d98f%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2246%22%20r%3D%229%22%20fill%3D%22%23e2c274%22%2F%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%2270%22%20r%3D%2211%22%20fill%3D%22%23e2c274%22%2F%3E%20%3Ccircle%20cx%3D%2268%22%20cy%3D%2234%22%20r%3D%225%22%20fill%3D%22%23e2c274%22%2F%3E%3C%2Fsvg%3E") top 0 right 3% / auto 34% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23b98a2f%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22392%22%20cy%3D%2213%22%20r%3D%2213%22%20fill%3D%22%23f4d98f%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%2F%3E%3Ccircle%20cx%3D%22388%22%20cy%3D%2210%22%20r%3D%223%22%20fill%3D%22%23e2c274%22%2F%3E%3Ccircle%20cx%3D%22396%22%20cy%3D%2217%22%20r%3D%224%22%20fill%3D%22%23e2c274%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="chuseok"] .gh-navigation-logo picture::before { color: #8a6520; border-color: #8a6520; }
html[data-doodle="gaecheon"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20150%22%3E%20%3Cpath%20d%3D%22M22%20148%20C20%20110%2021%2066%2023%2012%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2016%20C52%2010%2084%2015%20110%2011%20C112%2034%20111%2052%20109%2070%20C82%2066%2050%2072%2025%2076%20Z%22%20fill%3D%22%23fdfcfa%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20transform%3D%22translate%2866%2C42%29%20rotate%2890%29%20scale%28.95%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2217%22%20fill%3D%22%230047a0%22%2F%3E%20%3Cpath%20d%3D%22M0%20-17%20A17%2017%200%200%201%200%2017%20A8.5%208.5%200%200%201%200%200%20A8.5%208.5%200%200%200%200%20-17Z%22%20fill%3D%22%23c8102e%22%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M36%2026%20h9%20M36%2032%20h9%20M36%2038%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2026%20h9%20M92%2032%20h9%20M92%2038%20h9%22%2F%3E%20%3Cpath%20d%3D%22M36%2050%20h9%20M36%2056%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2050%20h9%20M92%2056%20h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top 0 right 3% / auto 40% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%230047a0%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="gaecheon"] .gh-navigation-logo picture::before { color: #0047a0; border-color: #0047a0; }
html[data-doodle="hangeul"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%20%3Cpath%20d%3D%22M20%2026%20H86%20L66%2098%22%20fill%3D%22none%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%2216%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") top 0 right 3% / auto 32% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%232b2622%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="hangeul"] .gh-navigation-logo picture::before { color: #2b2622; border-color: #2b2622; }
html[data-doodle="christmas"] .gh-navigation-logo picture::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20150%22%3E%20%3Cpath%20d%3D%22M55%2018%20a30%2030%200%200%201%2030%2030%20c0%2016-12%2023-15%2032%20H40%20c-3-9-15-16-15-32%20A30%2030%200%200%201%2055%2018z%22%20fill%3D%22%23e8b23a%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cpath%20d%3D%22M40%2096%20h30%20M43%20110%20h24%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M55%208%20v-6%20M22%2030%20l-6-5%20M88%2030%20l6-5%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") top 0 right 3% / auto 38% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%232f6b3c%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom 5px left 0 / 100% 7px no-repeat; }
html[data-doodle="christmas"] .gh-navigation-logo picture::before { color: #2f6b3c; border-color: #2f6b3c; }
.ba-dood[data-day="sinjeong"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c30013%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="sinjeong"] .ba-dood-name { color: #c30013; border-color: #c30013; }
.ba-dood[data-day="sinjeong"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20130%20120%22%3E%20%3Ccircle%20cx%3D%2265%22%20cy%3D%2272%22%20r%3D%2234%22%20fill%3D%22%23e8563a%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M65%2022%20v-14%20M28%2036%20l-9-10%20M102%2036%20l9-10%20M14%2074%20h-12%20M116%2074%20h12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="seollal"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="seollal"] .ba-dood-name { color: #c8102e; border-color: #c8102e; }
.ba-dood[data-day="seollal"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20130%22%3E%20%3Cpath%20d%3D%22M32%2044%20C22%2066%2024%2098%2042%20112%20C56%20122%2070%20122%2084%20112%20C102%2098%20104%2066%2094%2044%20Z%22%20fill%3D%22%23c8102e%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M30%2046%20C48%2036%2078%2036%2096%2046%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M46%2044%20C46%2022%2078%2022%2080%2044%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%20fill%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2263%22%20cy%3D%2278%22%20r%3D%2212%22%20fill%3D%22%23f0c419%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%224%22%2F%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="samil"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%230047a0%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="samil"] .ba-dood-name { color: #0047a0; border-color: #0047a0; }
.ba-dood[data-day="samil"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20150%22%3E%20%3Cpath%20d%3D%22M22%20148%20C20%20110%2021%2066%2023%2012%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2016%20C52%2010%2084%2015%20110%2011%20C112%2034%20111%2052%20109%2070%20C82%2066%2050%2072%2025%2076%20Z%22%20fill%3D%22%23fdfcfa%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20transform%3D%22translate%2866%2C42%29%20rotate%2890%29%20scale%28.95%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2217%22%20fill%3D%22%230047a0%22%2F%3E%20%3Cpath%20d%3D%22M0%20-17%20A17%2017%200%200%201%200%2017%20A8.5%208.5%200%200%201%200%200%20A8.5%208.5%200%200%200%200%20-17Z%22%20fill%3D%22%23c8102e%22%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M36%2026%20h9%20M36%2032%20h9%20M36%2038%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2026%20h9%20M92%2032%20h9%20M92%2038%20h9%22%2F%3E%20%3Cpath%20d%3D%22M36%2050%20h9%20M36%2056%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2050%20h9%20M92%2056%20h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="buddha"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23e0a63c%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="buddha"] .ba-dood-name { color: #a9761f; border-color: #a9761f; }
.ba-dood[data-day="buddha"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20140%22%3E%20%3Cpath%20d%3D%22M55%208%20v14%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cellipse%20cx%3D%2255%22%20cy%3D%2262%22%20rx%3D%2236%22%20ry%3D%2240%22%20fill%3D%22%23f0b429%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cpath%20d%3D%22M55%2022%20v80%20M25%2044%20C46%2052%2064%2052%2085%2044%20M25%2080%20C46%2072%2064%2072%2085%2080%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%224%22%20fill%3D%22none%22%20opacity%3D%22.55%22%2F%3E%20%3Cpath%20d%3D%22M40%20104%20v22%20M55%20104%20v28%20M70%20104%20v22%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="children"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23e63946%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%232a9d8f%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="children"] .ba-dood-name { color: #2a9d8f; border-color: #2a9d8f; }
.ba-dood[data-day="children"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20150%22%3E%20%3Cellipse%20cx%3D%2255%22%20cy%3D%2250%22%20rx%3D%2238%22%20ry%3D%2244%22%20fill%3D%22%23e63946%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cpath%20d%3D%22M48%2094%20l7%2010%20l7-10%22%20fill%3D%22%23241f1b%22%2F%3E%20%3Cpath%20d%3D%22M55%20104%20C64%20120%2044%20128%2055%20146%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%224.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cellipse%20cx%3D%2241%22%20cy%3D%2236%22%20rx%3D%228%22%20ry%3D%2211%22%20fill%3D%22%23fff%22%20opacity%3D%22.55%22%20transform%3D%22rotate%28-20%2041%2036%29%22%2F%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="hyeonchung"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%234a4a4a%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="hyeonchung"] .ba-dood-name { color: #4a4a4a; border-color: #4a4a4a; }
.ba-dood[data-day="birthday"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c30013%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="birthday"] .ba-dood-name { color: #c30013; border-color: #c30013; }
.ba-dood[data-day="birthday"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20150%22%3E%20%3Cg%20transform%3D%22rotate%2818%2055%2075%29%22%3E%20%3Cpath%20d%3D%22M40%2018%20h30%20v92%20l-15%2026%20l-15%20-26%20Z%22%20fill%3D%22%23f0c419%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M40%20110%20h30%20M40%2018%20h30%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M48%20136%20l7%20-14%20l7%2014%20Z%22%20fill%3D%22%23241f1b%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="gwangbok"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%230047a0%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="gwangbok"] .ba-dood-name { color: #c8102e; border-color: #c8102e; }
.ba-dood[data-day="gwangbok"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20150%22%3E%20%3Cpath%20d%3D%22M22%20148%20C20%20110%2021%2066%2023%2012%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2016%20C52%2010%2084%2015%20110%2011%20C112%2034%20111%2052%20109%2070%20C82%2066%2050%2072%2025%2076%20Z%22%20fill%3D%22%23fdfcfa%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20transform%3D%22translate%2866%2C42%29%20rotate%2890%29%20scale%28.95%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2217%22%20fill%3D%22%230047a0%22%2F%3E%20%3Cpath%20d%3D%22M0%20-17%20A17%2017%200%200%201%200%2017%20A8.5%208.5%200%200%201%200%200%20A8.5%208.5%200%200%200%200%20-17Z%22%20fill%3D%22%23c8102e%22%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M36%2026%20h9%20M36%2032%20h9%20M36%2038%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2026%20h9%20M92%2032%20h9%20M92%2038%20h9%22%2F%3E%20%3Cpath%20d%3D%22M36%2050%20h9%20M36%2056%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2050%20h9%20M92%2056%20h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="chuseok"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%23b98a2f%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22392%22%20cy%3D%2213%22%20r%3D%2213%22%20fill%3D%22%23f4d98f%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%2F%3E%3Ccircle%20cx%3D%22388%22%20cy%3D%2210%22%20r%3D%223%22%20fill%3D%22%23e2c274%22%2F%3E%3Ccircle%20cx%3D%22396%22%20cy%3D%2217%22%20r%3D%224%22%20fill%3D%22%23e2c274%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="chuseok"] .ba-dood-name { color: #8a6520; border-color: #8a6520; }
.ba-dood[data-day="chuseok"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2258%22%20r%3D%2244%22%20fill%3D%22%23f4d98f%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2246%22%20r%3D%229%22%20fill%3D%22%23e2c274%22%2F%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%2270%22%20r%3D%2211%22%20fill%3D%22%23e2c274%22%2F%3E%20%3Ccircle%20cx%3D%2268%22%20cy%3D%2234%22%20r%3D%225%22%20fill%3D%22%23e2c274%22%2F%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="gaecheon"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%230047a0%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="gaecheon"] .ba-dood-name { color: #0047a0; border-color: #0047a0; }
.ba-dood[data-day="gaecheon"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20150%22%3E%20%3Cpath%20d%3D%22M22%20148%20C20%20110%2021%2066%2023%2012%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2016%20C52%2010%2084%2015%20110%2011%20C112%2034%20111%2052%20109%2070%20C82%2066%2050%2072%2025%2076%20Z%22%20fill%3D%22%23fdfcfa%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cg%20transform%3D%22translate%2866%2C42%29%20rotate%2890%29%20scale%28.95%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2217%22%20fill%3D%22%230047a0%22%2F%3E%20%3Cpath%20d%3D%22M0%20-17%20A17%2017%200%200%201%200%2017%20A8.5%208.5%200%200%201%200%200%20A8.5%208.5%200%200%200%200%20-17Z%22%20fill%3D%22%23c8102e%22%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D%22%23241f1b%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M36%2026%20h9%20M36%2032%20h9%20M36%2038%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2026%20h9%20M92%2032%20h9%20M92%2038%20h9%22%2F%3E%20%3Cpath%20d%3D%22M36%2050%20h9%20M36%2056%20h9%22%2F%3E%3Cpath%20d%3D%22M92%2050%20h9%20M92%2056%20h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="hangeul"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%232b2622%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="hangeul"] .ba-dood-name { color: #2b2622; border-color: #2b2622; }
.ba-dood[data-day="hangeul"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%20%3Cpath%20d%3D%22M20%2026%20H86%20L66%2098%22%20fill%3D%22none%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%2216%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
.ba-dood[data-day="christmas"] .ba-dood-logo::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2043%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2018%20C64%204%2096%2030%20156%2016%20C216%202%20248%2028%20308%2015%20C352%206%20372%2020%20394%2013%22%20stroke%3D%22%232f6b3c%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2027%20C64%2013%2096%2039%20156%2025%20C216%2011%20248%2037%20308%2024%20C352%2015%20372%2029%20394%2022%22%20stroke%3D%22%23c8102e%22%20stroke-width%3D%229%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") bottom left / 100% 8px no-repeat; }
.ba-dood[data-day="christmas"] .ba-dood-name { color: #2f6b3c; border-color: #2f6b3c; }
.ba-dood[data-day="christmas"] .ba-dood-logo::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%20150%22%3E%20%3Cpath%20d%3D%22M55%2018%20a30%2030%200%200%201%2030%2030%20c0%2016-12%2023-15%2032%20H40%20c-3-9-15-16-15-32%20A30%2030%200%200%201%2055%2018z%22%20fill%3D%22%23e8b23a%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%226%22%2F%3E%20%3Cpath%20d%3D%22M40%2096%20h30%20M43%20110%20h24%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M55%208%20v-6%20M22%2030%20l-6-5%20M88%2030%20l6-5%22%20stroke%3D%22%23241f1b%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") top right 3% / auto 100% no-repeat; }
/* ==BA-DOODLE-GALLERY-END== */

/* ==BA-RIGHTS-BEGIN== */
/* ── 「그림 써도 되나요」 지면 (2026-08-16, 사용자 지적 "글자가 너무 붙어 있다") ──
   본문을 HTML 카드로 넣어서 테마의 본문 여백 규칙이 하나도 안 걸렸다 —
   실측: 이 지면의 <p>·<h2> 는 margin 이 전부 0 이었다. 그래서 질문과 답이 한 덩어리로 보였다.
   About FAQ(.ba-afq-*)와 같은 언어로 짜되, 여기는 '조건'을 읽는 자리라 줄 간격을 더 준다. */
.ba-rights { max-width: 68ch; }
.ba-rights-lead {
    margin: 0 0 3.6rem; padding-bottom: 2.4rem;
    border-bottom: 1px solid var(--benurd-ink);
    font-family: var(--font-serif); font-size: 2rem; line-height: 1.6;
    letter-spacing: -.02em; word-break: keep-all;
}
.ba-rights h2 {
    margin: 0 0 1.2rem; padding: 0;
    font-family: var(--font-serif); font-size: 2.2rem; line-height: 1.4;
    letter-spacing: -.03em; font-weight: 600; word-break: keep-all;
}
/* 질문 앞의 빨간 물음표 — 무엇이 질문인지 훑을 때 바로 걸린다(과하지 않게 작게) */
.ba-rights h2::before {
    content: "Q"; display: inline-block; margin-right: .5em;
    font-family: var(--font-sans); font-size: .62em; font-weight: 800;
    letter-spacing: .08em; color: var(--benurd-red); vertical-align: .18em;
}
.ba-rights p {
    margin: 0; font-size: 1.62rem; line-height: 1.95;
    color: var(--benurd-faint); word-break: keep-all;
}
.ba-rights p + p { margin-top: 1.4rem; }
/* 질문 묶음 사이 — 옅은 선 하나로 끊어 준다. 붙어 보이던 가장 큰 이유다. */
.ba-rights h2 + p { margin-bottom: 0; }
.ba-rights p + h2 {
    margin-top: 3.4rem; padding-top: 3.4rem;
    border-top: 1px solid var(--benurd-line);
}
.ba-rights a { color: inherit; text-decoration-color: var(--benurd-red); text-underline-offset: .35rem; }
@media (max-width: 700px) {
    .ba-rights-lead { font-size: 1.85rem; margin-bottom: 3rem; padding-bottom: 2rem; }
    .ba-rights h2 { font-size: 2rem; }
    .ba-rights p { font-size: 1.6rem; line-height: 1.9; }
    .ba-rights p + h2 { margin-top: 3rem; padding-top: 3rem; }
}
/* ==BA-RIGHTS-END== */

/* ==BA-CITE-BEGIN== */
/* 인용문 아래 출처 링크 — 손가락으로 누를 만한 크기를 준다.
   2026-08-17 실측: 사전 출처 링크가 높이 25px 로 나와 탭 영역(44px) 기준에 걸렸다. */
.gh-content blockquote a[rel~="nofollow"],
.gh-content blockquote a[href^="https://opendict"],
.gh-content blockquote a[href^="https://stdict"] {
    display: inline-block; min-height: 44px; line-height: 44px;
    font-size: 1.4rem; color: var(--benurd-faint);
}
.gh-content blockquote { padding-bottom: .4rem; }
/* ==BA-CITE-END== */

/* ==BA-VOTE-BEGIN== */
/* ── 두 가지 중 고르기(투표) — 2026-08-17 사용자 요청 ──
   "기존 디자인이 좋다 / 심플해진 게 좋다" 처럼 **읽는 사람에게 물어보는** 자리.
   반응 버튼(.ba-react)과 같은 방식: 브라우저에 한 번만 기억하고 집계는 GA4 로만 보낸다.
   서버가 없으니 실시간 득표수는 못 보여준다 — 결과는 나중에 글에 적는다. */
.ba-vote { margin: 3.2rem 0; padding: 2.4rem 2rem; border: 2px solid var(--benurd-ink);
    border-radius: 16px 6px 18px 7px / 7px 17px 6px 16px; background: #fff; }
.ba-vote-q { margin: 0 0 1.6rem; font-family: var(--font-serif); font-size: 2rem;
    line-height: 1.45; letter-spacing: -.02em; word-break: keep-all; }
.ba-vote-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.ba-vote-btn { flex: 1 1 220px; min-height: 44px; cursor: pointer;
    padding: 1.4rem 1.6rem; font-family: var(--font-sans); font-size: 1.55rem; font-weight: 800;
    color: var(--benurd-ink); background: var(--benurd-paper, #f4f2ed);
    border: 2px solid var(--benurd-line); border-radius: 12px 5px 14px 6px / 6px 13px 5px 12px;
    text-align: left; line-height: 1.5; word-break: keep-all; }
.ba-vote-btn small { display: block; margin-top: .4rem; font-weight: 600; font-size: 1.32rem;
    color: var(--benurd-faint); }
.ba-vote-btn:hover { border-color: var(--benurd-ink); }
.ba-vote-btn.is-on { border-color: var(--benurd-red); color: var(--benurd-red); background: #fff; }
.ba-vote-btn.is-on::before { content: "\2713\00a0"; }
.ba-vote-thanks { margin: 1.4rem 0 0; font-size: 1.45rem; color: var(--benurd-faint); }
@media (max-width: 600px) { .ba-vote { padding: 2rem 1.5rem; } .ba-vote-q { font-size: 1.85rem; } }
/* ==BA-VOTE-END== */

/* ==BA-HOP-BEGIN== */
/* ── 다른 주소로 들어온 분 안내 (2026-08-17, 사용자 요청) ──
   benurd.co.kr · www.benurd.co.kr · benurd.com 도 같은 사이트를 그대로 띄운다.
   검색엔진에는 canonical 로 이미 www.benurd.com 을 알리고 있지만, 사람에게는 아무 표시가 없었다.
   → 캐릭터와 함께 한 번 알려 주고 3초 뒤에 대표 주소로 옮긴다. 머무르겠다고 하면 붙잡지 않는다. */
.ba-hop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
    background: rgba(244, 242, 237, .97); padding: 2rem; }
.ba-hop-box { max-width: 42rem; text-align: center; }
.ba-hop img { width: 132px; height: auto; margin: 0 auto 1.6rem; display: block; }
.ba-hop-t { margin: 0 0 .8rem; font-family: var(--font-serif); font-size: 2.2rem; line-height: 1.45;
    letter-spacing: -.02em; color: var(--benurd-ink); word-break: keep-all; }
.ba-hop-t b { color: var(--benurd-red); }
.ba-hop-s { margin: 0 0 2rem; font-size: 1.5rem; line-height: 1.7; color: var(--benurd-faint); word-break: keep-all; }
.ba-hop-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.ba-hop-go, .ba-hop-stay { min-height: 44px; padding: 1rem 1.8rem; cursor: pointer;
    font-family: var(--font-sans); font-size: 1.45rem; font-weight: 800;
    border-radius: 12px 5px 14px 6px / 6px 13px 5px 12px; }
.ba-hop-go { background: var(--benurd-ink); color: #fff; border: 2px solid var(--benurd-ink); }
.ba-hop-stay { background: transparent; color: var(--benurd-faint); border: 2px solid var(--benurd-line); }
.ba-hop-c { display: inline-block; min-width: 1.2em; font-variant-numeric: tabular-nums; }
/* ==BA-HOP-END== */

/* ==BA-EMPH-BEGIN== */
/* 글 안의 강조 — 빨간 마커 밑줄이 우리 방식이다 (사용자 지침 2026-08-17).
   굵은 글씨(<b>/<strong>)를 본문에서 쓰면 딱딱해 보인다 → 마커로 그은 것처럼 밑줄을 깐다.
   .ba-mark-red 는 이미 있었지만 본문 <strong> 에는 안 걸려 있었다. 본문에서만 자동으로 건다
   (표·인용·캡션·FAQ 안의 굵은 글씨는 이름표 성격이라 그대로 둔다). */
.gh-content > p > strong, .gh-content > p > b,
.gh-content > ul > li > strong, .gh-content > ol > li > strong {
    font-weight: 700;
    background-image: linear-gradient(var(--benurd-red), var(--benurd-red));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 88%;
    padding-bottom: .12em;
}
/* ==BA-EMPH-END== */

/* ==BA-ALIGN-BEGIN== */
/* 푸터 메뉴 — 위쪽(슬로건·BENURD·RSS)이 전부 가운데인데 메뉴만 왼쪽에 붙어 있었다
   (2026-08-17 사용자 지적, PC 1525px 실측: 메뉴 L=103 · RSS L=695). 같은 축으로 맞춘다. */
.ba-footer-nav { justify-content: center; }
@media (max-width: 700px) { .ba-footer-nav { justify-content: flex-start; } }

/* 홈 상단 띠 — 빨간 슬로건과 문장이 한 줄에 붙어 문장이 어정쩡하게 꺾였다.
   슬로건을 제 줄에 세우고 아래에 문장을 둔다(2026-08-17 사용자 지적). */
.ba-band-line .ba-eng, .ba-band-line .ba-band-mark { display: block; margin-bottom: .7rem; }
.ba-band-line { line-height: 1.7; }
/* ==BA-ALIGN-END== */

/* ==BA-BAND2-BEGIN== */
/* 홈 상단 띠 — 네 칸의 줄 수가 달라(3줄·2줄·2줄·1줄) 아래 여백이 들쭉날쭉했다
   (2026-08-17 사용자 지적, PC 실측). 가운데로 맞춰 위아래 여백을 고르게 한다. */
.ba-band-inner { align-items: center; }
.ba-band-line, .ba-band-mean, .ba-band-actions { align-self: center; }
/* ==BA-BAND2-END== */

/* ==BA-TAP2-BEGIN== */
/* 스트립 타일의 캡션 링크가 39px 라 탭 기준(44px)에 걸렸다(2026-08-17, 320px 실측) */
.ba-strip-grid figure a { display: block; min-height: 44px; }
.ba-hop-fig img { display: block; margin: 0 auto 1.6rem; width: 132px; height: auto; }
/* ==BA-TAP2-END== */

/* ==BA-HOP2-BEGIN== */
/* 다른 주소 안내 — 뒤 화면이 비치게(사용자 요청 2026-08-17 "투명으로 잘 어울리게").
   완전히 덮으면 어디로 왔는지 안 보여 불안하다. 흐리게 비치는 정도로 둔다. */
.ba-hop { background: rgba(244, 242, 237, .72); backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%); }
.ba-hop-box { background: rgba(255, 255, 255, .86); border: 1px solid var(--benurd-line);
    border-radius: 18px 7px 20px 8px / 8px 19px 7px 18px; padding: 3rem 2.6rem 2.6rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.10); }
.ba-hop-fig { display: block; margin: 0 auto 1.6rem; }
.ba-hop-fig img, .ba-hop-fig video { display: block; width: 132px; height: auto; margin: 0 auto;
    border-radius: 10px 4px 12px 5px / 5px 11px 4px 10px; }
@media (prefers-reduced-motion: reduce) { .ba-hop { backdrop-filter: none; } }
/* ==BA-HOP2-END== */

/* ==BA-TABLE-SCROLL-BEGIN== */
/* 표 가로 스크롤 — 넘칠 때만 (2026-08-17 사용자 지적).
   Ghost 기본은 .gh-table 에 overflow-x: scroll 이라 **다 들어가는 PC 에서도 막대가 보였다.**
   auto 로 바꾸면 넘치는 화면(휴대폰)에서만 나온다. 넘겨 볼 수 있다는 건 그대로다. */
.gh-table, .ba-table-wrap { overflow-x: auto !important; }
/* 막대가 나올 때도 얇고 조용하게 */
.gh-table::-webkit-scrollbar, .ba-table-wrap::-webkit-scrollbar { height: 6px; }
.gh-table::-webkit-scrollbar-thumb, .ba-table-wrap::-webkit-scrollbar-thumb {
    background: var(--benurd-line); border-radius: 3px; }
.gh-table, .ba-table-wrap { scrollbar-width: thin; }
/* ==BA-TABLE-SCROLL-END== */

/* ==BA-HOME-BOTTOM-BEGIN== */
/* ── 홈 아래쪽 정리 (2026-08-17 사용자 지적 세 가지) ──
   ① 「받아 가셔도 됩니다」 칸이 위아래 블록과 크기가 안 맞았다 — 썸네일 123px 은 스트립 타일(271px)에
      비해 작고, 세 칸이 두 줄로 어정쩡하게 앉았다. 썸네일을 키우고 세 칸을 한 줄로 편다.
   ② 「개인적으로 쓰시는 건…」 줄이 아래 구분선에 붙어 있었다 — 위아래 여백을 준다.
   ③ PC 우측이 비었다 — 브랜드 문단이 620px 로 좁아 오른쪽 절반이 통째로 남았다.
      문단을 넓히고, 팩트 셋을 같은 폭에 고르게 편다. */
@media (min-width: 1000px) {
  .ba-give-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 3rem; align-items: start; }
  .ba-give-thumb { width: 160px; height: 160px; }
  .ba-strip-note { max-width: 92rem; }
  .ba-strip .ba-hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.ba-give-terms { margin-top: 3.2rem; padding-bottom: 2.8rem; }
/* ==BA-HOME-BOTTOM-END== */

/* ==BA-BAND-TEXT-BEGIN== */
/* ── 홈 상단 띠 읽기 정리 (2026-08-17 사용자: "눈에 안 들어오고 글씨가 제각각") ──
   문제는 서체가 섞인 것 자체가 아니라 **크기 차이가 없다**는 것이었다.
   리드 17px · 보조 15px 로 거의 같아서 셋 다 비슷한 무게로 보였다(휴대폰 16 / 14.5).
   → 리드를 확실히 크게 세우고, 보조 둘은 주석처럼 왼쪽에 얇은 빨간 선을 붙여 성격을 나눈다.
   서체가 다른 건 그대로 둔다 — 그 제각각이 이 브랜드의 결이다. */
.ba-band-line { font-size: 2.15rem; line-height: 1.55; letter-spacing: -.02em; }
.ba-band-line .ba-eng, .ba-band-line b, .ba-band-line strong {
    font-size: 1.32rem; letter-spacing: .18em; }
.ba-band-mean {
    /* 2026-08-17 두 번째 손질: 보조 두 줄이 15px 이라 **본문(17px)보다 작았다.**
       여기 적힌 두 문장(이름 뜻 · 파는 것이 없다는 것)은 처음 온 사람이 제일 먼저 읽어야 하는 사실이다.
       17px 로 올려 본문과 같은 눈높이로 두되, 리드(21.5px)와는 차이를 유지한다. */
    font-size: 1.7rem; line-height: 1.7; color: rgba(17,17,17,.78);
    padding-left: 1.1rem; border-left: 2px solid var(--benurd-red);
}
@media (max-width: 700px) {
    .ba-band-line { font-size: 2rem; line-height: 1.5; }
    .ba-band-line .ba-eng { font-size: 1.25rem; }
    .ba-band-mean { font-size: 1.65rem; line-height: 1.65; padding-left: 1rem; }
    .ba-band-inner { gap: 1.6rem; }          /* 리드와 보조 사이에 숨 쉴 자리 */
}
/* ==BA-BAND-TEXT-END== */

/* ==BA-H3-BEGIN== */
/* 휴대폰에서 h3 가 h2 보다 컸다 (2026-08-17 실측: h2 24px · h3 28.4px).
   소제목보다 FAQ 질문이 더 크게 보였다 — 모든 글에 걸린 문제였다.
   PC 는 35 / 28.4 로 맞으니 휴대폰만 바로잡는다. */
@media (max-width: 700px) {
  .gh-content h3, .gh-content .gh-card h3 { font-size: 2rem; line-height: 1.4; }
  .gh-content h2 { font-size: 2.4rem; line-height: 1.35; }
  /* 소제목 앞 여백이 56px 로 h2·h3 가 같아 묶음이 안 보였다 — h3 는 조금 좁힌다 */
  .gh-content h3 { margin-top: 3.4rem; }
  .gh-content h2 { margin-top: 6rem; }
}
/* ==BA-H3-END== */

/* ==BA-NO2-BEGIN== */
/* 번호가 두 자리가 되면 앞의 0 을 떼고 칸도 넓힌다 (2026-08-17 사용자 지적: 010·011 로 나오고 제목과 붙음).
   CSS 로 "0" 을 붙여 왔는데 10편을 넘기면서 세 글자가 됐다. 템플릿에서 10 이상이면 .is-two 를 붙인다. */
.ba-index-no.is-two::before { content: "RECORD "; }
.ba-index-list.is-archive .ba-index-no.is-two::before { content: ""; }
/* 휴대폰에서는 원래 "RECORD" 라벨을 떼고 숫자만 쓴다(위 480px 규칙).
   .is-two 규칙이 뒤에 있어 그 규칙을 덮어써서, 10번 글만 「RECORD 10」이 제목 위로 튀어나왔다
   — 2026-08-17 사용자 화면에서 확인. 같은 폭에서 다시 지운다. */
@media (max-width: 480px) { .ba-index-no.is-two::before { content: ""; } }
@media (max-width: 700px) {
  .ba-index-list.is-archive.has-no:not(.has-thumb) .ba-index-item a,
  .ba-index-list.is-archive.has-no:not(.has-thumb) .ba-index-item.is-here {
      grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 1.2rem;
  }
  .ba-index-list.is-archive.has-no.has-thumb .ba-index-item a {
      grid-template-columns: 3.6rem 72px minmax(0, 1fr);
  }
}
/* ==BA-NO2-END== */

/* ==BA-WIDTH-BEGIN== */
/* PC 본문 폭 (2026-08-18 사장님 지적 "너무 작지 않나" → 실측 후 판단)
   기본 720px = 한 줄 42자(19px). 업계 기준(미디엄 680 · 브런치 700 · Ghost 720)과 같은 급이라
   좁은 편은 아니지만, 큰 화면에서 양옆이 휑해 보이는 건 사실이다.
   760px(44자/줄)로 올린다 — 45자를 넘기면 줄 끝에서 눈이 길을 잃는다(한글 가독 상한).
   휴대폰은 min() 이라 그대로다. */
.gh-canvas, .kg-width-full.kg-content-wide { --content-width: 760px; }
/* ==BA-WIDTH-END== */

/* ==BA-BTN-C-BEGIN== */
/* 버튼 C안 (2026-08-18 사장님: "버튼 글자들 정해진 규칙 없이 과감히" → 시안 3종 중 C 선택)
   말을 거는 버튼(받기·반응)만 손 획 테두리로 과감하게, 길 안내(공유 등)는 기울기만.
   손 획은 비대칭 border-radius 로 만든다 — 그림 파일이 아니라 CSS 도형이므로 AI 그림이 아니다.
   상태 규칙: 오버 = 덧그은 겹획(굵어짐+두 겹) · 누름 = 도장처럼 가라앉음(동그라미 안 씀, 사장님 피드백).
   버튼마다 radius 씨앗과 기울기를 다르게 — "정해진 규칙 없이"가 규칙이다. */
.ba-dl-btn {
    background: transparent; color: var(--benurd-ink) !important;
    border: 3px solid var(--benurd-red);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    transform: rotate(-.6deg);
    position: relative;
    transition: box-shadow .12s, transform .12s, border-width .12s;
}
/* 강조(첫 버튼) = 빨간 손 획 테두리. 마커 밑줄도 넣어 봤는데 버튼이 두 줄(제목+용량)이라
   밑줄이 용량 글자를 **관통해 취소선처럼** 보였다(2026-08-18 실측) → 테두리만으로 강조한다. */
.ba-dl-btn.is-ghost {
    border-color: var(--benurd-ink);
    border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
    transform: rotate(.5deg);
    background-image: none;
}
.ba-dl-btn:hover {
    opacity: 1; border-width: 4px;
    box-shadow: 0 0 0 1.5px var(--benurd-red);   /* 펜으로 한 번 더 덧그은 겹획 */
}
.ba-dl-btn.is-ghost:hover { box-shadow: 0 0 0 1.5px var(--benurd-ink); }
.ba-dl-btn:active { transform: rotate(-.6deg) translateY(2px) scale(.985); }
.ba-dl-btn.is-ghost:active { transform: rotate(.5deg) translateY(2px) scale(.985); }
.ba-dl-meta { color: var(--benurd-faint); }

/* 반응 버튼 — 셋 다 다른 상자·기울기 */
.ba-react-btn {
    border: 2.5px solid var(--benurd-ink);
    border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px;
    transform: rotate(-.8deg);
    transition: box-shadow .12s, transform .12s, background .15s, color .15s;
}
.ba-react-btn:nth-child(2) { border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px; transform: rotate(.7deg); }
.ba-react-btn:nth-child(3) { border-radius: 255px 15px 15px 225px / 15px 225px 255px 15px; transform: rotate(-.3deg); }
.ba-react-btn:hover { border-color: var(--benurd-ink); box-shadow: 0 0 0 1.2px var(--benurd-ink); }
.ba-react-btn:active { transform: translateY(2px) scale(.98); }
.ba-react-btn.is-on { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }

/* 길 안내 — 공유 버튼은 기울기만 슬쩍 */
.ba-share, .gh-button-share { transform: rotate(.8deg); }
@media (max-width: 900px) {
    .ba-react-btn:hover { border-color: var(--benurd-ink); }
}
/* 투표 버튼도 같은 손 획 문법 (C안 확장, 2026-08-18) — 두 시안 중 고르는 자리라 상자가 달라야 한다 */
.ba-vote-btn {
    border-width: 2.5px; border-color: var(--benurd-ink);
    border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px;
    transform: rotate(-.5deg);
    transition: box-shadow .12s, transform .12s, background .15s, color .15s;
}
.ba-vote-btn:nth-child(2) { border-radius: 15px 255px 15px 225px / 255px 15px 225px 15px; transform: rotate(.6deg); }
.ba-vote-btn:hover { box-shadow: 0 0 0 1.2px var(--benurd-ink); }
.ba-vote-btn:active { transform: translateY(2px) scale(.98); }
/* 「이 글의 N개 자리」도 손 획 문법 (2026-08-18 사장님: "이런 버튼은 비너드 철학으로 디자인해도 될 것 같음")
   길 안내지만 눈에 자주 닿는 자리라 손 획 상자를 준다 — 다른 버튼과 또 다른 씨앗·기울기. */
.ba-jump-det > summary {
    border: 2.5px solid var(--benurd-ink);
    border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
    transform: rotate(-.4deg);
    font-size: 1.3rem;
    transition: box-shadow .12s, transform .12s;
}
.ba-jump-det > summary:hover { box-shadow: 0 0 0 1.2px var(--benurd-ink); }
.ba-jump-det > summary:active { transform: rotate(-.4deg) translateY(2px) scale(.98); }
.ba-jump-det[open] > summary { border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px; transform: rotate(.3deg); }
/* 공유·낱장 칩·맨위로 버튼까지 손 획 확장 (2026-08-18 사장님 지시 셋) */
.ba-share {
    border: 2.5px solid var(--benurd-ink) !important;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    transform: rotate(.7deg);
    transition: box-shadow .12s, transform .12s, background .15s, color .15s;
}
.ba-share:hover { box-shadow: 0 0 0 1.2px var(--benurd-ink); }
.ba-share:active { transform: rotate(.7deg) translateY(2px) scale(.98); }

/* 낱장 칩 여덟 개 — 짝수/홀수·순번으로 상자와 기울기를 다르게(전부 제각각) */
.ba-dl-chips a {
    border-width: 2px; border-color: var(--benurd-ink);
    border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px;
    transform: rotate(-.5deg);
    transition: box-shadow .12s, transform .12s;
}
.ba-dl-chips a:nth-child(2n) { border-radius: 15px 255px 15px 225px / 255px 15px 225px 15px; transform: rotate(.5deg); }
.ba-dl-chips a:nth-child(3n) { border-radius: 255px 15px 15px 225px / 15px 225px 255px 15px; transform: rotate(-.2deg); }
.ba-dl-chips a:nth-child(4n) { transform: rotate(.3deg); }
.ba-dl-chips a:hover { box-shadow: 0 0 0 1.1px var(--benurd-ink); }
.ba-dl-chips a:active { translate: 0 2px; }

/* 맨위로 — 동그란 손 획(살짝 찌그러진 원) */
.ba-top {
    border: 2.5px solid var(--benurd-ink);
    border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
    transform: rotate(-2deg);
    transition: box-shadow .12s, transform .12s, color .15s, border-color .15s;
}
.ba-top:hover { border-color: var(--benurd-red); color: var(--benurd-red); box-shadow: 0 0 0 1.2px var(--benurd-red); }
.ba-top:active { transform: rotate(-2deg) translateY(2px) scale(.96); }
/* 홈 최신 글 READ 버튼 (2026-08-18 사장님 지시) — 잉크 판을 유지하되 손 획 상자로 */
.ba-feature-cta {
    border: 2.5px solid var(--benurd-ink);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    transform: rotate(-.5deg);
    transition: background .15s, box-shadow .12s, transform .12s, border-color .15s;
}
.ba-feature-link:hover .ba-feature-cta {
    background: var(--benurd-red); border-color: var(--benurd-red);
    box-shadow: 0 0 0 1.2px var(--benurd-red);
}
.ba-feature-link:active .ba-feature-cta { transform: rotate(-.5deg) translateY(2px) scale(.985); }
/* 눈물 파랑 — 무채색·빨강뿐인 사이트에 감정 한 점 (2026-08-18 사장님: "눈물에 파란색도 좀 넣어보자")
   디자인 철학 ③ '무채색 속 감정 한 점'의 사이트판. 빨간 마커와 같은 밑줄 문법, 색만 어두운 파랑.
   **지면당 한 점만 쓴다**(2026-08-18 About 확장) — 여러 곳에 쓰면 감정이 장식이 된다. 현재: 홈·About 각 1점. */
.ba-mark-tear {
    background-image: linear-gradient(#2a5d8f, #2a5d8f);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 92%;
    padding-bottom: .1em;
}
/* ==BA-BTN-C-END== */

/* 2026-08-21 인용 블록 — band-mean보다 작고 흐리게, 줄폭 제한 */
@media (max-width: 480px) { .ba-band-intro { font-size: .95rem; } }

/* 2026-08-21 impeccable 심사 반영 */
.gh-content p { line-height: 1.68; }
.ba-index-item a { display: flex; align-items: center; gap: 14px; }
.ba-index-thumb { width: 72px; height: 46px; object-fit: cover; flex-shrink: 0; border: 1px solid #d8d4cb; }
/* 모바일은 8/9 결정대로 글자만 — 스케치 스트립이 시각 입구를 담당 */
@media (max-width: 640px) { .ba-index-thumb { display: none; } .ba-index-item a { display: block; } }
/* 2026-08-24: 이 여닫이 손잡이가 40px 라 탭 기준(44px)에 4px 모자랐다
   (site_check [탭 영역], 320·844·1024 세 폭 모두). 글 13편 전부에 있는 자리다.
   여백을 늘리면 글 끝 간격이 흔들리므로 최소 높이만 못박는다 —
   스트립 캡션 링크를 고칠 때(2026-08-17) 쓴 것과 같은 방법. */
.ba-next-fold > summary { cursor: pointer; font-weight: 700; padding: .4rem 0 1rem; list-style: none; min-height: 44px; box-sizing: border-box; }
.ba-next-fold > summary::before { content: "▸ "; }
.ba-next-fold[open] > summary::before { content: "▾ "; }

/* 2026-08-22 모바일 전수 감사 반영 ------------------------------------ */
/* 위로가기 버튼이 390px 화면에서 본문 마지막 행·링크를 덮었다(실측: p12 링크 위 겹침).
   반투명으로 낮추고, 본문 바닥에 버튼 높이만큼 안전 여백을 준다. */
@media (max-width: 900px) {
    .ba-top { opacity: .55; }
    .ba-top:active, .ba-top:focus-visible { opacity: 1; }
    .gh-content { padding-bottom: 64px; }
}
/* 기획서 글 표(858px)가 잘린 것처럼 보였다 — 스크롤 신호가 없어서.
   모바일에서만 오른쪽 페이드 + 한 줄 안내를 붙인다. */
@media (max-width: 640px) {
    .ba-table-wrap { position: relative; }
    .ba-table-wrap::before {
        content: "옆으로 밀어서 볼 수 있습니다 →";
        display: block; font-size: 1.2rem; opacity: .55; margin-bottom: .4rem;
    }
    .ba-table-wrap::after {
        content: ""; position: absolute; top: 2.2rem; right: 0; bottom: 0; width: 28px;
        background: linear-gradient(to right, transparent, var(--background-color, #f4f2ed));
        pointer-events: none;
    }
}
/* 홈 인라인 링크(그림 써도 되나요 →)가 높이 18px로 유일한 44px 미달 표적이었다 */
.ba-band a, .ba-index-note a { padding: .6rem 0; }
/* 홈 네컷일기 입구 — 본문과 같은 잉크 톤에 빨간 밑줄만 */
.ba-index-story { color: inherit; border-bottom: 2px solid var(--benurd-red); text-decoration: none; font-weight: 700; }
.ba-index-story:hover { color: var(--benurd-red); }

/* 통계 줄 네 번째 칸: 네컷일기 만화 입구 (2026-08-22)
   — 곧은 밑줄은 우리답지 않다(사용자 지적). 기획서에서 이름을 고른 그 동작,
   "빨간 펜으로 두른 원"을 그대로: 잉크 세리프 글자 + 삐뚤한 빨간 원 테두리. */
.ba-fact-story { text-decoration: none; color: inherit; }
.ba-fact-story .ba-fact-value {
    display: inline-block; padding: .2rem 1rem .3rem;
    border: 2.5px solid var(--benurd-red, #c30013);
    border-radius: 255px 25px 225px 25px / 25px 225px 25px 255px;
    transform: rotate(-1.2deg);
}
.ba-fact-story:hover .ba-fact-value { transform: rotate(.6deg); }

/* PC에서는 통계 4항목을 한 줄로, STORY는 오른쪽 끝에 (2026-08-22 사용자 지시) */
@media (min-width: 901px) {
    .ba-strip .ba-hero-facts, .ba-hero-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
    .ba-hero-facts .ba-fact { margin: 0; min-width: 0; }
}

/* ==BA-TAGLIST-FIX-2026-08-24== 카테고리 목록 모바일 레이아웃 -------------
   사용자 화면(390px, /tag/sketch)에서 제목이 4~5글자마다 줄바꿈되고 날짜가 옆에 붙었다.
   원인: 2026-08-21 판에서 `@media(max-width:640px){ .ba-index-thumb{display:none} }` 로
   썸네일만 숨겼는데, 그리드의 **72px 썸네일 열은 그대로 남아 있었다.**
   숨긴 요소는 그리드 흐름에서 빠지므로 항목이 한 칸씩 당겨져
   번호→1열, **제목→72px 열**, 날짜→나머지 열로 배치됐다. 제목 칸이 72px이라 잘게 접혔다.
   → 썸네일이 사라지는 폭에서는 열도 함께 없애고, 날짜는 제목 아래로 내린다. */
@media (max-width: 640px) {
    .ba-index-list.is-archive.has-no.has-thumb .ba-index-item a,
    .ba-index-list.is-archive.has-no.has-thumb .ba-index-item.is-here,
    .ba-index-list.has-thumb .ba-index-item a {
        display: grid;
        grid-template-columns: 3.6rem minmax(0, 1fr);
        column-gap: 1.2rem;
    }
    .ba-index-list.is-archive.has-no.has-thumb .ba-index-date,
    .ba-index-list.has-thumb .ba-index-date {
        grid-column: 2; text-align: left; margin-top: .8rem;
    }
    /* 번호 없는 목록(글 하단 이어보기 등)은 한 칸으로 */
    .ba-index-list.is-archive:not(.has-no).has-thumb .ba-index-item a {
        grid-template-columns: minmax(0, 1fr);
    }
    .ba-index-list.is-archive:not(.has-no).has-thumb .ba-index-date { grid-column: 1; }
}
/* ==BA-TAGLIST-FIX-END== */