/* 판독 텍스트 층 — 원본 통이미지에 인쇄된 글자를 DOM 에 넣는다.

   🚨 2026-09-08 전면 교체. 종전 CSS 는 통이미지를 텍스트로 **재조판**하기 위한
      것이었고, 그 방식은 원본의 도표·차트·일러스트를 없애서 폐기됐다.
      지금은 **원본 이미지가 화면을 그대로 담당**하고, 이 텍스트는 스크린리더와
      AI 가 읽는 층이다.

   왜 화면에서 감추는가
     이미지가 이미 같은 내용을 보여주므로 텍스트를 같이 그리면 **모든 문구가 두 번**
     나온다 (대표 지적 실측 — /cat/body 에서 같은 문장이 텍스트와 이미지로 중복).
   🚨 감추는 텍스트는 **그 이미지에 실제로 인쇄된 문구와 동일**하다.
      이미지에 없는 문구를 넣으면 그 즉시 위장(cloaking)이 된다.
      접근성 표준의 시각적 대체 텍스트와 같은 성격이고, 그 선을 넘지 않는다.

   `display:none` 이나 `visibility:hidden` 을 쓰지 않는다 — 그러면 스크린리더도
   못 읽고 일부 크롤러가 무시한다. 표준 clip 기법을 쓴다. */

.sr-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: normal;
  border: 0;
}

/* 원본 통이미지는 원본 CSS(.cm_img)가 담당한다 — 우리가 건드리지 않는다. */

/* 게시판 페이저 터치 타깃 (QA.md B10) — 원본 .page_all 은 모바일 규격이 없었다.
   이건 우리가 붙인 페이저이므로 우리 소관이다. */
.page_all { display: flex; justify-content: center; align-items: center; gap: 6px;
            flex-wrap: wrap; }
