@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ============================================================
   publish.css  —  썸원 백업 아카이브 + INTERWAVE
   ※ 볼트 맨 바깥 / 반드시 옵시디언 밖에서 편집
   ※ 카드 스타일 수정 시 앱 CSS 스니펫에도 같은 내용을 복사할 것

   목차
   ⓪ 공통 기본        ⑥ 페어별 색상
   ① 커플 카드        ⑦ 메인 페이지
   ② Q&A             ⑧ ARCHIVE 분할
   ③ 음악 링크        ⑨ 캐릭터 카드
   ④ 하단 버튼        ⑩ 캐릭터 상세
   ⑤ Q&A 모바일       ⑪ 모바일 카드 공통
   ============================================================ */


/* ============================================================
   ⓪ 공통 기본
   ============================================================ */

* {
  font-family: 'Pretendard', sans-serif !important;
}

/* 본문 폭 */
.markdown-preview-view,
.markdown-preview-sizer,
.published-container .markdown-preview-sizer,
.site-body-center-column {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* 좌측 목차 */
.site-body-left-column {
  width: 300px !important;
  min-width: 250px !important;
  max-width: 250px !important;
}

/* 노트 제목 */
.page-header {
  font-size: 23px !important;
}

/* iframe (갤러리·관계도) */
iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: none !important;
}

/* 이미지 누르면 확대 */
.markdown-preview-view img {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.markdown-preview-view img:active {
  transform: scale(3);
  position: relative;
  z-index: 9999;
  cursor: zoom-out;
}

/* 카드 이미지는 확대 대상에서 제외 */
.couple-index li a.internal-link img,
.archive-split li a.internal-link img,
.character-list li a.internal-link img {
  cursor: pointer;
}

/* 카드 링크 투명도 — Publish 기본값 0.7 이 카드를 뿌옇게 만듦 */
.couple-index li a.internal-link,
.archive-split li a.internal-link,
.character-list li a.internal-link {
  opacity: 1 !important;
}

/* 카드 링크 밑줄 제거 (커플·아카이브·캐릭터 공통) */
.couple-index li a.internal-link,
.couple-index li a.internal-link:hover,
.couple-index li a.internal-link strong,
.couple-index li a.internal-link:hover strong,
.archive-split li a.internal-link,
.archive-split li a.internal-link:hover,
.archive-split li a.internal-link strong,
.archive-split li a.internal-link:hover strong,
.character-list li a.internal-link,
.character-list li a.internal-link:hover,
.character-list li a.internal-link strong,
.character-list li a.internal-link:hover strong {
  text-decoration: none !important;
}

/* 속성 칸 숨김 */
.couple-index.markdown-preview-view .metadata-container,
.qna.markdown-preview-view .metadata-container,
.home.markdown-preview-view .metadata-container,
.archive-split.markdown-preview-view .metadata-container,
.character-list.markdown-preview-view .metadata-container {
  display: none !important;
}

/* 공통 모바일 */
@media (max-width: 760px) {
  .site-body-center-column,
  .markdown-preview-sizer,
  .published-container .markdown-preview-sizer {
    max-width: 100vw !important;
  }
  .page-header {
    padding-left: 1rem !important;
  }
}

body {
  --sm-radius: 18px;
  --sm-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}


/* ============================================================
   ① 커플 카드 목차   ( cssclasses: couple-index )
   본문:  - [![](경로/이름.png) **이름**](경로/이름)
   ============================================================ */

.couple-index ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.couple-index li { margin: 0; }

.couple-index li::marker,
.couple-index .list-bullet {
  display: none;
  content: none;
}

.couple-index li a.internal-link {
  display: flex;
  align-items: flex-end;
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 18px 20px;
  border-radius: var(--sm-radius);
  overflow: hidden;
  background: var(--background-modifier-border);
  box-shadow: var(--sm-shadow);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.couple-index li a.internal-link:hover {
  transform: translateY(-6px);
}

/* 그림 — 흑백 → 마우스 올리면 컬러 + 확대 */
.couple-index li a.internal-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.02);
  transition: filter .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

.couple-index li a.internal-link:hover img {
  filter: grayscale(0);
  transform: scale(1.08);
}

.couple-index li a.internal-link img:active {
  transform: scale(1.08) !important;
}

/* 하단 그라데이션 */
.couple-index li a.internal-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .35) 26%,
    rgba(0, 0, 0, 0) 55%
  );
}

