/* 뉴스페이퍼 모바일 메뉴 커스텀 CSS (풀위드, 로그인 분기, 폰트어썸 적용) */
.np-mobile-menu-wrap * {
  box-sizing: border-box;
}
.np-mobile-menu-wrap {
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  background-color: #fff;
  color: #333;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 30px 0 !important;
}
.np-mobile-menu-wrap a {
  text-decoration: none;
  color: inherit;
}
.np-mobile-menu-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 공통 섹션 패딩 (좌우 정렬 맞춤) */
.np-mobile-menu-wrap .np-section-padding {
  padding: 16px 20px;
}
/* 헤더 영역 */
/* 헤더는 2행 구조: 1행 = 인사말 + 닫기, 2행 = 바로가기 아이콘.
   ⚠️ 예전엔 한 줄에 인사말 + 아이콘 5개를 몰아넣어 로그인 시 폭이 빠듯했다
      (§66: 이름 span 이 0px 로 찌그러져 통째로 사라짐 → ellipsis 로 겨우 막던 상태).
      행을 나누면 이름이 잘릴 여지 자체가 없어진다. */
.np-mobile-menu-wrap .menu-header {
  border-bottom: 1px solid #f0f0f0;
}
.np-mobile-menu-wrap .menu-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* ★ nowrap — 아이콘이 아래로 떨어지지 않게 하는 핵심. 폭이 모자라면 줄을 바꾸는 대신
     이름이 ellipsis 로 줄어든다(아이콘은 flex-shrink:0 이라 그대로). */
  flex-wrap: nowrap;
  gap: 6px;
}
.np-mobile-menu-wrap .user-info {
  /* 아이콘 6개와 한 줄을 나눠 쓰므로 18px → 17px. 좁은 화면은 아래 미디어쿼리에서 15px. */
  font-size: 17px;
  font-weight: bold;
  display: flex;
  align-items: center;
  min-width: 0;        /* 긴 닉네임이 flex 아이템을 넘어서지 않도록 */
  flex: 1 1 auto;
  overflow: hidden;    /* 넘치면 아이콘을 밀지 않고 이름만 잘림 */
}
/* ⚠️ 예전엔 inline-flex + 이름 span 에 min-width:0/ellipsis 였는데, 그러면 이름 span 이
   **flex 아이템이라 0px 까지 찌그러져** 이름이 통째로 사라지고 "님, 안녕하세요!" 만 남았다
   (로그인 시 헤더 아이콘이 5개라 폭이 빠듯 — 실측 필요 136px / 가용 123px).
   → 링크 전체를 한 줄 block 으로 두고 **끝에서 …로 자른다**. 이름이 앞이라 항상 보인다. */
.np-mobile-menu-wrap .user-info a {
  display: block;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap; /* 이름+인사말이 아래 줄로 떨어지지 않게 한 줄 고정 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.np-mobile-menu-wrap .user-info a .swn-dynamic-name {
  display: inline; /* flex 아이템이 아니게 → 0px 로 찌그러지지 않음 */
}
/* 로그인 텍스트 옆 화살표 아이콘.
   ⚠️ font-weight 를 normal 로 두면 Font Awesome 6 Free 의 Solid 페이스(900)가
      선택되지 않아 Regular 로 폴백하고, Free Regular 에는 이 글리프가 없어서
      네모(두부)로 렌더된다. .user-info 의 bold 상속을 끊으려던 값이었지만
      아이콘 폰트에는 오히려 독이라 900 으로 고정한다. */
.np-mobile-menu-wrap .user-info i {
  margin-left: 5px;
  font-weight: 900;
  color: #888;
  font-size: 14px;
  flex-shrink: 0;
}
/* 헤더 아이콘 그룹 — 인사말과 같은 줄. 절대 찌그러지지도, 줄바꿈하지도 않는다. */
.np-mobile-menu-wrap .header-icons {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  flex-shrink: 0;
  color: #666;
  font-size: 18px;
  line-height: 1;
}
/* 히트박스 36×36. 아이콘 6개 + 인사말을 한 줄에 담아야 해서 44px(§57 권장)에서 줄였다.
   글리프(18px)만 누르던 예전보다는 여전히 두 배 넓고, 좁은 화면에선 32px 로 한 번 더 준다.
   ⚠️ flex-shrink:0 필수 — 이게 없으면 폭이 모자랄 때 아이콘이 찌그러진다. */
