@charset "utf-8";

/*------------------------------------------------------------*/
/* -1. 웹폰트 불러오기 */
/*------------------------------------------------------------*/

/* Pretendard 공식 CDN 경로입니다. 기존 projectnoonnu 경로보다 안정적으로 로드됩니다. */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff2/Pretendard-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/*------------------------------------------------------------*/
/* 0. 색상 변수 */
/*------------------------------------------------------------*/

:root {
  /* 흰색 카드/입력창/버튼/헤더 글자 등 기본 밝은 면 색 */
  --color-white: #fff;

  /* 다크모드 hover 시 완전한 흰색 강조 글자 */
  --color-white-strong: #ffffff;

  /* 라이트모드 전체 배경, 잠금 화면 배경 */
  --color-page-bg: #f5f5f5;

  /* 라이트모드 기본 본문 글자색 */
  --color-text-main: #222;

  /* 대문 고정 제목 글자색 */
  --color-title-home: #111;

  /* 날짜/버튼 글자 등 진한 보조 글자색 */
  --color-text-muted-dark: #444;

  /* 잠금 설명문/중간톤 글자색 */
  --color-text-middle: #555;

  /* 목차 접기 버튼/문단 접기 아이콘 보조색 */
  --color-text-fold: #666;

  /* 날짜/요약/취소선 등 흐린 글자색 */
  --color-text-muted: #777;

  /* 각주 테두리/목차 보조색 등 연한 회색 */
  --color-text-soft: #aaa;

  /* 비밀번호 입력창 테두리 */
  --color-border-input: #bbb;

  /* 카드/버튼/목차 등 기본 테두리 */
  --color-border-main: #ccc;

  /* 본문 제목선/표/분류박스 등 밝은 테두리 */
  --color-border-light: #ddd;

  /* 라이트모드 아주 연한 구분선 */
  --color-border-soft: #eee;

  /* 다크모드 공용 테두리 */
  --color-border-dark: #555;

  /* 다크모드 헤더/드롭다운 테두리 */
  --color-border-dark-soft: #444;

  /* 라이트모드 일반 버튼 배경 */
  --color-button-bg: #fafafa;

  /* 라이트모드 버튼/검색결과 hover 배경 */
  --color-button-hover: #f0f0f0;

  /* 라이트모드 기본 인용문 배경 */
  --color-quote-bg: #f8f8f8;

  /* 목록 썸네일 fallback 배경 */
  --color-thumb-bg: #f7f7f7;

  /* 갤러리 썸네일 fallback 배경 */
  --color-gallery-bg: #f1f1f1;

  /* 라이트모드 기본 링크/목차 번호 파란색 */
  --color-link-blue: #0275d8;

  /* DSWIKI 메인 초록색: 헤더, 가이드, 버튼, 잠금 상단선 */
  --color-brand: #00a98f;

  /* 메인 초록색 hover/다크모드 가이드 제목 */
  --color-brand-dark: #008f79;

  /* 예전 홈 정보박스 아이콘 배경 */
  --color-brand-alt: #00b39b;

  /* 관리자 삭제 버튼 글자색 */
  --color-danger: #d9534f;

  /* 광고 영역 기본 배경 */
  --color-ad-bg: #dff6ff;

  /* 라이트모드 가이드 표 제목칸 배경 */
  --color-guide-th-bg: #f2fffc;

  /* 라이트모드 가이드 표 제목칸 글자 */
  --color-guide-th-text: #007967;

  /* 라이트모드 가이드 표 테두리 */
  --color-guide-border: #cdeee8;

  /* 나무위키식 인용문 왼쪽 초록선 */
  --color-quote-green: #7ec97e;

  /* 나무위키식 인용문 점선 테두리 */
  --color-quote-border: #cfcfcf;

  /* 스포일러 틀 라이트모드 테두리 */
  --color-spoiler-border: #bcbcbc;

  /* 스포일러 틀 상단 주황선 */
  --color-spoiler-top: #f5a000;

  /* 캐릭터 정보상자 기본 파란색, 색 값 없을 때 fallback */
  --color-character-default: #0066b3;

  /* 다크모드 전체 페이지 배경 */
  --color-dark-page-bg: #1f1f1f;

  /* 다크모드 헤더 배경 */
  --color-dark-header-bg: #1b1b1b;

  /* 다크모드 카드/목차/팝업/드롭다운 배경 */
  --color-dark-surface: #2b2b2b;

  /* 다크모드 검색창/아이콘 버튼 배경 */
  --color-dark-input-bg: #2a2a2a;

  /* 다크모드 인용문 배경 */
  --color-dark-quote-bg: #2f2f2f;

  /* 다크모드 hover 배경 및 버튼류 배경 */
  --color-dark-hover: #333;

  /* 다크모드 분류 박스 배경 */
  --color-dark-category-bg: #252525;

  /* 다크모드 가이드 표 제목칸 배경 */
  --color-dark-guide-th-bg: #263b37;

  /* 다크모드 가이드 표 테두리 */
  --color-dark-guide-border: #45635e;

  /* 다크모드 기본 본문/메뉴/사이드바 글자 */
  --color-dark-text-main: #e0e0e0;

  /* 다크모드 제목/강조 글자 */
  --color-dark-text-strong: #eee;

  /* 다크모드 스포일러 설명 글자 */
  --color-dark-text-muted: #d5d5d5;

  /* 다크모드 취소선 글자 */
  --color-dark-strike: #9a9a9a;

  /* 다크모드 가이드 표 제목칸 글자 */
  --color-dark-guide-th-text: #9ff5e4;

  /* 다크모드 주황 링크/카테고리 강조색 */
  --color-dark-accent: #ff9800;

  /* 다크모드 주황 링크 hover */
  --color-dark-accent-hover: #ffb74d;

  /* 다크모드 본문 링크/목차 번호 파란색 */
  --color-dark-link-blue: #7db7ff;

  /* 다크모드 인용문 왼쪽 초록선 */
  --color-dark-quote-green: #6fbf73;

  /* 다크모드 캐릭터 정보상자 제목/항목 배경 */
  --color-dark-character-bg: #005a9e;

  /* 다크모드 캐릭터 정보상자 항목 테두리 */
  --color-dark-character-border: #004a82;

  /*-----------------*/
  /*폰트변수 추가*/
  /*-----------------*/
  --font-body: "Pretendard", sans-serif;
  --font-title: "Pretendard", sans-serif;
  --font-weight-body: 500;
  --font-weight-title: 700;
}


/*------------------------------------------------------------*/
/* 1. 기본 설정 */
/*------------------------------------------------------------*/

