@charset "UTF-8";

/******************** site value *************************/
.header .logo-default {max-width: 300px; min-width: 88px; max-height: 69px; width: 120px;}
@media screen and (max-width: 840px) {
	.header .logo-default {width: 136px;}
}
.footer .logo-default {max-width: 180px; min-height: 50px;}
.pagenation a.current, .pagenation .current.current {color: #3b5a40; border-color: #3b5a40;}
/* .news-view/.post-from/.comment-box/ul.footer_link/.author-name/.author-link
   rules removed — all targeted the pre-redesign single.php article body,
   comment form, and policy-page tab nav, none of which any current
   template outputs anymore (single.php, page.php, 404.php were all
   rewritten with the rt- design system). Confirmed 0 matches across every
   .php file before removing, rather than leaving them to keep fighting the
   new design silently the way css/page.css and the nav-underline
   duplicates did earlier in this project. */
/* .gnb-wrap .menu li:hover/:checked/.current-menu-item/.current-post-parent
   nav-underline rules removed — this was the *other* copy of the old
   green nav-hover/active styling that kept fighting the site's new
   1px-accent nav treatment (css/retroactive-custom.css), on top of the
   copy already in the merged root style.css. Both are gone now instead of
   layering another override on top. */
/******************** site value end *************************/

/* header ad — .news-view-wrap/.pc-post-ad-header both confirmed unused,
   old ad module removed along with the rest of the pre-redesign layout */

/* sidebar ad */
.news-view-wrap, .category .content-body {justify-content: center;}
@media screen and (max-width: 840px) {
	.pc-post-ad-left-wrap, .pc-post-ad-right-wrap {display: none;}
}

/* old "container fix + article width fix" (.container{width:1102px} /
   .left-696) removed — .left-696 belonged to the old sidebar-ad article
   layout single.php no longer uses, and the 1102px container width was
   yet another competitor to the site's real .container width (1250px,
   in retroactive-custom.css). */

/* Sticky below img ad */
#below-img {position: sticky; top: 0; background: #fff; z-index: 999;}

/* for AMP */
body.amp-mode-touch {padding-bottom: 0 !important;}
body.amp-mode-touch .comment-wrap+article.ad-video {display: none;}
body.amp-mode-touch .btn-group {display: none;}

/* bottom floating ad close-btn — 플로팅 광고 블록 자체를 footer.php에서
   삭제했으므로 관련 규칙 제거 */

/* 댓글모듈 */
.comments-rank-wrap {width: 100%; margin-bottom: 20px; margin-top: 10px;}
.right-sticky-wrap .comments-rank-wrap {margin-bottom: 40px;}
.comments-rank-wrap h2 {font-size: 20px; border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.comments-rank {margin-top: 10px;}
.comments-rank ul li {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; margin-bottom: 4px;}
.comments-rank ul li span.rank-num {font-size: 21px; font-weight: bold; color: red; margin-right: 8px; line-height: 1;}
.comments-rank ul li a.title {
  font-size: 16px;
  /* font-weight: bold; */
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 89%;
  margin-right: 5px;
}
.comments-rank ul li .comments-count-box {background-image: url("https://static.viewus.co.kr/image/bubble.png"); background-repeat: no-repeat; background-position: center; background-size: contain; display: block; width: 33px; height: 26px; position: relative; display: flex; justify-content: center; align-items: center;}
.comments-rank ul li .comments-count-box strong.comments-count {font-size: 12px; font-weight: bold; color: red; position: absolute; top: 2px;}

/* for AdSense Theme */
.ad-twin-space > div.ad {display: none;}
.ad-twin-space {display: block;}
.pc-var article.ad480 {width: auto; height: auto;}
@media screen and (max-width: 840px) {
	.news-view-wrap {margin-top: 0;}
}

/* 기사 하단 author info 영역 개선 — 전체 블록 삭제: single.php 재설계로
   구 author-bio 박스(.author-wrap/.author-info/.author-img/.author-link/
   .author-mail)가 더 이상 출력되지 않아 전부 미사용 확인 후 제거 */

/******************** UI fix css START *************************/

/* 검색결과 없을 때 하단 모듈 제거 */
.search-no-results .mobile-ad-box {display: none;}

/* 하단 bnb 여백 조정 */
@media screen and (max-width: 840px) {
	.news-view-wrap {margin-bottom: 30px;}
	.footer {bottom: unset;}
}

/* 금주 베스트 인기글 하단 여백 조정 */
.weekly-best {margin-bottom: 30px !important;}
@media screen and (max-width: 840px) {
	.weekly-best {margin-bottom: 20px !important;}
}
.weekly-best ul.swiper-slide > li:nth-child(5), .weekly-best ul.swiper-slide > li:nth-child(6) {margin-bottom: 0;}

/* 하단모듈 여백 조정 */
@media screen and (max-width: 840px) {
	.news-view-m-bt article {margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}
	article.ad-m-post-bottom-01 {margin: 20px auto;}
	article.ad-m-post-bottom-02 {}
	article.ad-m-post-bottom-03 {margin-bottom: 20px;}
	article.ad-m-post-bottom-04 {}
	article.ad-m-post-bottom-05 {margin-bottom: 20px; margin-top: 20px;}
	article.news-rank {margin-bottom: 20px; margin-top: 5px;}
	article.taboola {margin-bottom: 10px;}
}

/* 제목이 짧은 post가 모듈에 노출 될 때 정렬 수정 */
.news-rank li > div {justify-content: flex-start;}

/* 사이드바 동작 오류 해결 */
.right-sticky-wrap {position: sticky; display: flex; bottom: 0.1rem; top: 20px;}
.right-ad-event {position: sticky; bottom: 0.1rem; top: unset; align-self: flex-end;}
@media screen and (max-width: 840px) {
	.right-sticky-wrap {display: none !important;}
	.right-ad-event {display: none !important;}
}

/* 모바일 헤더 검색버튼 위치 수정 */
@media screen and (max-width: 840px) {
	.header .search-wrap .icon-btn i {top: 12px;}
}

/* 회사소개 스톡이미지 사이즈 고정 (데스크탑 600px 고정폭 룰 삭제 — 요청에 따라 제거) */
@media screen and (max-width: 840px) {
	.about-us-featured-img img {width: 100%;}
}

/* 페이지 하단 gnb의 p tag 마진 제거 */
body.policy p.title-txt {margin-bottom: 0;}

/* 푸터로고 사이즈가 비율과 상관없이 노출, 정렬되도록 변경 */
.footer .logo-default {display: flex; align-items: center;}
.footer .logo-default > img {object-fit: contain;}
@media screen and (max-width: 840px) {
	.footer .logo-default {height: 30px;}
}

/* 뷰어스 ad 모듈의 썸네일 이미지 높이값 고정 */
.weekly-best .swiper-wrapper li img {height: 105px;}

/* 메인페이지에서 썸네일 마우스오버시 효과 삭제 */
.card-type1 a:hover ~ .img-box img {scale: none;}

/* 로고파일이 svg일때 높이값 고정 */
.logo-default > a > img {height: auto;}

/* 기사뷰 제목하단 작성자,날짜,조회수 영역의 폰트크기, 여백, 컬러 통일 */
div.line-txt-box > p > span.from, div.line-txt-box > p > time.time, div.line-txt-box > p > span.hit {line-height: 12px; font-size: 12px;}
.title-box .line-txt-box p > * {margin-left: 1px;}

/* 모바일 기사 하단 광고 wrapper 중 height 고정인 요소 수정 */
.ad-video {height: auto;}

/* 카테고리가 많을 때 gnb 폰트 사이즈 조정 — 삭제: css/retroactive-custom.css의
   .gnb-wrap .menu li a 규칙(이제 이 파일 하단에 병합됨)과 충돌하던 중복 규칙 */

/* 모바일 gnb 특수문자 포함될경우 줄바꿈 방지 */
@media screen and (max-width: 840px) {
	.header .gnb-wrap li {white-space: nowrap; display: flex; height: 32px; align-items: center; padding-bottom: 1px;}
}

/* 모바일 gnb 왼쪽 정렬 (1st 카테고리부터 노출되게끔) */
@media screen and (max-width: 840px) {
  .header .gnb-wrap ul {
    justify-content: space-between; /* 기존값 */
    align-items: center; /* 기존값 */
    padding: 0 20px; /* 신규 추가 */
  }
  /* .gnb-wrap .menu li:first-child의 모바일 margin-left:0 리셋은 여기
     두면 안 먹힘 — 데스크탑용 margin-left:75px !important 규칙이 이 파일
     더 아래(현재 "헤더 폴리시" 섹션)에 있어서, 조건 없는 그 규칙이 소스
     순서상 나중에 와 동일 특정성(!important 대 !important)에서 이겨버림.
     그래서 그 규칙 바로 다음으로 옮김 — 아래 검색 키워드로 찾을 것:
     "모바일에서는 좌우 정렬만 어긋나게 만들어서 제거" */
}

/* section.category에 적용되어야 할 내용이 body.category에도 적용 됨 */
body.category {padding-top: 0;}

/* gnb의 상단 여백 제거 */
@media screen and (max-width: 840px) {
	.header .gnb-wrap {padding-top: 0px;}
}

/* 모바일 gnb 우측 여백 제거 */
@media screen and (max-width: 840px) {
	.gnb-wrap .menu li:last-child {margin-right: 18px; padding-right: 0 !important;}
}

/* home에서 title 강제 제거 */
body.home h1 {display: none;}

/* 본문이미지 100% in Mobile */
@media screen and (max-width: 840px) {
	body {overflow-x: hidden;}
	body.single-post div.news-article table {width: 100%;}
	body.single-post div.news-article img:not(.portrait):not(.comments-area img):not(.widget img) {width: calc(100% + 36px); margin-left: -18px !important; margin-right: -18px !important; max-width: none !important;}
}

/* 보고 있는 글의 카테고리 스타일 강조 */
/* .current-post-parent::before base positioning removed along with the
   color/background copy above — content:none in retroactive-custom.css
   now covers current-post-parent too, so there's nothing left to position. */

/* 모든 검색 페이지에서 하단 모듈 제거 */
.search .mobile-ad-box {display: none;}

/* video 태그 (연합뉴스TV) — body.single-post .news-article video 규칙 삭제:
   .news-article는 구 single.php 본문 클래스로 현재 미사용 확인 */

/* PC 버전 로딩시 본문이미지 확대 문제 — body.single-post article.news-view img
   규칙 삭제: .news-view도 구 single.php 클래스로 현재 미사용 확인 */

/* 푸터로고크기 */
@media screen and (max-width: 767px) {
	.footer .logo-default {width: 150px; height: 46px;}
}

/* footer nav — .bnb 마크업이 어떤 템플릿에도 없어 죽은 코드였음, 삭제 */
/************************* UI fix css END *************************/

/* =====================================================================
   Retroactive — Engadget-style redesign layer (merged in from
   css/retroactive-custom.css, which was emptied and then deleted outright
   once nothing else referenced it — see header.php for the removed <link>
   tag). Loaded last in this same file so these rules still win the
   cascade over everything above, exactly as when it was a separate
   stylesheet.
   Reference: https://www.engadget.com/
   ===================================================================== */

:root {
  --rt-headline: #0e0811;
  --rt-text: #2d2c2e;
  --rt-gray: #6e6d70;
  --rt-border: #e0dfe0;
  --rt-tag-bg: #2d2c2e;
  --rt-white: #fff;
  /* accent for hover states — a muted brick red rather than a flat #f00 */
  --rt-accent: #b3402c;
  /* System-font stack on purpose: no external font request means no
     dependency on Google Fonts being reachable (ad-blockers / regional
     firewalls / CSPs commonly block fonts.googleapis.com, which is why
     the previous version silently fell back to a serif/default font). */
  --rt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {font-family: var(--rt-font) !important; color: var(--rt-text); background: var(--rt-white);}

/* ---- page width + centering -------------------------------------------- */
/* Engadget's own content column is ~1250px, not the base theme's 1068px.
   The base .container also relies on a flex parent (like .header) to
   center it; our new sections aren't flex parents, so force both here. */
.container {width: 1250px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;}

/* ---- header polish ------------------------------------------------------ */
.header {margin-bottom: 0 !important;}
.gnb-wrap .menu li a {font-weight: 400; font-size: 1.8rem;}
.gnb-wrap .menu li:first-child {margin-left: 75px !important;}
/* 모바일에서는 좌우 정렬만 어긋나게 만들어서 제거 — 위 규칙(조건 없음, 항상
   적용)보다 소스 순서상 반드시 뒤에 있어야 이긴다. 이전에 이 리셋을 파일
   위쪽(모바일 gnb 정렬 섹션)에 뒀더니, 조건 없는 위 규칙이 더 나중에 나와서
   동일 특정성(!important 대 !important)에서 이겨버렸었다. */
@media screen and (max-width: 840px) {
  .gnb-wrap .menu li:first-child {
    margin-left: 0 !important;
  }
}
/* Hover: text stays near-black, plus a thin 1px accent underline.
   Selectors are doubled up with #gnb (the nav's own container_id from
   header.php) so these always out-specificity anything in the base
   theme's merged stylesheet, regardless of what selector it used. */
#gnb .menu li:hover a, .gnb-wrap .menu li:hover a {color: var(--rt-headline) !important;}
#gnb .menu li:hover::before, .gnb-wrap .menu li:hover::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  /* sit right at the bottom edge of the link's own box (the base theme's
     -20px offset pushed this well past the link's 20px bottom padding,
     landing ~40px below the text — Engadget's sits right under the text) */
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--rt-accent) !important;
}
/* Active/current: just the accent-color text, no underline — the base
   theme's old 3px green bar is overridden away with content:none.
   IMPORTANT: WordPress only puts "current-menu-item" on a menu item when
   you're on that item's *own* page (e.g. the category archive itself). A
   single POST inside that category instead gets "current-menu-parent" /
   "current-menu-ancestor" — a different class this rule didn't cover
   before, which is why the line kept "coming back" on article pages even
   after being removed on the category page. There's also a fourth class,
   "current-post-parent", covered here too. All four are handled in one
   place instead of patched piecemeal. */
#gnb .menu li.current-menu-item a, #gnb .menu li.current-menu-parent a, #gnb .menu li.current-menu-ancestor a, #gnb .menu li.current-post-parent a, #gnb .menu li:checked a, .gnb-wrap .menu li.current-menu-item a, .gnb-wrap .menu li.current-menu-parent a, .gnb-wrap .menu li.current-menu-ancestor a, .gnb-wrap .menu li.current-post-parent a, .gnb-wrap .menu li:checked a {color: var(--rt-accent) !important;}
#gnb .menu li.current-menu-item::before, #gnb .menu li.current-menu-parent::before, #gnb .menu li.current-menu-ancestor::before, #gnb .menu li.current-post-parent::before, #gnb .menu li:checked::before, .gnb-wrap .menu li.current-menu-item::before, .gnb-wrap .menu li.current-menu-parent::before, .gnb-wrap .menu li.current-menu-ancestor::before, .gnb-wrap .menu li.current-post-parent::before, .gnb-wrap .menu li:checked::before {content: none !important; display: none !important;}
/* Engadget's header has no visible search box */
.header .search-wrap {display: none !important;}
/* Base theme's `.category { display:flex; justify-content:center; }` rule
   was written for the OLD sidebar+content layout, but WordPress's
   body_class() stamps "category" straight onto <body> on every category
   archive page — so on our new sidebar-less archive.php it was flexing the
   WHOLE <body>, laying <header> and <main> out as flex row siblings
   instead of stacked, which is what broke the category page layout. */
body.category {display: block !important; padding-top: 0 !important;}

/* ---- shared card component -------------------------------------------- */
.rt-thumb {position: relative; display: block; overflow: hidden; background: #f2f1f2; border-radius: 12px;}
.rt-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.rt-tag {position: absolute; top: 16px; left: 0; background: var(--rt-tag-bg); color: var(--rt-white); font-size: 1.3rem; font-weight: 500; line-height: 1; padding: 7px 14px 7px 10px; border: 2px solid var(--rt-white); border-left: none; border-radius: 0 448px 448px 0; white-space: nowrap; transition: background-color 0.15s ease;}
/* accent hover, à la Engadget's category-label hover treatment */
.rt-thumb:hover .rt-tag {background: var(--rt-accent);}
.rt-card-body {padding-top: 14px;}
.rt-title {
  font-family: var(--rt-font);
  font-weight: 700;
  color: var(--rt-headline);
  line-height: 1.3;
  /* reset: base theme's bare `h2 { ... border-bottom: 2px solid #000 }`
     rule otherwise leaks onto the hero title, which uses an <h2> tag */
  width: auto;
  padding-bottom: 0;
  border-bottom: none;
  margin: 0 0 8px;
}
.rt-title a {color: inherit; text-decoration: none;}
.rt-title a:hover {text-decoration: underline; text-decoration-color: var(--rt-accent); text-decoration-thickness: 1px; text-underline-offset: 3px;}
.rt-byline {font-size: 1.3rem; color: var(--rt-gray); margin: 0 0 6px;}
.rt-dot {margin: 0 2px;}
.rt-dek {font-size: 1.4rem; color: var(--rt-text); line-height: 1.5; margin: 0 0 10px;}
.rt-readmore {display: inline-block; font-size: 1.3rem; font-weight: 500; color: var(--rt-headline);}
.rt-readmore .rt-arrow {font-style: normal; font-size: 1rem; margin-left: 4px;}

/* ---- hero section ------------------------------------------------------ */
.rt-hero {display: flex; gap: 28px; padding: 24px 0 40px;}
.rt-hero-lead {flex: 0 0 58%; max-width: 58%;}
/* Fixed pixel heights (rather than aspect-ratio) so every thumbnail in a
   row is the exact same box regardless of the source image's own
   dimensions — WP resolves our requested crop sizes to the *nearest*
   registered size, so raw <img> dimensions vary post to post. */
/* aspect-ratio instead of a fixed height — matches Engadget's own hero/
   secondary/more-stories images, which are all 16:9 via aspect-ratio
   rather than a hard-coded px height, so the crop stays proportional
   instead of getting relatively taller/squarer as the column narrows. */
.rt-hero-lead .rt-thumb {
  /* height: 430px; */
  aspect-ratio: 16 / 9;
}
.rt-hero-lead .rt-title {font-size: 3rem;}
.rt-hero-lead .rt-dek {font-size: 1.6rem;}
.rt-hero-grid {flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0;}
/* divider lines between the 2x2 cards, Engadget-style (hard-coded
   nth-child positions since this grid is always exactly 4 items).
   These are short, inset floating segments — not edge-to-edge rules —
   so they sit only alongside the text (never across the thumbnail) and
   don't touch the card's own left/right/top corners. */
.rt-hero-grid .rt-card:nth-child(1) {padding: 0 24px 24px 0;}
.rt-hero-grid .rt-card:nth-child(2) {padding: 0 0 24px 24px;}
.rt-hero-grid .rt-card:nth-child(3) {padding: 24px 24px 0 0;}
.rt-hero-grid .rt-card:nth-child(4) {padding: 24px 0 0 24px;}
.rt-hero-grid .rt-card {display: flex; flex-direction: column; height: 100%;}
.rt-hero-grid .rt-card-body {position: relative; flex: 1; display: flex; flex-direction: column;}
/* vertical divider, col 1 -> col 2 */
.rt-hero-grid .rt-card:nth-child(1) .rt-card-body::before, .rt-hero-grid .rt-card:nth-child(3) .rt-card-body::before {content: ""; position: absolute; top: 8px; bottom: 16px; right: -24px; width: 1px; background: var(--rt-border);}
/* horizontal divider, row 1 -> row 2 */
.rt-hero-grid .rt-card:nth-child(1) .rt-card-body::after, .rt-hero-grid .rt-card:nth-child(2) .rt-card-body::after {content: ""; position: absolute; left: 16px; right: 16px; bottom: -24px; height: 1px; background: var(--rt-border);}
.rt-hero-grid .rt-thumb {
  /* landscape crop (not square) to match Engadget's proportions */
  height: 140px;
  flex-shrink: 0;
}
.rt-hero-grid .rt-title {font-size: 1.7rem;}
.rt-hero-grid .rt-byline {margin-bottom: 0;}

/* ---- "More Stories" heading -------------------------------------------- */
.rt-more {padding-top: 30px; padding-bottom: 20px;}
.rt-section-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: center;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--rt-headline);
  margin: 0 0 32px;
  /* reset: base theme's bare `h2 { ... border-bottom: 2px solid #000 }`
     rule otherwise draws a thick black line under this heading too */
  width: auto;
  padding-bottom: 0;
  border-bottom: none;
}
/* thin gray lines flanking the text, no line above/below the block itself */
.rt-section-heading::before, .rt-section-heading::after {content: ""; flex: 1; height: 1px; background: var(--rt-border);}
.rt-loadmore-wrap {margin-top: 40px;}

