@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
}
/* 모바일에서 숨김 */
.mobile-hide {
  display: none;
}


    .admin-action-button {
  background-color: #eee;
  color: #333;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.admin-action-button:hover {
  background-color: #6B8E23;
  color: #fff;
  border-color: #6B8E23;
}
.ajax-content img {
  max-width: 100%;
  height: auto;
  display: block;
}
    html {
  scroll-behavior: auto;
}
 .article-link {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  text-align: left; /* ✅ 이 줄이 핵심입니다 */
}
  :root {
    --main-bg: linear-gradient(135deg, #f8f8f8, #eaeaea);
    --text-color: #222;
    --link-color: #111;
    --link-hover: #6B8E23;
    --container-bg: #ffffff;
    --left-bg: #f4f4f4;
    --right-bg: #f4f4f4;
    --accent: #6B8E23;
  }

  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Pretendard', sans-serif;
    margin: 0;
    background: var(--main-bg);
    background-size: 400% 400%;
    animation: bgmove 15s ease infinite;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.6;
  }

  @keyframes bgmove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  a, .side-item a, .gg {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    background: none;
    transition: color 0.2s ease;
  }

  a:hover,
  .side-item a:hover,
  .gg:hover {
    color: var(--link-hover);
    background: none;
  }

  .topbar {
    background: #ffffff;
    padding: 0.75rem 1rem;
    text-align: right;
    border-bottom: 1px solid #ddd;
  }

  .topbar a {
    margin-left: 12px;
    font-size: 0.95rem;
    color: #333;
  }

  .admin-bar {
    background: #f1f1f1;
    padding: 0.5rem 1rem;
    text-align: right;
    border-bottom: 1px solid #ddd;
  }
  .left, .center, .right {
    flex: 1;
  }

.container {
  display: grid;
  grid-template-columns: 3fr 5fr 2fr; /* 왼 30%, 중 50%, 오 20% */
  gap: 2rem;
  /* max-width: 1440px; */
  margin: 0 auto;
  padding: 2rem 3rem;
  background: var(--container-bg);
}

.left, .center, .right {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.center {
  
  overflow-wrap: break-word;
  word-break: break-word;
}
  .right ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.right ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
  text-align: left;         /* ✅ 왼쪽 정렬 */
}