.np-mobile-menu-wrap .header-icons a,
.np-mobile-menu-wrap .np-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  /* ⚠️ 50% 로 두면 히트 테스트까지 원형으로 잘려 모서리 탭이 부모로 빠진다
     (elementFromPoint 로 실측 확인). 라운드 스퀘어면 44×44 가 거의 그대로 살고,
     .icon-box(18px)·.promo-icon(18px)과 같은 시각 언어가 된다. */
  border-radius: 12px;
}
/* 닫기는 <i onclick> 이 아니라 실제 <button> — 키보드 포커스·스크린리더 대응 */
.np-mobile-menu-wrap .np-close-btn {
  background: none;
  border: 0;
  padding: 0;
  /* 히트박스 안쪽 여백만큼 당겨 본문 우측선에 광학 정렬 */
  margin-right: -8px;
  color: #666;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
/* ── 메뉴 순서 편집 ─────────────────────────────────────────── */
/* 하단 순서 편집 진입 버튼 */
/* ⚠️ 버튼이 inline-flex 라 부모의 text-align 을 따라야 가운데로 오는데, 테마 전역 규칙에
   휘둘리지 않게 컨테이너를 flex 로 만들어 직접 가운데 정렬한다(§55-3). */
.np-mobile-menu-wrap .np-order-entry {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
.np-mobile-menu-wrap .np-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  background: none;
  color: #666;
  font-size: 13px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-order-btn i {
  font-size: 14px;
}
.np-mobile-menu-wrap .np-order-btn[aria-pressed="true"] {
  border-color: #1a73e8;
  background-color: #e8f0fe;
  color: #1a73e8;
}
.np-mobile-menu-wrap .np-order-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: #f4f6f8;
}
/* [hidden] 은 display 선언에 지므로 명시적으로 이긴다 */
.np-mobile-menu-wrap .np-order-bar[hidden] {
  display: none !important;
}
.np-mobile-menu-wrap .np-order-hint {
  font-size: 12px;
  line-height: 1.45;
  color: #555;
  flex: 1 1 160px;
  min-width: 0;
}
.np-mobile-menu-wrap .np-order-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.np-mobile-menu-wrap .np-order-bar button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d7dce2;
  border-radius: 10px;
  background-color: #fff;
  color: #333;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-order-done {
  border-color: #1a73e8 !important;
  background-color: #1a73e8 !important;
  color: #fff !important;
}
/* 손잡이는 편집 모드에서만 보인다 */
.np-mobile-menu-wrap .swn-drag-handle {
  display: none;
}
.np-mobile-menu-wrap.swn-order-editing .menu-section {
  position: relative;
  border-radius: 12px;
  /* outline 은 레이아웃을 밀지 않아 편집 모드 진입 시 화면이 튀지 않는다 */
  outline: 1px dashed #c8d1db;
  outline-offset: -6px;
}
.np-mobile-menu-wrap.swn-order-editing .swn-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 6px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background-color: #eef1f4;
  color: #5f6368;
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  /* ⚠️ 필수 — 없으면 브라우저가 이 요소의 터치를 스크롤로 먼저 가져가 드래그가 안 걸린다 */
  touch-action: none;
  z-index: 2;
}
/* 손잡이와 섹션 제목이 겹치지 않게 편집 모드에서만 오른쪽을 비운다 */
.np-mobile-menu-wrap.swn-order-editing .section-title {
  padding-right: 52px;
}
.np-mobile-menu-wrap .menu-section.swn-dragging {
  background-color: #f2f7ff;
  outline-color: #1a73e8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.np-mobile-menu-wrap .menu-section.swn-dragging .swn-drag-handle {
  background-color: #1a73e8;
  color: #fff;
  cursor: grabbing;
}
/* 드래그 중 텍스트 선택·롱프레스 팝업 억제 */
body.swn-order-dragging {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* 스크린리더 안내 전용(화면 비노출) */
.swn-order-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* 로그인 상태에 따른 보이기/숨기기 */
.np-mobile-menu-wrap .logged-in-only {
  display: none;
}
body.logged-in .np-mobile-menu-wrap .logged-in-only {
  display: flex;
}
body.logged-in .np-mobile-menu-wrap .logged-out-only {
  display: none;
}
/* 공통 섹션 */
.np-mobile-menu-wrap .menu-section {
  border-bottom: 8px solid #f5f6f8;
}
.np-mobile-menu-wrap .menu-section:last-child {
  border-bottom: none;
}
/* 섹션 타이틀 여백은 여기 한 곳에서만 정한다(예전엔 섹션마다 인라인 style 로
   16px/12px/16px 제각각이었다). .section-title-wrap/.section-links 는 쓰이지
   않는 짝(더보기 링크 자리)이라 함께 제거. */
.np-mobile-menu-wrap .section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 16px;
  line-height: 1;
  color: #111;
}
/* 주요 뉴스 (그리드 아이콘형) */
.np-mobile-menu-wrap .shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 10px;
  text-align: center;
}
.np-mobile-menu-wrap .shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* grid 아이템 기본 min-width:auto 를 풀지 않으면 긴 라벨(en: Entertainment)이
     52.5px 짜리 셀을 밀어내 그리드 전체가 어긋난다. */
  min-width: 0;
}
.np-mobile-menu-wrap .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background-color: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 20px;
  transition: background 0.2s;
}
/* 터치 기기엔 hover 가 없다. 탭 후 hover 가 눌어붙는 것도 막기 위해 분리하고,
   실제 피드백은 :active 로 준다. */