/* 전체 박스 크기 계산 방식을 border-box로 통일합니다. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 사이트 전체 기본 글꼴, 배경색, 글자색입니다. */
body {
  margin: 0;
  background: var(--color-page-bg);
  color: var(--color-text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: 14px;
  word-break: keep-all;
}

/* 기본 링크 스타일입니다. */
a {
  color: var(--color-link-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 이미지가 본문 밖으로 튀어나가지 않게 막습니다. */
img {
  max-width: 100%;
  height: auto;
 }


/*------------------------------------------------------------*/
/* 2. 상단 헤더 / 로고 / 메뉴 */
/*------------------------------------------------------------*/

/* 사이트 최상단 초록색 헤더입니다. */
.nw-header {
  background: var(--color-brand);
  color: var(--color-white);
}

.nw-header-inner {
  max-width: 1440px;
  height: 52px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nw-logo {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.nw-logo a,
.nw-nav a {
  color: var(--color-white);
}

.nw-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
 }


/*------------------------------------------------------------*/
/* 3. 카테고리 드롭다운 */
/*------------------------------------------------------------*/

/* 상단 메뉴의 카테고리 목록 드롭다운입니다. */
.nw-dropdown {
  position: relative;
}

.nw-drop-btn {
  border: 0;
  background: transparent;
  color: var(--color-white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.nw-drop-menu {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  width: 260px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border-main);
  border-radius: 4px;
  padding: 12px;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.nw-dropdown.is-open .nw-drop-menu {
  display: block;
}

.nw-drop-menu,
.nw-drop-menu a {
  color: var(--color-text-main);
}

.nw-drop-menu ul {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}

.nw-drop-menu li {
  margin: 7px 0;
 }


/*------------------------------------------------------------*/
/* 4. 검색창 / 상단 아이콘 버튼 */
/*------------------------------------------------------------*/

/* 검색창 전체 묶음입니다. 자동완성 위치 기준이 되므로 position:relative가 필요합니다. */
.nw-search {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nw-search s_search {
  position: relative;
  display: flex;
  align-items: center;
}

.nw-icon-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-text-muted-dark);
  cursor: pointer;
  font-size: 15px;
}

.nw-icon-btn:hover {
  background: var(--color-button-hover);
}

.nw-search input {
  width: 260px;
  height: 38px;
  border: 0;
  padding: 0 12px;
  border-radius: 4px 0 0 4px;
}

.nw-search-btn {
  width: 42px;
  height: 38px;
  border: 0;
  border-left: 1px solid var(--color-border-light);
  border-radius: 0 4px 4px 0;
  background: var(--color-white);
  cursor: pointer;
}

/* 검색어 입력 시 검색창 바로 아래에 뜨는 자동완성 목록입니다. */
.nw-search-suggest {
  display: none;
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  min-width: 260px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border-main);
  border-radius: 4px;
  z-index: 99999;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.nw-search-suggest.is-open {
  display: block;
}

.nw-search-suggest a {
  display: block;
  padding: 8px 10px;
  color: var(--color-text-main);
  font-size: 13px;
}

.nw-search-suggest a:hover {
  background: var(--color-button-hover);
  text-decoration: none;
 }


/*------------------------------------------------------------*/
/* 5. 전체 레이아웃 / 카드 */
/*------------------------------------------------------------*/

/* 본문과 사이드바를 나누는 큰 레이아웃입니다. */
.nw-layout {
  max-width: 1440px;
  margin: 16px auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

/* 흰색 카드 공통 스타일입니다. */
.nw-card,
.nw-side-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-main);
  border-radius: 5px;
}

.nw-card {
  padding: 24px;
  min-height: 720px;
}

/* 문서 제목과 수정/삭제 버튼이 들어가는 상단 영역입니다. */
.nw-document-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.nw-title {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.nw-date {
  margin: 6px 0 0;
  color: var(--color-text-muted-dark);
}

.nw-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: flex-start;
}

.nw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 56px;
  height: 36px;
  border: 1px solid var(--color-border-main);
  background: var(--color-button-bg);
  padding: 0 14px;
  border-radius: 4px;
  color: var(--color-text-muted-dark);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}

.nw-btn:hover {
  background: var(--color-button-hover);
  text-decoration: none;
}

.nw-delete {
  color: var(--color-danger);
 }


/*------------------------------------------------------------*/
/* 6. 대문 / 홈 화면 */
/*------------------------------------------------------------*/

/* 대문 제목은 링크처럼 보이지 않도록 검정색으로 고정합니다. */
.nw-home-static .nw-title {
  color: var(--color-title-home);
}

/* 홈 전용 안내 박스입니다. */
.nw-guide-box {
  margin: 24px 0;
  border: 2px solid var(--color-brand);
  background: var(--color-white);
}

.nw-guide-title {
  padding: 10px 14px;
  background: var(--color-brand);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 900;
}

.nw-guide-body {
  padding: 12px 14px;
  line-height: 1.8;
}

/* 예전 표형 가이드용 스타일입니다. 필요 없으면 HTML에서 표를 안 쓰면 됩니다. */
.nw-guide-table {
  width: 100%;
  border-collapse: collapse;
}

.nw-guide-table th {
  width: 130px;
  background: var(--color-guide-th-bg);
  color: var(--color-guide-th-text);
  border: 1px solid var(--color-guide-border);
  padding: 10px;
  text-align: center;
  white-space: nowrap;
}

.nw-guide-table td {
  border: 1px solid var(--color-guide-border);
  padding: 10px 12px;
}

.nw-home-intro {
  margin-top: 28px;
}

/* 예전 홈 구성요소 스타일입니다. 현재 안 쓰더라도 보존합니다. */
.nw-home .nw-category-box {
  margin-top: 120px;
}

.nw-welcome {
  text-align: center;
  margin: 18px 0 28px;
}

.nw-welcome h3 {
  margin: 0 0 6px;
  font-size: 21px;
}

.nw-welcome span {
  color: var(--color-brand);
}

.nw-welcome p {
  margin: 0;
}

.nw-info-box {
  border: 2px solid var(--color-brand);
  margin: 20px 0;
}

.nw-info-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  border-bottom: 1px solid var(--color-border-light);
}

.nw-info-row:last-child {
  border-bottom: 0;
}

.nw-info-icon {
  background: var(--color-brand-alt);
  color: var(--color-white);
  font-size: 42px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nw-info-text {
  padding: 13px;
}

.nw-info-text h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.nw-info-text p {
  margin: 0;
}

.nw-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.nw-home-item {
  display: block;
}

.nw-home-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--color-border-light);
}

.nw-home-item strong {
  display: block;
  margin-top: 8px;
  color: var(--color-text-main);
}

.nw-home-item span,
.nw-home-list span {
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
}

.nw-home-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-border-soft);
}

.nw-home-list strong {
  color: var(--color-text-main);
 }


/*------------------------------------------------------------*/
/* 7. 본문 / 문서 내용 */
/*------------------------------------------------------------*/

/* 실제 글 본문 영역입니다. */
.nw-content {
  margin-top: 24px;
  line-height: 1.85;
  overflow-wrap: break-word;
}

.nw-content h1,
.nw-content h2,
.nw-content h3,
.nw-content h4 {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 6px;
}

.nw-content blockquote {
  border-left: 4px solid var(--color-border-main);
  background: var(--color-quote-bg);
  margin: 16px 0;
  padding: 10px 14px;
}

.nw-content table {
  width: 100%;
  border-collapse: collapse;
}

.nw-content table th,
.nw-content table td {
  border: 1px solid var(--color-border-light);
  padding: 8px;
}

/* 분류/태그 박스입니다. */
.nw-category-box {
  margin-top: 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--color-text-main);
}

.nw-tags {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

.nw-tags a {
  margin-right: 8px;
}

/* 나무위키식 취소선입니다. */
.nw-content s,
.nw-content strike,
.nw-content del {
  color: var(--color-text-muted);
  opacity: .85;
 }


/*------------------------------------------------------------*/
/* 8. 본문 하단 / 댓글 / 이전글 다음글 */
/*------------------------------------------------------------*/

/* 현재는 아래쪽에서 티스토리 기본 버튼과 댓글을 숨깁니다. */
.nw-post-nav {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nw-post-nav a {
  border: 1px solid var(--color-border-light);
  background: var(--color-button-bg);
  padding: 12px;
}

.nw-post-nav span {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
}

.nw-comments {
  margin-top: 32px;
 }


/*------------------------------------------------------------*/
/* 9. 글 목록 / 카테고리 목록 */
/*------------------------------------------------------------*/

/* 티스토리 목록 화면 공통입니다. */
.archive-section {
  padding: 24px;
}

.mk-article-grid {
  margin-top: 22px;
}

/* simple 목록형입니다. */
.archive-section.simple .mk-article-grid {
  display: flex;
  flex-direction: column;
}

.archive-section.simple .mk-article-thumb-wrap {
  display: none;
}

.archive-section.simple .mk-article-link {
  display: block;
  padding: 11px 2px;
  border-bottom: 1px solid var(--color-border-soft);
}

.archive-section.simple .mk-article-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.archive-section.simple .mk-article-title {
  color: var(--color-link-blue);
}

.archive-section.simple .mk-article-date {
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.archive-section.simple .mk-article-excerpt {
  display: none;
}

/* digest 목록형입니다. */
.archive-section.digest .mk-article-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.archive-section.digest .mk-article-link {
  display: flex;
  gap: 14px;
}

.archive-section.digest .mk-article-thumb-wrap {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.archive-section.digest .mk-article-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-section.digest .mk-article-title {
  font-weight: 800;
  color: var(--color-text-main);
}

.archive-section.digest .mk-article-date {
  color: var(--color-text-muted);
  font-size: 13px;
}

.archive-section.digest .mk-article-excerpt {
  margin: 6px 0 0;
  color: var(--color-text-fold);
  line-height: 1.6;
}

/* gallery / gallery2 목록형입니다. */
.archive-section.gallery .mk-article-grid,
.archive-section.gallery2 .mk-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.archive-section.gallery .mk-article-link,
.archive-section.gallery2 .mk-article-link {
  display: block;
}

.archive-section.gallery .mk-article-thumb-wrap,
.archive-section.gallery2 .mk-article-thumb-wrap {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  background: var(--color-gallery-bg) url("./images/noimg.png") center / cover no-repeat;
}

.archive-section.gallery .mk-article-thumb,
.archive-section.gallery2 .mk-article-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-section.gallery .mk-article-title,
.archive-section.gallery2 .mk-article-title {
  display: block;
  margin-top: 8px;
  color: var(--color-text-main);
  font-weight: 800;
}

.archive-section.gallery .mk-article-date,
.archive-section.gallery2 .mk-article-date {
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
}

.archive-section.gallery .mk-article-excerpt,
.archive-section.gallery2 .mk-article-excerpt {
  display: none;
}

/* 목록 썸네일 fallback입니다. */
.mk-thumb-fallback {
  display: none;
}

.mk-article-thumb-wrap {
  background: var(--color-thumb-bg) url("./images/noimg.png") center / cover no-repeat;
}

.mk-article-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 0;
  color: transparent;
}

.mk-article-thumb[src=""],
.mk-article-thumb:not([src]) {
  display: none;
 }


/*------------------------------------------------------------*/
/* 10. 사이드바 / 최근 변경 / 광고 */
/*------------------------------------------------------------*/

.nw-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nw-side-card {
  padding: 16px;
}

.nw-side-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.nw-side-card ol,
.nw-side-card ul {
  margin: 0;
  padding-left: 20px;
}

.nw-side-card li {
  margin: 7px 0;
}

.nw-side-category ul {
  list-style: none;
  padding-left: 0;
}

.nw-side-category ul ul {
  padding-left: 14px;
  margin-top: 6px;
}

/* 사이드 광고 영역입니다. JS로 이미지가 들어갈 수 있습니다. */
.nw-ad {
  min-height: 0 !important;
  background: transparent !important;
  display: block !important;
  overflow: hidden;
}

.nw-ad a {
  display: block !important;
  width: 100% !important;
}

.nw-ad img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}


/*------------------------------------------------------------*/
/* 11. 태그 / 방명록 / 보호글 / 페이징 */
/*------------------------------------------------------------*/

.nw-section-title {
  margin: 26px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 20px;
  font-weight: 800;
}

.nw-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 20px;
}

.nw-protected-form {
  margin-top: 24px;
  display: flex;
  gap: 8px;
}

.nw-protected-form input {
  height: 38px;
  border: 1px solid var(--color-border-main);
  padding: 0 10px;
}

.nw-protected-form button {
  height: 38px;
  border: 0;
  background: var(--color-brand);
  color: var(--color-white);
  padding: 0 16px;
  cursor: pointer;
}

.nw-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 40px;
}