.right ul li a {
  display: block;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;         /* ✅ a 태그도 왼쪽 정렬 */
  padding: 0 0.5rem;
  box-sizing: border-box;
}

  .article-content img {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .article-content h1 {
    margin-top: 0;
    color: #222;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .side-item {
    margin-bottom: 1rem;
  }

  .side-item a {
    font-size: 0.95rem;
    line-height: 1.6;
    display: block;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    padding-left: 1rem;
    text-align: left;
  }

  .admin-button {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .admin-button input[type="text"],
  .admin-button input[type="password"] {
    padding: 0.4rem;
    border: 1px solid #aaa;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #222;
    background: #fff;
  }

  .admin-button button {
    background-color: #eee;
    color: #333;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    align-self: flex-start;
  }

  .admin-button button:hover {
    background: #555;
    color: #fff;
    border-color: #bbb;
  }

  .article-body {
    white-space: normal !important;
        word-break: break-word;    /* ✅ 이 줄 추가 */
  overflow-wrap: break-word; /* ✅ 이 줄도 함께 추가 */
    font-size: 1.05rem;
    line-height: 1.5;   /* ⭐ 추천 */
    color: #333;
    margin-top: 1.5rem;
  }
    /* 모바일에서 숨김 */
.mobile-hide {
  display: none;
}


  @media (max-width: 1024px) {
    .container {
      flex-direction: column;
    }
    .left, .right {
      padding: 1rem;
    }
  }

  .dnn {
    background: #1111;
    color: var(--link-color);
    padding: 0.3rem 0.6rem;
    font-size: 0.95rem;
    text-align: center;
    display: block;
    margin: 0.75rem auto;
  }

  .dnn:hover {
    background: none;
    color: var(--link-hover);
  }

  .gg {
    font-size: 0.95rem;
    line-height: 1.6;
    display: block;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    padding-left: 1rem;
    text-align: left;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

  .top-links {
    background: #fff;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .top-links, .top-links .right-links {
    display: flex;
    gap: 1rem;
  }

  .overlay-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.55);
    padding: 1.8rem 2.5rem;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 600px;
    transition: opacity 0.3s ease;
  }

  .overlay-wrapper {
    position: relative;
    margin-bottom: 2.5rem;
  }

  .overlay-wrapper:hover .overlay-box {
    opacity: 0;
    pointer-events: none;
  }

  .news-card button {
    background-color: #eee;
    color: #333;
    border: 1px solid #ccc;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }

  .news-card button:hover {
    background-color: #6B8E23;
    color: #fff;
    border-color: #6B8E23;
  }
  admin-button a:hover {
  background-color: #6B8E23;
  color: #fff;
  border-color: #6B8E23;
}
.admin-button button:hover {
  background-color: #6B8E23;
  color: #fff;
  border-color: #6B8E23;
}  
.admin-action-button {
  background-color: #eee;
  color: #333;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  display: inline-block;
  text-align: center;
}

.admin-action-button:hover {
  background-color: #6B8E23;
  color: #fff;
  border-color: #6B8E23;
}    
      .rgi {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
@media (max-width: 860px) {

  .container{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .left,
  .right{
    display:none !important;
  }

  .center{
    display:block !important;
    width:100% !important;
    padding:1rem !important;
    margin:0 !important;
  }

}

@media (max-width: 768px) {
      #center-fallback-banners{ display:none !important; }
    
    
      .article-preview .overlay-wrapper { margin: 0 0 16px; }/* 모바일에선 배너만 숨김 */
      /* 배너 사이 간격 */
  #center-fallback-banners .overlay-wrapper {
    margin: 0 0 2rem;
  }
      .mobile-extra-banners .overlay-wrapper { margin-bottom: 16px; }
  .container {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .left {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    background: #f4f4f4;
    border-radius: 8px;
    margin-bottom: 1.5rem;
  }

  .left ul {
    padding: 0;
    margin: 0;
  }

  .left ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #ccc;
  }

  .left ul li a {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 0.9rem;
    padding: 0 0.75rem;  /* ✅ 좌우 여백 확보 */
    box-sizing: border-box;
  }

  .center {
    display: block;  /* ✅ 글 본문이 보이도록 강제 표시 */
  }

  .right {
    display: block !important;
    width: 100%;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    background: #f4f4f4;
    border-radius: 8px;
  }
    .left {
  min-width: 380px;
}
      .container {
    display: flex !important;
    flex-direction: column;
  }

  body.humor-mode .right {
    order: 0;
  }

  body.humor-mode .left {
    order: 1;
  }

  body.humor-mode .center {
    order: 2;
    display: none !important;
  }

  /* 기본 순서: 뉴스 보기 등 */
  body:not(.humor-mode) .left {
    order: 0;
  }

  body:not(.humor-mode) .center {
    order: 1;
    display: none !important;
  }

  body:not(.humor-mode) .right {
    order: 2;
  }
    html {
    scroll-behavior: auto;
  }
     .container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .center {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .article-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .article-body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .news-card {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .overlay-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  .mobile-hide {
    display: block;
  }
    .center {
    display: block !important;
  }
    }
    
    .admin-toolbar{
  position: sticky;      /* 스크롤해도 상단에 따라옴 */
  top: 8px;
  z-index: 50;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin: 4px 0 8px;
}

.admin-toolbar .admin-action-button{
  padding: 0.4rem 0.8rem;
  font-size: .9rem;
}

/* 모바일에서 툴바를 최상단으로 여백 없이 맞춤 */
@media (max-width: 768px){
  .admin-toolbar{ top: 4px; margin: 0 0 8px; }
  .top-links .admin-inline{ display:inline-flex; gap:6px; align-items:center; }
  .top-links .admin-inline form{ display:inline; }
}
  /* ... 기존 CSS들 ... */

  /* ===== 기사 메타 / 본문 표를 supervision 스타일로 통일 ===== */
  .meta {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    font-size: 13.2px;
  }
  .meta th,
  .meta td {
    border: 1px solid #dbe0ea;
    padding: 8px 10px;
    vertical-align: top;
  }
  .meta thead th {
    background: #f5f7fb;
    text-align: left;
  }
  .meta .k {
    width: 18%;
    white-space: nowrap;
  }

  /* 기사 본문 안에서 쓰는 표도 supervision 스타일로 맞추기 */
  .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
  }
  .article-body th,
  .article-body td {
    border: 1px solid #dbe0ea;
    padding: 8px 10px;
    vertical-align: top;
  }
  .article-body thead th {
    background: #f5f7fb;
  }
  @media (max-width: 768px) {
  .article-body ul,
  .article-body ol {
    padding-left: 1.0rem !important; /* 글머리 기호만 안으로 살짝 */
    margin-left: 0;                  /* 혹시 기본 margin 있으면 제거 */
    list-style-position: outside;    /* 기본값 유지 (선택 사항) */
  }
}
/* =========================================================
   Tablet Landscape Preset (Article + List + Ads)
   대상: iPad / Tablet 가로
   적용 위치: CSS 맨 마지막
   ========================================================= */

@media (min-width: 860px) and (max-width: 1180px) and (orientation: landscape) {

  /* ─────────────────────────────────
     1. 전역 타이포 스케일
  ───────────────────────────────── */
  html {
    font-size: 14px;   /* 16px → 15px */
  }

  body {
    line-height: 1.55;
  }

  /* ─────────────────────────────────
     2. 컨테이너 밀도
  ───────────────────────────────── */
  .container {
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
  }

  .left,
  .center,
  .right {
    padding: 0.9rem;
  }

  /* ─────────────────────────────────
     3. 기사 카드 / 본문
  ───────────────────────────────── */
  .center .news-card {
    padding: 1.6rem 1.2rem;
    margin: 2.2rem 0;
  }

  .article-body {
    font-size: 0.95rem;      /* 본문 글자 축소 */
    line-height: 1.55;
  }

  .article-content h1 {
    font-size: 1.3rem;
  }

  /* ─────────────────────────────────
     4. 기사 제목 / 요약
  ───────────────────────────────── */
  .center .news-card h2,
  .article-content h1 {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  .center .news-card p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* ─────────────────────────────────
     5. 이미지 / 영상 비중
  ───────────────────────────────── */
  .card-image {
    max-height: 420px;
    object-fit: contain;
  }


  .video-wrapper.is-shorts {
    width: 360px;   /* 쇼츠 과대 방지 */
  }



  /* ─────────────────────────────────
     6. 좌 / 우 리스트 (블로그·이슈)
  ───────────────────────────────── */
  .left h3,
  .right h3 {
    font-size: 1rem;
    margin-bottom: 0.7rem;
  }

  .article-link,
  .humor-link {
    font-size: 0.85rem;
  }

  .left li,
  .right li {
    padding: 0.35rem 0;
  }

  /* ─────────────────────────────────
     7. 관리자 버튼 / 툴바
  ───────────────────────────────── */
  .admin-action-button {
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
  }

  .admin-toolbar {
    margin-bottom: 0.6rem;
  }

  /* ─────────────────────────────────
     8. 광고 카드 간격 축소
  ───────────────────────────────── */
  .center .ad-slot,
  .center .news-card.ad-slot {
    margin: 1.8rem 0;
  }

}
/* =========================================================
   iPad / Tablet Landscape — 전체 레이아웃 밀도 프리셋
   (기사 + 좌측 + 우측 모두 반영)
   ========================================================= */
@media (min-width: 860px) and (max-width: 1180px) {

  /* -------------------------------
     1. 전역 기본 스케일
  -------------------------------- */
  body {
    font-size: 14px;        /* 기본 16px → 14px */
    line-height: 1.55;
  }

  /* -------------------------------
     2. 컨테이너 밀도
  -------------------------------- */
  .container {
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
  }

  .left,
  .center,
  .right {
    padding: 0.9rem;
  }

  /* -------------------------------
     3. 기사 영역
  -------------------------------- */
  .article-body {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .article-content h1,
  .center .news-card h2 {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  .center .news-card p {
    font-size: 0.9rem;
  }

  /* -------------------------------
     4. 좌측 / 우측 사이드 리스트
  -------------------------------- */
  .left h3,
  .right h3 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }

  .left li,
  .right li {
    padding: 0.35rem 0;
  }

  .article-link,
  .humor-link,
  .gg {
    font-size: 0.85rem;
    line-height: 1.45;
  }

  /* -------------------------------
     5. 관리자 / 액션 버튼
  -------------------------------- */
  .admin-action-button,
  .admin-toolbar button {
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
  }

  /* -------------------------------
     6. 이미지 / 미디어 비중
  -------------------------------- */
  .article-content img,
  .card-image {
    max-height: 420px;
    object-fit: contain;
  }

}
/* =========================================================
   iPad / Tablet Landscape — 최종 밀도 오버라이드
   목적:
   - 좌우 패딩 축소
   - 본문/사이드 글자 14px 체감
   - 기사 + 좌측 + 우측 전부 반영
   ========================================================= */
@media (min-width: 860px) and (max-width: 1180px) {

  /* ─────────────────────────────
     1. 전역 타이포 (체감 14px)
  ───────────────────────────── */
  body {
    font-size: 14px !important;   /* 핵심 */
    line-height: 1.55;
  }

  /* ─────────────────────────────
     2. 컨테이너 좌우 패딩 축소
  ───────────────────────────── */
  .container {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    gap: 1.2rem;
  }

  /* ─────────────────────────────
     3. 좌 / 중 / 우 패딩 축소
  ───────────────────────────── */
  .left,
  .center,
  .right {
    padding: 0.8rem !important;
  }

  /* ─────────────────────────────
     4. 기사 본문
  ───────────────────────────── */
  .article-body {
    font-size: 0.95rem !important;
    line-height: 1.55;
  }

  .article-content h1,
  .center .news-card h2 {
    font-size: 1.2rem !important;
    line-height: 1.35;
  }

  .center .news-card p {
    font-size: 0.9rem !important;
  }

  /* ─────────────────────────────
     5. 좌측 / 우측 사이드 리스트
  ───────────────────────────── */
  .left h3,
  .right h3 {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem;
  }

  .article-link,
  .humor-link,
  .gg {
    font-size: 0.85rem !important;
    line-height: 1.45;
  }

  .left li,
  .right li {
    padding: 0.3rem 0;
  }

  /* ─────────────────────────────
     6. 관리자 / 버튼
  ───────────────────────────── */
  .admin-action-button,
  .admin-toolbar button {
    font-size: 0.8rem !important;
    padding: 0.35rem 0.75rem;
  }

  /* ─────────────────────────────
     7. 이미지 비중 정리
  ───────────────────────────── */
  .article-content img,
  .card-image {
    max-height: 420px;
    object-fit: contain;
  }
}
/* ===============================
   ARTICLE PAGE: 모바일에서도 본문(center) 항상 표시
   =============================== */
@media (max-width: 768px){
  body.article-page:not(.humor-mode) .center,
  body.article-page.humor-mode .center{
    display: block !important;
  }
  body.article-page .center{ order: 0 !important; }
  body.article-page .left{  order: 1 !important; }
  body.article-page .right{ order: 2 !important; }
}

/* ===============================
   COMMENTS (SSR + 폼 제출 방식)
   - 신규댓글: 상단
   - 답글: 해당 댓글 아래에 폼이 "이동"해서 뜸
   =============================== */

.comment-section{
  margin-top: 2rem;
  padding: 1.2rem 1rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.comment-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 0.9rem;
}

.comment-title{
  font-size: 1.05rem;
  font-weight: 700;
  color:#222;
}

.comment-title .count{
  font-variant-numeric: tabular-nums;
  color:#6B8E23;
}

.comment-form{
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0.9rem;
  background: #fafafa;
}

.comment-form .row{
  display:flex;
  gap: 8px;
  margin-bottom: 8px;
}

.comment-form input[type="text"]{
  width: 220px;
  max-width: 55%;
  padding: 0.55rem 0.6rem;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  font-size: 0.95rem;
  background:#fff;
}

.comment-form textarea{
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 0.65rem 0.7rem;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  font-size: 0.98rem;
  background:#fff;
}

.comment-form .actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  margin-top: 10px;
}

.comment-btn{
  border: 1px solid #ccc;
  background: #eee;
  color:#333;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor:pointer;
}
.comment-btn:hover{
  background:#6B8E23;
  border-color:#6B8E23;
  color:#fff;
}

.comment-btn--danger:hover{
  background:#c0392b;
  border-color:#c0392b;
  color:#fff;
}

.comment-list{
  margin-top: 1rem;
}

.comment-empty{
  color:#666;
  margin: 0.8rem 0 0;
}

.comment-item{
  margin-top: 10px;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  /* depth 들여쓰기: 너무 깊어지면 84px까지만 */
  margin-left: clamp(0px, calc(var(--depth) * 16px), 84px);
  position: relative;
}

.comment-item::before{
  content:"";
  position:absolute;
  left:-10px;
  top: 18px;
  width: 10px;
  height: 1px;
  background:#ddd;
  display: none;
}
.comment-item[style*="--depth: 0"]::before{ display:none; }

.comment-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom: 6px;
}

.comment-author{
  font-weight: 700;
  color:#222;
  font-size: 0.95rem;
}

.comment-badge{
  display:inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  background:#6B8E23;
  color:#fff;
  vertical-align: middle;
}

.comment-date{
  font-size: 0.8rem;
  color:#777;
  white-space: nowrap;
}

.comment-content{
  color:#333;
  font-size: 0.98rem;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
}

.comment-actions{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  align-items:center;
}

.comment-inline-form{
  display:inline;
  margin:0;
}

.reply-slot{
  margin-top: 10px;
}

.reply-form-wrap{
  margin-top: 10px;
}

/* 모바일: 입력칸 폭 조정 */
@media (max-width: 768px){
  .comment-form .row{ flex-direction: column; }
  .comment-form input[type="text"]{ width: 100%; max-width: 100%; }
}
/* ===============================
   ARTICLE PAGE: 본문 여백 복구(모바일)
   =============================== */
@media (max-width: 768px){
  body.article-page .container{
    padding: 0 !important;
  }

  /* 본문 카드(실제 글 박스)에 패딩 부여 */
  body.article-page .center{
    padding: 12px 14px !important;
  }
/* ===============================
   ARTICLE PAGE: 모바일 본문 여백은 padding만
   =============================== */
@media (max-width: 768px){
  body.article-page .container{
    padding: 0 !important;
  }

  /* 본문 영역: 카드 테두리/배경 제거, 패딩만 */
  body.article-page .center{
    display:block !important;
    padding: 12px 14px !important;
  }

  body.article-page .article-content{
    padding: 12px 0 !important;    /* center가 이미 좌우 패딩을 가짐 → 여기선 최소 */
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.article-page .article-body{
    margin-top: 0 !important;
    padding: 6px 0 !important;
  }
}


}

/* ===============================
   YOUTUBE / SHORTS FINAL (REAL FIX)
   - Normal: 16:9, thumbnail cover (no crop in practice)
   - Shorts : 9:16, thumbnail auto (JS가 class 붙임)
   - iframe always fills wrapper
   붙여넣기 위치: CSS 맨~마지막
   =============================== */

.video-wrapper{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.75rem 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* 일반 영상 16:9 */
.video-wrapper:not(.is-shorts){
  aspect-ratio: 16 / 9 !important;
}

/* 쇼츠 9:16 */
.video-wrapper.is-shorts{
  width: min(500px, 100%) !important;
  max-width: 500px !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0.75rem auto !important;
}

/* yt-lite(썸네일/iframe 컨테이너)가 wrapper를 "정확히" 채우게 */
.video-wrapper .yt-lite{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000 !important; /* contain일 때 생기는 레터박스 색 */
}

/* 썸네일: wrapper에 맞춰 100% 강제 */
.video-wrapper .yt-lite img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-position: center center !important;
  background: #000 !important;
}

/* 일반 유튜브는 cover가 가장 깔끔 (대부분 16:9 썸네일이라 안 잘림) */
.video-wrapper:not(.is-shorts) .yt-lite img{
  object-fit: cover !important;
}

/* 쇼츠는 "자동 판별" (JS가 아래 class를 붙임)
   - thumb-landscape: 썸네일이 가로면 contain(안 잘리게)
   - thumb-vertical : 썸네일이 세로면 cover(꽉 차게)
*/
.video-wrapper.is-shorts.thumb-landscape .yt-lite img{
  object-fit: contain !important; /* 안 잘림 */
}
.video-wrapper.is-shorts.thumb-vertical .yt-lite img{
  object-fit: cover !important;   /* 꽉 채움 */
}

/* iframe: 언제나 wrapper를 꽉 채움 (iframe이 .yt-lite 안에 들어가도 적용됨) */
.video-wrapper iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #000 !important;
}

/* (선택) 아주 구형 브라우저용 aspect-ratio fallback */
@supports not (aspect-ratio: 1 / 1){
  .video-wrapper::before{
    content: "";
    display: block;
  }
  .video-wrapper:not(.is-shorts)::before{ padding-top: 56.25%; }    /* 16:9 */
  .video-wrapper.is-shorts::before{ padding-top: 177.7778%; }       /* 9:16 */
  .video-wrapper .yt-lite,
  .video-wrapper iframe{
    position: absolute !important;
    inset: 0 !important;
  }
}
/* ===============================
   PLAY ICON (삼각표시) OVERLAY
   =============================== */

/* 클릭 유도 */
.video-wrapper .yt-lite{
  cursor: pointer !important;
}

/* 이미지가 pseudo-element보다 아래에 깔리도록 */
.video-wrapper .yt-lite img{
  z-index: 1 !important;
}

/* 버튼 바탕(유튜브 빨강 박스 느낌) */
.video-wrapper .yt-lite::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 74px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 0, 0, 0.92);
  box-shadow: 0 10px 25px rgba(0,0,0,0.28);
  z-index: 2;
  pointer-events: none;
  transition: transform .15s ease, background-color .15s ease;
}

/* 삼각형(▶) */
.video-wrapper .yt-lite::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%,-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px; /* 크기 */
  border-color: transparent transparent transparent rgba(255,255,255,0.97);
  z-index: 3;
  pointer-events: none;
  transition: transform .15s ease;
}

/* hover/터치 시 살짝 커지게(클릭 유도) */
.video-wrapper .yt-lite:hover::before,
.video-wrapper .yt-lite:active::before{
  transform: translate(-50%,-50%) scale(1.06);
  background: rgba(255, 0, 0, 0.98);
}
.video-wrapper .yt-lite:hover::after,
.video-wrapper .yt-lite:active::after{
  transform: translate(-35%,-50%) scale(1.06);
}
.video-wrapper .yt-lite:hover img{
  filter: brightness(0.92);
}

/* 클릭해서 iframe으로 바뀐 뒤엔 버튼 숨김 (너 JS가 data-activated="1" 넣고 있음) */
.video-wrapper .yt-lite[data-activated="1"]::before,
.video-wrapper .yt-lite[data-activated="1"]::after{
  display: none !important;
}
#center-fallback-banners{ display:none !important; }
#center-fallback-banners,
.mobile-extra-banners{ display:none !important; }







/* ===============================
   TAG CONTEXT + THEME HOOK
   =============================== */

/* ✅ 테마 변수: 나중에 태그별로 다르게 칠할 때 여기만 확장하면 됨 */
body.article-page{
  --theme-accent: #16a34a;
  --theme-ink: #111;
  --theme-soft: rgba(22,163,74,.10);
}

/* 예시(추후): body.article-page.theme--economy { --theme-accent:#2563eb; } */

.tag-context{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 10px;
}
.tag-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: var(--theme-soft);
  color: var(--theme-ink);
  font-weight:800;
  font-size:.9rem;
}
.tag-pill--all{
  background: #f1f5f9;
}
.tag-clear{
  padding:0;
  font-weight:800;
  color: var(--theme-accent);
}
.tag-clear:hover{ text-decoration: underline; }

