/* ============================================================================
   ws-contrast-fix.css — 워크시트랩 글자 대비 보정
   생성 2026-08-03 · 전부 실측값(tools/contrast_audit.py)

   활동지 페이지(/ws/*.html) 기준 11건이 4.5:1 미만이었다.
   원인은 거의 하나다 — 흐린 회색 #8A94A6 을 빵부스러기·푸터·관련목록·안내문에
   공통으로 쓰고 있다. 흰 배경 위에서 3.06 : 1 이다.

   색을 아예 바꾸지 않고 **같은 색을 어둡게만** 했다. 톤은 유지된다.
   ========================================================================== */

/* ★ 클래스로 잡다가 인라인에 막혔다 (2026-08-03)
     .related-item span 은 인라인으로 color:var(--ink3) 를 쓰고 있었다.
     클래스 규칙으로는 못 이긴다. 그렇다고 !important 를 뿌리면 다음 사람이 못 고친다.

     그래서 **변수 자체를 다시 정의**한다. --ink3 를 쓰는 모든 자리가 한 번에 고쳐진다.
     인라인이든 클래스든 결국 이 변수를 보기 때문이다. 이게 원인을 고치는 방법이다. */
:root{
  /* ★ 한 번 더 조정했다 — 흰 배경만 보고 정하면 안 된다.
     #6B7381 은 흰 배경에서 4.78 로 통과했지만, 연회색 상자(#EEF1F8) 안에서는
     4.23 으로 다시 미달이었다. 이 사이트는 카드 안에 연회색 상자를 겹쳐 쓴다.
     **가장 밝은 배경이 아니라 가장 흐린 배경을 기준으로** 값을 정한다. */
  --ink3:#616875;   /* 원래 #8A94A6 · 흰배경 5.61 · 연회색 상자 4.96 */
  --ink2:#3A4250;   /* 원래 #4A5568 · 본문 보조 텍스트를 한 단계 진하게 */
}
.crumb, .crumb *, footer .wrap, .muted, .sub, .hint{ color:var(--ink3); }