@media (hover: hover) {
  .np-mobile-menu-wrap .shortcut-item:hover .icon-box {
    background-color: #e9ecef;
  }
}
.np-mobile-menu-wrap .shortcut-item:active .icon-box {
  background-color: #e2e6ea;
}
.np-mobile-menu-wrap .item-name {
  font-size: 13px;
  color: #444;
  line-height: 1.2;
  letter-spacing: -0.3px;
  padding: 0 5px;
  max-width: 100%;
  word-break: keep-all;      /* 한국어를 어절 중간에서 자르지 않음(과학·미 / 디어 방지) */
  overflow-wrap: anywhere;   /* 셀보다 긴 영단어는 강제로 줄바꿈 */
  -webkit-hyphens: auto;
  /* 분철이 가능한 플랫폼에서는 Enter-/tainment 처럼 끊어 준다(점진적 향상).
     하이픈 사전이 없는 환경에서는 무효 — 그때는 overflow-wrap 이 받는다. */
  hyphens: auto;
}
/* 8개가 2행으로 놓이는 주요뉴스 그리드만 줄 수를 예약해 행 높이를 고르게 한다. */
.np-mobile-menu-wrap .shortcut-grid .item-name {
  min-height: 2.4em;
}
/* 특정 컬러 아이콘 박스 */
.np-mobile-menu-wrap .fa-icon-politics {
  background-color: #e8f0fe !important;
  color: #1a73e8 !important;
}
.np-mobile-menu-wrap .fa-icon-society {
  color: #555 !important;
}
.np-mobile-menu-wrap .fa-icon-economy {
  color: #28a745 !important;
}
.np-mobile-menu-wrap .fa-icon-education {
  color: #c2255c !important;
}
.np-mobile-menu-wrap .fa-icon-culture {
  color: #f2b117 !important;
}
.np-mobile-menu-wrap .fa-icon-science {
  color: #0056b3 !important;
}
.np-mobile-menu-wrap .fa-icon-entertainment {
  background-color: #fff0f6 !important;
  color: #c2255c !important;
}
.np-mobile-menu-wrap .fa-icon-sports {
  background-color: #e6fcf5 !important;
  color: #08a045 !important;
}
/* 커뮤니티 아이콘 박스 */
.np-mobile-menu-wrap .fa-icon-community-board {
  background-color: #e8f0fe !important;
  color: #1a73e8 !important;
}
.np-mobile-menu-wrap .fa-icon-community-game {
  background-color: #f3f0ff !important;
  color: #7048e8 !important;
}
.np-mobile-menu-wrap .fa-icon-community-fortune {
  background-color: #fff4e6 !important;
  color: #e8590c !important;
}
/* 오피니언 및 특집 기사 */
.np-mobile-menu-wrap .news-banner {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  border: 1px solid #f0f0f0;
}
.np-mobile-menu-wrap .news-banner strong {
  color: #0056b3;
  margin-left: 5px;
}
.np-mobile-menu-wrap .text-list {
  font-size: 14px;
}
.np-mobile-menu-wrap .text-list li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* 서브링크가 같은 줄에서 압축·오버플로하지 않게 */
  border-bottom: 1px solid #f9f9f9;
}
.np-mobile-menu-wrap .text-list li > a {
  display: inline-block;
  padding: 4px 0;
}
.np-mobile-menu-wrap .text-list li:last-child {
  border-bottom: none;
}
.np-mobile-menu-wrap .text-list-icon {
  width: 24px;
  height: 24px;
  background: #eee;
  color: #555;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}
/* 서브링크는 다음 줄 전체 폭으로 내린다.
   ⚠️ 예전엔 margin-left:auto 로 같은 줄 오른쪽에 붙였는데, li 가 nowrap flex 라
      영문(Politics Society Economy Trend ≈ 220px) + 라벨이 가용폭(246px)을 넘겨
      압축되거나 넘쳤다. 정보 위계상으로도 하위 항목은 아래가 맞다. */
.np-mobile-menu-wrap .sub-links {
  font-size: 12px;
  color: #888;
  flex-basis: 100%;
  margin: 0 0 0 34px;   /* 아이콘 24px + 우측 여백 10px 만큼 들여쓰기 */
}
.np-mobile-menu-wrap .sub-links a {
  display: inline-block;
  padding: 10px 2px;   /* 12px 글자라 여백 없이는 히트박스가 글자 높이(약 14px)뿐이었다 */
  margin: 0 12px 0 0;
}
/* 지역 콘텐츠 & 글로벌 */
.np-mobile-menu-wrap .tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.np-mobile-menu-wrap .tag-wrap:last-child {
  margin-bottom: 0;
}
.np-mobile-menu-wrap .tag-item {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 13px;
  color: #555;
  display: inline-flex;
  align-items: center;
  min-height: 40px;   /* 터치 타깃 확보(기존 31px) */
}
.np-mobile-menu-wrap .tag-item.global {
  background-color: #f4f6f8;
  border-color: #f4f6f8;
  font-weight: bold;
}
.np-mobile-menu-wrap .tag-item .fa-globe {
  margin-right: 5px;
  font-size: 14px;
}
/* 추천 앱 & 연결 서비스 */
.np-mobile-menu-wrap .promo-card {
  background-color: #f0f5ff;
  border-radius: 12px;
  padding: 20px 16px;   /* 320px 화면에서 4열 라벨이 3줄로 쪼개지지 않도록 좌우만 축소 */
  margin-bottom: 15px;
}
.np-mobile-menu-wrap .promo-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #004085;
}
/* ⚠️ 예전엔 flex + space-between 이라 항목 폭이 라벨 길이에 종속됐다. 카드 안
   가용폭 240px(320px 화면 기준)에 영문 4개(Store/Suwan Kids/Youth Empathy/
   Chungraon ≈ 300px)가 들어가지 않아 넘쳤고, 항목 수가 바뀌어도 정렬이 무너졌다.
   위 .shortcut-grid 와 같은 grid 체계로 통일. */
.np-mobile-menu-wrap .promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  text-align: center;
}
.np-mobile-menu-wrap .promo-item {
  min-width: 0;
}
/* 모양·크기를 .icon-box(48px / radius 18px)와 통일 — 한 메뉴 안에서 원형과
   라운드 스퀘어 두 가지 아이콘 언어가 섞이지 않게. */
.np-mobile-menu-wrap .promo-item .promo-icon {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 18px;
  margin: 0 auto 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background 0.2s;
}
.np-mobile-menu-wrap .promo-item .item-name {
  font-size: 12px;
  color: #555;
  letter-spacing: -0.3px;   /* .item-name 과 값 통일(기존 -0.5px) */
  padding: 0 2px;           /* 4열이라 셀이 좁다 — 좌우 여백을 줄여 줄 수를 아낌 */
}
/* 인라인 style="color:..." 을 클래스로. 다크모드가 [style*=] 속성 셀렉터로
   더듬던 것도 함께 해소된다. */
.np-mobile-menu-wrap .promo-icon-blue {
  color: #0056b3;
}
.np-mobile-menu-wrap .promo-icon-green {
  color: #28a745;
}
@media (hover: hover) {
  .np-mobile-menu-wrap .promo-item:hover .promo-icon {
    background-color: #f8f9fa;
  }
}
.np-mobile-menu-wrap .promo-item:active .promo-icon {
  background-color: #f1f3f5;
}
/* 텍스트 링크 그룹 (기자 클럽 등) */
.np-mobile-menu-wrap .link-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.np-mobile-menu-wrap .link-group a {
  font-size: 13px;
  color: #444;
  background: #f8f9fa;
  padding: 9px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;   /* 터치 타깃 확보(기존 33px) */
}
/* 예전엔 이모지(🤝🎓🧠📚📝🐝🖥️)와 Font Awesome 이 섞여 있었다. 이모지는 색·크기가
   OS 에 고정돼 다크모드에서 특히 들쭉날쭉해서 FA 로 통일했다. */
.np-mobile-menu-wrap .link-group a i {
  width: 1em;
  margin-right: 6px;
  text-align: center;
  color: #777;
  font-size: 12px;
}
/* 아주 좁은 화면(iPhone SE 1세대급 320px)에서 라벨이 단어 중간에서 잘리는 것을
   줄인다. overflow-wrap:anywhere 가 레이아웃 붕괴는 막아 주지만 Educatio/n 처럼
   보기 나쁘게 끊기므로, 간격·여백을 조금 줄여 셀 폭을 벌어 준다.
   (한국어 라벨은 2~4자라 무관 — 영문·일문 로케일용 안전장치) */