.tag-badge{
  display:inline-block;
  padding:4px 10px;
  font-size:.82rem;
  font-weight:600;
  border-radius:999px;
  margin-bottom:8px;
  background:#111;
  color:#fff;
}

/* 테마별 */
body.theme--economy   .tag-badge{ background:#2563eb; }
body.theme--fashion   .tag-badge{ background:#ec4899; }
body.theme--tech      .tag-badge{ background:#22c55e; }
body.theme--politics  .tag-badge{ background:#7c3aed; }
body.theme--all       .tag-badge{ background:#444; }

/* ===============================
   ARTICLE PAGE: Tablet(769~860)
   - 모바일처럼 리스트를 본문 아래로 보여주기
   =============================== */
@media (min-width: 769px) and (max-width: 860px){
  body.article-page .container{
    display:flex !important;
    flex-direction:column !important;
    padding: 1rem !important;
  }

  body.article-page .left,
  body.article-page .right{
    display:block !important;
    width:100% !important;
    padding: 0.5rem 1rem !important;
    background:#f4f4f4 !important;
    border-radius: 8px !important;
    margin: 0 0 1.25rem 0 !important;
  }

  body.article-page .center{
    display:block !important;
    width:100% !important;
    padding: 1rem !important;
    margin: 0 0 1.25rem 0 !important;
  }

  /* 순서: 본문 → 블로그/기사 리스트 → 이슈 */
  body.article-page .center{ order:0 !important; }
  body.article-page .left { order:1 !important; }
  body.article-page .right{ order:2 !important; }
}

/* ===============================
   LIST ACTIVE (블로그/기사/이슈 공통)
   - 현재 보고있는 slug 항목 하이라이트
   - 줄높이 흔들림 방지(고정)
   =============================== */

/* 리스트 a 기본을 '한 줄 고정'으로 통일 */
.left .article-item a.article-link,
.right .humor-item a.humor-link{
  display:block !important;
  padding: 0 4px !important;        /* ✅ 세로 패딩 제거 → 높이 안정 */
  height: 40px !important;           /* ✅ 고정 높이 */
  line-height: 40px !important;      /* ✅ 중앙정렬 느낌 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-left: 4px solid transparent !important;  /* ✅ active용 자리 미리 확보 (흔들림 0) */
  font-weight: 500 !important;
}

/* hover는 가볍게 */
.left .article-item a.article-link:hover,
.right .humor-item a.humor-link:hover{
  color: #235e8e !important;
}

/* ✅ 활성(현재 글) 표시 */
.left .article-item.is-active > a.article-link,
.right .humor-item.is-active > a.humor-link{
  border-left-color: #23488e !important;
  font-weight: 800 !important;
  color: #111 !important;
  background: rgba(107,142,35,0.10) !important;
}

/* (선택) 모바일에서 터치 피드백 */
@media (max-width: 768px){
  .left .article-item a.article-link,
  .right .humor-item a.humor-link{
    height: 40px !important;
    line-height: 40px !important;
  }
}

.list-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 18px;
  padding:0 4px;
}

.list-pager .pager-left{
  display:flex;
  gap:6px;
  align-items:center;
}

.list-pager button{
  border:1px solid #ccc;
  background:#eee;
  color:#333;
  border-radius:8px;
  padding:6px 10px;
  font-size:0.85rem;
  cursor:pointer;
}

.list-pager button:hover{
  background:#6B8E23;
  border-color:#6B8E23;
  color:#fff;
}

.list-pager button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.list-pager .pager-info{
  font-size:0.85rem;
  color:#666;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px){
    .top-links .admin-only-desktop{ display:none !important; }
  }
/* 왼쪽 리스트도 데스크탑에서 줄선 */
.left ul li{
  border-bottom: 1px solid #ddd;
}
.left ul li:last-child{
  border-bottom: 0;
}
/* ✅ 오른쪽 리스트를 왼쪽과 같은 높이/패딩/선 색으로 통일 */
.right ul li{
  padding: 0.4rem 0 !important;            /* ← 0.5rem이면 더 커보임 */
  border-bottom: 1px solid #ccc !important; /* ← 왼쪽과 동일 톤 */
}

.right ul li a{
  padding: 0 !important;        /* ← 기존 0 0.5rem 제거(두툼함 원인) */
  line-height: 1.4 !important;  /* ← 왼쪽 li 기본 line-height에 맞춤 */
}

/* 마지막 줄선 제거(선택) */
.right ul li:last-child{
  border-bottom: 0 !important;
}
/* =========================
   SIDE LIST: LEFT == RIGHT (픽셀 맞춤)
   대상: #left-blog-list, #article-list, #right-issue-list
   ========================= */

/* 1) li 자체 여백/레이아웃 제거 + 줄선 통일 */
.left  #left-blog-list > li,
.left  #article-list   > li,
.right #right-issue-list > li{
       /* 혹시 전역 li{display:flex} 무력화 */
  margin: 0 !important;
  padding: 0 !important;           /* ✅ 오른쪽만 남는 상하패딩 제거 핵심 */
  border-bottom: 1px solid #ccc !important;
}

/* 마지막 줄선 제거(원하면 유지해도 됨) */
.left  #left-blog-list > li:last-child,
.left  #article-list   > li:last-child,
.right #right-issue-list > li:last-child{
  border-bottom: 0 !important;
}

/* 2) 링크를 “한 줄 고정 40px”으로 통일 (좌/우 동일) */
.left  #left-blog-list a.article-link,
.left  #article-list   a.article-link,
.right #right-issue-list a.humor-link{
  display: block !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 4px !important;       /* 좌우만 살짝 */
  margin: 0 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* ===============================
   ARTICLE BODY TYPO + IMAGE SPACING (FINAL)
   - 본문 글 간격 + 이미지 위아래 여백 통일
   =============================== */

/* 본문 전체 타이포 간격 */
.article-body{
  line-height: 1.7 !important;
  font-size: 1.05rem;
  font-weight: 400;
}

/* 문단/리스트 기본 간격 통일 */
.article-body p{
  margin: 0.85rem 0 !important;    /* 문단 위아래 */
}
.article-body h2, .article-body h3, .article-body h4{
  margin: 1.3rem 0 0.7rem !important;
  line-height: 1.35;
}
.article-body ul, .article-body ol{
  margin: 0.75rem 0 0.95rem !important;
  padding-left: 1.1rem;            /* 너무 깊으면 1.0~1.2 조절 */
}
.article-body li{
  margin: 0.35rem 0 !important;
}

/* ✅ 이미지: 위/아래 여백 “완전 고정” */
.article-body img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1.2rem auto !important;  /* 위아래 동일 + 가운데 */
}

/* 이미지가 p 안에 들어가도 동일하게 */
.article-body p > img{
  margin: 1.2rem auto !important;
}

/* (선택) figure/iframe/video도 동일 리듬 */
.article-body figure,
.article-body iframe,
.article-body video{
  margin: 1.2rem 0 !important;
}



body.article-page .video-wrapper{ margin: 0 !important; }

/* ✅ 최소패치: article-body img의 margin이 유튜브 썸네일에 먹는 것 차단 */
body.article-page .article-body .video-wrapper .yt-lite img{
  margin: 0 !important;
}

/* (선택) 아주 미세한 픽셀 흔들림 방지 */
body.article-page .article-body .video-wrapper{ line-height:0 !important; }
.article-body img{ margin: 1.2rem auto !important; }
.article-body iframe{ margin: 1.2rem 0 !important; }
/* ===============================
   YT FRAME OFFSET FIX (MIN PATCH)
   - video-wrapper::before(레거시 padding-top)로 인해 높이가 늘어나
     유튜브가 위/아래 검은띠(레터박스) 만들며 "아래로 내려간" 것처럼 보이는 문제 차단
   =============================== */

/* 1) 레거시 aspect-ratio fallback 완전 차단 */
body.article-page .video-wrapper::before{
  content: none !important;
  display: none !important;
  padding: 0 !important;
}

/* 2) wrapper 비율 강제 고정(혹시 다른 CSS가 덮어써도 복구) */
body.article-page .video-wrapper{
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
}

/* 쇼츠만 9:16 */
body.article-page .video-wrapper.is-shorts{
  aspect-ratio: 9 / 16 !important;
}

/* 3) 내부도 0,0부터 꽉 차게(미세 오프셋 방지) */
body.article-page .video-wrapper .yt-lite,
body.article-page .video-wrapper iframe,
body.article-page .video-wrapper .yt-lite img{
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
  .caprate-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#111827;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    font-size:14px;
    line-height:1;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  }
  .caprate-link:hover{
    background:#0b1220;
    border-color:#cbd5e1;
    box-shadow:0 10px 22px rgba(0,0,0,.14);
    transform:translateY(-1px);
  }
  .caprate-link:active{
    transform:translateY(0);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    opacity:.92;
  }


@media print{
  /* 중앙(.center)만 남기기 */
  .top-links, .left, .right,
  .admin-toolbar, .admin-button,
  .comment-section,
  #center-fallback-banners, .mobile-extra-banners,
  .rgi, .list-pager,
  .ad-slot, .coupang-inline-banner, .kooreea-product-section, ins.adsbygoogle,
  .print-toolbar{
    display:none !important;
  }

  /* 유튜브/오디오 등 인쇄 제외 */
  .video-wrapper, .summary-media, .audio-wrap, audio, iframe{
    display:none !important;
  }

  html, body{
    background:#fff !important;
    animation:none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .container{
    display:block !important;          /* grid 해제 */
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
  }

  .center{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .article-content, .news-card{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  .article-body{
    font-size: 12pt !important;
    line-height: 1.6 !important;
  }

  img{
    max-width:100% !important;
    height:auto !important;
    page-break-inside: avoid;
  }

  @page{ margin: 12mm; }
}
/* ===============================
   RELATED BLOGS - MP4 THUMB SAFE FIX
   - 카드 크기 고정
   - 이미지/영상은 썸네일 박스 안에서만 contain
   - 일반 본문 유튜브/영상 CSS와 충돌하지 않도록 related 영역만 스코프 제한
   =============================== */
.article-keyword-related .related-thumb{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:108px !important;
  min-height:108px !important;
  max-height:108px !important;
  flex:0 0 108px !important;
  overflow:hidden !important;
  background:#f3f4f6 !important;
  line-height:0 !important;
}

.article-keyword-related .related-thumb img,
.article-keyword-related .related-thumb video,
.article-keyword-related .related-thumb .related-thumb-video{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.article-keyword-related .related-thumb img{
  background:#f3f4f6 !important;
}

.article-keyword-related .related-thumb video,
.article-keyword-related .related-thumb .related-thumb-video{
  background:#000 !important;
  pointer-events:none !important;
}

@media(max-width:768px){
  .article-keyword-related .related-thumb{
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    flex-basis:100px !important;
  }
}

/* ===============================
   RELATED BLOGS - FINAL SAFE LAYOUT
   article-body 밖에서만 작동
   =============================== */

.article-keyword-related{
  display:block !important;
  width:100% !important;
  margin:48px 0 28px !important;
  padding-top:28px !important;
  border-top:1px solid #e5e7eb !important;
  clear:both !important;
  white-space:normal !important;
}

.article-hashtag:hover{
  background:#111827 !important;
  color:#fff !important;
}

.related-blog-section{
  display:block !important;
  width:100% !important;
  white-space:normal !important;
}

.related-blog-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  align-items:stretch !important;
  white-space:normal !important;
}

.related-blog-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  height:250px !important;
  min-height:250px !important;
  max-height:250px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#111827 !important;
  text-decoration:none !important;
  text-align:left !important;
  box-shadow:0 6px 18px rgba(15,23,42,.05) !important;
}

.related-thumb{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:108px !important;
  min-height:108px !important;
  max-height:108px !important;
  flex:0 0 108px !important;
  overflow:hidden !important;
  background:#f3f4f6 !important;
}

.related-thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#f3f4f6 !important;
}

.related-info{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  min-height:0 !important;
  padding:11px 10px 12px !important;
  text-align:center !important;
  white-space:normal !important;
}

.related-info span{
  display:block !important;
  margin:0 0 7px !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  color:#2563eb !important;
  text-align:center !important;
}

.related-info strong{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  margin:0 0 10px !important;
  padding:0 !important;
  font-size:13.5px !important;
  line-height:1.42 !important;
  font-weight:800 !important;
  color:#111827 !important;
  text-align:center !important;
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}

.related-info em{
  display:block !important;
  margin-top:auto !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  color:#6b7280 !important;
  font-style:normal !important;
  text-align:center !important;
}

/* 태블릿 */
@media(max-width:1100px){
  .related-blog-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 모바일 */
@media(max-width:768px){
  .related-blog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  .related-blog-card{
    height:238px !important;
    min-height:238px !important;
    max-height:238px !important;
  }

  .related-thumb{
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    flex-basis:100px !important;
  }

  .related-info{
    padding:10px 10px 11px !important;
  }

  .related-info strong{
    font-size:13px !important;
    line-height:1.4 !important;
  }
}

/* 작은 모바일 */
@media(max-width:480px){
  .related-blog-grid{
    grid-template-columns:1fr !important;
  }

  .related-blog-card{
    height:238px !important;
    min-height:238px !important;
    max-height:238px !important;
  }
}
/* ===============================
   ARTICLE MP4 / 대표미디어 FINAL
   =============================== */
body.article-page .cc-article-hero__media{
  width:100%;
  max-width:100%;
  margin:1.2rem auto 1.4rem;
  background:#000;
  overflow:hidden;
  border-radius:8px;
}

body.article-page .cc-article-hero__video{
  display:block;
  width:100%;
  max-width:100%;
  max-height:720px;
  aspect-ratio:16 / 9;
  object-fit:contain;
  background:#000;
}

body.article-page .cc-article-hero__media:has(video) .cc-article-hero__plate{
  display:none !important;
}

body.article-page .article-body .video-wrap{
  width:100%;
  max-width:100%;
  margin:1.4rem auto;
  background:#000;
  overflow:hidden;
  border-radius:8px;
}

body.article-page .article-body .video-wrap video,
body.article-page .article-body video{
  display:block;
  width:100%;
  max-width:100%;
  max-height:720px;
  margin:1.4rem auto;
  background:#000;
  object-fit:contain;
}

body.article-page .article-body .video-wrap video{
  aspect-ratio:16 / 9;
}

@media print{
  body.article-page .cc-article-hero__media,
  body.article-page .article-body .video-wrap,
  body.article-page .article-body video{
    display:none !important;
  }
}
/* ===============================
   ARTICLE YOUTUBE / SHORTS SIZE FINAL FIX
   - 본문/히어로 전용
   - 관련글 카드에는 영향 없음
   =============================== */
body.article-page .article-body > .video-wrapper,
body.article-page .article-body .summary-media > .video-wrapper,
body.article-page .cc-article-hero__media .video-wrapper{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16 / 9 !important;
  margin:1.2rem auto !important;
  overflow:hidden !important;
  background:#000 !important;
  border-radius:8px !important;
  line-height:0 !important;
}

body.article-page .article-body > .video-wrapper.is-shorts,
body.article-page .article-body .summary-media > .video-wrapper.is-shorts,
body.article-page .cc-article-hero__media .video-wrapper.is-shorts{
  width:min(420px, 100%) !important;
  max-width:420px !important;
  aspect-ratio:9 / 16 !important;
  margin:1.2rem auto !important;
  background:#000 !important;
}

body.article-page .video-wrapper .yt-lite{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:#000 !important;
  cursor:pointer !important;
}

body.article-page .video-wrapper .yt-lite img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-position:center center !important;
  background:#000 !important;
}

body.article-page .video-wrapper:not(.is-shorts) .yt-lite img{
  object-fit:cover !important;
}

body.article-page .video-wrapper.is-shorts .yt-lite img{
  object-fit:contain !important;
}

body.article-page .video-wrapper.is-shorts.thumb-vertical .yt-lite img{
  object-fit:cover !important;
}

body.article-page .video-wrapper iframe{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
}

body.article-page .video-wrapper::before{
  content:none !important;
  display:none !important;
  padding:0 !important;
}
/* 쇼츠 히어로 검은 박스 제거 / 영상 크기만 감싸기 */
body.article-page .cc-article-hero__media:has(.video-wrapper.is-shorts){
  width: min(420px, 100%) !important;
  max-width: 420px !important;
  margin: 1.2rem auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 10px !important;
  overflow: visible !important;
}

body.article-page .cc-article-hero__media .video-wrapper.is-shorts{
  width: 100% !important;
  max-width: 420px !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 auto !important;
  background: #000 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* 일반 유튜브는 기존처럼 16:9 전체폭 */
body.article-page .cc-article-hero__media:has(.video-wrapper:not(.is-shorts)){
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
}
/* ===============================
   ARTICLE FINAL FIX
   - 본문 과도한 BR/공백 제거
   - 유튜브/쇼츠 크기 안정화
   - 관련글 카드 레이아웃 고정
   =============================== */

/* 본문 줄바꿈 과다 방지 */
body.article-page .article-body{
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.72 !important;
}

body.article-page .article-body br + br{
  display:none !important;
}

body.article-page .article-body p{
  margin:0.85rem 0 !important;
}

/* 본문 영상 기본 */
body.article-page .article-body .video-wrap{
  width:100% !important;
  max-width:100% !important;
  margin:1.4rem auto !important;
  padding:0 !important;
  background:#000 !important;
  overflow:hidden !important;
  border-radius:8px !important;
  line-height:0 !important;
}

body.article-page .article-body .video-wrap video{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16 / 9 !important;
  object-fit:contain !important;
  margin:0 auto !important;
  background:#000 !important;
}

/* 유튜브 일반: 16:9 전체폭 */
body.article-page .cc-article-hero__media{
  width:100% !important;
  max-width:100% !important;
  margin:1.2rem auto 1.4rem !important;
  padding:0 !important;
  background:transparent !important;
  overflow:visible !important;
  border-radius:0 !important;
}

body.article-page .cc-article-hero__media .video-wrapper:not(.is-shorts),
body.article-page .article-body .summary-media .video-wrapper:not(.is-shorts){
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16 / 9 !important;
  margin:1.2rem auto !important;
  background:#000 !important;
  overflow:hidden !important;
  border-radius:8px !important;
  line-height:0 !important;
}

/* 유튜브 쇼츠: 부모까지 세로 크기로 축소해서 검은 좌우 박스 제거 */
body.article-page .cc-article-hero__media:has(.video-wrapper.is-shorts),
body.article-page .article-body .summary-media:has(.video-wrapper.is-shorts){
  width:min(420px, 100%) !important;
  max-width:420px !important;
  margin:1.2rem auto !important;
  padding:0 !important;
  background:transparent !important;
  overflow:visible !important;
  border-radius:0 !important;
}

body.article-page .cc-article-hero__media .video-wrapper.is-shorts,
body.article-page .article-body .summary-media .video-wrapper.is-shorts,
body.article-page .article-body > .video-wrapper.is-shorts{
  position:relative !important;
  width:100% !important;
  max-width:420px !important;
  aspect-ratio:9 / 16 !important;
  margin:0 auto !important;
  background:#000 !important;
  overflow:hidden !important;
  border-radius:10px !important;
  line-height:0 !important;
}

body.article-page .video-wrapper .yt-lite{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:#000 !important;
  cursor:pointer !important;
}

body.article-page .video-wrapper .yt-lite img,
body.article-page .video-wrapper iframe{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#000 !important;
}

body.article-page .video-wrapper:not(.is-shorts) .yt-lite img{
  object-fit:cover !important;
  object-position:center center !important;
}

body.article-page .video-wrapper.is-shorts .yt-lite img{
  object-fit:contain !important;
  object-position:center center !important;
}

body.article-page .video-wrapper.is-shorts.thumb-vertical .yt-lite img{
  object-fit:cover !important;
}

body.article-page .video-wrapper::before{
  content:none !important;
  display:none !important;
  padding:0 !important;
}

/* 관련글 카드: 어떤 이미지/영상이 와도 카드 크기 고정 */
.article-keyword-related{
  white-space:normal !important;
}

.article-keyword-related .related-blog-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
  width:100% !important;
  align-items:stretch !important;
}

.article-keyword-related .related-blog-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  height:250px !important;
  min-height:250px !important;
  max-height:250px !important;
  overflow:hidden !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  background:#fff !important;
}

.article-keyword-related .related-thumb{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:108px !important;
  min-height:108px !important;
  max-height:108px !important;
  flex:0 0 108px !important;
  overflow:hidden !important;
  background:#f3f4f6 !important;
  line-height:0 !important;
}

.article-keyword-related .related-thumb img,
.article-keyword-related .related-thumb video,
.article-keyword-related .related-thumb .related-thumb-video{
  display:block !important;
  position:static !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.article-keyword-related .related-thumb img{
  background:#f3f4f6 !important;
}

.article-keyword-related .related-thumb video,
.article-keyword-related .related-thumb .related-thumb-video{
  background:#000 !important;
  pointer-events:none !important;
}

.article-keyword-related .related-info{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  min-height:0 !important;
  padding:11px 10px 12px !important;
  text-align:center !important;
  white-space:normal !important;
}

.article-keyword-related .related-info strong{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  margin:0 0 10px !important;
  font-size:13.5px !important;
  line-height:1.42 !important;
}

.article-keyword-related .related-info em{
  margin-top:auto !important;
}

@media(max-width:1100px){
  .article-keyword-related .related-blog-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width:768px){
  .article-keyword-related .related-blog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  .article-keyword-related .related-blog-card{
    height:238px !important;
    min-height:238px !important;
    max-height:238px !important;
  }

  .article-keyword-related .related-thumb{
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    flex-basis:100px !important;
  }
}

@media(max-width:480px){
  .article-keyword-related .related-blog-grid{
    grid-template-columns:1fr !important;
  }

  .article-keyword-related .related-blog-card{
    height:340px !important;
    min-height:340px !important;
    max-height:340px !important;
  }

  .article-keyword-related .related-thumb{
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
    flex-basis:190px !important;
  }
}
/* =========================================================
   CHIHO ARTICLE · Ferrari Editorial Skin
   기준: newsroom Ferrari 톤 + DESIGN-ferrari.md
   - 기능/라우터/Jinja/댓글/광고 유지
   - 상단 cinematic hero + 하단 light editorial 3단
   ========================================================= */
:root{
  --chiho-f-red:#da291c;
  --chiho-f-red-active:#b01e0a;
  --chiho-f-canvas:#181818;
  --chiho-f-elevated:#303030;
  --chiho-f-ink:#ffffff;
  --chiho-f-muted:#969696;
  --chiho-f-line:#303030;
  --chiho-light:#ffffff;
  --chiho-light-soft:#f7f7f7;
  --chiho-line-light:#d2d2d2;
  --chiho-line-soft:#ebebeb;
  --chiho-text:#181818;
}

html,body{
  font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  background:var(--chiho-f-canvas) !important;
  color:var(--chiho-text) !important;
  animation:none !important;
  overflow-x:hidden;
}

/* ===== Top nav : newsroom과 동일한 near-black surface ===== */
body.article-page .top-links{
  position:sticky;
  top:0;
  z-index:90;
  min-height:64px;
  padding:0 48px !important;
  background:rgba(24,24,24,.94) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(16px);
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
}

body.article-page .top-links::before{
  content:"";
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:34px;
  background:var(--chiho-f-red);
}

body.article-page .top-links .left-links{
  display:flex;
  align-items:center;
  gap:18px;
}



body.article-page .top-links a,
body.article-page .top-links span,
body.article-page .top-links strong{
  color:#fff !important;
}

body.article-page .top-links a{
  padding:22px 10px !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.75px !important;
  text-transform:uppercase;
  border-radius:0 !important;
  opacity:.88;
  background:transparent !important;
}

body.article-page .top-links a:hover{
  color:#fff !important;
  opacity:1;
}

body.article-page .right-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}

/* ===== Article cinematic hero ===== */
.article-ferrari-hero{
  position:relative;
  min-height:clamp(460px,68vh,760px);
  background:var(--chiho-f-canvas);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

.article-ferrari-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 76% 12%, rgba(218,41,28,.30), transparent 32%),
    linear-gradient(135deg,#181818,#050505 75%);
}

.article-ferrari-hero__media img,
.article-ferrari-hero__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  opacity:.56;
  filter:saturate(.95) contrast(1.08);
}