.nw-pagination a {
  border: 1px solid var(--color-border-main);
  background: var(--color-white);
  padding: 8px 14px;
  border-radius: 4px;
}

.nw-pagination .no-more-prev,
.nw-pagination .no-more-next {
  opacity: 0.4;
  pointer-events: none;
 }


/*------------------------------------------------------------*/
/* 12. 티스토리 기본 요소 숨김 */
/*------------------------------------------------------------*/

/* 티스토리 기본 공감, CCL, 이름카드, 관련글, 댓글 등을 숨깁니다. */
.another_category,
[data-tistory-react-app="Namecard"],
.tt_box_namecard,
.container_postbtn,
.postbtn_like,
.postbtn_ccl,
.nw-post-nav,
.nw-comments {
  display: none !important;
 }


/*------------------------------------------------------------*/
/* 13. 랜덤 문서 목록 */
/*------------------------------------------------------------*/

.nw-random-docs ol {
  padding-left: 22px;
}

.nw-random-docs li {
  margin: 7px 0;
  white-space: nowrap;
}

.nw-random-docs a {
  display: inline-block;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
 }


/*------------------------------------------------------------*/
/* 14. 나무위키식 인용문 */
/*------------------------------------------------------------*/

/* 티스토리 인용문 style2를 나무위키식 초록 인용문처럼 보이게 합니다. */
blockquote[data-ke-style="style2"] {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--color-quote-bg);
  border-left: 5px solid var(--color-quote-green);
  border-top: 1px dashed var(--color-quote-border);
  border-right: 1px dashed var(--color-quote-border);
  border-bottom: 1px dashed var(--color-quote-border);
}

.nw-content blockquote[data-ke-style="style2"] p {
  margin: 0;
 }


/*------------------------------------------------------------*/
/* 15. 스포일러 틀 */
/*------------------------------------------------------------*/

/* 티스토리 인용문 style3을 스포일러 안내 틀로 바꿉니다. */
.nw-content blockquote[data-ke-style="style3"] {
  margin: 16px 0;
  padding: 0 !important;
  background: var(--color-page-bg);
  border: 1px solid var(--color-spoiler-border);
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.nw-content blockquote[data-ke-style="style3"] * {
  display: none !important;
}

/* 스포일러 틀 제목입니다. */
.nw-content blockquote[data-ke-style="style3"]::before {
  content: "이 문서에 스포일러가 포함되어 있습니다.";
  display: block;
  border-top: 4px solid var(--color-spoiler-top);
  padding: 12px 14px 10px;
  color: var(--color-text-main);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

/* 스포일러 틀 설명입니다. */
.nw-content blockquote[data-ke-style="style3"]::after {
  content: "이 문서가 설명하는 작품이나 인물 등에 대한 줄거리, 결말, 반전 요소 등을 직·간접적으로 포함하고 있습니다.";
  display: block;
  padding: 0 14px 14px;
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
 }


/*------------------------------------------------------------*/
/* 16. 목차 */
/*------------------------------------------------------------*/

/* JS가 자동 생성하는 나무위키식 목차입니다. */
.nw-toc {
  display: inline-block;
  width: fit-content;
  min-width: 180px;
  max-width: 420px;
  margin: 20px 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border-main);
  background: var(--color-white);
}

.nw-toc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.nw-toc-head strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
}

.nw-toc-toggle {
  cursor: pointer;
  color: var(--color-text-fold);
  font-size: 12px;
  user-select: none;
}

.nw-toc.is-folded #nw-toc-list {
  display: none;
}

.nw-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nw-toc li {
  margin: 3px 0;
  line-height: 1.55;
  color: var(--color-text-main);
}

.nw-toc .lv2 {
  margin-left: 0;
}

.nw-toc .lv3 {
  margin-left: 22px;
}

.nw-toc .lv4 {
  margin-left: 44px;
}

.nw-toc-num {
  color: var(--color-link-blue) !important;
  text-decoration: none;
  margin-right: 4px;
}

.nw-toc-num:hover {
  text-decoration: underline;
}

.nw-toc-text {
  color: var(--color-text-main);
 }


/*------------------------------------------------------------*/
/* 17. 문단 접기 */
/*------------------------------------------------------------*/

/* h2~h4 제목 오른쪽에 붙는 접기/펼치기 버튼입니다. */
.nw-fold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  cursor: pointer;
  color: var(--color-text-fold);
  font-size: 12px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.nw-fold-hidden {
  display: none !important;
}

.nw-content h2[data-ke-size],
.nw-content h3[data-ke-size],
.nw-content h4[data-ke-size] {
  position: relative;
  padding-right: 28px;
}

.nw-heading-num {
  margin-right: 4px;
  color: var(--color-link-blue) !important;
 }


/*------------------------------------------------------------*/
/* 18. 캐릭터 정보 틀 */
/*------------------------------------------------------------*/

/* JS가 blockquote style4를 캐릭터 정보상자로 변환합니다. */
blockquote[data-ke-style="style4"] {
  display: none;
}

/* 본문 상단에서 목차와 프로필 박스를 가로 배치합니다. */
.nw-top-info {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.nw-top-info .nw-toc {
  flex: 0 0 auto;
}

.nw-top-info .nw-toc,
.nw-top-info .nw-character-box {
  margin: 0 !important;
}

.nw-top-info .nw-character-box {
  margin-left: auto !important;
  flex: 0 0 auto;
}

/* 프로필 박스 본체입니다. */
.nw-character-box {
  width: 320px !important;
  max-width: 100% !important;
  border: 1px solid var(--color-text-soft);
  background: var(--color-white);
  font-size: 14px;
  display: block;
}

.nw-character-title {
  padding: 12px;
  background: var(--char-color, var(--color-character-default));
  color: var(--color-white);
  text-align: center;
}

.nw-character-name-ko {
  display: block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--char-name-color, #ffffff) !important;
}

.nw-character-name-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  opacity: .9;
  color: var(--char-name-color, #ffffff) !important;
}

.nw-character-image {
  width: 100%;
}

.nw-character-image img {
  display: block;
  width: 100%;
  height: auto;
}

.nw-character-table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
}

.nw-character-table th {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  padding: 8px 10px !important;
  background: var(--char-color, var(--color-character-default));
  border: 1px solid rgba(255,255,255,.18);
  color: var(--color-white);
  white-space: nowrap;
}

.nw-character-table td {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid var(--color-border-main);
  color: var(--color-text-main);
  word-break: keep-all;
  white-space: normal;
 }


/*------------------------------------------------------------*/
/* 19. 입장 비밀번호 화면 */
/*------------------------------------------------------------*/

#dswiki-lock {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--color-page-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dswiki-lock-box {
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--color-white);
  border: 1px solid var(--color-border-main);
  border-top: 5px solid var(--color-brand);
  padding: 24px;
  text-align: left;
}

.dswiki-lock-box h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 900;
}

.dswiki-lock-box p {
  margin: 0 0 16px;
  color: var(--color-text-middle);
}

.dswiki-lock-box input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--color-border-input);
  padding: 0 12px;
  font-size: 15px;
}

.dswiki-lock-box button {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  border: 0;
  background: var(--color-brand);
  color: var(--color-white);
  font-weight: 800;
  cursor: pointer;
}

.dswiki-lock-box button:hover {
  background: var(--color-brand-dark);
 }


/*------------------------------------------------------------*/
/* 20. 각주 */
/*------------------------------------------------------------*/

/* 본문 각주 번호와 PC 말풍선, 모바일 팝업 스타일입니다. */
.nw-footnote-ref {
  vertical-align: super;
  font-size: .8em;
  position: relative;
}

.nw-footnote-link {
  cursor: pointer;
}

.nw-footnote-tooltip {
  position: absolute;
  left: 50%;
  bottom: 130%;
  transform: translateX(-50%);
  z-index: 99999;
  display: none;
  width: max-content;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--color-white);
  border: 1px solid var(--color-text-soft);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  color: var(--color-text-main);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}

/* PC처럼 hover가 가능한 환경에서만 말풍선을 띄웁니다.
   터치 기기에서는 hover가 남아 말풍선이 고정되는 문제가 있어 비활성화합니다. */
@media (hover: hover) and (pointer: fine) {
  .nw-footnote-ref:hover .nw-footnote-tooltip {
    display: block;
  }
}

.nw-footnote-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-text-soft);
}

.nw-footnotes {
  margin-top: 40px;
  border-top: 2px solid var(--color-border-light);
  padding-top: 12px;
}