@media (max-width: 360px) {
  /* 헤더 한 줄 유지: 아이콘을 32px 로 한 번 더 줄이고 인사말 폰트도 낮춘다.
     320px 화면에서도 아이콘 6개 + 닫기가 아래로 떨어지지 않는다. */
  .np-mobile-menu-wrap .header-icons a,
  .np-mobile-menu-wrap .np-close-btn {
    width: 32px;
    height: 32px;
  }
  .np-mobile-menu-wrap .header-icons,
  .np-mobile-menu-wrap .np-close-btn {
    font-size: 17px;
  }
  .np-mobile-menu-wrap .user-info {
    font-size: 15px;
  }
  .np-mobile-menu-wrap .user-info i {
    font-size: 12px;
  }
  .np-mobile-menu-wrap .shortcut-grid {
    gap: 18px 6px;
  }
  .np-mobile-menu-wrap .promo-grid {
    gap: 10px 6px;
  }
  .np-mobile-menu-wrap .item-name {
    padding: 0 2px;
  }
  .np-mobile-menu-wrap .promo-item .item-name {
    font-size: 11px;
  }
}

/* 탭 피드백 + 키보드 포커스.
   ⚠️ a { text-decoration:none; color:inherit } 로 링크 표시를 지웠기 때문에
      포커스 링이 없으면 키보드 사용자는 현재 위치를 전혀 알 수 없다. */
.np-mobile-menu-wrap .tag-item:active,
.np-mobile-menu-wrap .link-group a:active {
  background-color: #eef1f4;
}
.np-mobile-menu-wrap .header-icons a:active,
.np-mobile-menu-wrap .np-close-btn:active,
.np-mobile-menu-wrap .np-order-btn:active {
  background-color: #f0f0f0;
}
/* 편집 중에는 맨 끝 버튼이 '완료' 역할을 겸한다(위 안내바까지 안 올라가도 되게) */
.np-mobile-menu-wrap.swn-order-editing .np-order-entry {
  padding-bottom: 20px;
}
.np-mobile-menu-wrap .text-list li > a:active {
  color: #0056b3;
}
.np-mobile-menu-wrap a:focus-visible,
.np-mobile-menu-wrap button:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 노치·홈 인디케이터 대응. 전체화면 모달이라 상·하단이 시스템 UI 에 물린다.
   @supports 로 감싸 미지원 브라우저에서 padding 선언이 통째로 무효화되지 않게 한다. */