/* 이름 — 흐린 흰색 → 마우스 올리면 흰색 */
.couple-index li a.internal-link strong {
  position: relative;
  z-index: 2;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .40);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  transition: color .18s ease;
}

.couple-index li a.internal-link:hover strong {
  color: #ffffff;
}

@media (max-width: 760px) {
  .couple-index ul {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   ② Q&A 백업   ( cssclasses: qna )
   본문:  ![](경로/이름.png)      ← 상단 배너
          [곡명 — 아티스트](주소)
          > [!q] Q1. 질문
          > [!a1] 유준
          > 답변 내용
   ============================================================ */

.qna {
  --qna-a1: #6f9fd8;
  --qna-a2: #e0899f;

  --banner-h: 160px;      /* 배너 높이 */
  --banner-pos: 35%;      /* 0% = 사진 위쪽 / 100% = 아래쪽 */
  --banner-zoom: 100%;    /* 100% = 기본 / 130% = 확대 */
}

.qna .callout-icon,
.qna .callout-fold {
  display: none !important;
}

/* 상단 배너 */
.qna .markdown-preview-sizer > div:first-of-type img,
.qna .markdown-preview-view > div:first-of-type img,
.qna p:first-of-type img {
  width: 100% !important;
  height: var(--banner-h) !important;
  object-fit: cover !important;
  object-position: center var(--banner-pos) !important;
  border-radius: 0 !important;
  margin-bottom: 10px !important;
  display: block !important;
  transform: scale(var(--banner-zoom));
  transform-origin: center var(--banner-pos);
}

/* 질문 */
.qna .callout[data-callout="q"] {
  margin: 34px 0 26px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.qna .callout[data-callout="q"] .callout-title {
  padding: 0;
}

.qna .callout[data-callout="q"] .callout-title-inner {
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--text-normal);
}

/* 답변 — 이름·내용 가로 배치 */
.qna .callout[data-callout="a1"],
.qna .callout[data-callout="a2"] {
  display: grid;
  grid-template-columns: 74px 1fr;
  column-gap: 20px;
  align-items: start;

  margin: 0 0 18px;
  padding: 0 0 0 14px;
  border: none;
  border-left: 2px solid;
  border-radius: 0;
  background: none;
}

.qna .callout[data-callout="a1"] { border-color: var(--qna-a1); }
.qna .callout[data-callout="a2"] { border-color: var(--qna-a2); }

/* 이름 */
.qna .callout[data-callout="a1"] .callout-title,
.qna .callout[data-callout="a2"] .callout-title {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  align-items: flex-start !important;
  margin: 0;
  padding: 0;
  gap: 0;
}

.qna .callout[data-callout="a1"] .callout-title-inner,
.qna .callout[data-callout="a2"] .callout-title-inner {
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.75;
}

.qna .callout[data-callout="a1"] .callout-title-inner { color: var(--qna-a1); }
.qna .callout[data-callout="a2"] .callout-title-inner { color: var(--qna-a2); }

/* 내용 */
.qna .callout[data-callout="a1"] .callout-content,
.qna .callout[data-callout="a2"] .callout-content {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  font-size: 0.94em;
  line-height: 1.75;
  letter-spacing: -0.01em;
  opacity: .88;
}

.qna .callout p:first-child { margin-top: 0; }
.qna .callout p:last-child { margin-bottom: 0; }


/* ============================================================
   ③ 음악 링크
   ============================================================ */

.qna .external-link,
.qna a.external-link,
.qna a[href^="http"] {
  display: block;
  padding: 14px 18px;
  margin-bottom: 28px;
  border: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--qna-music, var(--qna-a1)) 10%, transparent);
  color: var(--qna-music, var(--qna-a1)) !important;
  font-size: 0.95em;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .18s ease;
}

.qna .external-link:hover,
.qna a[href^="http"]:hover {
  background: color-mix(in srgb, var(--qna-music, var(--qna-a1)) 18%, transparent);
}

/* 외부 링크 아이콘 제거 */
.qna .external-link::after,
.qna .external-link-icon,
.qna a[href^="http"]::after {
  content: none !important;
  display: none !important;
}


/* ============================================================
   ④ 하단 이동 버튼
   본문 맨 아래:  - [[Message|← 페어 목록]]
   ============================================================ */

.qna .el-ul {
  width: 100% !important;
  padding: 0 !important;
}

.qna .el-ul ul {
  list-style: none !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin: 60px auto 40px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px;
}