.nw-footnotes h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.nw-footnote-item {
  margin: 6px 0;
}

.nw-footnote-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.35);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.nw-footnote-popup.is-open {
  display: flex;
}

.nw-footnote-popup-box {
  width: 100%;
  max-width: 360px;
  background: var(--color-white);
  border: 1px solid var(--color-text-soft);
  padding: 16px;
  color: var(--color-text-main);
}

.nw-footnote-popup-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.nw-footnote-popup-close {
  width: 100%;
  height: 36px;
  margin-top: 14px;
  border: 0;
  background: var(--color-brand);
  color: var(--color-white);
  font-weight: 800;
 }

/* 모바일에서는 PC용 말풍선을 완전히 끄고, JS 팝업만 사용합니다. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .nw-footnote-tooltip,
  .nw-footnote-ref:hover .nw-footnote-tooltip,
  .nw-footnote-ref:focus .nw-footnote-tooltip,
  .nw-footnote-ref:active .nw-footnote-tooltip {
    display: none !important;
  }

  .nw-footnote-ref {
    position: static;
  }
}




/*------------------------------------------------------------*/
/* 20-1. {{이런/문구/생성기}} 문구 생성 박스 */
/*------------------------------------------------------------*/

.nw-generator-box {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 10px 0;
  padding: 7px 10px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background: var(--color-button-bg);
  color: var(--color-text-main);
  font-size: 13px;
  line-height: 1.6;
}

.nw-generator-item {
  font-weight: 700;
}

.nw-generator-slash {
  color: var(--color-text-muted);
  padding: 0 2px;
}

body.nw-dark .nw-generator-box {
  background: var(--color-dark-hover);
  border-color: var(--color-border-dark-soft);
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-generator-slash {
  color: var(--color-text-soft);
}


/*------------------------------------------------------------*/
/* 21. 상단 / 하단 이동 버튼 */
/*------------------------------------------------------------*/

.nw-scroll-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}

.nw-scroll-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-main);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-text-muted-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.nw-scroll-btn:hover {
  background: var(--color-page-bg);
 }


/*------------------------------------------------------------*/
/* 22. 모바일 */
/*------------------------------------------------------------*/

/* 모바일에서는 헤더를 sticky로 만들고, 본문은 화면 폭을 꽉 채웁니다. */
@media (max-width: 900px) {
  body {
    background: var(--color-white);
  }

  .nw-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    overflow: visible;
  }

  .nw-header-inner {
    height: auto;
    min-height: 52px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    overflow: visible;
  }

  .nw-logo {
    font-size: 20px;
    grid-column: 1;
  }

  .nw-nav {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
    overflow: visible;
    gap: 16px;
    padding: 4px 0;
    white-space: nowrap;
    font-size: 13px;
  }

  .nw-search {
    grid-column: 2 / -1;
    margin-left: 0;
    justify-content: flex-end;
  }

  .nw-icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .nw-search input {
    width: min(42vw, 180px);
    height: 36px;
  }

  .nw-search-btn {
    width: 38px;
    height: 36px;
    flex-shrink: 0;
  }

  .nw-layout {
    display: block;
    margin: 0;
    padding: 0;
  }

  .nw-main {
    width: 100%;
    padding-bottom: 100px;
  }

  .nw-card,
  .nw-side-card {
    border: 0;
    border-radius: 0;
  }

  .nw-card {
    padding: 14px;
    min-height: auto;
    width: 100%;
  }

  .nw-document-head {
    gap: 10px;
    align-items: flex-start;
  }

  .nw-title {
    font-size: 26px;
    line-height: 1.25;
  }

  .nw-date {
    font-size: 13px;
  }

  .nw-actions {
    gap: 4px;
  }

  .nw-btn {
    min-width: 46px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }

  .nw-category-box {
    margin-top: 12px;
    font-size: 13px;
  }

  .nw-home .nw-category-box {
    margin-top: 40px;
  }

  .nw-content {
    font-size: 14px;
    line-height: 1.8;
  }

  .nw-content img {
    max-width: 100%;
    height: auto;
  }

  .nw-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .nw-home-grid,
  .archive-section.gallery .mk-article-grid,
  .archive-section.gallery2 .mk-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .archive-section.digest .mk-article-link {
    gap: 10px;
  }

  .archive-section.digest .mk-article-thumb-wrap {
    width: 76px;
    height: 76px;
  }

  .archive-section.simple .mk-article-row {
    flex-direction: column;
    gap: 2px;
  }

  /* 모바일에서는 사이드바와 광고를 숨깁니다. */
  .nw-sidebar,
  .nw-ad {
    display: none;
  }

  /* 모바일 드롭다운 위치입니다. */
  .nw-dropdown {
    position: relative;
  }

  .nw-drop-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 280px;
    max-width: 90vw;
    max-height: 300px;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border-main);
    border-radius: 6px;
    z-index: 99999;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
  }

  .nw-dropdown.is-open .nw-drop-menu {
    display: block;
  }

  /* 모바일에서는 목차와 프로필 박스를 세로로 쌓습니다. */
  .nw-top-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .nw-top-info .nw-toc,
  .nw-top-info .nw-character-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .nw-character-box {
    align-self: stretch !important;
  }

  /* 모바일 상하 이동 버튼입니다. */
  .nw-scroll-buttons {
    right: 12px;
    bottom: 12px;
  }

  .nw-scroll-btn {
    width: 40px;
    height: 40px;
  }

.nw-character-box {
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

.nw-toc {
  display: inline-block;
  width: fit-content;
  min-width: 180px;
  max-width: 420px;
  margin: 20px 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border-main);
  background: var(--color-white);
}


}

