/* 글 조각 한 벌 — 모양 (2026-09-21 마스터 「표·인포그래픽을 모듈화해 다른 메뉴에서도 바로 불러 쓰게」)
   사용 설명 inc/ai/prompts/article/kit.txt · 허용 검사 T2W_Article_Kit::html() · 싣기 T2W_Article_Kit::enqueue().
   글이 어느 화면에 있든 .t2w-editorial 안이면 같은 모양. 게시판 화면의 옛 규칙(community.css .rp-text …)은 그 화면에서만 덧씌운다.
   요소 규칙은 body 로 한 칸 올려, 화면 쪽 일반 규칙(.rp-text p 등)에 지지 않게 한다. */
.t2w-editorial {
  --t2w-article-blue: #edf4fa;
  --t2w-article-sage: #eff5f0;
  --t2w-article-line: #dbe5ec;
  --t2w-article-ink: #263e53;
  --t2w-article-muted: var(--comm-muted, #6b7280);
  --t2w-article-best: #fff8e6;
  color: var(--comm-ink, #1f2937);
  overflow-wrap: anywhere;
}
body .t2w-editorial h2 { margin: var(--space-10) 0 var(--space-4); padding: 0; font-size: 24px; line-height: 1.5; font-weight: 700; letter-spacing: -.025em; color: var(--t2w-article-ink); }
body .t2w-editorial h3 { margin: var(--space-6) 0 var(--space-3); font-size: 20px; line-height: 1.5; }
body .t2w-editorial p { margin: 0 0 var(--space-5); font-size: 18px; line-height: 1.85; word-break: keep-all; }
body .t2w-editorial .t2w-article-lead { font-size: 20px; line-height: 1.8; color: var(--t2w-article-ink); }
.t2w-editorial a { color: var(--t2w-article-ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.t2w-editorial a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
body .t2w-editorial ul, body .t2w-editorial ol { margin: var(--space-4) 0 var(--space-6); padding-left: var(--space-6); }
body .t2w-editorial li { margin: 0 0 var(--space-3); padding-left: var(--space-1); font-size: 16px; line-height: 1.8; }

/* 핵심 수치 상자 */
.t2w-editorial .t2w-article-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; padding: var(--space-5); border: 1px solid var(--t2w-article-line); border-radius: 16px; background: linear-gradient(135deg, var(--t2w-article-blue), #fff); }
.t2w-editorial .t2w-article-facts > div { min-width: 0; }
.t2w-editorial .t2w-article-facts dt { margin: 0 0 var(--space-2); color: var(--t2w-article-muted); font-size: 15px; font-weight: 500; }
.t2w-editorial .t2w-article-facts dd { margin: 0; color: var(--t2w-article-ink); font-size: 22px; line-height: 1.5; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 주의 상자 · 차례 */
.t2w-editorial .t2w-article-note { margin: var(--space-6) 0; padding: var(--space-5); border-left: 3px solid var(--t2w-gg, #3f7d5a); border-radius: 0 16px 16px 0; background: var(--t2w-article-sage); }
body .t2w-editorial .t2w-article-note p:last-child { margin-bottom: 0; }
.t2w-editorial .t2w-article-steps > li { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-2); border-bottom: 1px solid var(--t2w-article-line); }
.t2w-editorial .t2w-article-steps > li::marker { font-weight: 700; color: var(--t2w-article-ink); }

/* 표 — 폰에서는 표만 옆으로 민다(페이지는 밀리지 않게, 아래 600px 규칙) */
.t2w-editorial table { width: 100%; margin: var(--space-5) 0; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
.t2w-editorial caption { text-align: left; font-weight: 700; padding-bottom: var(--space-3); color: var(--t2w-article-ink); }
.t2w-editorial th, .t2w-editorial td { padding: var(--space-3); border-bottom: 1px solid var(--t2w-article-line); text-align: left; vertical-align: top; }
.t2w-editorial th { background: var(--t2w-article-blue); color: var(--t2w-article-ink); }
.t2w-editorial th.num, .t2w-editorial td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t2w-editorial tr.is-best td { background: var(--t2w-article-best); font-weight: 700; }

/* 비교 막대 — 네이티브 <meter>, 이름 · 막대 · 값 세 칸 */
.t2w-editorial .t2w-article-bars { list-style: none; margin: var(--space-6) 0; padding: var(--space-5); background: var(--t2w-article-blue); border-radius: 12px; display: grid; gap: var(--space-4); }
body .t2w-editorial .t2w-article-bars li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin: 0; padding: 0; font-size: 16px; line-height: 1.5; }
.t2w-editorial .t2w-article-bars li > span { color: var(--t2w-article-ink); overflow-wrap: anywhere; }
.t2w-editorial .t2w-article-bars li > strong { color: var(--t2w-article-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t2w-editorial .t2w-article-bars meter { width: 100%; height: 12px; border: 0; border-radius: 99px; background: rgba(38, 62, 83, .12); -webkit-appearance: none; appearance: none; }
.t2w-editorial .t2w-article-bars meter::-webkit-meter-bar { background: rgba(38, 62, 83, .12); border: 0; border-radius: 99px; height: 12px; }
.t2w-editorial .t2w-article-bars meter::-webkit-meter-optimum-value,
.t2w-editorial .t2w-article-bars meter::-webkit-meter-suboptimum-value,
.t2w-editorial .t2w-article-bars meter::-webkit-meter-even-less-good-value { background: var(--t2w-article-ink); border-radius: 99px; }
.t2w-editorial .t2w-article-bars meter::-moz-meter-bar { background: var(--t2w-article-ink); border-radius: 99px; }

/* 사진(상품 사진 등 — 발행 도구가 넣는다) · 출처 */
.t2w-editorial .t2w-article-photo { margin: var(--space-4) 0 var(--space-6); padding: 0; }
.t2w-editorial .t2w-article-photo img { display: block; width: auto; max-width: 100%; max-height: 240px; height: auto; margin: 0 auto; border-radius: 12px; background: #fff; }
.t2w-editorial .t2w-article-photo figcaption { margin-top: 6px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--t2w-article-muted); }
.t2w-editorial img { max-width: 100%; height: auto; }
.t2w-editorial .t2w-article-sources { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--t2w-article-line); color: var(--t2w-article-muted); }
body .t2w-editorial .t2w-article-sources h2 { margin: 0 0 var(--space-3); font-size: 16px; }
body .t2w-editorial .t2w-article-sources p, body .t2w-editorial .t2w-article-sources li { font-size: 15px; }

@media (max-width: 768px) {
  body .t2w-editorial h2 { font-size: 22px; margin-top: var(--space-8); }
  body .t2w-editorial p, body .t2w-editorial .t2w-article-lead { font-size: 16px; }
  .t2w-editorial .t2w-article-facts dd { font-size: 20px; }
  .t2w-editorial table { font-size: 15px; }
}
@media (max-width: 600px) {
  .t2w-editorial table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 420px) {
  .t2w-editorial .t2w-article-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .t2w-editorial .t2w-article-note { padding: var(--space-4); }
  body .t2w-editorial .t2w-article-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .t2w-editorial .t2w-article-bars li > span { grid-column: 1 / -1; }
}

/* ── 추천·비교 글 조각 (2026-09-21 마스터 「구조화·가독성 · 사진은 큰 이미지 + 눌러서 크게」) — 발행 도구가 자료로 그린다 ── */
/* 사진 — 큰 사진 하나 + 작은 사진 줄, 누르면 크게 */
.t2w-editorial .t2w-article-gallery { margin: 0 0 var(--space-8); }
.t2w-editorial .t2w-article-gallery__main { display: block; border: 1px solid var(--t2w-article-line); border-radius: 16px; background: #fff; overflow: hidden; cursor: zoom-in; }
.t2w-editorial .t2w-article-gallery__main img { display: block; width: 100%; height: 320px; object-fit: contain; margin: 0; }
body .t2w-editorial .t2w-article-gallery__thumbs { display: flex; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0 0 var(--space-1); list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body .t2w-editorial .t2w-article-gallery__thumbs li { flex: 0 0 auto; margin: 0; padding: 0; }
.t2w-editorial .t2w-article-gallery__thumbs a { display: block; width: 64px; height: 64px; border: 2px solid var(--t2w-article-line); border-radius: 10px; background: #fff; overflow: hidden; }
.t2w-editorial .t2w-article-gallery__thumbs a[aria-current="true"] { border-color: var(--t2w-article-ink); }
.t2w-editorial .t2w-article-gallery__thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
body .t2w-editorial .t2w-article-gallery__caption { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.5; color: var(--t2w-article-muted); }

/* 골라 주는 글(순위 추천) — 선정 기준 · 한눈에 보기 · 항목 · 좋은 점/아쉬운 점 · 알아둘 것 */
body .t2w-editorial .t2w-article-criteria { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border-radius: 12px; background: #fffbeb; font-size: 15px; line-height: 1.6; color: var(--t2w-article-muted); }
.t2w-editorial .t2w-article-criteria strong { margin-right: var(--space-2); color: var(--t2w-article-ink); font-weight: 700; }
body .t2w-editorial .t2w-article-toc { margin: 0 0 var(--space-10); padding: 0; list-style: none; counter-reset: t2wtoc; border-top: 1px solid var(--t2w-article-line); }
body .t2w-editorial .t2w-article-toc > li { display: grid; grid-template-columns: 24px 44px minmax(0, 1fr); align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--t2w-article-line); counter-increment: t2wtoc; font-size: 16px; line-height: 1.45; }
.t2w-editorial .t2w-article-toc > li::before { content: counter(t2wtoc); font-size: 16px; font-weight: 700; color: var(--t2w-article-ink); text-align: center; }
.t2w-editorial .t2w-article-toc .t2w-article-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; }
.t2w-editorial .t2w-article-toc strong { display: block; font-weight: 600; color: var(--t2w-article-ink); }
.t2w-editorial .t2w-article-toc em { display: block; font-style: normal; font-size: 15px; color: var(--t2w-article-muted); }

.t2w-editorial .t2w-article-item { margin: var(--space-10) 0 0; padding: var(--space-8) 0 0; border-top: 1px solid var(--t2w-article-line); }
body .t2w-editorial .t2w-article-item h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: 22px; line-height: 1.4; }
.t2w-editorial .t2w-article-item__no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t2w-article-ink); color: #fff; font-size: 16px; font-weight: 700; }
.t2w-editorial .t2w-article-item__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.t2w-editorial a.t2w-article-zoom { display: block; border: 1px solid var(--t2w-article-line); border-radius: 16px; background: #fff; overflow: hidden; cursor: zoom-in; }
.t2w-editorial a.t2w-article-zoom img { display: block; width: 100%; height: 200px; object-fit: contain; }
body .t2w-editorial .t2w-article-item__hook { margin: 0 0 var(--space-3); font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--t2w-article-ink); }
body .t2w-editorial .t2w-article-item__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
body .t2w-editorial .t2w-article-item__facts li { margin: 0; padding: var(--space-2) var(--space-3); border-radius: 10px; background: #fffbeb; font-size: 13px; line-height: 1.4; color: var(--t2w-article-muted); }
.t2w-editorial .t2w-article-item__facts b { display: block; font-size: 16px; font-weight: 700; color: var(--t2w-article-ink); font-variant-numeric: tabular-nums; }
body .t2w-editorial .t2w-article-item__for { margin: 0; font-size: 16px; line-height: 1.6; }
.t2w-editorial .t2w-article-item__for strong { margin-right: var(--space-2); font-size: 15px; color: var(--t2w-gg, #3f7d5a); }
.t2w-editorial .t2w-article-item__pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 0; }
.t2w-editorial .t2w-article-item__pc > div { padding: var(--space-4); border-radius: 12px; background: #f2f7f3; }
.t2w-editorial .t2w-article-item__pc > .t2w-article-item__con { background: #faf5f1; }
body .t2w-editorial .t2w-article-item__pc h3 { margin: 0 0 var(--space-2); font-size: 15px; font-weight: 700; color: var(--t2w-article-ink); }
body .t2w-editorial .t2w-article-item__pc ul { margin: 0; padding: 0; list-style: none; }
body .t2w-editorial .t2w-article-item__pc li { position: relative; margin: 0 0 var(--space-1); padding-left: 16px; font-size: 15px; line-height: 1.6; }
.t2w-editorial .t2w-article-item__pc li::before { content: "+"; position: absolute; left: 0; font-weight: 700; color: var(--t2w-gg, #3f7d5a); }
.t2w-editorial .t2w-article-item__pc .t2w-article-item__con li::before { content: "−"; color: #b0643c; }

body .t2w-editorial .t2w-article-tips { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; }
.t2w-editorial .t2w-article-tips > div { padding: 0 0 var(--space-4); border-bottom: 1px solid var(--t2w-article-line); }
body .t2w-editorial .t2w-article-tips dt { margin: 0 0 var(--space-1); font-size: 16px; font-weight: 700; color: var(--t2w-article-ink); }
body .t2w-editorial .t2w-article-tips dd { margin: 0; font-size: 16px; line-height: 1.7; }
.t2w-article--pick > h2 { margin-top: var(--space-10); }

/* 표 안 작은 사진 */
.t2w-editorial td .t2w-article-thumb { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; }
.t2w-editorial .t2w-article-product__row { display: flex; align-items: center; gap: var(--space-2); }
.t2w-editorial td.t2w-article-product { min-width: 12em; }

/* 크게 보기 */
.t2w-article-lightbox { max-width: min(92vw, 900px); max-height: 92vh; padding: 0; border: 0; border-radius: 16px; background: #fff; }
.t2w-article-lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.t2w-article-lightbox img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; object-fit: contain; }
.t2w-article-lightbox p { margin: 0; padding: var(--space-3) var(--space-4); font-size: 15px; color: #555; }
.t2w-article-lightbox button { position: absolute; top: var(--space-2); right: var(--space-2); min-width: 44px; min-height: 44px; border: 0; border-radius: 22px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 22px; cursor: pointer; }

@media (max-width: 768px) {
  .t2w-editorial .t2w-article-item__body { grid-template-columns: minmax(0, 1fr); }
  .t2w-editorial a.t2w-article-zoom img { height: 220px; }
  .t2w-editorial .t2w-article-item__pc { grid-template-columns: minmax(0, 1fr); }
  body .t2w-editorial .t2w-article-item h2 { font-size: 20px; }
  .t2w-editorial .t2w-article-gallery__main img { height: 240px; }
}

/* 브랜드 한눈에 — 이름 · 한두 문장 */
body .t2w-editorial .t2w-article-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.t2w-editorial .t2w-article-brands > div { padding: var(--space-4); border: 1px solid var(--t2w-article-line); border-radius: 12px; }
body .t2w-editorial .t2w-article-brands dt { margin: 0 0 var(--space-1); font-size: 16px; font-weight: 700; color: var(--t2w-article-ink); }
body .t2w-editorial .t2w-article-brands dd { margin: 0; font-size: 15px; line-height: 1.65; }
body .t2w-article--pick h3 { margin: var(--space-5) 0 var(--space-2); font-size: 16px; font-weight: 700; color: var(--t2w-article-ink); }
@media (max-width: 768px) { body .t2w-editorial .t2w-article-brands { grid-template-columns: minmax(0, 1fr); } }
.t2w-editorial .t2w-article-brands dt span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--t2w-article-muted); }
.t2w-editorial .t2w-article-brands dd em { display: block; margin-top: var(--space-1); font-style: normal; font-size: 15px; color: var(--t2w-article-muted); }
body .t2w-editorial .t2w-article-brands__src { margin: var(--space-2) 0 0; font-size: 13px; color: var(--t2w-article-muted); }
body .t2w-editorial .t2w-article-item__trend { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.6; color: var(--t2w-article-muted); }
.t2w-editorial .t2w-article-item__trend strong { margin-right: var(--space-2); font-size: 15px; color: var(--t2w-article-ink); }
body .t2w-editorial .t2w-article-item__watch { margin: var(--space-3) 0 0; }
.t2w-editorial a.t2w-article-watch { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--t2w-article-line); border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--t2w-article-ink); background: #fff; }
.t2w-editorial a.t2w-article-watch::before { content: "♡"; font-size: 16px; }
.t2w-editorial a.t2w-article-watch:hover { border-color: var(--t2w-article-ink); }
body .t2w-editorial .t2w-article-item__rep { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.6; }
.t2w-editorial .t2w-article-item__rep strong { margin-right: var(--space-2); font-size: 15px; color: var(--t2w-article-ink); }
.t2w-editorial .t2w-article-item__rep span { font-size: 13px; color: var(--t2w-article-muted); }

/* 추천·비교 글 v2 — 이야기 순서(2026-09-22): 핵심 발견 상자 · 상황 이름 · 한글 이름 아래 원래 이름 · 왜 이것인지 문장 */
body .t2w-editorial .t2w-article-angle { margin: 0 0 var(--space-6); }
.t2w-editorial .t2w-article-angle strong { display: block; margin: 0 0 var(--space-1); font-size: 15px; color: var(--t2w-gg, #3f7d5a); }
.t2w-editorial .t2w-article-toc em { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--t2w-gg, #3f7d5a); }
body .t2w-editorial .t2w-article-item__badge { display: inline-block; margin: 0 0 var(--space-2); padding: 2px var(--space-3); border-radius: 99px; background: #eaf3ec; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--t2w-gg, #3f7d5a); }
body .t2w-editorial .t2w-article-item h2 + .t2w-article-item__en { margin: calc(-1 * var(--space-3)) 0 var(--space-4); font-size: 15px; line-height: 1.5; color: var(--t2w-article-muted); overflow-wrap: anywhere; }
body .t2w-editorial .t2w-article-item__why { margin: 0 0 var(--space-3); font-size: 16px; line-height: 1.7; color: var(--t2w-article-ink); }

/* 「할인하면 알림 받기」 옆 설명 (2026-09-22 마스터 「버튼이 무엇인지 설명 — 데스크탑은 ! 에 마우스, 모바일·태블릿은?」)
   마우스가 있는 화면: 「!」에 올리거나 키보드로 가면 풍선이 뜬다. 손가락 화면(폰·태블릿): 「!」를 누르면 열리고 다시 누르거나 바깥을 누르면 닫힌다.
   풍선은 버튼 바로 아래에 붙여 화면 밖으로 나가지 않게 폭을 줄인다. 버튼은 js/article-kit.js 가 링크 옆에 붙인다. */
body .t2w-editorial .t2w-article-item__watch { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.t2w-editorial .t2w-article-help { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--t2w-article-line); border-radius: 50%; background: #fff; font-size: 15px; font-weight: 700; line-height: 1; color: var(--t2w-article-muted); cursor: help; }
.t2w-editorial .t2w-article-help:focus-visible { outline: 2px solid var(--t2w-article-ink); outline-offset: 2px; }
.t2w-editorial .t2w-article-help__tip { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: min(300px, 100%); padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--t2w-article-ink); color: #fff; font-size: 15px; font-weight: 400; line-height: 1.6; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); visibility: hidden; opacity: 0; transition: opacity .15s; }
.t2w-editorial .t2w-article-help[aria-expanded="true"] + .t2w-article-help__tip { visibility: visible; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .t2w-editorial .t2w-article-help:hover + .t2w-article-help__tip,
  .t2w-editorial .t2w-article-help:focus-visible + .t2w-article-help__tip { visibility: visible; opacity: 1; }
  .t2w-editorial .t2w-article-help:hover { color: var(--t2w-article-ink); border-color: var(--t2w-article-ink); }
}
@media (hover: none), (pointer: coarse) {
  .t2w-editorial .t2w-article-help { width: 36px; height: 36px; } /* 손가락으로 누르기 쉬운 크기 */
}