.article-ferrari-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(24,24,24,.96) 0%, rgba(24,24,24,.76) 36%, rgba(24,24,24,.22) 68%, rgba(24,24,24,.88) 100%),
    linear-gradient(180deg, rgba(24,24,24,.05) 0%, rgba(24,24,24,.94) 100%);
}

.article-ferrari-hero__inner{
  position:relative;
  z-index:1;
  width:min(1760px,100%);
  min-height:inherit;
  margin:0 auto;
  padding:96px 48px 64px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:48px;
  align-items:end;
}

.article-ferrari-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  color:#d8d8d8;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.35px;
  text-transform:uppercase;
}

.article-ferrari-hero__kicker::before{
  content:"";
  width:44px;
  height:2px;
  background:var(--chiho-f-red);
}

.article-ferrari-hero h1{
  margin:0;
  max-width:1120px;
  color:#fff;
  font-size:clamp(42px,6.2vw,96px);
  line-height:.98;
  font-weight:600;
  letter-spacing:-.065em;
  word-break:keep-all;
}

.article-ferrari-hero__desc{
  max-width:760px;
  margin:28px 0 0;
  color:#c8c8c8;
  font-size:clamp(14px,1.05vw,18px);
  line-height:1.72;
  word-break:keep-all;
}

.article-ferrari-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}