/* ---- 3-column grid ------------------------------------------------------ */
.rt-grid-3 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;}
/* divider lines between columns (by column position, 1st/2nd/3rd of 3).
   Short, inset floating segments — not edge-to-edge — so they run
   alongside the text only (never across the thumbnail) and don't touch
   the card's own left/right/top corners. */
.rt-grid-3 .rt-card:nth-child(3n+1) {padding-right: 32px;}
.rt-grid-3 .rt-card:nth-child(3n+2) {padding-left: 32px; padding-right: 32px;}
.rt-grid-3 .rt-card:nth-child(3n) {padding-left: 32px;}
.rt-grid-3 .rt-card-body {position: relative;}
.rt-grid-3 .rt-card:nth-child(3n+1) .rt-card-body::before, .rt-grid-3 .rt-card:nth-child(3n+2) .rt-card-body::before {content: ""; position: absolute; top: 8px; bottom: 16px; right: -32px; width: 1px; background: var(--rt-border);}
/* divider lines between rows. Batch sizes aren't always a clean multiple of
   3 (category pages now load 4 initially, then 6 per scroll), so "last row"
   can't be found with nth-child math alone — rt-has-row-below/-above are
   set in JS (rtRefreshGridRowClasses in ajax.js) by grouping cards on their
   actual rendered offsetTop after every render/append/resize. */