.page_all .page, .page_all .btn_lf, .page_all .btn_rt {
  min-width: 36px; min-height: 36px; display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box;
  text-decoration: none;
}
.page_all .page { border: 1px solid #e0e0e0; border-radius: 6px; color: #333; }
.page_all .page.on { background: #af9148; border-color: #af9148; color: #fff; }
@media (max-width: 480px) {
  .page_all .page, .page_all .btn_lf, .page_all .btn_rt { min-width: 40px; min-height: 40px; }
}

/* ── 검수용 표시 스위치 ─────────────────────────────────────────────
   URL 에 `?tx=1` 을 붙이면 텍스트 층이 **눈에 보이게** 된다.
   왜 필요한가 — 이 층은 화면 크기가 0 이라 마우스로 드래그할 수 없다.
   그래서 「정말 텍스트인가」를 사람이 확인할 방법이 필요하다
   (대표 확인 2026-09-09 — Ctrl+F 로는 찾히는데 드래그가 안 된다).
   🚨 검수용이다. 평소에는 꺼져 있고 화면은 원본과 픽셀 단위로 같다. */
body.tx-show .sr-txt {
  position: static; width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none;
  border: 3px dashed #2058d8; background: #fffbe6;
  padding: 20px 24px; max-width: 1280px; margin: 24px auto;
  position: relative; z-index: 1;
  text-align: left; line-height: 1.7; color: #111;
}
body.tx-show .sr-txt::before {
  content: "검수용 표시 — 위 이미지에 인쇄된 글자를 텍스트로 넣은 것이다. 드래그·복사된다. (?tx=1 을 떼면 원본 그대로)";
  display: block; background: #2058d8; color: #fff;
  font-size: 14px; font-weight: 700; padding: 8px 12px; margin: -20px -24px 16px;
}
body.tx-show .sr-sec { border-top: 1px solid #e8dfae; padding: 14px 0; }
body.tx-show .sr-sec::before {
  content: "[" attr(data-kind) "]";
  display: inline-block; background: #af9148; color: #fff;
  font-size: 12px; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px;
}
body.tx-show .sr-txt h3 { font-size: 22px; font-weight: 700; margin: 6px 0; }
body.tx-show .sr-txt h4 { font-size: 18px; font-weight: 600; margin: 6px 0; }
body.tx-show .sr-txt p  { font-size: 16px; margin: 4px 0; }
body.tx-show .sr-txt ul { margin: 6px 0 6px 20px; list-style: disc; }
body.tx-show .sr-txt li { font-size: 16px; margin: 2px 0; }

/* ── 접기 버튼 방식 (`?fold=1`) ────────────────────────────────────
   왜 이 방식이 후보인가
     `.sr-txt` 로 감추면 화면은 원본과 완전히 같지만, 검색엔진이 「숨긴 텍스트」로
     볼 위험이 있다 (우리 텍스트가 이미지에 인쇄된 것과 같다는 걸 기계가 검증할
     방법이 없기 때문이다). 🚨 위험은 낮다고 보증할 수 없다.
     `<details>` 로 접으면 **접힌 콘텐츠는 숨김으로 취급되지 않는다** —
     쇼핑몰 상품 상세·뉴스 더보기와 같은 표준 패턴이다.
     화면엔 버튼 한 줄만 늘어난다. */
.tx-fold {
  max-width: 1280px;
  margin: 28px auto 0;
  text-align: left;
  border-top: 1px solid #e6e6e6;
}
.tx-fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 4px;
  font-size: 16px;
  color: #666;
  text-align: center;
  user-select: none;
}
.tx-fold > summary::-webkit-details-marker { display: none; }
.tx-fold > summary::after {
  content: " ⌄";
  color: #af9148;
  font-weight: 700;
}
.tx-fold[open] > summary::after { content: " ⌃"; }
.tx-fold > summary:hover { color: #af9148; }

/* 접기 안에서는 감추지 않는다 — 이게 이 방식의 요점이다 */
.tx-fold .sr-txt {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; clip-path: none;
  padding: 8px 4px 32px; color: #333; line-height: 1.8;
}
.tx-fold .sr-sec { padding: 18px 0; border-top: 1px solid #f0f0f0; }
.tx-fold .sr-sec:first-child { border-top: 0; }
.tx-fold .sr-txt h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: #111; }
.tx-fold .sr-txt h4 { font-size: 16px; font-weight: 600; margin: 10px 0 6px; color: #222; }
.tx-fold .sr-txt p  { font-size: 15px; margin: 4px 0; }
.tx-fold .sr-txt ul { margin: 6px 0 6px 20px; list-style: disc; }
.tx-fold .sr-txt li { font-size: 15px; margin: 3px 0; }

/* ── 조판 (typeset) — 글자 지운 이미지 위에 실텍스트를 그 자리에 앉힌다.
   🚨 이건 `.sr-txt`(숨김 텍스트)와 **다른 방식**이다. 여기 글자는 진짜로 보이는 글자다.
      드래그되고, 복사되고, 확대해도 안 깨지고, 검색엔진이 본문으로 읽는다.
   좌표는 전부 % 라서 폭이 줄면 글자도 같이 줄어든다 — 배치가 안 무너진다. */
/* 🚨 container-type 이 있어야 자식의 cqw 가 **이 요소의 폭**을 기준으로 잡힌다.
   빼면 뷰포트 기준으로 떨어져 글자 크기가 통째로 틀어진다. */
.ts-wrap{position:relative;width:100%;line-height:0;container-type:inline-size}
.ts-bg{display:block;width:100%;height:auto}
.ts-b{
  position:absolute;
  line-height:1.5;
  white-space:pre-wrap;      /* 정본 줄바꿈 유지 */
  word-break:break-word;
  /* 🚨 폰트는 원본 이미지를 만든 것과 같은 계열이어야 자리가 맞는다.
     원본은 Noto Sans SC 계열 — 본문 폰트 스택을 그대로 쓴다. */
  font-family:inherit;
  /* 클릭·드래그는 되게 두되, 배경 이미지 위라 선택 색이 튀지 않게 */
  -webkit-font-smoothing:antialiased;
}
/* 검수 스위치 — `?ts=box` 로 블록 테두리를 보여 자리를 눈으로 잡는다 */
body.ts-box .ts-b{outline:1px solid rgba(255,0,0,.55);background:rgba(255,255,0,.12)}

/* ── 본문 층 (`.cat-doc`) — 2026-09-09 ────────────────────────────────────
   위의 `.sr-txt` 는 **감추는** 층이었다. 이건 그 반대다 — 통이미지 뒤에 같은 내용을
   사용자가 그대로 읽는 중국어 문서로 놓는다. 감추는 기법(clip·opacity·화면밖)을
   하나도 쓰지 않으므로 위쪽 CSS 와 섞이지 않게 클래스를 따로 뒀다.
   지금은 /cat/body 한 페이지만 쓴다. 디자인 개편이 아니라서 기존 사이트의 폰트·
   포인트컬러(#af9148)를 그대로 쓰고 그림자·카드·애니메이션을 넣지 않았다.
   🚨 글줄 폭만 900px 로 잡았다. 이미지는 1280px 인데 그 폭으로 본문을 흘리면
      한 줄에 80자가 넘어가 읽히지 않는다. 대신 구분선은 이미지 폭에 맞춰 그어
      이미지와 이어지는 자리라는 게 보이게 했다. */
.cat-doc{margin-top:80px;padding-top:64px;border-top:1px solid #e6e6e6;text-align:left}
.cat-doc__title,.cat-doc__lead,.cat-doc__full{max-width:900px;margin-left:auto;margin-right:auto}
.cat-doc__title{font-size:30px;font-weight:700;line-height:1.45;color:#111;
                letter-spacing:0;margin:0 auto 26px}
.cat-doc p,.cat-doc li{letter-spacing:0;word-break:normal;overflow-wrap:break-word}
.cat-doc__lead p{font-size:16px;line-height:2;color:#333;margin:0 0 16px}
.cat-doc__toc{color:#777}

.cat-doc__full{margin-top:34px;border-top:1px solid #eee}
/* summary 는 「눌러서 펴는 줄」로 보여야 한다 — 모바일 터치 타깃 56px */
.cat-doc__summary{display:flex;align-items:center;justify-content:center;min-height:56px;
                  padding:0 16px;cursor:pointer;list-style:none;user-select:none;
                  font-size:17px;font-weight:700;color:#af9148;letter-spacing:0}
.cat-doc__summary::-webkit-details-marker{display:none}
.cat-doc__summary::after{content:"▾";margin-left:10px;font-size:14px}
.cat-doc__full[open] .cat-doc__summary::after{content:"▴"}
.cat-doc__summary:hover{color:#8d7434}

.cat-doc__body{padding:6px 0 24px}
.cat-doc__body h3{font-size:21px;font-weight:700;line-height:1.55;color:#111;
                  letter-spacing:0;margin:40px 0 12px}
.cat-doc__body h4{font-size:17px;font-weight:600;line-height:1.65;color:#222;
                  letter-spacing:0;margin:24px 0 8px}
.cat-doc__body p{font-size:16px;line-height:2;color:#333;margin:0 0 10px}
.cat-doc__body blockquote{margin:14px 0;padding:0 0 0 16px;border-left:3px solid #e2d9bd}
.cat-doc__body ul,.cat-doc__body ol{margin:12px 0 14px;padding-left:1.3em}
.cat-doc__body li{font-size:16px;line-height:1.9;color:#333;margin:0 0 8px}
.cat-doc__body ul li{list-style:disc}
.cat-doc__body ol li{list-style:decimal}
/* STEP·시각 같은 자체 표지가 있는 목록은 기호를 겹쳐 달지 않는다 */
.cat-doc__body ol.cat-doc__steps,.cat-doc__body ol.cat-doc__flow{padding-left:0}
.cat-doc__body ol.cat-doc__steps li,.cat-doc__body ol.cat-doc__flow li{list-style:none}
.cat-doc__no,.cat-doc__time{display:inline-block;min-width:74px;margin-right:10px;
                            font-weight:700;color:#af9148}
.cat-doc__eyebrow{font-size:14px;font-weight:700;color:#af9148;margin:38px 0 0}
.cat-doc__cols{font-size:14px;color:#888;margin:0 0 6px}
.cat-doc__vs{font-size:14px;font-weight:700;color:#999;margin:14px 0}
.cat-doc__note{font-size:14px;color:#777;line-height:1.8}

@media screen and (max-width:767px){
  .cat-doc{margin-top:50px;padding-top:44px}
  .cat-doc__title{font-size:23px;margin-bottom:20px}
  .cat-doc__body h3{font-size:19px;margin:32px 0 10px}
  .cat-doc__body h4{font-size:16px}
  .cat-doc__lead p,.cat-doc__body p,.cat-doc__body li{font-size:15px;line-height:1.95}
  .cat-doc__no,.cat-doc__time{min-width:0;margin-right:8px}
}