.qna .el-ul li {
  margin: 0 !important;
  padding: 0 !important;
  width: 180px;
  list-style: none !important;
}

.qna .el-ul li::marker,
.qna .el-ul li::before,
.qna .el-ul .list-bullet {
  display: none !important;
  content: none !important;
}

.qna .el-ul a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 54px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--qna-a1) !important;
  border-radius: 6px !important;
  background: none !important;
  color: var(--qna-a1) !important;
  font-size: 0.86em;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease;
}

.qna .el-ul a:hover {
  background: var(--qna-a1) !important;
  color: #fff !important;
}


/* ============================================================
   ⑤ Q&A 모바일 전용
   ============================================================ */

@media (max-width: 760px) {
  /* 바깥 여백 제거 — 배너가 화면 끝까지 닿게 */
  .qna .markdown-preview-sizer,
  .qna.markdown-preview-view {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 여백 — 전체 */
  .qna .markdown-preview-sizer > div {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  /* 배너가 든 문단만 여백 제거 */
  .qna .markdown-preview-sizer > .el-p:has(img) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .qna .callout {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 스크롤바가 배너를 밀지 않게 */
  .qna.markdown-preview-view {
    scrollbar-gutter: auto !important;
    overflow-y: overlay !important;
  }

  .qna.markdown-preview-view::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
  }
}


/* ============================================================
   ⑥ 페어별 색상
   노트 속성:  cssclasses: qna / c-페어이름
   ============================================================ */

.c-준나래 {
  --qna-a1: #fa9336;      /* 유준 — Tangerine */
  --qna-a2: #e9738d;      /* 박은나래 — Grapefruit Pink */
  --qna-music: #e9738d;
  --banner-pos: 30%;
}

.c-정후나은 {
  --qna-a1: #d9a52e;      /* 백정후 — Caramel Yellow */
  --qna-a2: #7a47b8;      /* 채나은 — Azalea Purple */
  --qna-music: #7a47b8;
}

.c-수영정윤 {
  --qna-a1: #cf210a;      /* 곽수영 */
  --qna-a2: #d4a800;      /* 백정윤 */
  --qna-music: #cf210a;
}

.c-찬정연 {
  --qna-a1: #b8977a;      /* 유찬 */
  --qna-a2: #7a2230;      /* 백정연 */
  --qna-music: #7a2230;
}

.c-용수무연 {
  --qna-a1: #3d4560;      /* 전용수 */
  --qna-a2: #005950;      /* 권무연 */
  --qna-music: #005950;
}

.c-진야윤 {
  --qna-a1: #043d9c;      /* 진야 */
  --qna-a2: #008b8b;      /* 권윤 */
  --qna-music: #043d9c;
}


/* ============================================================
   ⑦ 메인 페이지   ( cssclasses: home )
   ============================================================ */

/* 노트 제목·구분선 숨김 */
.home .mod-header,
.home .page-header,
.markdown-preview-view.home .page-header,
.home hr {
  display: none !important;
}

/* 화면 가운데 배치 */
.home.markdown-preview-view {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home .markdown-preview-sizer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88vh;
  width: 100% !important;
  padding: 0 32px !important;
  padding-bottom: 0 !important;
  text-align: center;
}

/* 타이틀 */
.home .el-h1 {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

.home h1 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  display: block !important;
  font-size: 3.2em;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-align: center !important;
  border: none !important;
}

/* 문장 */
.home .el-p {
  width: 100% !important;
  padding: 0 !important;
}

.home p {
  width: 100% !important;
  max-width: 36em;
  margin: 0 auto 56px !important;
  padding: 0 !important;
  font-size: 1em;
  line-height: 1.95;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  text-align: center;
}

/* 버튼 두 개 */
.home .el-ul {
  width: 100% !important;
  padding: 0 !important;
}

.home ul {
  list-style: none;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 12px;
  width: auto !important;
  max-width: none !important;
}

.home li {
  margin: 0 !important;
  padding: 0 !important;
  width: 180px;
}

.home li::marker,
.home .list-bullet {
  display: none;
  content: none;
}

.home li a.internal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-normal) !important;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.home li a.internal-link:hover {
  background: var(--text-normal);
  border-color: var(--text-normal);
  color: var(--background-primary) !important;
}

/* 메인 페이지 — 모바일 */
@media (max-width: 760px) {
  .home .markdown-preview-sizer {
    min-height: 72vh;
    padding: 0 24px !important;
  }

  .home h1 {
    font-size: 2.3em;
  }

  .home p {
    margin-bottom: 40px !important;
    font-size: 0.95em;
  }

  .home .el-ul {
    width: 100% !important;
    padding: 0 !important;
  }

  .home.markdown-preview-view ul,
  .home ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 12px !important;
  }

  .home.markdown-preview-view li,
  .home li {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .home.markdown-preview-view li a,
  .home li a.internal-link {
    width: 100% !important;
    height: 58px !important;
    font-size: 0.72em !important;
    letter-spacing: 0.1em !important;
  }
}


/* ============================================================
   ⑧ ARCHIVE 분할   ( cssclasses: archive-split )
   본문:  - [![](표지/main.png) **MAIN**](MAIN)
   ============================================================ */

/* 노트 제목 숨김 */
.archive-split .mod-header,
.archive-split .page-header,
.markdown-preview-view.archive-split .page-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 바깥 여백 제거 — 칸이 상하좌우 끝까지 닿게 */
.archive-split .markdown-preview-sizer,
.archive-split.markdown-preview-view {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

.archive-split .markdown-preview-sizer > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.archive-split ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 칸 개수 */
  gap: 0;                                  /* 칸 사이 간격 */
  max-width: none;                         /* 웹 최대 폭 (none = 제한 없음) */
  margin: 0 !important;                    /* 위아래·좌우 여백 제거 */
}

/* 리스트 기본 들여쓰기 제거 — 이게 없으면 칸 사이가 벌어짐 */
.archive-split li {
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}

.archive-split li::marker,
.archive-split .list-bullet {
  display: none;
  content: none;
}

/* 칸 전체 = 링크 */
.archive-split li a.internal-link {
  display: flex;
  align-items: flex-start;
  position: relative;
  aspect-ratio: 3 / 6;                     /* 칸 세로 길이 — 뒤 숫자 키우면 길어짐 */
  padding: 22px 20px;
  overflow: hidden;
  background: var(--background-modifier-border);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.archive-split li a.internal-link:hover {
  transform: translateY(-10px);
}

/* 그림 — 칸을 꽉 채움 */
.archive-split li a.internal-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center 30%;             /* 전체 기본 크롭 위치 */
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.02);
  transition: filter .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

/* 칸마다 크롭 위치 개별 조절
   앞 숫자 = 가로(0% 왼쪽 / 50% 중앙 / 100% 오른쪽)
   뒤 숫자 = 세로(0% 위쪽 / 50% 중앙 / 100% 아래쪽)
   1=MAIN  2=SUB  3=ETC  4=NEW                            */
.archive-split li:nth-child(1) a.internal-link img { object-position: 45% 30%; }
.archive-split li:nth-child(2) a.internal-link img { object-position: 60% 30%; }
.archive-split li:nth-child(3) a.internal-link img { object-position: 60% 30%; }
.archive-split li:nth-child(4) a.internal-link img { object-position: 45% 30%; }

.archive-split li a.internal-link:hover img {
  filter: grayscale(0);
  transform: scale(1.08);
}

.archive-split li a.internal-link img:active {
  transform: scale(1.08) !important;
}

/* 상단 어둡게 */
.archive-split li a.internal-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.3) 30%,
    rgba(0,0,0,0) 60%
  );
}