.rt-grid-3 .rt-card.rt-has-row-below {padding-bottom: 36px;}
.rt-grid-3 .rt-card.rt-has-row-above {padding-top: 36px;}
.rt-grid-3 .rt-card.rt-has-row-below .rt-card-body::after {content: ""; position: absolute; left: 16px; right: 16px; bottom: -36px; height: 1px; background: var(--rt-border);}
.rt-grid-3 .rt-card {display: flex; flex-direction: column; height: 100%;}
.rt-grid-3 .rt-thumb {height: 220px; flex-shrink: 0;}
.rt-grid-3 .rt-title {font-size: 1.8rem;}
.rt-grid-3 .rt-card-body {flex: 1; display: flex; flex-direction: column;}
.rt-grid-3 .rt-readmore {align-self: flex-end; margin-top: auto;}

/* ---- category archive (no sidebar, reuses the "More Stories" grid) ----- */
.rt-cat-page {padding: 40px 0 60px;}
/* Engadget-style: bigger bold title with thin gray lines flanking it on
   either side (like .rt-section-heading), no bar underneath the text — the
   old single bottom rule is gone. */
.rt-cat-title {display: flex; align-items: center; gap: 24px; text-align: center; font-size: 4.8rem; font-weight: 800; color: var(--rt-headline); margin: 0 0 36px; padding-bottom: 0; border-bottom: none; width: auto;}
.rt-cat-title::before, .rt-cat-title::after {content: ""; flex: 1; height: 1px; background: var(--rt-border);}
.rt-infinite-loader {text-align: center; padding: 28px 0; font-size: 1.4rem; color: var(--rt-gray);}