.article-ferrari-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 32px !important;
  border-radius:0 !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:1.35px !important;
  text-transform:uppercase;
  text-decoration:none !important;
}

.article-ferrari-btn--primary{
  background:var(--chiho-f-red) !important;
  border:1px solid var(--chiho-f-red) !important;
  color:#fff !important;
}

.article-ferrari-btn--outline{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.72) !important;
  color:#fff !important;
}

.article-ferrari-hero__panel{
  align-self:end;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(24,24,24,.64);
  backdrop-filter:blur(16px);
  padding:24px;
}

.article-ferrari-meta{
  border-top:4px solid var(--chiho-f-red);
}

.article-ferrari-meta__row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.article-ferrari-meta__k{
  color:#969696;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

.article-ferrari-meta__v{
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  word-break:keep-all;
}

.article-ferrari-meta__v a{
  color:#fff !important;
  padding:0 !important;
  display:inline !important;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ===== Light editorial body layout ===== */
body.article-page > .container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:40px 32px 96px !important;
  display:grid !important;
  grid-template-columns:460px minmax(0,1fr) 360px !important;
  gap:32px !important;
  background:#fff !important;
}

body.article-page .left,
body.article-page .right{
  background:#f7f7f7 !important;
  border:1px solid var(--chiho-line-light) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:24px !important;
  min-width:0 !important;
}

body.article-page .center{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  overflow:visible !important;
}

body.article-page .article-content{
  background:#fff !important;
  border:1px solid var(--chiho-line-light) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:48px !important;
  margin:0 !important;
}

body.article-page .article-content > h1{
  margin:0 0 28px !important;
  padding-bottom:22px !important;
  border-bottom:2px solid #181818 !important;
  color:#181818 !important;
  font-size:clamp(28px,2.7vw,44px) !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  word-break:keep-all;
}

/* 사이드 타이틀 */
body.article-page .left h3,
body.article-page .right h3{
  margin:28px 0 14px !important;
  padding:14px 0 0 !important;
  border-top:2px solid #181818 !important;
  color:#181818 !important;
  font-size:12px !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:1.2px;
}

body.article-page .left h3:first-child,
body.article-page .right h3:first-child{
  margin-top:0 !important;
}

body.article-page .left h3 img,
body.article-page .right h3 img{
  height:1.15em !important;
  vertical-align:middle;
  margin-right:.4em;
}

/* 리스트 */
body.article-page .left ul,
body.article-page .right ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}