/* 라벨 */
.archive-split li a.internal-link strong {
  position: relative;
  z-index: 2;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ARCHIVE 모바일 */
@media (max-width: 760px) {
  .archive-split ul {
    grid-template-columns: 1fr !important;
    gap: 8px;
    max-width: none;
  }

  /* 스크롤바가 밀지 않게 */
  .archive-split.markdown-preview-view {
    scrollbar-gutter: auto !important;
    overflow-y: overlay !important;
  }

  .archive-split.markdown-preview-view::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
  }

  /* 칸 세로 길이 — 숫자 조절 */
  .archive-split li a.internal-link {
    aspect-ratio: 21 / 9;
  }

  /* 모바일 — 가로로 납작해지므로 크롭 위치를 따로 잡음
     1=MAIN  2=SUB  3=ETC  4=NEW                          */
  .archive-split li:nth-child(1) a.internal-link img { object-position: center 25%; }
  .archive-split li:nth-child(2) a.internal-link img { object-position: center 25%; }
  .archive-split li:nth-child(3) a.internal-link img { object-position: center 25%; }
  .archive-split li:nth-child(4) a.internal-link img { object-position: center 25%; }
}


/* ============================================================
   ⑨ 캐릭터 카드 목록   ( cssclasses: character-list )
   본문:  - [![](캐릭터/이름.png) **이름**](캐릭터/이름)
   ============================================================ */