/* ---- single article (Engadget-style, no sidebar/ad slots) --------------- */
/* Engadget's article page is a single narrow reading column (not the
   1250px grid width used on the homepage/category pages) — scoped override
   beats the generic .container rule for every section on this template. */
.rt-article-page .container {width: 800px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;}
.rt-article-page {padding: 40px 0 60px;}
/* Engadget keeps a sticky right rail alongside the article body (mostly ad
   space there — we don't have real ad inventory, so it shows a genuine
   "Trending" list instead of an empty placeholder). Sized separately from
   .container above: 800px (article) + 48px gap + 300px (sidebar) ≈ 1160px. */
/* No unconditional left/right padding here — that pushed the article column
   in from the edge relative to the header's own .container, which only
   gains side padding below 1250px (see the @media (max-width: 1250px) rule
   near the bottom of this file). Matched the same behavior here instead of
   hard-coding it. */
.rt-article-layout {width: 1250px; max-width: 100%; margin: 0 auto; box-sizing: border-box; display: flex; align-items: flex-start; gap: 48px;}
.rt-article {flex: 1; min-width: 0;}
.rt-article-sidebar {width: 300px; flex-shrink: 0; position: sticky; top: 32px;}
.rt-sidebar-heading {font-size: 1.6rem; font-weight: 700; color: var(--rt-headline); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--rt-headline); width: auto;}
.rt-sidebar-list {list-style: none; margin: 0; padding: 0;}
.rt-sidebar-list li {display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rt-border);}
.rt-sidebar-list li:first-child {padding-top: 0;}
.rt-sidebar-rank {font-size: 1.6rem; font-weight: 800; color: var(--rt-border); flex-shrink: 0;}
.rt-sidebar-list a {font-size: 1.4rem; font-weight: 600; color: var(--rt-headline); line-height: 1.4;}
.rt-sidebar-list a:hover {color: var(--rt-accent);}
@media (max-width: 960px) {
	.rt-article-layout {flex-direction: column;}
	.rt-article-sidebar {width: 100%; position: static;}
}
.rt-breadcrumb {font-size: 1.5rem; color: var(--rt-gray); margin-bottom: 16px;}
.rt-breadcrumb a {color: var(--rt-gray);}
.rt-breadcrumb a:hover {color: var(--rt-accent);}
.rt-breadcrumb-sep {margin: 0 6px;}
.rt-article-title {font-size: 4.2rem; font-weight: 700; line-height: 52px; color: var(--rt-headline); margin: 0 0 16px; width: auto; padding-bottom: 0; border-bottom: none;}
.rt-article-dek {font-size: 1.9rem; color: var(--rt-text); line-height: 1.5; margin: 0 0 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.rt-article-byline {display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; font-size: 1.4rem; color: var(--rt-gray); margin-bottom: 28px;}
.rt-byline-author {color: var(--rt-headline); font-weight: 600; text-decoration: none;}
.rt-byline-author:hover {color: var(--rt-accent);}
/* The [post-views] shortcode comes from a views-counter plugin whose own
   CSS we don't control — it was wrapping "Views" onto a second line (looks
   like its own markup uses display:flex/block internally). Force every
   descendant inline so "N Views" always stays on one line like the rest of
   the byline. */
.rt-byline-views, .rt-byline-views * {display: inline !important;}
.rt-byline-views {white-space: nowrap;}
.rt-article-thumb {margin: 0 0 32px; display: none;}
.rt-article-thumb img {width: 100%; height: auto; border-radius: 6px; display: block;}
/* body copy: matched to Engadget's own article-body computed styles
   (18px / 400 / 28.8px line-height / #2d2c2e — the last one is exactly
   our existing --rt-text token already) */
.rt-article-body {font-size: 1.8rem; line-height: 1.6; color: var(--rt-text);}
.rt-article-body p {margin: 0 0 18px;}
.rt-article-body a {color: var(--rt-accent); text-decoration: underline;}
.rt-article-body img {max-width: 100%; height: auto; border-radius: 6px;}
.rt-article-body h2, .rt-article-body h3 {
  /* reset: base theme's bare `h2 { border-bottom: 2px solid #000 }` rule
     otherwise leaks into in-content subheadings */
  border-bottom: none;
  padding-bottom: 0;
  width: auto;
  font-weight: 700;
  color: var(--rt-headline);
  margin: 32px 0 16px;
}

/* 캡션 스타일 수정 (nateview, viewtimes, feed viewus, viewcash, retroactive.news 공통) */
body.single-post article .rt-article-body .wp-caption-text,
body.single-post article .rt-article-body figcaption,
body.single-post article .rt-article-body figcaption *,
body.single-post article .rt-article-body td.desc,
body.single-post article .rt-article-body td.photocaption,
body.single-post article .rt-article-body span.caption {font-size: 13px !important; line-height: 1.5 !important; color: #a1a1a1 !important; letter-spacing: -0.2px !important;}

@media (max-width: 840px) {
	.rt-article-title {font-size: 2.8rem; line-height: 1.2;}
	.rt-article-dek {font-size: 1.5rem; line-height: 1.4;}
}

/* ---- conversation (best-effort restyle of the existing WP comment form —
   Engadget uses a third-party "OpenWeb" embed we don't have credentials to
   integrate, so this keeps the theme's own comment functionality but in a
   visually similar bordered card) ------------------------------------------ */
.rt-conversation {margin: 40px auto 0; padding: 24px; border: 1px solid var(--rt-border); border-radius: 8px;}
/* 모바일 padding 12px는 반드시 위 무조건 규칙(padding:24px) 바로 다음에 와야
   적용됨 — 이전에 이 규칙을 파일 위쪽(840px 미디어쿼리)에 뒀더니, 조건 없는
   위 규칙이 소스 순서상 더 나중에 나와서 동일 특정성에서 이겨버렸었음
   (.gnb-wrap .menu li:first-child 때와 같은 종류의 버그). */
@media (max-width: 840px) {
	.rt-conversation {padding: 12px;}
}
.rt-conversation-head {display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--rt-border);}
.rt-conversation-title {font-size: 1.8rem; font-weight: 700; color: var(--rt-headline);}
.rt-conversation-count {font-size: 1.4rem; color: var(--rt-gray);}
.rt-comment-form {margin-bottom: 24px;}
.rt-comment-name, .rt-comment-area {display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--rt-border); border-radius: 6px; font-size: 1.4rem; font-family: var(--rt-font); box-sizing: border-box;}
.rt-comment-name {margin-bottom: 10px;}
.rt-comment-area {height: 90px; resize: vertical;}
.rt-comment-form-foot {display: flex; align-items: center; justify-content: space-between; margin-top: 8px;}
.rt-comment-form-foot span {font-size: 1.2rem; color: var(--rt-gray);}
.rt-comment-form-foot button {background: var(--rt-tag-bg); color: var(--rt-white); border: none; border-radius: 6px; padding: 8px 20px; font-size: 1.4rem; cursor: pointer;}
.rt-comment-form-foot button:hover {background: var(--rt-accent);}
.rt-comment-list {list-style: none; margin: 0; padding: 0;}
.rt-comment-item {padding: 16px 0; border-top: 1px solid var(--rt-border);}
.rt-comment-meta {display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px;}
.rt-comment-author {font-weight: 600; color: var(--rt-headline); font-size: 1.4rem;}
.rt-comment-meta time {font-size: 1.2rem; color: var(--rt-gray);}
.rt-comment-text {font-size: 1.4rem; color: var(--rt-text); margin: 0;}
.rt-comment-more {display: block; margin: 16px auto 0; background: none; border: 1px solid var(--rt-border); border-radius: 6px; padding: 8px 20px; font-size: 1.4rem; cursor: pointer; color: var(--rt-text);}
.rt-comment-more:hover {border-color: var(--rt-accent); color: var(--rt-accent);}