body.article-page .left #left-blog-list > li,
body.article-page .left #article-list > li,
body.article-page .right #right-issue-list > li{
  margin:0 !important;
  padding:0 !important;
  border-bottom:1px solid var(--chiho-line-soft) !important;
  display:block !important;
}

body.article-page .left #left-blog-list a.article-link,
body.article-page .left #article-list a.article-link,
body.article-page .right #right-issue-list a.humor-link{
  display:block !important;
  height:40px !important;
  line-height:40px !important;
  padding:0 4px !important;
  margin:0 !important;
  color:#181818 !important;
  font-size:13px !important;
  font-weight:600 !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  border-left:4px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
}

body.article-page .left #left-blog-list a.article-link:hover,
body.article-page .left #article-list a.article-link:hover,
body.article-page .right #right-issue-list a.humor-link:hover{
  color:var(--chiho-f-red) !important;
}

body.article-page .left .article-item.is-active > a.article-link,
body.article-page .right .humor-item.is-active > a.humor-link{
  border-left-color:var(--chiho-f-red) !important;
  color:#181818 !important;
  background:#fff !important;
  font-weight:900 !important;
}

/* Pager */
body.article-page .list-pager{
  margin:12px 0 22px !important;
  padding:0 !important;
}

body.article-page .list-pager button{
  border:1px solid #181818 !important;
  background:#fff !important;
  color:#181818 !important;
  border-radius:0 !important;
  padding:7px 10px !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.article-page .list-pager button:hover,
body.article-page .list-pager .pg-num:disabled{
  background:var(--chiho-f-red) !important;
  border-color:var(--chiho-f-red) !important;
  color:#fff !important;
}

/* Tag / admin / print buttons */
body.article-page .tag-badge,
body.article-page .tag-badge.all{
  display:inline-flex !important;
  width:auto !important;
  margin:0 0 16px !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  background:#181818 !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

body.article-page .tag-clear{
  color:var(--chiho-f-red) !important;
  font-weight:900 !important;
  padding:0 !important;
}

body.article-page .admin-action-button,
body.article-page .comment-btn{
  border-radius:0 !important;
  border:1px solid #181818 !important;
  background:#181818 !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.article-page .admin-action-button:hover,
body.article-page .comment-btn:hover{
  background:var(--chiho-f-red) !important;
  border-color:var(--chiho-f-red) !important;
}

/* 본문 typography */
body.article-page .article-body{
  color:#252525 !important;
  font-size:1.06rem !important;
  line-height:1.78 !important;
  letter-spacing:-.01em;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
}

body.article-page .article-body p{
  margin:.95rem 0 !important;
}

body.article-page .article-body h2,
body.article-page .article-body h3,
body.article-page .article-body h4{
  color:#181818 !important;
  font-weight:600 !important;
  line-height:1.32 !important;
  letter-spacing:-.025em;
}

body.article-page .article-body h2{
  margin:2.4rem 0 1rem !important;
  padding-top:18px !important;
  border-top:1px solid var(--chiho-line-light);
  font-size:1.65rem !important;
}

body.article-page .article-body h3{
  margin:1.8rem 0 .8rem !important;
  font-size:1.28rem !important;
}

body.article-page .article-body a{
  color:var(--chiho-f-red) !important;
  padding:0 !important;
  text-decoration:underline;
  text-underline-offset:4px;
  display:inline !important;
}

body.article-page .article-body img{
  border-radius:0 !important;
  margin:1.35rem auto !important;
}

body.article-page .article-body table{
  border-collapse:collapse !important;
  width:100% !important;
  margin:1.4rem 0 !important;
  border-top:2px solid #181818 !important;
}

body.article-page .article-body th,
body.article-page .article-body td{
  border:1px solid var(--chiho-line-light) !important;
  padding:10px 12px !important;
}

body.article-page .article-body th{
  background:#f7f7f7 !important;
  color:#181818 !important;
  font-weight:800 !important;
}

/* 대표 미디어: 각진 편집면 */
body.article-page .cc-article-hero__media,
body.article-page .article-body .video-wrap,
body.article-page .video-wrapper,
body.article-page .article-body video,
body.article-page .cc-article-hero__video{
  border-radius:0 !important;
}

/* 첨부파일 박스 */
body.article-page .article-content > div[style*="background:#f4f4f4"]{
  background:#f7f7f7 !important;
  border:1px solid var(--chiho-line-light) !important;
  border-radius:0 !important;
}

/* 광고/쿠팡 */
body.article-page .ad-slot,
body.article-page .coupang-inline-banner{
  border-radius:0 !important;
  background:#fff !important;
  border:1px solid var(--chiho-line-light) !important;
  padding:18px !important;
  box-shadow:none !important;
}

/* 관련 키워드/관련글 */
body.article-page .article-keyword-related{
  margin:56px 0 28px !important;
  padding-top:30px !important;
  border-top:2px solid #181818 !important;
}





body.article-page .related-blog-card{
  border-radius:0 !important;
  border:1px solid var(--chiho-line-light) !important;
  box-shadow:none !important;
}

body.article-page .related-thumb{
  border-radius:0 !important;
  background:#f7f7f7 !important;
}

/* 댓글 */
body.article-page .comment-section{
  margin-top:48px !important;
  padding:24px !important;
  background:#f7f7f7 !important;
  border:1px solid var(--chiho-line-light) !important;
  border-radius:0 !important;
}

body.article-page .comment-title{
  color:#181818 !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
}

body.article-page .comment-title .count{
  color:var(--chiho-f-red) !important;
}

body.article-page .comment-form,
body.article-page .comment-item{
  border-radius:0 !important;
  border:1px solid var(--chiho-line-light) !important;
  background:#fff !important;
}

/* 배너 이미지 */
body.article-page .rgi img,
body.article-page .left-banners img{
  border-radius:0 !important;
  border:1px solid var(--chiho-line-light);
  box-shadow:none !important;
}

/* 인쇄버튼을 기사 카드 상단에 정돈 */
body.article-page .print-toolbar{
  margin:0 0 12px !important;
}

/* Responsive */
@media(max-width:1280px){
  .article-ferrari-hero__inner{
    grid-template-columns:1fr;
    padding:82px 28px 56px;
  }
  .article-ferrari-hero__panel{
    max-width:620px;
  }
  body.article-page > .container{
    grid-template-columns:minmax(260px,340px) minmax(0,1fr) minmax(240px,300px) !important;
    gap:24px !important;
    padding:32px 24px 80px !important;
  }
  body.article-page .article-content{
    padding:36px !important;
  }
}

@media(max-width:980px){
  body.article-page > .container{
    display:flex !important;
    flex-direction:column !important;
    padding:24px 16px 72px !important;
  }
  body.article-page .center{order:0 !important;}
  body.article-page .left{order:1 !important;display:block !important;width:100% !important;}
  body.article-page .right{order:2 !important;display:block !important;width:100% !important;}
}

@media(max-width:768px){
  body.article-page .top-links{
    min-height:auto;
    padding:12px 14px !important;
    overflow-x:auto;
  }
  body.article-page .top-links::before,
  body.article-page .top-links .left-links::after{
    display:none;
  }
  body.article-page .top-links a{
    padding:9px 10px !important;
  }
  .article-ferrari-hero{
    min-height:560px;
  }
  .article-ferrari-hero__inner{
    padding:70px 18px 46px;
  }
  .article-ferrari-hero h1{
    font-size:clamp(36px,11vw,62px);
  }
  .article-ferrari-hero__desc{
    font-size:14px;
    line-height:1.68;
  }
  .article-ferrari-btn{
    min-height:44px;
    padding:0 18px !important;
    font-size:11px !important;
  }
  .article-ferrari-hero__panel{
    padding:16px;
  }
  .article-ferrari-meta__row{
    grid-template-columns:74px minmax(0,1fr);
    gap:12px;
  }
  body.article-page > .container{
    padding:18px 12px 64px !important;
  }
  body.article-page .article-content{
    padding:22px 18px !important;
  }
  body.article-page .article-content > h1{
    font-size:28px !important;
  }
  body.article-page .article-body{
    font-size:1rem !important;
    line-height:1.74 !important;
  }
  body.article-page .left,
  body.article-page .right{
    padding:18px !important;
  }
  body.article-page .related-blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:480px){
  body.article-page .related-blog-grid{
    grid-template-columns:1fr !important;
  }
}

body.article-page .article-hashtag-box,
body.article-page .article-hashtags,
body.article-page .article-hashtag{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}

body.article-page .article-hashtag-box{
  margin:42px 0 30px !important;
  padding:24px 0 0 !important;
  border-top:1px solid #d2d2d2 !important;
}

body.article-page .article-hashtags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px 12px !important;
  margin:0 !important;
  padding:0 0 28px !important;
  border-bottom:1px solid #d2d2d2 !important;
}

body.article-page .article-hashtag{
  display:inline !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  color:#da291c !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.6 !important;
  text-decoration:none !important;
}

body.article-page .article-hashtag:hover{
  color:#181818 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

@media(max-width:768px){
  body.article-page .article-hashtag-box{
    margin:32px 0 24px !important;
    padding-top:20px !important;
  }

  body.article-page .article-hashtags{
    gap:6px 10px !important;
    padding-bottom:22px !important;
  }

  body.article-page .article-hashtag{
    font-size:12px !important;
    line-height:1.7 !important;
    white-space:nowrap !important;
  }
}
/* ===============================
   KOOREEA PRODUCT RECOMMEND SLIDER
   - desktop: 4 cards per slide
   - mobile : 2 cards per slide
   - products.html card style adapted
   =============================== */

.kooreea-product-section{
  margin:56px 0 34px;
  padding:30px 0 0;
  border-top:2px solid #181818;
  clear:both;
}

.kooreea-product-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
}

.kooreea-product-kicker{
  display:inline-flex;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:950;
  color:#64748b;
  background:#fff;
  margin-bottom:9px;
}

.kooreea-product-title{
  margin:0;
  color:#111827;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.055em;
  font-weight:950;
}

.kooreea-product-desc{
  margin:7px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.55;
  word-break:keep-all;
}

.kooreea-product-more{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px !important;
  border:1px solid #111827;
  background:#111827;
  color:#fff !important;
  font-size:12px;
  font-weight:950;
  text-decoration:none !important;
  border-radius:0 !important;
}

.kooreea-product-more:hover{
  background:#da291c;
  border-color:#da291c;
  color:#fff !important;
}

.kooreea-product-slider{
  position:relative;
  width:100%;
}

.kooreea-product-viewport{
  width:100%;
  overflow:hidden;
}

.kooreea-product-track{
  display:flex;
  width:100%;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.kooreea-product-slide{
  flex:0 0 100%;
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px 12px;
  align-items:start;
}

.kooreea-product-card{
  display:block !important;
  position:relative;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#111827 !important;
  text-decoration:none !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0;
}

.kooreea-product-thumb{
  aspect-ratio:1/1;
  background:#fff;
  border:1px solid #f1f5f9;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.kooreea-product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#fff;
  transition:.22s ease;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.kooreea-product-card:hover .kooreea-product-thumb img{
  transform:scale(1.035);
}

.kooreea-product-noimg{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ca3af;
  font-size:13px;
  font-weight:950;
  background:#fff;
}

.kooreea-product-body{
  padding:9px 0 0;
}

.kooreea-product-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:38px;
  margin:0;
  font-size:13.5px;
  line-height:1.38;
  font-weight:850;
  letter-spacing:-.035em;
  color:#111827;
  word-break:keep-all;
}

.kooreea-product-price-row{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:6px;
  flex-wrap:wrap;
}

.kooreea-product-price{
  font-weight:950;
  font-size:14px;
  letter-spacing:-.03em;
  color:#111827;
}

.kooreea-product-discount{
  font-size:14px;
  font-weight:950;
  color:#ef4444;
  letter-spacing:-.03em;
}

.kooreea-product-compare{
  width:100%;
  color:#aaa;
  font-size:11px;
  text-decoration:line-through;
  line-height:1.2;
}

.kooreea-product-review{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  color:#64748b;
  font-size:11.5px;
  font-weight:850;
}

.kooreea-product-review .star{
  color:#111827;
  font-size:11px;
  font-weight:950;
}

.kooreea-product-review b{
  color:#111827;
  font-weight:950;
}

.kooreea-product-meta{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  margin-top:7px;
}

.kooreea-product-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:19px;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  border:1px solid transparent;
}

.kooreea-product-badge.best{
  background:#eef2ff;
  color:#3730a3;
  border-color:#e0e7ff;
}

.kooreea-product-badge.new{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#dbeafe;
}

.kooreea-product-badge.pick{
  background:#ecfdf5;
  color:#047857;
  border-color:#d1fae5;
}

.kooreea-product-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
}

.kooreea-product-arrows{
  display:flex;
  align-items:center;
  gap:8px;
}

.kooreea-product-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid #111827;
  background:#fff;
  color:#111827;
  font-size:18px;
  line-height:1;
  font-weight:950;
  cursor:pointer;
  border-radius:0;
}