.character-list ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.character-list li { margin: 0; }

.character-list li::marker,
.character-list .list-bullet {
  display: none;
  content: none;
}

.character-list li a.internal-link {
  display: flex;
  align-items: flex-end;
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 14px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--background-modifier-border);
}

.character-list li a.internal-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .3s ease;
}

.character-list li a.internal-link:hover img {
  filter: grayscale(0);
}

.character-list li a.internal-link img:active {
  transform: none !important;
}

/* 하단 어둡게 */
.character-list li a.internal-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.3) 30%,
    rgba(0,0,0,0) 60%
  );
}

/* 이름 — 흐린 흰색 → 마우스 올리면 흰색 */
.character-list li a.internal-link strong {
  position: relative;
  z-index: 2;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.55) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  transition: color .25s ease;
}

.character-list li a.internal-link:hover strong {
  color: #fff !important;
}

@media (max-width: 480px) {
  .character-list ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}


/* ============================================================
   ⑩ 캐릭터 상세   ( cssclasses: character-profile )
   ============================================================ */

.character-profile .metadata-container {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 32px;
}

.character-profile .metadata-property-key {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* 구조용 항목은 독자에게 숨김 */
.character-profile .metadata-property[data-property-key="tier"],
.character-profile .metadata-property[data-property-key="cssclasses"] {
  display: none;
}

/* 섹션 제목 — 외형 / 성격 / 능력 ... */
.character-profile h2 {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 6px;
  margin-top: 40px;
}

.character-profile .markdown-preview-view img {
  max-width: 340px;
}

/* 프롬프트 코드 박스 */
.character-profile pre {
  border: 1px solid var(--background-modifier-border);
  font-size: 0.85rem;
}


/* ============================================================
   ⑪ 모바일 — 카드 공통 (커플 카드 + ARCHIVE 분할)
   hover 가 없는 환경이므로 컬러 고정 + 터치 반응으로 대체
   ※ 반드시 파일 맨 끝에 둘 것 (앞의 흑백 설정을 덮어씀)
   ============================================================ */

@media (max-width: 760px) {

  /* 그림은 처음부터 원래 컬러 · 눌러도 색 안 변함 */
  .couple-index li a.internal-link img,
  .couple-index li a.internal-link:hover img,
  .couple-index li a.internal-link:active img,
  .archive-split li a.internal-link img,
  .archive-split li a.internal-link:hover img,
  .archive-split li a.internal-link:active img {
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* 아카이브 — 검은 막을 라벨 주변으로만 좁힘 */
  .archive-split li a.internal-link::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.6) 0%,
      rgba(0,0,0,.15) 20%,
      rgba(0,0,0,0) 38%
    ) !important;
  }

  /* 떠오르는 hover 효과 제거 */
  .couple-index li a.internal-link:hover,
  .archive-split li a.internal-link:hover {
    transform: none;
  }

  /* 이름은 처음부터 흰색 */
  .couple-index li a.internal-link strong,
  .archive-split li a.internal-link strong {
    color: #ffffff !important;
  }

  /* 터치하면 살짝 눌림 — 0.98 을 0.96 으로 하면 더 크게 눌림 */
  .couple-index li a.internal-link:active,
  .archive-split li a.internal-link:active {
    transform: scale(0.98) !important;
    transition: transform .1s ease !important;
  }
}

/* ============================================================
   ⑫ 좌측 목차 — 마우스 올리면 펼침
   ============================================================ */

@media (min-width: 761px) {
  .site-body-left-column {
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    overflow: hidden;
    background: var(--background-primary) !important;
    border-right: none !important;
    transition: width .25s ease, min-width .25s ease, max-width .25s ease;
  }

  .site-body-left-column:hover {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
  }

  /* 목차 내용 — 평소엔 안 보임 */
  .site-body-left-column > * {
    opacity: 0;
    transition: opacity .2s ease;
  }

  .site-body-left-column:hover > * {
    opacity: 1;
  }

  /* 접혀 있을 때 ≡ 표시 */
  .site-body-left-column::before {
    content: "≡";
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 20px;
    color: var(--text-muted);
    z-index: 10;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .site-body-left-column:hover::before {
    opacity: 0;
  }
}