/* ---- recommended: 4-across, thumbnail + title only ----------------------- */
.rt-recommended {margin-top: 56px;}
.rt-grid-4 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;}
.rt-grid-4 .rt-card:nth-child(4n+1) {padding-right: 20px;}
.rt-grid-4 .rt-card:nth-child(4n+2), .rt-grid-4 .rt-card:nth-child(4n+3) {padding-left: 20px; padding-right: 20px;}
.rt-grid-4 .rt-card:nth-child(4n) {padding-left: 20px;}
.rt-grid-4 .rt-card-body {position: relative;}
.rt-grid-4 .rt-card:not(:nth-child(4n)) .rt-card-body::before {content: ""; position: absolute; top: 4px; bottom: 4px; right: -20px; width: 1px; background: var(--rt-border);}
.rt-grid-4 .rt-thumb {height: 130px;}
.rt-grid-4 .rt-title {font-size: 1.5rem; margin-top: 10px;}

/* ---- continuous scroll: each ajax-loaded article is a full rt-article-unit
   (identical layout to the first one), separated by a plain rule ---------- */
.rt-article-unit + .rt-article-unit {margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rt-border);}

/* ---- author archive: Profile / Editorial Policies / Stories By --------- */
.rt-author-page {padding: 40px 0 60px;}
.rt-author-profile {display: flex; align-items: flex-start; gap: 40px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--rt-border);}
.rt-author-photo {flex-shrink: 0; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; background: var(--rt-tag-bg); display: flex; align-items: center; justify-content: center;}
.rt-author-photo img {width: 100%; height: 100%; object-fit: cover; display: block;}
.rt-author-initial {color: var(--rt-white); font-size: 4.8rem; font-weight: 700;}
.rt-author-info {flex: 1; min-width: 0;}
/* Sits above the profile row (not inside it) — Engadget's author name is
   its own centered heading, flanked by thin gray lines like the site's
   other section headings, at the very top of the page. */