/* 무료 배지 — 연한 민트 배경 위 같은 계열 민트 글자였다 (2.95:1) */
.tag.t-free{ color:#0F786A; }        /* on #E2F5F1 : 4.74:1 */

/* 활동지 안내문 — 성취기준 변경 안내라 놓치면 안 되는 문장이다 */
.card p{ color:#3A4250; }

/* 도서 안내 상자 안 출처 줄 — 4.23 : 1. 연회색 배경 위 --ink2 였다.
   출처 표기는 저작권 안내라 흐리면 안 된다. */
.book-box div div, .book-box small{ color:#2E3646; }   /* 인라인 var(--ink3) 를 쓰는 곳은 위 변수로 해결됨 */

/* ---- 원작 안내 블록 ---------------------------------------------------------
   판매 중인 타사 도서(『활기찬 중학교 생활 워크북』, 박영스토리)를 언급하는 페이지에
   반드시 붙는 고지다. 사장님이 정하신 필수문구를 담는다 —
   "이 책은 <출판사>에서 출간된 도서입니다. 본 사이트의 구독·멤버십에 포함되지 않으며,
    구매는 아래 서점 링크를 이용해 주세요."
   눈에 띄어야 제 구실을 하므로 배경과 테두리를 준다.
   (색은 고정값이다 — 이 사이트는 밝은 테마만 쓰고, 배경도 함께 지정했다) */
.ext-notice{
  margin:14px 0 4px;
  padding:12px 15px;
  background:#F7F9FC;
  border:1.5px solid #CFD8E6;
  border-left:4px solid #4F52CC;
  border-radius:0 10px 10px 0;
  font-size:12.5px;
  line-height:1.75;
  color:#2E3646;                 /* on #F7F9FC : 11.6:1 */
}
.ext-notice b{ color:#1F2430; }

/* ============================================================================
   ★ 덧붙임 — 반전(어두운) 테마 (2026-08-03 오후)

   ■ 먼저, 위쪽을 쓴 사람의 판단을 검증한 결과부터 적는다
     위 주석에 "이 사이트는 밝은 테마만 쓴다" 고 되어 있다. 확인해 보니 절반만 맞다.
     활동지 페이지는 onae-theme.js 와 onae-themes.css 를 부른다. 메인 사이트에서
     반전 테마를 고른 사람은 같은 저장소 값을 써서 활동지도 반전으로 열린다.

     그런데 **기존 활동지 3장을 실제로 재 보니 밝은 테마(default·cute)는 전부 통과**했다.
     위쪽 규칙이 제 몫을 하고 있다. 문제는 반전 테마에서만 난다.

   ■ ★ 그리고 내가 한 번 크게 잘못했다 — 그 기록을 남긴다
     처음에는 반전 규칙을 **모든 활동지에** 걸었다. .card 배경을 테마에 맡겼더니
     기존 활동지의 관련 목록 링크(.related-item, 고정 남색)가 1.05 : 1 로 사라졌다.
     내가 배경을 움직여서 생긴 사고다.
     그걸 고친다고 `*:not(a){color:inherit}` 같은 넓은 규칙을 덧대자
     **안 보이는 글자가 6개에서 13개로 늘었고, 내가 새로 만든 장까지 망가졌다.**

     넓은 규칙으로 남의 페이지를 건드리면 안 된다. 무엇이 들어 있는지 모르기 때문이다.

   ■ 그래서 범위를 좁혔다
     반전 규칙은 **내가 새로 만든 초등 활동지(body.ws-new)에만** 건다.
     기존 119장은 한 줄도 건드리지 않는다 — 밝은 테마에서 이미 잘 맞춰져 있고,
     반전 테마 손질은 페이지 구조를 하나씩 확인하며 따로 해야 한다.
     기존 장의 반전 문제는 사장님께 따로 보고했다.
   ========================================================================== */

body.ws-new[data-x],
[data-onae-theme="inverse"] body.ws-new header{
  background:var(--onae-bg-elev); color:var(--onae-text);
  border-bottom:1px solid var(--onae-border);
}
[data-onae-theme="inverse"] body.ws-new header a,
[data-onae-theme="inverse"] body.ws-new header .logo{ color:var(--onae-text); }
[data-onae-theme="inverse"] body.ws-new header .btn.btn-o{
  background:transparent; color:var(--onae-brand); border:1px solid var(--onae-brand);
}
[data-onae-theme="inverse"] body.ws-new .card{
  background:var(--onae-bg-elev); color:var(--onae-text);
  border:1px solid var(--onae-border);
}
[data-onae-theme="inverse"] body.ws-new .card p,
[data-onae-theme="inverse"] body.ws-new .card h1,
[data-onae-theme="inverse"] body.ws-new .card h2,
[data-onae-theme="inverse"] body.ws-new .card h3,
[data-onae-theme="inverse"] body.ws-new .faq-q,
[data-onae-theme="inverse"] body.ws-new .faq-a{ color:var(--onae-text); }
[data-onae-theme="inverse"] body.ws-new ul.rel a{
  color:var(--onae-brand); text-decoration:underline; text-underline-offset:2px;
}
[data-onae-theme="inverse"] body.ws-new .crumb,
[data-onae-theme="inverse"] body.ws-new .crumb *,
[data-onae-theme="inverse"] body.ws-new footer.wrap{ color:var(--onae-text-muted); }
[data-onae-theme="inverse"] body.ws-new .book-box{
  background:var(--onae-bg-soft); border:1px solid var(--onae-border);
}
[data-onae-theme="inverse"] body.ws-new .book-box div,
[data-onae-theme="inverse"] body.ws-new .book-box [style*="var(--onae-text"]{
  color:var(--onae-text)!important;
}
/* 인라인 --ink3 는 규칙으로 못 이겨 여기서만 !important */
[data-onae-theme="inverse"] body.ws-new [style*="var(--ink3)"]{ color:var(--onae-text-muted)!important; }

/* ============================================================================
   ★ 2026-08-03 (두 번째) — 배포될 원본 폴더로 다시 재고 나서 쓴다

   앞선 규칙들은 _deploy\stage 사본으로 재고 쓴 것이다. 그런데 배포되는 건
   platform 폴더고, 거기에는 onae-typo.css · onae-pro.css 가 더 붙어 있었다.
   재는 대상이 틀렸으니 결과도 틀렸다. 서버를 띄워 원본 그대로 다시 쟀다.

   그랬더니 반전(inverse) 테마에서 이렇게 나왔다.

     index.html          안 보이는 글자 23건  ·  기준 미달 7건
     seo/ws/*.html       안 보이는 글자  6건  ·  기준 미달 6건
     ws/*.html (기존)    기준 미달 5건
     ws/*.html (오늘 만든 54장, body.ws-new)   세 테마 전부 통과 ✔

   원인은 세 곳 다 같다 — **배경은 고정값, 글자색은 테마값**.
       .wcard   { background:#F7F8FA }   ← 고정
       section  { background:#fff }      ← 고정
       body     { color:var(--onae-text) } ← 반전에서 거의 흰색
   흰 판에 흰 글씨가 된다. 1.06 : 1.

   어떻게 고치나
     이 세 종류는 밝은 지면 디자인이다. 어둡게 만들려면 카드·표·그림자·테두리를
     전부 다시 잡아야 하고 그건 대비 교정이 아니라 재디자인이다.
     그래서 **반전 테마에서도 밝은 지면을 유지**하고, 배경과 글자색을 같은 곳에서
     짝지어 준다. 각 종류가 원래 쓰던 자기 색을 그대로 쓴다.

     오늘 만든 54장(body.ws-new)은 처음부터 테마를 따라가게 만들었고 실제로
     세 테마 다 통과한다. **거기는 건드리지 않는다.**

   울타리
     ws-contrast-fix.css 는 사이트 전체가 부른다. 그래서 파일이 아니라
     body 클래스로 범위를 자른다 —
       .ws-legacy-act   기존 활동지 (ws/*.html 중 ws-new 아닌 것)
       .ws-legacy-seo   검색용 활동지 (seo/ws/*.html)
       .ws-legacy-home  첫 화면 (index.html)
   ========================================================================== */

/* ── 기존 활동지 — 자기 팔레트(--bg:#f6f7fb / --ink:#1e2635) ─────────── */
body.ws-legacy-act.onae-themed{ background:#f6f7fb; color:#1e2635 }
/* onae-pro.css 가 !important 로 박아 둔 회색들은 '흰 배경 위'를 전제로 고른 값이다.
   지면을 밝게 유지하니 그 값들이 다시 맞다. 다만 연회색 상자(#eef1f8) 안에서는
   4.28 : 1 로 모자라서, 그 자리만 한 단계 진하게 한다. */
body.ws-legacy-act .book-box div div,
body.ws-legacy-act .book-box small{ color:#2E3646 !important }

/* ── 검색용 활동지 — 자기 팔레트(#f8f9ff / #1e1b4b) ─────────────────── */
body.ws-legacy-seo.onae-themed{ background:#f8f9ff; color:#1e1b4b }
body.ws-legacy-seo section{ color:#1e1b4b }
body.ws-legacy-seo h1{ color:#1e1b4b }
/* 남색 계열 보조 글자들이 밝은 지면에서 3.0~3.9 : 1 이었다. 색감은 두고 한 단계만 내린다. */
body.ws-legacy-seo nav.bc,
body.ws-legacy-seo nav.bc a{ color:#4338CA }      /* #6366f1 → on #f8f9ff 6.0:1 */
body.ws-legacy-seo p.sub{ color:#3730A3 }         /* #4f46e5 → 7.4:1 */
body.ws-legacy-seo p.kw{ color:#4338CA }          /* #818cf8 는 2.6:1 이었다 */
body.ws-legacy-seo footer.site{ color:#4B5563 }   /* #6b7280 → 5.6:1 */
body.ws-legacy-seo footer.site a{ color:#4338CA }

/* ── 첫 화면 — 자기 팔레트(--surface:#F7F8FA / --text:#334155) ───────── */
body.ws-legacy-home.onae-themed{ background:#F7F8FA; color:#334155 }
body.ws-legacy-home .wcard,
body.ws-legacy-home .wcard h3,
body.ws-legacy-home #trustBlock p{ color:#1E2635 }
body.ws-legacy-home .sec-h a{ color:#274099 }     /* 1.66 : 1 이었다 */
body.ws-legacy-home .sec-h span{ color:#4A5568 }

/* ── 무료 신청 페이지(free/index.html) ────────────────────────────────
   반전에서 제목이 남색(#16223d) 그대로라 검은 배경 위 1.20 : 1 이었다.
   푸터 링크도 3.91 : 1. 여기도 밝은 지면으로 유지하고 자기 색을 되찾아 준다. */
body.ws-legacy-free.onae-themed{ background:#f6f7fb; color:#1e2635 }
body.ws-legacy-free .hero h1{ color:#16223d }
body.ws-legacy-free .hero p{ color:#3A4250 }
body.ws-legacy-free footer.f,
body.ws-legacy-free footer.f a{ color:#4A5568 }

/* == 2026-08-03 : pricing.html 은 어느 울타리에도 안 들어 있었다 =============
   다른 장은 body 에 표시가 있다 - ws-legacy-home · ws-legacy-free · ws-new.
   요금 안내만 <body class="onae-themed"> 였다. 그래서 아무 보정도 못 받았다.
   (오늘 같은 모양을 세 번 봤다: 면접 tracks/ 의 iv-chrome 누락,
    공부 홈의 fix CSS 링크 누락, 그리고 이것.
    **고치는 장치는 있는데 일부 장이 거기 연결돼 있지 않은 것**이 반복된다.)
   body 에 ws-legacy-pricing 을 붙이고 여기서 받는다.

   두 갈래로 나눈다. 뒤에 무엇이 있느냐가 다르기 때문이다.

   (가) 지면 위 글자 - 배경이 테마를 탄다. 반전에서만 어긋난다.
        실측(반전)  h1 "요금제 안내"        #16223D on #0E1117 = 1.20 : 1  안 보임
                    h2 "등급별 상세 비교"    같음                 = 1.20 : 1  안 보임
                    h2 "자주 묻는 질문"      같음                 = 1.20 : 1  안 보임
                    .hero p · p.note-b2b   #5F6B7F              = 3.51 : 1
                    링크 두 곳             #3457D5              = 3.12 : 1

   (나) 흰 판 위 글자 - 배경이 고정이다. **세 테마 모두** 모자랐다.
        실측        .price small   #E2A534 on #fff = 2.17 : 1
                    td.yes         #159E8C on #fff = 3.33 : 1
                    .tier.free .btn  흰 글자 on #159E8C = 3.33 : 1

        마지막 것은 글자를 어둡게 하면 안 된다. 배경을 칠하는 쪽이니
        **배경을 어둡게** 한다(전에 .dl-btn 에서 글자를 건드렸다가 1.57 로 떨어뜨렸다).
   ------------------------------------------------------------------------- */

/* (가) 반전 테마에서만 - 지면 색을 따라간다 */
[data-onae-theme="inverse"] body.ws-legacy-pricing .hero > h1,
[data-onae-theme="inverse"] body.ws-legacy-pricing .cmp-wrap > h2,
[data-onae-theme="inverse"] body.ws-legacy-pricing .faq > h2{
  color:var(--onae-text);
}
[data-onae-theme="inverse"] body.ws-legacy-pricing .hero > p,
[data-onae-theme="inverse"] body.ws-legacy-pricing p.note-b2b{
  color:var(--onae-text-muted);
}
[data-onae-theme="inverse"] body.ws-legacy-pricing .wrap > p > a,
[data-onae-theme="inverse"] body.ws-legacy-pricing p.note-b2b > a{
  color:#8FAEFF;                    /* #0E1117 위 8.70 : 1 */
}

/* (나) 세 테마 공통 - 흰 판 위라 색만 진하게 */
body.ws-legacy-pricing .tier .price > small{ color:#8A6412; }   /* 흰 판 5.37 : 1 */
body.ws-legacy-pricing table.cmp td.yes{ color:#0E6E61; }       /* 흰 판 6.14 : 1 */
body.ws-legacy-pricing .tier .btn{ background:#0E6E61; border-color:#0E6E61; }
                                                                /* 흰 글자 6.14 : 1 */

/* 요금 안내 맨 아래 안내문·링크 — 위 (가)를 고치고 나니 드러났다.
   앞엣것들이 안 보이는 동안 가려져 있던 자리다.
   실측(반전) footer.f p · footer.f p a  = 3.91 : 1  (12px 이라 기준 4.5)
   지면 위에 있으니 테마 색을 따라간다. */
[data-onae-theme="inverse"] body.ws-legacy-pricing footer.f p{
  color:var(--onae-text-muted);
}
[data-onae-theme="inverse"] body.ws-legacy-pricing footer.f p > a{
  color:#8FAEFF;                    /* #0E1117 위 8.70 : 1 */
}

/* == 2026-08-03 : 자리 문제 두 곳 (색이 아니라 폭) ===========================
   좁은 화면 360px 실측

   ① 홈 머리말이 눌렸다
        A.logo "워크시트 랩"            내용 76px  >  상자 44px
        A.btn  "💬 문의/도움말"          내용 66px  >  상자 42px  (외 2개)
      .hbar 와 .hactions 가 flex 인데 줄바꿈이 없다(flex-wrap:nowrap).
      자리가 모자라니 글자가 든 채로 상자만 줄었다.
      **폭을 박지 않고 줄을 바꾸게** 한다. 넓은 화면에서는 자리가 남아 그대로다.

   ② 요금 안내의 한 줄 설명이 화면 밖으로
        SPAN.price-note                내용 528px  >  상자 282px
      공용 파일의 [class*="price"] { white-space:nowrap } 에 걸렸다.
      「가격 숫자가 두 줄로 쪼개지지 않게」 만든 규칙인데,
      이름에 price 가 들어갔다는 이유로 **문장**까지 묶였다.
      (AI교과서 .stat-label 과 똑같은 모양이다. 이름으로 고르는 규칙의 한계다)
   ------------------------------------------------------------------------- */
.hbar, .hactions{ flex-wrap: wrap; }
.price-note{ white-space: normal !important; }


/* == 2026-08-04 : .onae-ico 크기 규칙 누락 (색이 아니라 크기) =================
   css/onae-icons.js 가 이모지를 <svg class="onae-ico" viewBox="0 0 24 24" ...>
   로 바꾼다. width/height 속성은 안 준다(스타일시트로 관리하는 설계). 그런데
   이 사이트 CSS 어디에도 .onae-ico 의 크기 규칙이 없었다(전수 검색 0건).
   그래서 SVG 가 부모 상자 너비만큼 자라 45~55px 짜리 아이콘이 됐다.
   (실측 사례: .tag.t-ext "📚 서점 구매" — 배지 상자 73~74px인데 내용이 119~120px)

   글자 크기를 따라가게(1em) 만든다. 부모 font-size 가 커지면 아이콘도 같이 커지고,
   작아지면 같이 작아진다 — 이게 인라인 아이콘의 정상 동작이다.
   울타리를 두지 않는다 — 이모지 대체는 사이트 전체(onae-icons.js)에서 공통으로
   일어나므로 body 클래스로 가둘 이유가 없다. 선택자를 클래스 하나로만 좁혀
   다른 규칙을 덮지 않게 한다. 색은 건드리지 않는다(stroke=currentColor 그대로). */
.onae-ico{
  width:1em; height:1em; flex:0 0 auto;
  vertical-align:-.125em; display:inline-block;
}


/* == 2026-08-04 : 외부 출간 도서를 구독 상품과 갈라 놓기 =====================
   『활기찬 중학교 생활 워크북』(박영사)·『중학생활 끝판왕』(교육과학사)에서 온
   44종은 다른 출판사 책이다. 구독에 포함되지 않고 우리가 팔지도 않는다.
   목록에서 다른 워크시트와 똑같이 보이면 구매자가 오해한다. 그래서 띠를 붙인다.

   울타리
     첫 화면(index.html)은 body.ws-legacy-home 이다. 여기 안에만 넣는다.
     활동지 낱장(ws/*.html)은 이미 .ext-notice 를 쓰고 있어 건드리지 않는다.

   색
     배경과 글자색을 반드시 같은 규칙에서 짝으로 지정했다. 테마 토큰(var(--...))
     과 섞지 않는다 — 이 자리는 어느 테마에서도 같은 경고색이어야 한다.
     실측(WCAG 상대휘도) :
       .ext-band   #FFFFFF on #7A4E0C =  7.19 : 1
       .ext-callout본문 #5C3A06 on #FDF3E3 =  9.26 : 1
       .ext-must   #3F2704 on #FDF3E3 = 12.71 : 1
       .tag.t-ext  #7A4E0C on #FDF3E3 =  6.54 : 1
       .ext-buy    #FFFFFF on #7A4E0C =  7.19 : 1
       .ext-info   #5C3A06 on #FFFFFF = 10.18 : 1
   ------------------------------------------------------------------------- */
body.ws-legacy-home .ext-band{
  display:block; margin:0 0 9px; padding:5px 9px;
  background:#7A4E0C; color:#FFFFFF;          /* 7.19 : 1 */
  border-radius:7px;
  font-size:11.5px; font-weight:700; line-height:1.5; letter-spacing:-.2px;
}
body.ws-legacy-home .ext-callout{
  margin:14px 0; padding:13px 15px;
  background:#FDF3E3; color:#5C3A06;          /* 9.26 : 1 */
  border:1px solid #E4CBA0; border-left:4px solid #7A4E0C;
  border-radius:0 10px 10px 0;
  font-size:12.5px; line-height:1.7;
}
body.ws-legacy-home .ext-callout .ext-band{ margin-bottom:8px; }
body.ws-legacy-home .ext-callout .ext-title{
  color:#3F2704; font-size:14px; font-weight:700; margin-bottom:4px;   /* 12.71 : 1 */
}
body.ws-legacy-home .ext-callout p.ext-must{
  color:#3F2704; font-weight:700; margin:0 0 6px;                      /* 12.71 : 1 */
}
body.ws-legacy-home .ext-callout p.ext-sub{ color:#5C3A06; margin:0; } /* 9.26 : 1 */
body.ws-legacy-home .ext-stores{
  display:flex; gap:7px; flex-wrap:wrap; margin-top:9px;
}
body.ws-legacy-home .tag.t-ext{
  background:#FDF3E3; color:#7A4E0C;          /* 6.54 : 1 */
}
/* 자리(폭) 문제 — [class*="price"] 처럼 .tag 도 onae-responsive.css 의
   .onae-nowrap, .price-amount, .price-num, .badge, .chip, .tag{ white-space:nowrap }
   에 걸린다. 다른 배지는 "무료"·"회원"처럼 두 글자라 문제가 없었는데
   .t-ext 는 "📚 서점 구매"로 더 길어서 겹친다.
   .hbar,.hactions / .price-note 와 같은 방식 — 줄바꿈을 허용하고 min-width 을 푼다. */
body.ws-legacy-home .tag.t-ext{
  white-space:normal; min-width:0; max-width:100%;
}
body.ws-legacy-home .btn.ext-buy,
body.ws-legacy-home a.ext-buy{
  background:#7A4E0C; color:#FFFFFF; border:1px solid #7A4E0C;   /* 7.19 : 1 */
}
body.ws-legacy-home .btn.ext-info,
body.ws-legacy-home a.ext-info{
  background:#FFFFFF; color:#5C3A06; border:1px solid #C9A96B;   /* 10.18 : 1 */
}

/* 요금 안내 — 구독에 몇 종이 들어가는지 갈라 적은 문단 */
body.ws-legacy-pricing p.note-ext{
  margin:14px 0 0; padding:11px 14px;
  background:#FFF6E6; color:#2E3646;          /* 11.30 : 1 */
  border:1px solid #E4CBA0; border-radius:10px;
  font-size:13px; line-height:1.7;
}
body.ws-legacy-pricing p.note-ext b{ color:#3F2704; }

/* 활동지 낱장(ws/*.html) 의 외부 출간 고지 — 서점 링크를 함께 붙였다.
   .ext-notice 배경은 위쪽에서 #F7F9FC 로 고정돼 있다. 글자색을 그 배경에 맞춰 짝짓는다.
   실측 : .ext-must #1F2430 on #F7F9FC = 14.71 : 1
          .ext-badge · a.ext-buy  #FFFFFF on #7A4E0C = 7.19 : 1 */
body.ws-legacy-act .ext-notice .ext-badge{
  display:inline-block; margin:0 0 8px; padding:4px 10px;
  background:#7A4E0C; color:#FFFFFF;          /* 7.19 : 1 */
  border-radius:7px; font-size:11.5px; font-weight:700; line-height:1.5;
}
body.ws-legacy-act .ext-notice .ext-must{
  color:#1F2430; font-weight:700; margin:8px 0 4px;   /* 14.71 : 1 */
}
body.ws-legacy-act .ext-notice .ext-stores{
  display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 0;
}
body.ws-legacy-act .ext-notice a.ext-buy{
  display:inline-block; padding:6px 12px; border-radius:8px;
  background:#7A4E0C; color:#FFFFFF; border:1px solid #7A4E0C;   /* 7.19 : 1 */
  font-size:12px; font-weight:700; text-decoration:none;
}

/* 검색용 활동지(seo/ws/*.html) 의 외부 출간 고지 — 서점 링크를 함께 붙였다.
   실측 : .ext-must #1F2430 on #F7F9FC = 14.71 : 1
          .ext-badge · a.ext-buy #FFFFFF on #7A4E0C = 7.19 : 1 */
body.ws-legacy-seo .ext-notice .ext-badge{
  display:inline-block; margin:0 0 8px; padding:4px 10px;
  background:#7A4E0C; color:#FFFFFF;          /* 7.19 : 1 */
  border-radius:7px; font-size:11.5px; font-weight:700; line-height:1.5;
}
body.ws-legacy-seo .ext-notice .ext-must{
  color:#1F2430; font-weight:700; margin:8px 0 4px;   /* 14.71 : 1 */
}
body.ws-legacy-seo .ext-notice .ext-stores{
  display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 0;
}
body.ws-legacy-seo .ext-notice a.ext-buy{
  display:inline-block; padding:6px 12px; border-radius:8px;
  background:#7A4E0C; color:#FFFFFF; border:1px solid #7A4E0C;   /* 7.19 : 1 */
  font-size:12px; font-weight:700; text-decoration:none;
}