/* 태블릿 이하에서 본문 폭이 애매하면 목차와 프로필을 세로로 정렬합니다. */
@media (max-width: 1000px) {
  .nw-top-info {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .nw-top-info .nw-toc,
  .nw-top-info .nw-character-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .nw-character-box {
    align-self: stretch !important;
  }
 }


/*------------------------------------------------------------*/
/* 23. 다크모드 */
/*------------------------------------------------------------*/

/* 전체 다크모드 색상입니다. */
body.nw-dark {
  background: var(--color-dark-page-bg);
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-layout {
  background: transparent;
}

body.nw-dark .nw-card,
body.nw-dark .nw-side-card {
  background: var(--color-dark-surface);
  border-color: var(--color-text-middle);
}

body.nw-dark .nw-title,
body.nw-dark .nw-content,
body.nw-dark .nw-home-list strong,
body.nw-dark .archive-section.gallery .mk-article-title,
body.nw-dark .archive-section.gallery2 .mk-article-title,
body.nw-dark .archive-section.digest .mk-article-title {
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-date,
body.nw-dark .mk-article-date,
body.nw-dark .nw-home-item span,
body.nw-dark .nw-home-list span {
  color: var(--color-text-soft);
}

body.nw-dark .nw-category-box,
body.nw-dark .nw-post-nav a,
body.nw-dark .nw-btn {
  background: var(--color-dark-hover);
  border-color: var(--color-text-middle);
  color: var(--color-dark-text-strong);
}

/* 다크모드 헤더와 메뉴입니다. */
body.nw-dark .nw-header {
  background: var(--color-dark-header-bg);
  border-bottom: 1px solid var(--color-text-muted-dark);
}

body.nw-dark .nw-logo a,
body.nw-dark .nw-nav a,
body.nw-dark .nw-drop-btn {
  color: var(--color-gallery-bg);
}

body.nw-dark .nw-drop-menu {
  background: var(--color-dark-surface);
  border-color: var(--color-border-dark-soft);
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-drop-menu a {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-drop-menu a:hover {
  color: var(--color-dark-accent);
}

body.nw-dark .nw-drop-menu ul,
body.nw-dark .nw-drop-menu li {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-drop-menu .c_cnt,
body.nw-dark .nw-drop-menu .cnt {
  color: var(--color-dark-accent) !important;
}

/* 다크모드 검색창입니다. */
body.nw-dark .nw-search input {
  background: var(--color-dark-input-bg);
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-search-btn,
body.nw-dark .nw-icon-btn {
  background: var(--color-dark-input-bg);
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-search-btn:hover,
body.nw-dark .nw-icon-btn:hover {
  background: var(--color-dark-hover);
}

body.nw-dark .nw-search-suggest {
  background: var(--color-dark-surface);
  border-color: var(--color-border-dark-soft);
}

body.nw-dark .nw-search-suggest a {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-search-suggest a:hover {
  background: var(--color-dark-hover);
  color: var(--color-dark-accent);
}

/* 다크모드 링크입니다. */
body.nw-dark a {
  color: var(--color-dark-accent);
}

body.nw-dark a:hover {
  color: var(--color-dark-accent-hover);
}

body.nw-dark .nw-content a {
  color: var(--color-dark-link-blue);
}

body.nw-dark .nw-category-box {
  background: var(--color-dark-category-bg);
  border-color: var(--color-border-dark-soft);
}

body.nw-dark .nw-category-box a {
  color: var(--color-dark-accent);
}

/* 다크모드 사이드바입니다. */
body.nw-dark .nw-side-card h3 {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-side-card ol li,
body.nw-dark .nw-side-card ul li {
  color: var(--color-dark-accent);
}

body.nw-dark .nw-side-card a {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-side-card a:hover {
  color: var(--color-white-strong);
}

/* 다크모드 목록 제목입니다. */
body.nw-dark .archive-section.simple a,
body.nw-dark .archive-section.simple .mk-article-title {
  color: var(--color-dark-text-main) !important;
}

body.nw-dark .archive-section.simple .mk-article-link:hover .mk-article-title {
  color: var(--color-white-strong) !important;
}

/* 다크모드 대문과 안내 박스입니다. */
body.nw-dark .nw-home-static .nw-title {
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-guide-box {
  background: var(--color-dark-surface);
  border-color: var(--color-brand-dark);
}

body.nw-dark .nw-guide-title {
  background: var(--color-brand-dark);
}

body.nw-dark .nw-guide-body {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-guide-table th {
  background: var(--color-dark-guide-th-bg);
  color: var(--color-dark-guide-th-text);
  border-color: var(--color-dark-guide-border);
}

body.nw-dark .nw-guide-table td {
  border-color: var(--color-dark-guide-border);
}

/* 다크모드 인용문과 스포일러 틀입니다. */
body.nw-dark .nw-content blockquote[data-ke-style="style2"] {
  background: var(--color-dark-quote-bg);
  border-left-color: var(--color-dark-quote-green);
  border-top-color: var(--color-text-middle);
  border-right-color: var(--color-text-middle);
  border-bottom-color: var(--color-text-middle);
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-content blockquote[data-ke-style="style3"] {
  background: var(--color-dark-surface) !important;
  border-color: var(--color-border-dark) !important;
}

body.nw-dark .nw-content blockquote[data-ke-style="style3"]::before {
  color: var(--color-dark-text-strong) !important;
}

body.nw-dark .nw-content blockquote[data-ke-style="style3"]::after {
  color: var(--color-dark-text-muted) !important;
}

/* 다크모드 목차와 문단 접기입니다. */
body.nw-dark .nw-toc {
  background: var(--color-dark-surface);
  border-color: var(--color-text-middle);
}

body.nw-dark .nw-toc-head strong,
body.nw-dark .nw-toc-text,
body.nw-dark .nw-toc li {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-toc-toggle {
  color: var(--color-text-soft);
}

body.nw-dark .nw-toc-num,
body.nw-dark .nw-heading-num {
  color: var(--color-dark-link-blue) !important;
}

body.nw-dark .nw-fold-btn {
  color: var(--color-text-soft);
}

/* 다크모드 캐릭터 정보상자입니다. */
body.nw-dark .nw-top-info {
  border-bottom-color: var(--color-text-middle);
}

body.nw-dark .nw-character-box {
  background: var(--color-dark-surface);
  border-color: var(--color-text-middle);
}

body.nw-dark .nw-character-title,
body.nw-dark .nw-character-table th {
  background: var(--char-color, var(--color-character-default)) !important;
  color: var(--color-white);
}

body.nw-dark .nw-character-table th {
  border-color: var(--color-dark-character-border);
}

body.nw-dark .nw-character-table td {
  border-color: var(--color-text-middle);
  color: var(--color-dark-text-strong);
}

/* 다크모드 각주입니다. */
body.nw-dark .nw-footnote-tooltip,
body.nw-dark .nw-footnote-popup-box {
  background: var(--color-dark-surface);
  border-color: var(--color-text-middle);
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-footnotes {
  border-color: var(--color-text-middle);
}

/* 다크모드 상하 이동 버튼입니다. */
body.nw-dark .nw-scroll-btn {
  background: var(--color-dark-surface);
  border-color: var(--color-text-middle);
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-scroll-btn:hover {
  background: var(--color-dark-hover);
}

/* 다크모드 취소선입니다. */
body.nw-dark .nw-content s,
body.nw-dark .nw-content strike,
body.nw-dark .nw-content del {
  color: var(--color-dark-strike);
  text-decoration-color: var(--color-dark-strike);
}

/* 모바일 다크모드 배경입니다. */
@media (max-width: 900px) {
  body.nw-dark {
    background: var(--color-dark-surface);
  }
}

/*------------------------------------------------------------*/
/* 24. 폰트 최종 보정 */
/*------------------------------------------------------------*/

/* 전체 기본 본문 폰트: Pretendard 500 */
html,
body,
button,
input,
textarea,
select,
.nw-content,
.nw-category-box,
.nw-date,
.nw-character-table td {
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-body) !important;
}

/* 제목 계열: Pretendard 900 */
.nw-logo,
.nw-title,
.nw-guide-title,
.nw-toc-head strong,
.nw-section-title,
.dswiki-lock-box h2,
.nw-character-name-ko,
.nw-content h2[data-ke-size="size26"],
.nw-content h3[data-ke-size="size23"],
.nw-content h4[data-ke-size="size20"],
.nw-heading-num {
  font-family: var(--font-title) !important;
  font-weight: var(--font-weight-title) !important;
}

/* 본문 계열: Pretendard 500 */
.nw-content p[data-ke-size="size18"],
.nw-content p[data-ke-size="size16"],
.nw-content p[data-ke-size="size14"],
.nw-guide-body,
.nw-toc li,
.nw-toc-text {
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-body) !important;
}

/* 캐릭터 영문/한자 부제목은 굵게 만들지 않습니다. */
.nw-character-name-sub {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

/* Font Awesome 아이콘은 Pretendard로 덮어쓰지 않습니다. */
.fa,
.fa-solid,
.fa-regular,
.fa-brands,
.fas,
.far,
.fab,
.nw-fold-btn,
.nw-fold-btn i,
.nw-icon-btn i,
.nw-search-btn i,
.nw-scroll-btn i {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/*------------------------------------------------------------*/
/* 25. 작품 링크 박스 / 캐릭터 정리 박스 */
/*------------------------------------------------------------*/

blockquote[data-ke-style="style5"],
blockquote[data-ke-style="style6"] {
  display: none;
}

/* 작품 링크 박스 */
.nw-work-link-box {
  max-width: 640px;
  margin: 24px auto;
  border: 2px solid var(--work-color, #d33);
  background: var(--color-white);
  text-align: center;
  overflow: hidden;
}

.nw-work-logo {
  padding: 18px 16px;
}

.nw-work-logo img {
  max-width: 360px;
  width: auto;
  height: auto;
}

.nw-work-title {
  padding: 14px;
  background: var(--work-color, #d33);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.nw-work-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-top: 1px solid var(--color-border-light);
  min-height: 38px;
}

.nw-work-row strong {
  padding: 8px 10px;
  background: #f7f7f7;
  border-right: 1px solid var(--color-border-light);
  font-weight: 800;
}

.nw-work-row div {
  padding: 8px 12px;
  line-height: 1.7;
}

/* 캐릭터 정리 박스 */
.nw-char-grid-box {
  max-width: 720px;
  margin: 24px auto;
  border: 2px solid var(--grid-color, #d33);
  background: var(--color-white);
  text-align: center;
  overflow: hidden;
}

.nw-char-grid-logo {
  padding: 12px 16px;
}

.nw-char-grid-logo img {
  max-width: 320px;
  width: auto;
  height: auto;
}

.nw-char-grid-title {
  padding: 10px 12px;
  border-top: 1px solid var(--color-border-light);
  font-size: 16px;
  font-weight: 800;
}

.nw-char-grid-toggle {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  background: #fafafa;
  padding: 8px;
  cursor: pointer;
  font-weight: 800;
}

.nw-char-grid-body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.nw-char-grid-box.is-folded .nw-char-grid-body {
  display: none;
}

.nw-char-card {
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
}

.nw-char-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.nw-char-card strong {
  display: block;
  padding: 6px 4px 2px;
  color: var(--color-link-blue);
  font-weight: 800;
}

.nw-char-card span {
  display: block;
  padding: 0 4px 8px;
  font-size: 12px;
  color: var(--color-text-main);
}

/* 다크모드 */
body.nw-dark .nw-work-link-box,
body.nw-dark .nw-char-grid-box {
  background: var(--color-dark-surface);
  border-color: var(--work-color, var(--grid-color, #d33));
}

body.nw-dark .nw-work-row,
body.nw-dark .nw-char-grid-title,
body.nw-dark .nw-char-grid-toggle,
body.nw-dark .nw-char-card {
  border-color: var(--color-text-middle);
}

body.nw-dark .nw-work-row strong,
body.nw-dark .nw-char-grid-toggle {
  background: var(--color-dark-hover);
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-work-row div,
body.nw-dark .nw-char-grid-title,
body.nw-dark .nw-char-card span {
  color: var(--color-dark-text-strong);
}

body.nw-dark .nw-char-card {
  background: var(--color-dark-surface);
}

/* 모바일 */
@media (max-width: 900px) {
  .nw-work-link-box,
  .nw-char-grid-box {
    max-width: 100%;
    margin: 18px 0;
  }

  .nw-work-row {
    grid-template-columns: 90px 1fr;
    font-size: 13px;
  }

  .nw-char-grid-body {
    grid-template-columns: repeat(3, 1fr);
  }
}




/*------------------------------------------------------------*/
/* 26-1. style6 문법 통일 */
/* 제목/로고/로고색상/로고크기/색/배경색 + 캐릭터=이미지|설명|링크 */
/*------------------------------------------------------------*/

.nw-char-grid-box {
  background: var(--grid-bg, var(--color-white));
}

.nw-char-grid-logo,
.nw-char-grid-title,
.nw-char-grid-toggle {
  background: var(--grid-bg, var(--color-white));
}

.nw-char-grid-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nw-char-grid-logo img {
  max-width: var(--grid-logo-size, 160px) !important;
  max-height: var(--grid-logo-size, 160px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.nw-char-grid-logo-mask {
  display: inline-block;
  width: var(--grid-logo-size, 160px);
  height: var(--grid-logo-size, 160px);
  max-width: 100%;
  background: var(--grid-logo-color, var(--grid-color, #0066b3));
  -webkit-mask: var(--grid-logo-url) center / contain no-repeat;
  mask: var(--grid-logo-url) center / contain no-repeat;
}

.nw-char-grid-title {
  color: var(--grid-color, var(--color-link-blue));
}

.nw-char-card {
  display: block;
  text-decoration: none !important;
  color: inherit;
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--grid-bg, #fff);
  transition: background .15s ease, opacity .15s ease;
}

.nw-char-card:hover {
  text-decoration: none !important;
  background: rgba(0,0,0,.035);
}

.nw-char-card strong {
  color: var(--grid-color, var(--color-link-blue));
}

body.nw-dark .nw-char-grid-box,
body.nw-dark .nw-char-grid-logo,
body.nw-dark .nw-char-grid-title,
body.nw-dark .nw-char-grid-toggle,
body.nw-dark .nw-char-card {
  background: var(--grid-bg, var(--color-dark-surface));
}

body.nw-dark .nw-char-card:hover {
  background: var(--color-dark-hover);
}

body.nw-dark .nw-char-grid-title,
body.nw-dark .nw-char-card strong {
  color: var(--grid-color, var(--color-dark-link-blue)) !important;
}


/*------------------------------------------------------------*/
/* 26-2. style6 분류 섹션 / 로고 배경색 보정 */
/* 분류=값은 캐릭터 카드가 아니라 접기 섹션 제목으로 처리됩니다. */
/* 로고 영역 배경색은 색=컬러코드를 따릅니다. */
/*------------------------------------------------------------*/

.nw-char-grid-logo {
  background: var(--grid-color, #0066b3) !important;
  padding: 14px 16px !important;
}

.nw-char-grid-title {
  background: var(--grid-bg, var(--color-white)) !important;
  color: var(--grid-title-color, var(--grid-color, var(--color-link-blue))) !important;
}

.nw-char-grid-section {
  border-top: 1px solid var(--color-border-light);
}

.nw-char-grid-subtitle {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--grid-color, #0066b3) 18%, transparent);
  color: var(--grid-color, var(--color-link-blue));
  font-weight: 800;
  text-align: center;
}

.nw-char-grid-section.is-folded .nw-char-grid-body {
  display: none !important;
}

.nw-char-grid-toggle {
  background: var(--grid-bg, #fafafa) !important;
}

body.nw-dark .nw-char-grid-logo {
  background: var(--grid-color, #0066b3) !important;
}

body.nw-dark .nw-char-grid-title,
body.nw-dark .nw-char-grid-toggle,
body.nw-dark .nw-char-card {
  background: var(--grid-bg, var(--color-dark-surface)) !important;
}

body.nw-dark .nw-char-grid-subtitle {
  background: color-mix(in srgb, var(--grid-color, #0066b3) 28%, var(--color-dark-surface));
  color: var(--grid-color, var(--color-dark-link-blue)) !important;
}

/*------------------------------------------------------------*/
/* 22. 모바일 */
/*------------------------------------------------------------*/

/* 모바일에서는 헤더를 sticky로 만들고, 본문은 화면 폭을 꽉 채웁니다. */
@media (max-width: 1200px) {
  body {
    background: var(--color-white);
  }

.nw-character-box {
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

.nw-toc {
  display: inline-block;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
}

.nw-top-info .nw-toc {
  flex: 0 0 auto !important;
  width: fit-content !important;
}

.nw-top-info .nw-character-box,
.nw-character-box {
  width: 100% !important;
  max-width: 300px !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


.nw-character-image img {
  max-width: 300px !important;
  margin: 0 auto !important;
}

.nw-top-info .nw-character-box {
  width: auto !important;
  max-width: 300px !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

.nw-top-info {
  align-items: flex-start !important;
}

}

/*---------------*/
/* 페이지네이션  */
/*---------------*/

.nw-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:28px 0 4px;
  font-size:14px;
}

.nw-pagination a{
  min-width:32px;
  height:32px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  color:var(--text);
  text-decoration:none;
}

.nw-pagination a:hover{
  border-color:var(--point);
  color:var(--point);
}

.nw-pagination .selected,
.nw-pagination .current{
  background:var(--point);
  border-color:var(--point);
  color:rgb(83, 177, 141);
}

.nw-pagination .no-more-prev,
.nw-pagination .no-more-next{
  opacity:.35;
  pointer-events:none;
}
/*------------------------------------------------------------*/
/* 가챠 연출 CSS                                              */
/* style.css 하단에 붙여넣기                                   */
/*------------------------------------------------------------*/

/*---------------------------*/
/* 가챠 박스 공통             */
/*---------------------------*/

.nw-gacha-ui {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.nw-gacha-deck {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/*---------------------------*/
/* 카드 공통                  */
/*---------------------------*/

.nw-gacha-card {
  width: 120px;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}

.nw-gacha-card:hover:not(.is-revealed) {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/*---------------------------*/
/* 카드 뒷면                  */
/*---------------------------*/

.nw-gacha-card-back {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 2px solid #334;
}

.nw-gacha-card-grade {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(255,255,255,.25);
  user-select: none;
}

/* 등급별 뒷면 테두리 색 */
.nw-gacha-grade-SSR .nw-gacha-card-back {
  border-color: #c8a84b;
  background: linear-gradient(145deg, #1a1400 0%, #2a1f00 50%, #3d2e00 100%);
}

.nw-gacha-grade-SR .nw-gacha-card-back {
  border-color: #9b59b6;
  background: linear-gradient(145deg, #1a0030 0%, #2a0050 50%, #3a0070 100%);
}

.nw-gacha-grade-R .nw-gacha-card-back {
  border-color: #3a7bd5;
  background: linear-gradient(145deg, #001030 0%, #002050 50%, #003070 100%);
}

/*---------------------------*/
/* 카드 앞면 공통             */
/*---------------------------*/

.nw-gacha-card-front {
  width: 100%;
  height: 100%;
}

.nw-gacha-front-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* 이미지 영역 */
.nw-gacha-img-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #111;
}

.nw-gacha-no-img {
  background: #1a1a2e;
}

/* 블러 배경 (이미지가 작을 때도 꽉 채움) */
.nw-gacha-img-bg {
  position: absolute;
  inset: -10px;
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(.6);
  transform: scale(1.1);
}

/* 실제 이미지: 비율 유지, 가운데 정렬 */
.nw-gacha-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
}

/* 카드 정보 하단 */
.nw-gacha-card-info {
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
  position: relative;
}

.nw-gacha-name {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.nw-gacha-set {
  font-size: 10px;
  color: rgba(255,255,255,.6);
  line-height: 1.2;
}

/* 등급 배지 */
.nw-gacha-rarity-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.nw-gacha-rarity-badge.is-big {
  font-size: 14px;
  padding: 3px 10px;
}

/* 등급별 앞면 스타일 */
.nw-gacha-rarity-SSR .nw-gacha-card-info {
  background: linear-gradient(0deg, #1a0f00 80%, transparent);
}

.nw-gacha-rarity-SSR .nw-gacha-rarity-badge {
  background: #c8a84b;
  color: #fff;
}

.nw-gacha-rarity-SR .nw-gacha-card-info {
  background: linear-gradient(0deg, #1a003a 80%, transparent);
}

.nw-gacha-rarity-SR .nw-gacha-rarity-badge {
  background: #9b59b6;
  color: #fff;
}

.nw-gacha-rarity-R .nw-gacha-card-info {
  background: linear-gradient(0deg, #001030 80%, transparent);
}

.nw-gacha-rarity-R .nw-gacha-rarity-badge {
  background: #3a7bd5;
  color: #fff;
}

/* 공개 애니메이션 */
@keyframes nwRevealSSR {
  0%   { transform: scale(.6) rotateY(90deg); opacity: 0; filter: brightness(3); }
  40%  { transform: scale(1.08) rotateY(0deg); opacity: 1; filter: brightness(1.6); }
  70%  { transform: scale(.97); filter: brightness(1); }
  100% { transform: scale(1); }
}

@keyframes nwRevealSR {
  0%   { transform: scale(.7) rotateY(90deg); opacity: 0; }
  50%  { transform: scale(1.05) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes nwRevealR {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

.nw-gacha-reveal-SSR .nw-gacha-card-front {
  animation: nwRevealSSR .65s cubic-bezier(.22,1,.36,1) forwards;
}

.nw-gacha-reveal-SR .nw-gacha-card-front {
  animation: nwRevealSR .5s cubic-bezier(.22,1,.36,1) forwards;
}

.nw-gacha-reveal-R .nw-gacha-card-front {
  animation: nwRevealR .35s ease-out forwards;
}

/* SSR 카드 후광 */
.nw-gacha-reveal-SSR {
  box-shadow: 0 0 0 2px #c8a84b, 0 0 20px 4px rgba(200,168,75,.5);
}

.nw-gacha-reveal-SR {
  box-shadow: 0 0 0 2px #9b59b6, 0 0 14px 2px rgba(155,89,182,.4);
}

/*---------------------------*/
/* 전체 뽑기 버튼             */
/*---------------------------*/

.nw-gacha-pull-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 28px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #00a98f 0%, #007a6a 100%);
  color: #fff;
  font: 700 14px/1 inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,169,143,.35);
  transition: transform .15s, box-shadow .15s, opacity .2s;
}

.nw-gacha-pull-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,169,143,.45);
}

.nw-gacha-pull-btn:active:not(:disabled) {
  transform: scale(.97);
}

.nw-gacha-btn-icon {
  font-size: 16px;
}

/*---------------------------*/
/* 파티클                     */
/*---------------------------*/

.nw-gacha-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: none;
}

@keyframes nwParticlefly {
  0%   { transform: translate(calc(-50% + 0px), calc(-50% + 0px)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; }
}

.nw-gacha-particle.is-flying {
  animation: nwParticlefly .8s ease-out forwards;
}

/*---------------------------*/
/* SSR 시네마 - 페이즈 1      */
/* 검정 화면 + 대사            */
/*---------------------------*/

.nw-gacha-cinema {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .4s ease;
  cursor: pointer;
  overflow: hidden;
}

.nw-gacha-cinema.is-active {
  opacity: 1;
}

.nw-gacha-cinema.is-closing {
  opacity: 0;
  pointer-events: none;
}

.nw-gacha-cinema-phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 24px;
}

/* 빛살 선 배경 */
.nw-cinema-lines {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    rgba(200,168,75,.04) 0deg 2deg,
    transparent 2deg 10deg
  );
  animation: nwCinemaRotate 12s linear infinite;
  transform-origin: center;
}

@keyframes nwCinemaRotate {
  to { transform: rotate(360deg); }
}

/* SSR 텍스트 플래시 */
.nw-cinema-grade-flash {
  font-size: 11vw;
  font-weight: 900;
  letter-spacing: .2em;
  color: #c8a84b;
  text-shadow:
    0 0 30px rgba(200,168,75,.8),
    0 0 80px rgba(200,168,75,.4);
  animation: nwGradeFlash 2.8s ease forwards;
  z-index: 1;
}

@keyframes nwGradeFlash {
  0%   { opacity: 0; transform: scale(2.5); letter-spacing: .5em; }
  15%  { opacity: 1; transform: scale(1); letter-spacing: .2em; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 대사 */
.nw-cinema-quote {
  font-size: clamp(14px, 3vw, 22px);
  color: rgba(255,255,255,.9);
  font-weight: 500;
  font-style: italic;
  text-align: center;
  max-width: 600px;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  animation: nwCinemaFadeUp 2.8s ease forwards;
  z-index: 1;
}

/* 이름 */
.nw-cinema-name {
  font-size: clamp(18px, 4vw, 32px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .08em;
  text-shadow:
    0 0 20px rgba(200,168,75,.6),
    0 2px 8px rgba(0,0,0,.8);
  animation: nwCinemaFadeUp 2.8s ease .2s both;
  z-index: 1;
}

@keyframes nwCinemaFadeUp {
  0%   { opacity: 0; transform: translateY(18px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 페이즈 1 아웃 */
.nw-cinema-phase1.is-out {
  animation: nwPhase1Out .5s ease forwards;
}

@keyframes nwPhase1Out {
  to { opacity: 0; transform: scale(1.05); }
}

/*---------------------------*/
/* SSR 시네마 - 페이즈 2      */
/* 일러스트 공개 연출           */
/*---------------------------*/

.nw-cinema-phase2 {
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .6s ease;
}

.nw-cinema-phase2.is-active {
  opacity: 1;
}

.nw-cinema-reveal-wrap {
  position: relative;
  width: min(420px, 90vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

/* 배경 블러 이미지 */
.nw-cinema-img-bg {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center top;
  filter: blur(18px) brightness(.4) saturate(1.4);
  transform: scale(1.15);
  z-index: 0;
}

/* 메인 이미지 */
.nw-cinema-img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  object-position: center bottom;
  animation: nwCinemaImgIn .7s cubic-bezier(.22,1,.36,1) forwards;
  display: block;
  margin: 0 auto;
}

@keyframes nwCinemaImgIn {
  0%   { opacity: 0; transform: translateY(30px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 하단 정보 */
.nw-cinema-reveal-info {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 2;
  padding: 40px 20px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  animation: nwCinemaInfoIn .7s ease .3s both;
}

@keyframes nwCinemaInfoIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.nw-cinema-reveal-name {
  font-size: clamp(20px, 5vw, 36px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  letter-spacing: .05em;
}

/* 건너뛰기 */
.nw-cinema-skip {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-size: 11px;
  color: rgba(255,255,255,.35);
  letter-spacing: .08em;
  pointer-events: none;
  z-index: 3;
}

/*---------------------------*/
/* 다크모드                   */
/*---------------------------*/

body.nw-dark .nw-gacha-card-back {
  border-color: rgba(255,255,255,.1);
}

body.nw-dark .nw-gacha-pull-btn {
  background: linear-gradient(135deg, #00a98f 0%, #006f5e 100%);
}

/*---------------------------*/
/* 모바일                     */
/*---------------------------*/

@media (max-width: 600px) {
  .nw-gacha-card {
    width: 90px;
  }

  .nw-gacha-deck {
    gap: 8px;
  }

  .nw-cinema-grade-flash {
    font-size: 18vw;
  }
}

/*------------------------------------------------------------*/
/* 가챠 v2 추가 스타일                                         */
/* (기존 gacha.css 뒤에 이어붙이기)                            */
/*------------------------------------------------------------*/

/*---------------------------*/
/* 결과 덱 (랜덤뽑기용)      */
/*---------------------------*/

.nw-gacha-result-deck {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 160px;
  width: 100%;
}

/* 카드 등장 애니메이션 */
.nw-gacha-result-deck .nw-gacha-card {
  animation: nwCardDrop .35s cubic-bezier(.22,1,.36,1) both;
}

@keyframes nwCardDrop {
  0%   { opacity: 0; transform: translateY(-20px) scale(.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/*---------------------------*/
/* 버튼 그룹                  */
/*---------------------------*/

.nw-gacha-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 10회 버튼은 조금 더 강조 */
.nw-gacha-pull10 {
  background: linear-gradient(135deg, #c8a84b 0%, #a07828 100%) !important;
  box-shadow: 0 4px 16px rgba(200,168,75,.35) !important;
}

.nw-gacha-pull10:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(200,168,75,.5) !important;
}

/* SR 보장 배지 */
.nw-gacha-ceil-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: .04em;
}

/*---------------------------*/
/* 확률 표시                  */
/*---------------------------*/

.nw-gacha-rates {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .75;
}

.nw-rate-ssr { color: #c8a84b; }
.nw-rate-sr  { color: #b07ae0; }
.nw-rate-r   { color: #6aabff; }

/*---------------------------*/
/* 다크모드                   */
/*---------------------------*/

body.nw-dark .nw-gacha-rates {
  opacity: .6;
}

/*---------------------------*/
/* 모바일                     */
/*---------------------------*/

@media (max-width: 600px) {
  .nw-gacha-result-deck .nw-gacha-card {
    width: 80px;
  }

  .nw-gacha-btns {
    flex-direction: column;
    align-items: center;
  }

  .nw-gacha-pull-btn {
    width: 200px;
    justify-content: center;
  }
}

/*------------------------------------------------------------*/
/* 체크리스트                                                 */ 
/*-----------------------------------------------------------*/

.tt-checklist-wrap { margin:1em 0; }
.tt-checklist-count { font-weight:bold; margin-bottom:8px; font-size:0.95em; color:#555; }
.tt-checklist { list-style:none; padding:0; margin:0; }
.tt-checklist li { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:1em; }
.tt-checklist input[type="checkbox"] { width:16px; height:16px; }
.tt-checklist li.done span { text-decoration: line-through; color:#999; }



/*------------------------------------------------------------*/
/* 카테고리                                                */ 
/*-----------------------------------------------------------*/
.nw-drop-menu {
  padding: 8px 0;
}

/* 카테고리 리스트 기본 */
.nw-drop-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 대분류 (1depth) */
.nw-drop-menu > ul > li > a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  padding: 6px 12px;
  position: relative;
  padding-left: 18px;
}

.nw-drop-menu > ul > li > a::before {
  content: "●";
  font-size: 6px;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

/* 소분류 (2depth) */
.nw-drop-menu > ul > li > ul > li > a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  padding: 4px 12px 4px 28px;
  position: relative;
}

.nw-drop-menu > ul > li > ul > li > a::before {
  content: "–";
  position: absolute;
  left: 14px;
  color: #aaa;
}

/* hover 효과 */
.nw-drop-menu a:hover {
  color: #000;
}

/* 카운트 숫자 살짝 연하게 */
.nw-drop-menu .num,
.nw-drop-menu a span {
  color: #999;
  font-weight: 400;
  font-size: 0.9em;
}
/* 모든 깊이 기본은 소분류 스타일 */
.nw-drop-menu a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  padding: 4px 12px 4px 28px;
}

/* 최상위 바로 밑(1depth)만 대분류로 덮어쓰기 */
.nw-drop-menu > ul > li > a,
.nw-drop-menu > ol > li > a {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  padding: 6px 12px 6px 18px;
  position: relative;
}

.nw-drop-menu > ul > li > a::before,
.nw-drop-menu > ol > li > a::before {
  content: "●";
  font-size: 6px;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

/*------------------------------------------------------------*/
/* 대화창 ({{대화: ...}})                                       */
/*------------------------------------------------------------*/

.nw-dialogue-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1.4em 0;
}

.nw-dialogue-line {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.nw-dialogue-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.nw-dialogue-avatar-spacer {
  visibility: hidden;
}

.nw-dialogue-avatar,
.nw-dialogue-avatar-fallback {
  position: absolute;
  inset: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.nw-dialogue-avatar {
  object-fit: cover;
  display: block;
}

.nw-dialogue-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white-strong);
  font-family: var(--font-title);
  font-weight: var(--font-weight-title);
  font-size: 15px;
}

.nw-dialogue-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}

.nw-dialogue-name {
  font-family: var(--font-title);
  font-weight: var(--font-weight-title);
  font-size: 0.9em;
  margin-bottom: 3px;
}

.nw-dialogue-text {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: 1em;
  line-height: 1.55;
  color: var(--color-text-main);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.nw-dialogue-narration {
  margin: 4px 0;
  padding: 8px 14px;
  text-align: center;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-quote-bg);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

/* 다크모드 */

body.nw-dark .nw-dialogue-text {
  color: var(--color-dark-text-main);
}

body.nw-dark .nw-dialogue-narration {
  color: var(--color-dark-text-muted);
  background: var(--color-dark-quote-bg);
  border-top-color: var(--color-dark-character-border);
  border-bottom-color: var(--color-dark-character-border);
}

/* ORPG 로그백업 / 대화 명령어 공용 스타일 */
.orpg-chat-backup{width:100%;max-width:900px;margin:24px auto;padding:22px;border:1px solid rgba(120,120,120,.22);border-radius:18px;background:rgba(255,255,255,.72);box-sizing:border-box;overflow:hidden;}
body.nw-dark-mode .orpg-chat-backup{background:rgba(20,20,24,.72);border-color:rgba(255,255,255,.12);}
.orpg-date-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#999;font-size:12px;letter-spacing:.04em;}
.orpg-date-divider:before,.orpg-date-divider:after{content:"";height:1px;background:rgba(150,150,150,.25);flex:1;}
.orpg-message{display:flex;align-items:flex-start;gap:10px;margin:10px 0;}
.orpg-message.is-right{justify-content:flex-end;}
.orpg-message.is-gm{justify-content:center;}
.orpg-message-col{max-width:76%;display:flex;flex-direction:column;gap:4px;}
.orpg-message.is-right .orpg-message-col{align-items:flex-end;}
.orpg-message.is-gm .orpg-message-col{max-width:86%;align-items:center;}
.orpg-avatar-wrap{width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;background:rgba(120,120,120,.12);order:0;}
.orpg-avatar{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.orpg-avatar-placeholder{background:linear-gradient(135deg,rgba(120,120,120,.25),rgba(120,120,120,.08));}
.orpg-message.is-right .orpg-avatar-wrap{order:0;}
.orpg-message.is-right .orpg-message-col{order:1;}
.orpg-message-name{display:flex;align-items:baseline;gap:8px;font-size:12px;margin:0 4px;color:#777;}
.orpg-name-text{font-weight:700;color:var(--char-color,#777);}
.orpg-name-time{font-size:10px;opacity:.65;}
.orpg-bubble{position:relative;box-sizing:border-box;max-width:100%;padding:10px 13px;border-radius:16px;background:color-mix(in srgb,var(--char-bg,#e9eefc) 18%,#fff);box-shadow:0 3px 12px rgba(0,0,0,.06);line-height:1.65;word-break:break-word;}
.orpg-message.is-right .orpg-bubble{background:color-mix(in srgb,var(--char-bg,#fff0c8) 18%,#fff);}
body.nw-dark-mode .orpg-bubble{background:color-mix(in srgb,var(--char-bg,#5c647a) 24%,#222);box-shadow:none;}
.orpg-gm-bubble{border-radius:12px;background:rgba(120,120,120,.12)!important;color:inherit;text-align:center;font-size:13px;}
.orpg-backup-loading,.orpg-backup-error{max-width:900px;margin:20px auto;padding:14px 16px;border-radius:12px;background:rgba(120,120,120,.12);font-size:13px;color:#777;}
.orpg-backup-error{color:#b33;background:rgba(255,80,80,.1);}
.trpg-fx-bold{font-weight:800}.trpg-fx-italic{font-style:italic}.trpg-fx-del{text-decoration:line-through}.trpg-fx-underline{text-decoration:underline}.trpg-fx-mark{padding:0 .18em;border-radius:.2em;background:#fff49a;color:#222}.trpg-fx-small{font-size:.82em}.trpg-fx-big{font-size:1.22em;font-weight:700}.trpg-fx-white{color:#fff;text-shadow:0 0 2px #555}.trpg-fx-neon{text-shadow:0 0 4px currentColor,0 0 12px currentColor;font-weight:700}.trpg-fx-shake{display:inline-block;animation:nwTrpgShake .25s infinite}.trpg-fx-fadein{animation:nwTrpgFadeIn .8s both}.trpg-fx-fadeout{opacity:.35}.trpg-fx-whisper{opacity:.62;font-size:.92em}.trpg-fx-mumble{opacity:.55;filter:blur(.2px)}.trpg-fx-shout{font-size:1.16em;font-weight:900;letter-spacing:.04em}.trpg-fx-glitch{position:relative;font-weight:800}.trpg-fx-glitch:after{content:attr(data-text);position:absolute;left:1px;top:0;opacity:.35;transform:skewX(-8deg)}.trpg-fx-blood{color:#b00020;font-weight:800}.trpg-fx-dream{opacity:.78;font-style:italic;text-shadow:0 0 8px currentColor}.trpg-fx-memory{opacity:.72;filter:sepia(.35)}.trpg-fx-type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:100%;animation:nwTrpgType 1.2s steps(var(--type-len,20),end)}.trpg-fx-blackout{background:#000;color:#000;border-radius:3px}.trpg-fx-echo{text-shadow:2px 0 0 rgba(120,120,120,.35),4px 0 0 rgba(120,120,120,.18)}.trpg-fx-joy,.trpg-fx-success,.trpg-fx-great-success{font-weight:800;color:#1f9d55}.trpg-fx-anger,.trpg-fx-critical{font-weight:900;color:#d12b2b}.trpg-fx-sad{color:#4776c8}.trpg-fx-fear,.trpg-fx-madness{letter-spacing:.04em;text-shadow:0 0 7px currentColor}.trpg-fx-fail,.trpg-fx-great-fail,.trpg-fx-fumble{font-weight:800;color:#8b1e1e}.trpg-box{margin:.35em 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(120,120,120,.25);background:rgba(120,120,120,.09)}.trpg-box>b{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.08em;opacity:.7}.trpg-secret{border:0;border-radius:8px;padding:2px 7px;background:#222;color:#fff;cursor:pointer}.trpg-secret.is-open{background:transparent;color:inherit}.trpg-fx-narration{font-family:serif;opacity:.9}.nw-dialogue-text .trpg-box{max-width:100%}
@keyframes nwTrpgShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,-1px)}}
@keyframes nwTrpgFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes nwTrpgType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}


/* 같은 사람이 연속으로 말할 때 간격 줄이기 */
/* 부모 gap 제거 */
.nw-dialogue-box {
    gap: 0 !important;
}

/* 다른 사람과의 간격 */
.nw-dialogue-line {
    margin-bottom: 16px !important;
}

/* 같은 사람 연속 대사는 거의 붙이기 */
.nw-dialogue-line.is-continued {
    margin-top: -12px !important;
    margin-bottom: 2px !important;
}

.nw-dialogue-narration + .nw-dialogue-line {
    margin-top: 16px;
}

/*---------------------------------------*/
/* 부분 잠금 블록 [[잠금: ... ]]          */
/*---------------------------------------*/
.nw-part-lock {
  margin: 18px 0;
}

.nw-part-lock-card {
  border: 1px solid var(--color-border, #d9dee3);
  border-radius: 14px;
  background: var(--color-panel, #fff);
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.nw-part-lock-title {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--color-text, #222);
}

.nw-part-lock-hint {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--color-muted, #6f7782);
}

.nw-part-lock-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nw-part-lock-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--color-border, #d9dee3);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #222);
  font: inherit;
}

.nw-part-lock-btn {
  height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  background: var(--color-main, #19a974);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.nw-part-lock-btn:hover {
  filter: brightness(0.96);
}

.nw-part-lock.is-unlocked {
  margin: 18px 0;
}

.nw-part-lock-content > :first-child {
  margin-top: 0;
}

body.nw-dark .nw-part-lock-card {
  background: var(--color-panel, #1e2227);
  border-color: var(--color-border, #343a40);
  box-shadow: none;
}

body.nw-dark .nw-part-lock-input {
  background: var(--color-bg, #15181c);
  border-color: var(--color-border, #343a40);
  color: var(--color-text, #e9ecef);
}