.kooreea-product-arrow:hover:not(:disabled){
  background:#111827;
  color:#fff;
}

.kooreea-product-arrow:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.kooreea-product-dots{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}

.kooreea-product-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  border:0;
  padding:0;
  background:#cbd5e1;
  cursor:pointer;
}

.kooreea-product-dot.is-active{
  width:22px;
  background:#111827;
}

.kooreea-product-count{
  font-size:12px;
  color:#64748b;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}

.kooreea-product-loading,
.kooreea-product-empty{
  padding:28px 18px;
  border:1px dashed #cbd5e1;
  background:#fff;
  color:#64748b;
  text-align:center;
  font-size:13px;
  font-weight:850;
}

@media(max-width:768px){
  .kooreea-product-section{
    margin:42px 0 28px;
    padding-top:24px;
  }

  .kooreea-product-head{
    display:block;
  }

  .kooreea-product-title{
    font-size:21px;
  }

  .kooreea-product-desc{
    font-size:13px;
  }

  .kooreea-product-more{
    width:100%;
    margin-top:14px;
  }

  .kooreea-product-slide{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 10px;
  }

  .kooreea-product-name{
    font-size:13px;
  }

  .kooreea-product-controls{
    margin-top:16px;
  }

  .kooreea-product-arrow{
    width:40px;
    height:40px;
  }
}
/* CHIHO_RELATED_LOADMORE_NEWSROOM_MOBILE_SYNC */

/* 제목: '이 주제와 함께 보면 좋은 글' + '태그별 글 더보기' 같은 톤 */
body.article-page .article-keyword-related .related-blog-section > h2,
body.article-page .article-detail-more-posts .article-loadmore-title {
  margin: 0 0 20px !important;
  padding: 0 0 14px !important;
  border-bottom: 2px solid #181818 !important;
  color: #181818 !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  text-align: left !important;
}

/* 모바일: 관련글 + 로드몰 둘 다 뉴스룸 카드처럼 */
@media (max-width: 768px) {
  body.article-page .article-keyword-related .related-blog-grid,
  body.article-page .article-detail-more-posts .related-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.article-page .article-keyword-related .related-blog-card,
  body.article-page .article-detail-more-posts .related-blog-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 1px solid #d2d2d2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.article-page .article-keyword-related .related-thumb,
  body.article-page .article-detail-more-posts .related-thumb {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    aspect-ratio: 16 / 9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
    line-height: 0 !important;
  }

  body.article-page .article-keyword-related .related-thumb img,
  body.article-page .article-keyword-related .related-thumb video,
  body.article-page .article-keyword-related .related-thumb .related-thumb-video,
  body.article-page .article-detail-more-posts .related-thumb img,
  body.article-page .article-detail-more-posts .related-thumb video,
  body.article-page .article-detail-more-posts .related-thumb .related-thumb-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.article-page .article-keyword-related .related-info,
  body.article-page .article-detail-more-posts .related-info {
    display: block !important;
    padding: 14px 14px 16px !important;
    text-align: left !important;
  }

  /* 태그는 가운데 정렬 */
  body.article-page .article-keyword-related .related-info span,
  body.article-page .article-detail-more-posts .related-info span {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #da291c !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
  }

  /* 제목은 뉴스룸 카드처럼 */
  body.article-page .article-keyword-related .related-info strong,
  body.article-page .article-detail-more-posts .related-info strong {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #222 !important;
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  body.article-page .article-keyword-related .related-info em,
  body.article-page .article-detail-more-posts .related-info em {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #777 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-style: normal !important;
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  body.article-page .article-keyword-related .related-blog-grid,
  body.article-page .article-detail-more-posts .related-blog-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ARTICLE_LOADMORE_REUSE_RELATED_CARD_V9 */
/* 로드몰은 기존 article-keyword-related / related-blog-card 구조를 재사용한다. */
.article-detail-more-posts.article-keyword-related{
  margin-top:48px !important;
}

.article-loadmore-title{
  margin:0 0 20px !important;
  color:#111827 !important;
  font-size:24px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
  letter-spacing:-0.04em !important;
}

.article-detail-more-posts .admp-sentinel{
  width:100%;
  height:1px;
  grid-column:1 / -1;
}
/* ARTICLE_LOADMORE_RELATED_FORCE_TAG_V10 */
.article-detail-more-posts.article-keyword-related{
  margin-top:48px !important;
}
.article-detail-more-posts .admp-sentinel{
  width:100%;
  height:1px;
  grid-column:1 / -1;
}
/* ARTICLE_LOADMORE_ROW_DIVIDER_V11 */
/* 데스크탑: 4열 × 2행, 즉 8개마다 얇은 구분선 */
@media (min-width: 1101px){
  .article-detail-more-posts .related-blog-grid{
    gap: 22px 16px !important;
  }

  .article-detail-more-posts .loadmore-row-divider{
    grid-column: 1 / -1;
    height: 1px;
    margin: 24px 0 28px;   /* 위아래 br 느낌 */
    background: linear-gradient(
      90deg,
      rgba(0,0,0,0),
      rgba(0,0,0,.22),
      rgba(0,0,0,0)
    );
  }

  .article-detail-more-posts .loadmore-row-divider::before,
  .article-detail-more-posts .loadmore-row-divider::after{
    content:"";
    display:block;
    height:1px;
  }
}

/* 태블릿/모바일에서는 선이 오히려 지저분하므로 숨김 */
@media (max-width: 1100px){
  .article-detail-more-posts .loadmore-row-divider{
    display:none !important;
  }
}
/* ARTICLE_LOADMORE_TAG_GROUP_DIVIDER_V12 */
/* 최신순 단순 나열이 아니라 태그 그룹별 구분선 + 태그명 표시 */
.article-detail-more-posts .loadmore-row-divider{
  display:none !important;
}

.article-detail-more-posts .loadmore-tag-divider{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:30px 0 24px;
  color:#111827;
  font-size:13px;
  font-weight:900;
  letter-spacing:-0.02em;
  text-align:center;
}

.article-detail-more-posts .loadmore-tag-divider::before,
.article-detail-more-posts .loadmore-tag-divider::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0),
    rgba(0,0,0,.22)
  );
}

.article-detail-more-posts .loadmore-tag-divider::after{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.22),
    rgba(0,0,0,0)
  );
}