@supports (padding: env(safe-area-inset-bottom)) {
  .np-mobile-menu-wrap {
    padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
  }
  .np-mobile-menu-wrap .menu-header {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
}

/* =========================================
   모바일 환경: 좌우 여백을 강제로 확장하여 꽉 차게 만듦
   ========================================= */
@media (max-width: 767px) {
  /* ⚠️ width:100vw(우측 오버플로우→세로 스크롤 멈춤) 와 음수 마진
     (컴포저 등 .tdm-pm-body 밖 컨텍스트에서 좌측으로 쏠려 잘림) 둘 다 폐기.
     → 컨테이너 불문 안전한 width:100% + margin:0 으로 고정. 가로 꽉 채움은
       아래 .tdm-pm-body 패딩 제거(:has)로 처리하므로 음수 마진 불필요. */
  .np-mobile-menu-wrap {
    width: 100% !important;
    margin: 0 !important;
  }
  /* 꽉 찬 화면 내부의 실제 콘텐츠 좌우 여백은 유지하여 보기 좋게 만듦 */
  .np-mobile-menu-wrap .np-section-padding {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* 이 메뉴를 담은 tagDiv 팝업 본문(.tdm-pm-body)에만 적용(:has, iOS 15.4+):
   ① 본문 패딩(30px 25px) 제거 → 음수 마진 없이 가로 꽉 차게(컴포저/단독
      렌더 등 .tdm-pm-body 가 없는 컨텍스트에선 미적용 → 좌측 쏠림·잘림 없음).
   ② 세로 관성 스크롤 보정: iOS 가 아래로만 먹고 위로 안 올라가는 문제 →
      터치 관성 스크롤 + overscroll 격리. */
.tdm-pm-body:has(.np-mobile-menu-wrap) {
  padding: 0 !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* =========================================
   추천 서비스 카드 · 최근 본 카테고리 · 바로가기 · 편집 페이지 (2026-10-02)
   ========================================= */
/* hidden 속성이 아래 display 선언(flex/grid)에 지지 않게 */
.np-mobile-menu-wrap [hidden] {
  display: none !important;
}
.np-mobile-menu-wrap .np-mm-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.np-mobile-menu-wrap .np-mm-sec-head .section-title {
  margin: 0;
}
.np-mobile-menu-wrap .np-mm-link-btn {
  background: none;
  border: 0;
  padding: 6px 4px;
  min-height: 32px;
  color: #888;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.np-mobile-menu-wrap .np-mm-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #999;
}
/* 최근 본 카테고리 — 줄바꿈 칩(가로 스크롤은 안드로이드 웹뷰 제스처와 겹쳐 쓰지 않는다, §66) */
.np-mobile-menu-wrap .np-mm-recent-list {
  margin-bottom: 0;
}
.np-mobile-menu-wrap .np-mm-recent-item {
  max-width: 100%;
  gap: 6px;
}
.np-mobile-menu-wrap .np-mm-recent-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-mobile-menu-wrap .np-mm-recent-item i {
  font-size: 12px;
  color: #999;
  flex-shrink: 0;
}
/* 카드 공통 */
.np-mobile-menu-wrap .np-mm-card {
  background-color: #fff;
  border: 1px solid #eceef1;
  border-radius: 16px;
  padding: 16px 12px;
}
.np-mobile-menu-wrap .np-mm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.np-mobile-menu-wrap .np-mm-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  color: #111;
}
.np-mobile-menu-wrap .np-mm-card-title-lg {
  font-size: 16px;
}
.np-mobile-menu-wrap .np-mm-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background-color: #f4f6f8;
  color: #555;
  font-size: 13px;
  flex-shrink: 0;
}
.np-mobile-menu-wrap .np-mm-ico-shortcut { background-color: #fff4e6; color: #e8590c; }
.np-mobile-menu-wrap .np-mm-ico-main-news { background-color: #e8f0fe; color: #1a73e8; }
.np-mobile-menu-wrap .np-mm-ico-community { background-color: #f3f0ff; color: #7048e8; }
.np-mobile-menu-wrap .np-mm-ico-opinion { background-color: #fff0f6; color: #c2255c; }
.np-mobile-menu-wrap .np-mm-ico-feature { background-color: #fff9db; color: #e67700; }
.np-mobile-menu-wrap .np-mm-ico-services { background-color: #e6fcf5; color: #0ca678; }
.np-mobile-menu-wrap .np-mm-ico-region { background-color: #ebfbee; color: #2b8a3e; }
.np-mobile-menu-wrap .np-mm-ico-global { background-color: #e7f5ff; color: #1971c2; }
.np-mobile-menu-wrap .np-mm-card-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #e6e9ed;
  border-radius: 16px;
  background: #fff;
  color: #666;
  font-size: 12px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.np-mobile-menu-wrap .np-mm-card-more i {
  font-size: 10px;
}
.np-mobile-menu-wrap .np-mm-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #eceef1;
  border-radius: 14px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
}
.np-mobile-menu-wrap .np-mm-notice-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #fff4e6;
  color: #e8590c;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}
.np-mobile-menu-wrap .np-mm-notice-badge i {
  font-size: 11px;
}
.np-mobile-menu-wrap .np-mm-notice-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-mobile-menu-wrap .np-mm-notice-date {
  flex-shrink: 0;
  font-size: 12px;
  color: #999;
}
.np-mobile-menu-wrap .np-mm-notice-arrow {
  flex-shrink: 0;
  font-size: 11px;
  color: #bbb;
}
.np-mobile-menu-wrap .np-mm-notice:active {
  background-color: #f4f6f8;
}
.np-mobile-menu-wrap .np-mm-ico-shop { background-color: #fff0f6; color: #c2255c; }
.np-mobile-menu-wrap .np-mm-shop .icon-box {
  position: relative;
}
.np-mobile-menu-wrap .np-mm-shop-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: #495057;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
/* 추천 서비스 — 회색 바탕 위에 흰 카드 */
.np-mobile-menu-wrap .np-mm-reco {
  background-color: #f5f6f8;
}
.np-mobile-menu-wrap .np-mm-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 카드 안에서는 기존 블록의 바깥 여백·바탕을 덜어 낸다 */
.np-mobile-menu-wrap .np-mm-card .promo-card {
  margin-bottom: 12px;
  padding: 16px 12px;
}
.np-mobile-menu-wrap .np-mm-card .text-list li:first-child {
  padding-top: 0;
}
.np-mobile-menu-wrap .np-mm-card .text-list li:last-child {
  padding-bottom: 0;
}
.np-mobile-menu-wrap .np-mm-card .shortcut-grid {
  gap: 16px 4px;
}
/* 카드 안은 셀이 좁다(350px 모달 기준 약 66px) — '자유게시판' 같은 5글자가 한 줄에 들어가게 */
.np-mobile-menu-wrap .np-mm-card .item-name {
  padding: 0;
  letter-spacing: -0.5px;
}
/* 특집 기사 아이콘 */
.np-mobile-menu-wrap .fa-icon-feature-teen { background-color: #fff9db !important; color: #e67700 !important; }
.np-mobile-menu-wrap .fa-icon-feature-youth { background-color: #e7f5ff !important; color: #1971c2 !important; }
/* 바로가기용 범용 색 */
.np-mobile-menu-wrap .fa-icon-blue { background-color: #e8f0fe !important; color: #1a73e8 !important; }
.np-mobile-menu-wrap .fa-icon-green { background-color: #ebfbee !important; color: #2b8a3e !important; }
.np-mobile-menu-wrap .fa-icon-violet { background-color: #f3f0ff !important; color: #7048e8 !important; }
.np-mobile-menu-wrap .fa-icon-teal { background-color: #e6fcf5 !important; color: #0ca678 !important; }
.np-mobile-menu-wrap .fa-icon-orange { background-color: #fff4e6 !important; color: #e8590c !important; }
/* 바로가기 펼쳐보기 */
.np-mobile-menu-wrap .np-mm-sc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  margin-top: 14px;
  border: 0;
  border-top: 1px solid #f0f1f3;
  background: none;
  color: #666;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-mm-sc-toggle i {
  font-size: 11px;
  transition: transform 0.2s;
}
.np-mobile-menu-wrap .np-mm-sc-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.np-mobile-menu-wrap .np-mm-sc-empty {
  text-align: center;
  padding: 8px 0;
}
/* 편집 페이지 */
.np-mobile-menu-wrap .np-mm-edit-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: #fff;
}
.np-mobile-menu-wrap .np-mm-edit-title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #111;
  white-space: nowrap;
}
.np-mobile-menu-wrap .np-mm-back,
.np-mobile-menu-wrap .np-mm-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #444;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-mm-back {
  justify-self: start;
  margin-left: -6px;
}
.np-mobile-menu-wrap .np-mm-done {
  justify-self: end;
  margin-right: -6px;
  color: #1a73e8;
  font-weight: bold;
}
.np-mobile-menu-wrap .np-mm-edit-hint,
.np-mobile-menu-wrap .np-mm-edit-full {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #888;
}
.np-mobile-menu-wrap .np-mm-edit-full {
  margin: 12px 0 0;
  color: #c92a2a;
}
.np-mobile-menu-wrap .np-mm-count {
  font-size: 13px;
  font-weight: normal;
  color: #999;
}
.np-mobile-menu-wrap .np-mm-edit-catalog .section-title {
  font-size: 14px;
  margin: 22px 0 12px;
}
.np-mobile-menu-wrap .np-mm-edit-catalog .section-title:first-child {
  margin-top: 0;
}
.np-mobile-menu-wrap .np-mm-tile {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-mm-tile .icon-box {
  position: relative;
}
.np-mobile-menu-wrap .np-mm-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  background-color: #1a73e8;
  box-shadow: 0 0 0 2px #fff;
}
.np-mobile-menu-wrap .np-mm-tile-remove .np-mm-badge {
  background-color: #e03131;
}
.np-mobile-menu-wrap .np-mm-tile-added .np-mm-badge {
  background-color: #adb5bd;
}
.np-mobile-menu-wrap .np-mm-tile-added .icon-box {
  opacity: 0.55;
}
.np-mobile-menu-wrap .np-mm-tile:disabled {
  cursor: default;
  opacity: 0.4;
}
/* =========================================
   수완뉴스 앱(웹뷰) 모드 — §89-4. .np-mm-app 는 JS 가 쿠키/UA 를 보고 붙인다.
   ========================================= */
.np-mobile-menu-wrap .np-mm-app-only {
  display: none !important;
}
.np-mobile-menu-wrap.np-mm-app .np-mm-app-only {
  display: inline-flex !important;
}
.np-mobile-menu-wrap.np-mm-app .np-mm-web-only {
  display: none !important;
}
/* 헤더의 <button> 아이콘도 <a> 와 같은 36px 히트박스 */
.np-mobile-menu-wrap .header-icons button {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
}
.np-mobile-menu-wrap .header-icons button:active {
  background-color: #f0f0f0;
}
.np-mobile-menu-wrap .np-mm-confirm {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  padding: 16px;
  border: 1px solid #e6e8eb;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.np-mobile-menu-wrap .np-mm-cf-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #222;
}
.np-mobile-menu-wrap .np-mm-cf-btns {
  display: flex;
  gap: 8px;
}
.np-mobile-menu-wrap .np-mm-cf-btns button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-mm-cf-no {
  background-color: #f1f3f5;
  color: #333;
}
.np-mobile-menu-wrap .np-mm-cf-yes {
  background-color: #e03131;
  color: #fff;
}
/* 테마 전역 li 들여쓰기·불릿 차단(목록이 오른쪽으로 밀려 보였다) */
.np-mobile-menu-wrap .np-mm-win-list > li,
.np-mobile-menu-wrap .np-mm-set-list > li {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.np-mobile-menu-wrap .np-mm-win-list > li::before,
.np-mobile-menu-wrap .np-mm-set-list > li::before {
  content: none !important;
  display: none !important;
}
/* 열린 창 목록 */
.np-mobile-menu-wrap .np-mm-win-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-mobile-menu-wrap .np-mm-win-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eceef1;
  border-radius: 12px;
  background-color: #fff;
}
.np-mobile-menu-wrap .np-mm-win-item.is-current {
  border-color: #1a73e8;
  background-color: #f2f7ff;
}
.np-mobile-menu-wrap .np-mm-win-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: #f4f6f8;
  color: #666;
  font-size: 14px;
}
.np-mobile-menu-wrap .np-mm-win-item.is-current .np-mm-win-ico {
  background-color: #e8f0fe;
  color: #1a73e8;
}
.np-mobile-menu-wrap .np-mm-win-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.np-mobile-menu-wrap .np-mm-win-t,
.np-mobile-menu-wrap .np-mm-win-u {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-mobile-menu-wrap .np-mm-win-t {
  font-size: 14px;
  color: #222;
  line-height: 1.3;
}
.np-mobile-menu-wrap .np-mm-win-u {
  font-size: 12px;
  color: #999;
}
.np-mobile-menu-wrap .np-mm-win-meta {
  flex-shrink: 0;
  font-size: 11px;
  color: #999;
}
.np-mobile-menu-wrap .np-mm-win-item.is-current .np-mm-win-meta {
  color: #1a73e8;
  font-weight: bold;
}
/* 설정 목록 */
.np-mobile-menu-wrap .np-mm-set-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #eceef1;
  border-radius: 14px;
  overflow: hidden;
}
.np-mobile-menu-wrap .np-mm-set-list > li {
  border-bottom: 1px solid #f1f2f4;
}
.np-mobile-menu-wrap .np-mm-set-list > li:last-child {
  border-bottom: 0;
}
body.logged-in .np-mobile-menu-wrap .np-mm-set-list > li.logged-in-only {
  display: block;
}
.np-mobile-menu-wrap .np-mm-set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 0;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-mm-set-static {
  cursor: default;
  padding-bottom: 4px;
  min-height: 0;
}
.np-mobile-menu-wrap .np-mm-set-row > i:first-child {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  color: #666;
  font-size: 15px;
}
.np-mobile-menu-wrap .np-mm-set-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.np-mobile-menu-wrap .np-mm-set-label small {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}
.np-mobile-menu-wrap .np-mm-set-arrow {
  flex-shrink: 0;
  font-size: 11px;
  color: #bbb;
}
.np-mobile-menu-wrap button.np-mm-set-row:active,
.np-mobile-menu-wrap a.np-mm-set-row:active {
  background-color: #f4f6f8;
}
/* 스위치 */
.np-mobile-menu-wrap .np-mm-set-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.np-mobile-menu-wrap .np-mm-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background-color: #d0d5db;
  transition: background-color 0.2s;
}
.np-mobile-menu-wrap .np-mm-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.np-mobile-menu-wrap .np-mm-set-switch input:checked + .np-mm-switch {
  background-color: #1a73e8;
}
.np-mobile-menu-wrap .np-mm-set-switch input:checked + .np-mm-switch::after {
  transform: translateX(18px);
}
.np-mobile-menu-wrap .np-mm-set-switch input:focus-visible + .np-mm-switch {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}
/* 글자 크기 단추 */
.np-mobile-menu-wrap .np-mm-set-block {
  background-color: #fff;
  padding-bottom: 12px;
}
.np-mobile-menu-wrap .np-mm-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 6px 14px 0;
  padding: 3px;
  border-radius: 10px;
  background-color: #f1f3f5;
}
.np-mobile-menu-wrap .np-mm-seg button {
  min-height: 34px;
  padding: 0 2px;
  white-space: nowrap;
  letter-spacing: -0.3px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #555;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.np-mobile-menu-wrap .np-mm-seg button[aria-checked="true"] {
  background-color: #fff;
  color: #1a73e8;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.np-mobile-menu-wrap .np-mm-set-msg {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: #ebfbee;
  color: #2b8a3e;
  font-size: 13px;
}
.np-mobile-menu-wrap .np-mm-set-foot {
  margin: 12px 0 0;
}
/* =========================================
   다크모드 대응 (sw-simple-dark-mode 연동)
   ─ 다크 플러그인 JS 는 td-/tdc-/tdb_/cfab-/sw- 등만 자동 다크화하고
     np- 접두사는 매칭하지 않으므로(흰 메뉴 잔존), body.dark-mode 스코프
     스타일로 직접 대응. 팔레트는 sw-simple-dark-mode 와 동일 계열.
   ========================================= */
.np-mobile-menu-wrap,
.np-mobile-menu-wrap .icon-box,
.np-mobile-menu-wrap .tag-item,
.np-mobile-menu-wrap .promo-icon,
.np-mobile-menu-wrap .text-list-icon,
.np-mobile-menu-wrap .news-banner,
.np-mobile-menu-wrap .promo-card,
.np-mobile-menu-wrap .menu-section,
.np-mobile-menu-wrap .link-group a {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* 패널 본체 */
body.dark-mode .np-mobile-menu-wrap {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}
/* 헤더 */
body.dark-mode .np-mobile-menu-wrap .menu-header {
  border-bottom-color: #333 !important;
}
body.dark-mode .np-mobile-menu-wrap .header-icons,
body.dark-mode .np-mobile-menu-wrap .header-icons a,
body.dark-mode .np-mobile-menu-wrap .header-icons a i,
body.dark-mode .np-mobile-menu-wrap .header-icons i,
body.dark-mode .np-mobile-menu-wrap .np-close-btn,
body.dark-mode .np-mobile-menu-wrap .np-close-btn i,
body.dark-mode .np-mobile-menu-wrap .np-order-btn,
body.dark-mode .np-mobile-menu-wrap .np-order-btn i {
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .header-icons a:active,
body.dark-mode .np-mobile-menu-wrap .np-close-btn:active,
body.dark-mode .np-mobile-menu-wrap .np-order-btn:active {
  background-color: #2f2f2f !important;
}
/* 순서 편집 UI 다크 대응 */
body.dark-mode .np-mobile-menu-wrap .np-order-btn[aria-pressed="true"] {
  background-color: #15252e !important;
  color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-order-bar {
  background-color: #2a2a2a !important;
}
body.dark-mode .np-mobile-menu-wrap .np-order-hint {
  color: #bbbbbb !important;
}
body.dark-mode .np-mobile-menu-wrap .np-order-bar button {
  background-color: #1e1e1e !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}
/* ⚠️ 위 `.np-order-bar button` 규칙과 둘 다 !important 라 특이도로 갈린다.
   `.np-order-bar` 를 함께 적어 (0,4,0) 으로 올려야 완료 버튼이 파랗게 남는다. */
body.dark-mode .np-mobile-menu-wrap .np-order-bar .np-order-done {
  background-color: #1a73e8 !important;
  border-color: #1a73e8 !important;
  color: #ffffff !important;
}
body.dark-mode .np-mobile-menu-wrap.swn-order-editing .menu-section {
  outline-color: #3a3a3a !important;
}
body.dark-mode .np-mobile-menu-wrap.swn-order-editing .swn-drag-handle {
  background-color: #2f2f2f !important;
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .menu-section.swn-dragging {
  background-color: #15252e !important;
  outline-color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap a:focus-visible,
body.dark-mode .np-mobile-menu-wrap button:focus-visible {
  outline-color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .user-info i {
  color: #999999 !important;
}
/* 섹션 구분(두꺼운 라이트 디바이더) + 타이틀 */
body.dark-mode .np-mobile-menu-wrap .menu-section {
  border-bottom-color: #2a2a2a !important;
}
body.dark-mode .np-mobile-menu-wrap .section-title {
  color: #f0f0f0 !important;
}
/* 주요 뉴스 아이콘 박스 */
body.dark-mode .np-mobile-menu-wrap .icon-box {
  background-color: #2a2a2a !important;
}
body.dark-mode .np-mobile-menu-wrap .shortcut-item:hover .icon-box,
body.dark-mode .np-mobile-menu-wrap .shortcut-item:active .icon-box {
  background-color: #333333 !important;
}
body.dark-mode .np-mobile-menu-wrap .item-name {
  color: #cccccc !important;
}
/* 컬러 아이콘 박스: 라이트 배경만 다크화, 액센트 컬러는 밝게 보존 */
body.dark-mode .np-mobile-menu-wrap .fa-icon-politics {
  background-color: #15252e !important;
  color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .fa-icon-entertainment {
  background-color: #2e1620 !important;
  color: #f06595 !important;
}
body.dark-mode .np-mobile-menu-wrap .fa-icon-sports {
  background-color: #102a1f !important;
  color: #2bc77f !important;
}
body.dark-mode .np-mobile-menu-wrap .fa-icon-community-board {
  background-color: #15252e !important;
  color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .fa-icon-community-game {
  background-color: #211a33 !important;
  color: #9775fa !important;
}
body.dark-mode .np-mobile-menu-wrap .fa-icon-community-fortune {
  background-color: #2e2113 !important;
  color: #ffa94d !important;
}
/* 단색 아이콘 가독성 보정 */
body.dark-mode .np-mobile-menu-wrap .fa-icon-society { color: #bbbbbb !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-economy { color: #51cf66 !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-education { color: #f06595 !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-culture { color: #ffd43b !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-science { color: #5aa9f5 !important; }
/* 오피니언 특집 배너 */
body.dark-mode .np-mobile-menu-wrap .news-banner {
  background-color: #262626 !important;
  border-color: #444444 !important;
}
body.dark-mode .np-mobile-menu-wrap .news-banner strong {
  color: #5aa9f5 !important;
}
/* 텍스트 리스트 */
body.dark-mode .np-mobile-menu-wrap .text-list li {
  border-bottom-color: #2e2e2e !important;
}
body.dark-mode .np-mobile-menu-wrap .text-list-icon {
  background-color: #333333 !important;
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .sub-links,
body.dark-mode .np-mobile-menu-wrap .sub-links a {
  color: #999999 !important;
}
/* 지역/글로벌 태그 */
body.dark-mode .np-mobile-menu-wrap .tag-item {
  background-color: #2a2a2a !important;
  border-color: #444444 !important;
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .tag-item.global {
  background-color: #333333 !important;
  border-color: #333333 !important;
  color: #e0e0e0 !important;
}
body.dark-mode .np-mobile-menu-wrap .tag-item:active,
body.dark-mode .np-mobile-menu-wrap .link-group a:active {
  background-color: #383838 !important;
}
/* 추천 서비스 프로모 카드 */
body.dark-mode .np-mobile-menu-wrap .promo-card {
  background-color: #15252e !important;
}
body.dark-mode .np-mobile-menu-wrap .promo-title {
  color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .promo-item .promo-icon {
  background-color: #2a2a2a !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .np-mobile-menu-wrap .promo-item .item-name {
  color: #cccccc !important;
}
/* 컬러 프로모 아이콘 가독성 보정(청년공감/청라온) */
body.dark-mode .np-mobile-menu-wrap .promo-icon-blue {
  color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .promo-icon-green {
  color: #51cf66 !important;
}
body.dark-mode .np-mobile-menu-wrap .promo-item:hover .promo-icon,
body.dark-mode .np-mobile-menu-wrap .promo-item:active .promo-icon {
  background-color: #333333 !important;
}
/* 하단 링크 그룹 */
body.dark-mode .np-mobile-menu-wrap .link-group a {
  background-color: #2a2a2a !important;
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .link-group a i {
  color: #999999 !important;
}
/* 추천 서비스·바로가기 다크 대응 */
body.dark-mode .np-mobile-menu-wrap .np-mm-reco {
  background-color: #181818 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-card {
  background-color: #232323 !important;
  border-color: #333333 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-card-title,
body.dark-mode .np-mobile-menu-wrap .np-mm-edit-title {
  color: #f0f0f0 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-card-more {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-card-ico {
  background-color: #2f2f2f !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-shortcut,
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-feature { color: #ffa94d !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-main-news { color: #5aa9f5 !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-community { color: #9775fa !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-opinion { color: #f06595 !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-services { color: #38d9a9 !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-region { color: #51cf66 !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-global { color: #5aa9f5 !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-blue,
body.dark-mode .np-mobile-menu-wrap .fa-icon-feature-youth { background-color: #15252e !important; color: #5aa9f5 !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-green { background-color: #102a1f !important; color: #51cf66 !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-violet { background-color: #211a33 !important; color: #9775fa !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-teal { background-color: #0f2a25 !important; color: #38d9a9 !important; }
body.dark-mode .np-mobile-menu-wrap .fa-icon-orange,
body.dark-mode .np-mobile-menu-wrap .fa-icon-feature-teen { background-color: #2e2113 !important; color: #ffa94d !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-sc-toggle {
  border-top-color: #333333 !important;
  color: #bbbbbb !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-link-btn,
body.dark-mode .np-mobile-menu-wrap .np-mm-empty,
body.dark-mode .np-mobile-menu-wrap .np-mm-edit-hint,
body.dark-mode .np-mobile-menu-wrap .np-mm-count,
body.dark-mode .np-mobile-menu-wrap .np-mm-recent-item i {
  color: #999999 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-edit-head {
  background-color: #1e1e1e !important;
  border-bottom-color: #333333 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-back {
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-done {
  color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-badge {
  box-shadow: 0 0 0 2px #1e1e1e !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-notice {
  background-color: #232323 !important;
  border-color: #333333 !important;
  color: #e0e0e0 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-notice-title {
  color: #e0e0e0 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-notice-badge {
  background-color: #2e2113 !important;
  color: #ffa94d !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-notice-date,
body.dark-mode .np-mobile-menu-wrap .np-mm-notice-arrow {
  color: #999999 !important;
}
/* 앱 모드(설정·열린 창) 다크 대응 */
body.dark-mode .np-mobile-menu-wrap .header-icons button:active {
  background-color: #2f2f2f !important;
}
body.dark-mode .np-mobile-menu-wrap .header-icons button,
body.dark-mode .np-mobile-menu-wrap .header-icons button i {
  color: #cccccc !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-win-item,
body.dark-mode .np-mobile-menu-wrap .np-mm-set-row,
body.dark-mode .np-mobile-menu-wrap .np-mm-set-block {
  background-color: #232323 !important;
  border-color: #333333 !important;
  color: #e0e0e0 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-win-item.is-current {
  background-color: #15252e !important;
  border-color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-win-t,
body.dark-mode .np-mobile-menu-wrap .np-mm-set-label {
  color: #e0e0e0 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-win-u,
body.dark-mode .np-mobile-menu-wrap .np-mm-win-meta,
body.dark-mode .np-mobile-menu-wrap .np-mm-set-label small,
body.dark-mode .np-mobile-menu-wrap .np-mm-set-row > i:first-child,
body.dark-mode .np-mobile-menu-wrap .np-mm-set-arrow {
  color: #999999 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-win-ico {
  background-color: #2f2f2f !important;
  color: #bbbbbb !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-set-list,
body.dark-mode .np-mobile-menu-wrap .np-mm-set-list > li {
  border-color: #333333 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-seg {
  background-color: #2a2a2a !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-seg button {
  color: #bbbbbb !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-seg button[aria-checked="true"] {
  background-color: #3a3a3a !important;
  color: #5aa9f5 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-switch {
  background-color: #444444 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-set-switch input:checked + .np-mm-switch {
  background-color: #1a73e8 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-set-msg {
  background-color: #102a1f !important;
  color: #51cf66 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-confirm {
  background-color: #262626 !important;
  border-color: #3a3a3a !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-cf-text {
  color: #e0e0e0 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-cf-no {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
}
body.dark-mode .np-mobile-menu-wrap .np-mm-ico-shop { color: #f06595 !important; }
body.dark-mode .np-mobile-menu-wrap .np-mm-shop-count {
  background-color: #868e96 !important;
  box-shadow: 0 0 0 2px #232323 !important;
}