.rt-author-name {display: flex; align-items: center; gap: 24px; text-align: center; font-size: 4.8rem; font-weight: 800; color: var(--rt-headline); margin: 0 0 40px; width: auto; padding-bottom: 0; border-bottom: none;}
.rt-author-name::before, .rt-author-name::after {content: ""; flex: 1; height: 1px; background: var(--rt-border);}
.rt-author-bio {font-size: 1.6rem; line-height: 1.6; color: var(--rt-text); margin: 0 0 12px;}
.rt-editorial-policies {margin-bottom: 48px;}
.rt-policies-box {background: #f4f3f5; border-radius: 10px; padding: 32px 40px; margin: 0 80px;}
.rt-policies-title {text-align: center; font-size: 2rem; font-weight: 700; color: var(--rt-accent); margin: 0 0 16px; width: auto; padding-bottom: 0; border-bottom: none;}
.rt-policies-box p {text-align: left; margin: 0 0 12px; font-size: 1.6rem; line-height: 1.6; color: var(--rt-text);}
.rt-policies-box p:last-child {margin-bottom: 0;}
@media (max-width: 640px) {
	.rt-author-profile {flex-direction: column; text-align: center;}
}

/* ---- generic pages (Terms of Use, Privacy Policy, About, ...) ----------- */
/* Sizes matched to Engadget's own /policies/ page via computed styles:
   h1 48px/700/1.2 centered, h2 34px/700/~1.3 left, body copy 18px/400/1.6 —
   same 18px/#2d2c2e body copy as the article template. Width uses the site's standard .container (1250px) — no special override here. */
.rt-page {padding: 40px 0 60px;}
.rt-page-title {font-family: Poppins, sans-serif; font-size: 4.8rem; font-weight: 700; display: flex; align-items: center; gap: 24px; text-align: center; line-height: 1.2; color: var(--rt-headline); margin: 0 0 32px; width: auto; padding-bottom: 0; border-bottom: none;}
.rt-page-title::before, .rt-page-title::after {content: ""; flex: 1; height: 1px; background: var(--rt-border);}
.rt-page-body {font-family: Poppins, sans-serif; font-size: 1.6rem;  letter-spacing: -0.4px; line-height: 1.7; color: var(--rt-text); max-width: 80%; margin: 0 auto;}
.rt-page-body p {font-family: Poppins, sans-serif;  letter-spacing: -0.2px; margin: 0 0 18px;}
.rt-page-body a {font-family: Poppins, sans-serif;  letter-spacing: -0.2px; color: var(--rt-accent); text-decoration: underline;}
.rt-page-body h2,
.rt-page-body h3 {font-family: Poppins, sans-serif;  letter-spacing: -0.2px; border-bottom: none; padding-bottom: 0; width: auto; text-align: left; font-weight: 500; color: var(--rt-headline);}
.rt-page-body h2 {font-size: 2.8rem; line-height: 1.3; margin: 54px 0 12px;}
.rt-page-body h3 {font-size: 2.2rem; line-height: 1.3; margin: 24px 0 10px;}
.rt-page-body table {border-collapse: collapse;}
.rt-page-body table tr {}
.rt-page-body table tr th,
.rt-page-body table tr td {padding: 6px 20px; border: 1px solid #b5b5b5; font-size: 0.9em;}
@media (max-width: 840px) {
	body.about_us .rt-page-body .space {height: 0 !important;}
	body.about_us .section_company.wp-container-core-columns-is-layout-1 {flex-direction: column;}
	.rt-page-body {max-width: 100%;}
	h1.rt-page-title {font-size: 2.6rem;}
	.rt-page-body h2 {font-size: 1.8rem;}
	.rt-page-body p {font-size: 1.5rem;}
	.rt-page-body img {height: fit-content;}
	.rt-page-body table {line-height: 1.3;}
	.rt-page-body table tr th,
	.rt-page-body table tr td {padding: 4px 10px; text-align: center;}
}

/* ---- 404 page ------------------------------------------------------------ */
/* Matched to Engadget's own 404 page via computed styles: a plain,
   left-aligned h1 (48px/700/1.2) and p (18px/400/1.6) — no logo icon or
   "Return to Homepage" button, since Engadget's version doesn't have either.
   The "Latest Stories" grid below (.card-type3) is untouched — old
   .error-article/.brand-logo/.link-btn rules that used to style *this*
   block were removed from style.css rather than overridden. */
.rt-404-message {padding: 80px 0 80px;}
.rt-404-title {font-size: 4.8rem; font-weight: 700; line-height: 1.2; color: var(--rt-headline); text-align: left; width: auto; margin: 0 0 24px; padding-bottom: 0; border-bottom: none;}
.rt-404-text {font-size: 1.8rem; font-weight: 400; line-height: 1.6; color: var(--rt-text); margin: 0;}

/* about_us page: logo image inside the block-editor content */
body.policy.about_us .about_us_logo img {width: 280px; height: auto;}

/* ---- footer (Engadget-style, no "Categories" band) ---------------------- */
.rt-footer {background: var(--rt-white) !important; color: var(--rt-gray); padding: 32px 0 0;}
.rt-footer-rule {border: none; border-top: 1px solid var(--rt-border); margin: 0;}
.footer .rt-footer-bottom {display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 0 36px !important;}
.rt-footer-logo img {height: 30px; width: auto;}
.rt-footer-menu {display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0;}
.rt-footer-menu li {display: flex; align-items: center; gap: 10px;}
.rt-footer-menu li:not(:last-child)::after {content: "\2022"; color: var(--rt-border);}
.rt-footer-menu a {font-size: 1.5rem; color: var(--rt-text);}
.rt-footer-menu a:hover {color: var(--rt-headline); text-decoration: underline;}
.rt-footer-copy {font-size: 1.2rem; color: var(--rt-gray); margin: 0;}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1250px) {
	/* below the container's own 1250px width, it's already fluid (100%)
     via max-width; just add a side gutter so content doesn't touch the
     viewport edge */
	.container {padding-left: 20px; padding-right: 20px;}
	.rt-article-layout {padding-left: 20px; padding-right: 20px;}
}

/* min-width:641px cap added: this 2-column tablet layout must stop applying
   once the 640px breakpoint below switches .rt-grid-3 to a single-column
   compact list — without the lower bound, its border-right (on odd items)
   and nth-child(n+3) padding-top kept leaking through underneath the mobile
   list rules (same specificity fight as the divider pseudo-elements: a plain
   .rt-card-grid selector can't out-rank a nth-child one without !important),
   showing up as stray right-side lines and uneven top spacing on some rows. */
@media (min-width: 641px) and (max-width: 960px) {
	.rt-grid-3 {grid-template-columns: repeat(2, 1fr);}
	/* re-derive dividers for a 2-column layout; overrides the 3-column
     nth-child rules above */
	.rt-grid-3 .rt-card {border-right: none; border-bottom: 1px solid var(--rt-border); padding: 0 0 32px;}
	.rt-grid-3 .rt-card:nth-child(odd) {border-right: 1px solid var(--rt-border); padding-right: 32px;}
	.rt-grid-3 .rt-card:nth-child(even) {padding-left: 32px;}
	.rt-grid-3 .rt-card:nth-child(n+3) {padding-top: 32px;}
}

@media (max-width: 840px) {
	.rt-hero {flex-direction: column; gap: 0;}
	.rt-hero-lead {flex: 1 1 auto; max-width: 100%; border-bottom: 1px solid var(--rt-border);}
}

/* Below 640px, Engadget's own mobile site drops the big-image "card" style
   for every story except the top hero: secondary/grid items become a
   compact list row instead. Values below (flex-basis %, aspect-ratio,
   row vs row-reverse, font sizes) are copied from Engadget's own computed
   styles, inspected live at this same width — not eyeballed:
     - homepage "secondary" items (#featured .article-item.secondary
       .article-block): flex-direction:row-reverse, so text sits on the
       LEFT and the image on the RIGHT; .image-holder is flex:0 0 46%
       with aspect-ratio:16/9 (no fixed px size).
     - "More Stories" items (.article-item .article-block, same markup
       elsewhere on the page): flex-direction:row (image LEFT, text
       RIGHT this time — Engadget genuinely uses the opposite order here
       vs. the homepage secondary list), .image-holder is flex:0 0 42%,
       same aspect-ratio:16/9.
     - both: 16px gap, h3 title 16px/700, byline 12px, dek/read-more
       hidden entirely (display:none, not just visually trimmed).
   Only .rt-card-lead (the hero) keeps the large stacked-image treatment.
   Selectors are scoped the same way (.rt-hero-grid/.rt-grid-3/.rt-grid-4
   + the card class) as the existing desktop card rules further up this
   file so they win on source order without needing !important — a bare
   .rt-card-grid alone loses that specificity fight and silently does
   nothing, which is what happened on the first attempt at this rule. */
@media (max-width: 640px) {
  .rt-hero-grid,
  .rt-grid-3,
  .rt-grid-4 {
    display: block;
  }
  .rt-hero-lead .rt-title {
    font-size: 2.2rem;
  }
  .rt-hero-grid .rt-card-secondary,
  .rt-grid-3 .rt-card-grid,
  .rt-grid-4 .rt-card-grid {
    display: flex;
    /* center, not flex-start: row height is always fixed to the thumb's
       height (16/9 aspect-ratio at a set flex-basis is taller than the
       1-3 line clamped title + byline text in every case, live-measured on
       retroactive.news: thumb ~96px vs text block 66-87px depending on
       title length). With flex-start the text always hugs the TOP, so the
       leftover space always collects at the BOTTOM right before the
       divider line — and since that leftover amount changes with title
       length, the gap above vs. below the text looked "unmatched" between
       rows. Centering splits the leftover evenly above/below the text so
       every row reads as evenly spaced regardless of title length. */
    align-items: center;
    height: auto;
    gap: 16px;
    /* symmetric top+bottom spacing (1.2rem each) instead of bottom-only —
       !important: the desktop grid's own per-column/per-row padding
       (.rt-grid-3 .rt-card:nth-child(3n+1) etc, .rt-has-row-below/-above,
       .rt-hero-grid .rt-card:nth-child(1-4)) are all more specific than a
       plain .rt-card-grid/.rt-card-secondary selector and were still
       adding their own left/right/top/bottom padding on top of this. */
    padding: 1.2rem 0 !important;
    border: none;
    border-bottom: 1px solid var(--rt-border);
  }
  /* homepage secondary list: text left, image right */
  .rt-hero-grid .rt-card-secondary {
    flex-direction: row-reverse;
  }
  /* More Stories / Recommended: image left, text right */
  .rt-grid-3 .rt-card-grid,
  .rt-grid-4 .rt-card-grid {
    flex-direction: row;
  }
  .rt-hero-grid .rt-card-secondary:first-child,
  .rt-grid-3 .rt-card-grid:first-child,
  .rt-grid-4 .rt-card-grid:first-child {
    padding-top: 0;
  }
  /* the last row in each list shouldn't have a trailing divider under it —
     .rt-more's own bottom margin/the section boundary already provides the
     separation from whatever comes next (e.g. the "More Stories" heading
     right below the secondary-cards list, or the Load More button below
     More Stories itself). :last-child re-evaluates automatically as ajax
     "Load More" appends rows, so only the true last item ever loses this. */
  .rt-hero-grid .rt-card-secondary:last-child,
  .rt-grid-3 .rt-card-grid:last-child,
  .rt-grid-4 .rt-card-grid:last-child {
    border-bottom: none;
  }
  /* !important here on purpose: the desktop grid's own divider
     pseudo-elements are scoped with nth-child/.rt-has-row-below/
     .rt-has-row-above (higher specificity than a plain .rt-card-grid
     selector, and .rt-has-row-above/-below are added by JS regardless of
     viewport). Without !important those partial-width lines (sized to
     the old grid's .rt-card-body column, not the new full-row layout)
     kept showing through underneath/instead of the new full-width
     border-bottom, which is what was throwing the left/right alignment
     off. */
  .rt-hero-grid .rt-card-secondary .rt-card-body::before,
  .rt-hero-grid .rt-card-secondary .rt-card-body::after,
  .rt-grid-3 .rt-card-grid .rt-card-body::before,
  .rt-grid-3 .rt-card-grid .rt-card-body::after,
  .rt-grid-4 .rt-card-grid .rt-card-body::before,
  .rt-grid-4 .rt-card-grid .rt-card-body::after {
    content: none !important;
  }
  .rt-hero-grid .rt-card-secondary .rt-thumb {
    flex: 0 0 46%;
    aspect-ratio: 16 / 9;
    width: auto;
    height: auto;
  }
  .rt-grid-3 .rt-card-grid .rt-thumb,
  .rt-grid-4 .rt-card-grid .rt-thumb {
    flex: 0 0 42%;
    aspect-ratio: 16 / 9;
    width: auto;
    height: auto;
  }
  .rt-hero-grid .rt-card-secondary .rt-tag,
  .rt-grid-3 .rt-card-grid .rt-tag,
  .rt-grid-4 .rt-card-grid .rt-tag {
    font-size: 1.1rem;
    padding: 5px 10px 5px 8px;
  }
  .rt-hero-grid .rt-card-secondary .rt-card-body,
  .rt-grid-3 .rt-card-grid .rt-card-body,
  .rt-grid-4 .rt-card-grid .rt-card-body {
    flex: 1;
    min-width: 0;
    padding-top: 0;
  }
  .rt-hero-grid .rt-card-secondary .rt-title,
  .rt-grid-3 .rt-card-grid .rt-title,
  .rt-grid-4 .rt-card-grid .rt-title {
    font-size: 1.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rt-hero-grid .rt-card-secondary .rt-byline,
  .rt-grid-3 .rt-card-grid .rt-byline,
  .rt-grid-4 .rt-card-grid .rt-byline {
    margin-bottom: 0;
  }
  .rt-hero-grid .rt-card-secondary .rt-dek,
  .rt-grid-3 .rt-card-grid .rt-dek,
  .rt-grid-4 .rt-card-grid .rt-dek,
  .rt-hero-grid .rt-card-secondary .rt-readmore,
  .rt-grid-3 .rt-card-grid .rt-readmore,
  .rt-grid-4 .rt-card-grid .rt-readmore {
    display: none;
  }
}

/* ---- tag / author / 404 mobile font-size + spacing tweaks --------------- */
@media (max-width: 840px) {
	.tag h1.rt-cat-title {font-size: 2.4rem;}
}
@media (max-width: 840px) {
	.author h1.rt-author-name {font-size: 2.4rem;}
	.rt-author-photo {margin: 0 auto;}
	.rt-policies-box {padding: 20px; margin: 0;}
	.rt-section-heading {font-size: 2.4rem;}
}
@media (max-width: 840px) {
	.error404 h1.rt-404-title {font-size: 2.8rem;}
	.error404 p.rt-404-text {font-size: 1.5rem;}
}