.article-detail-more-posts .loadmore-tag-divider span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  max-width:min(360px, 70%);
  padding:5px 12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  border-radius:999px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:768px){
  .article-detail-more-posts .loadmore-tag-divider{
    margin:22px 0 18px;
    font-size:12px;
    gap:10px;
  }
  .article-detail-more-posts .loadmore-tag-divider span{
    min-width:60px;
    padding:4px 10px;
  }
}
/* ARTICLE_LOADMORE_TAG_INNER_DIVIDER_V13 */

/* 기존 8개 row divider 잔여물 숨김 */
.article-detail-more-posts .loadmore-row-divider{
  display:none !important;
}

/* 태그가 바뀌는 지점: 조금 더 진한 구분선 */
.article-detail-more-posts .loadmore-tag-divider{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:36px 0 28px;
  color:#111827;
  font-size:13px;
  font-weight:950;
  letter-spacing:-0.02em;
  text-align:center;
}

.article-detail-more-posts .loadmore-tag-divider::before,
.article-detail-more-posts .loadmore-tag-divider::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0),
    rgba(0,0,0,.42)
  );
}

.article-detail-more-posts .loadmore-tag-divider::after{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.42),
    rgba(0,0,0,0)
  );
}

.article-detail-more-posts .loadmore-tag-divider span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  max-width:min(380px, 70%);
  padding:6px 14px;
  border:1px solid rgba(0,0,0,.28);
  background:#111827;
  color:#fff;
  border-radius:999px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 같은 태그 안에서 4열 × 2행마다 얇은 구분선 */
@media (min-width:1101px){
  .article-detail-more-posts .loadmore-inner-row-divider{
    grid-column:1 / -1;
    height:1px;
    margin:24px 0 26px;
    background:linear-gradient(
      90deg,
      rgba(0,0,0,0),
      rgba(0,0,0,.18),
      rgba(0,0,0,0)
    );
  }
}

/* 태블릿/모바일은 카드 열 수가 바뀌므로 내부 2행선은 숨김 */
@media (max-width:1100px){
  .article-detail-more-posts .loadmore-inner-row-divider{
    display:none !important;
  }
}

@media(max-width:768px){
  .article-detail-more-posts .loadmore-tag-divider{
    margin:26px 0 20px;
    font-size:12px;
    gap:10px;
  }

  .article-detail-more-posts .loadmore-tag-divider span{
    min-width:64px;
    padding:5px 11px;
  }
}