/* Paperlogy — 헤더·메뉴·제목용. 파일이 없으면 자동으로 Pretendard 로 넘어간다.
   파일은 /assets/fonts/ 에 둔다 (assets/fonts/README.md 참고). */
@font-face {
  font-family: "Paperlogy";
  src: url("https://minecap.co.kr/assets/fonts/Paperlogy-5Medium.woff2?cors=1") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("https://minecap.co.kr/assets/fonts/Paperlogy-6SemiBold.woff2?cors=1") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("https://minecap.co.kr/assets/fonts/Paperlogy-7Bold.woff2?cors=1") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* ExtraBold(800) 는 쓰지 않는다 — Paperlogy 는 700 까지만 올린다. */

/* Galmuri11 — 도트체. 서버 순위 숫자(4위 이하)에만 쓴다.
   숫자 열 자(U+0030~0039)만 남긴 서브셋이라 916바이트다. 전체 판은 504KB 인데
   그중 한글 낱자가 거의 전부다 — 숫자만 쓰는 자리에 그걸 다 받을 이유가 없다.
   11px 판이라 글자 크기를 11의 배수로 두어야 점이 어긋나지 않는다(.srv__no 는 22px). */
@font-face {
  font-family: "Galmuri11";
  src: url("https://minecap.co.kr/assets/fonts/Galmuri11-digits.woff2?cors=1") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0030-0039;
}

@charset "utf-8";
/* ==========================================================================
   MINECAP — Design System
   촘촘한 정보 밀도와 넉넉한 여백 위에 마인크래프트 브랜드 색을 얹는다
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* height: auto 로도 애니메이션이 걸리게 — FAQ 아코디언이 이걸 쓴다. */
  interpolate-size: allow-keywords;

  /* surface */
  --bg:            #ffffff;
  --bg-soft:       #f6f7f8;
  --bg-sunken:     #f1f3f4;
  --line:          #ecedef;
  --line-strong:   #dfe1e5;

  /* ink */
  --ink:           #16181d;
  --ink-2:         #4e5560;
  --ink-3:         #6b7280;  /* 흰 배경 4.88:1 — 본문 보조 텍스트 AA */
  --ink-4:         #8a919b;  /* 3.2:1 — 큰 텍스트·장식 전용 */

  /* brand — 잔디블록에서 파생. 로고·링크·강조는 이 색을 쓴다 */
  --brand:         #16803a;  /* 본문 위 흰 글씨 AA 통과 */
  --brand-ink:     #0e5c28;
  --brand-soft:    #eaf6ee;
  --brand-line:    #c6e6d1;
  --grass:         #57c43a;  /* 하이라이트 전용 */
  --dirt:          #a9714b;

  /* CTA — 주요 버튼. 브랜드 초록을 그라데이션으로 써서 단색보다 덜 가라앉게 한다 */
  --cta:           linear-gradient(135deg, #2aa34a 0%, #16803a 100%);
  --cta-on:        linear-gradient(135deg, #1e8f3d 0%, #0e5c28 100%);
  --cta-shadow:    rgba(22,128,58,.28);

  /* status */
  --hot:           #c8262b;
  --hot-soft:      #fdecec;
  /* --red 는 --hot 의 다른 이름이다. 서버 화면 몇 곳이 이 이름으로 오류색을 쓰는데
     정의가 없어 그동안 검게 나왔다 — 지금은 여기서 이어 준다.
     새로 쓸 때는 --hot 을 쓴다. */
  --red:           var(--hot);
  --info:          #1e59da;
  --info-soft:     #ecf1fe;
  --warn:          #8a5806;
  --warn-soft:     #fdf4e3;

  /* shape */
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;
  --r-pill: 999px;

  /* layout */
  --wrap:      1240px;
  --aside:     324px;
  --gap:       32px;
  --header-h:  72px;
  --subnav-h:  48px;

  /* 헤더·메뉴·제목은 Paperlogy, 본문은 Pretendard 로 나눈다. */
  --display: "Paperlogy", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* 도트체 — 숫자만 있는 서브셋이다. 글자가 섞이는 자리에는 쓰지 않는다. */
  --dot: "Galmuri11", var(--mono);
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  /* 내용이 짧아도 푸터가 화면 바닥에 붙도록 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; padding-bottom: 32px; min-width: 0; }
/* 이미지·미디어가 컨테이너를 밀지 않게 */
img, video, iframe, table { max-width: 100%; }
body > .foot { flex: none; }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* viewport-fit=cover 라 화면이 노치·둥근 모서리까지 이어진다.
     가로로 눕힌 아이폰에서 본문이 노치에 물리지 않게, 안전 영역이 더 넓으면 그만큼 비운다. */
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
}
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside);
  gap: var(--gap);
  align-items: start;
  /* 아래 여백은 두지 않는다 — 바닥글이 제 여백을 들고 있어서 두 번 벌어졌다. */
  padding-block: 28px 0;
}

/* 좌측 필터가 붙는 목록 — 글 목록·자료실·서버 리스트가 함께 쓴다.
   한 곳에서만 쓰는 모양이 아니라서 페이지별 스타일에 두면 안 불러오는 화면이 깨진다. */

/* 필터가 붙는 만큼 바깥 폭을 넓힌다 — 안 그러면 본문이 그만큼 좁아진다. */
.wrap:has(> .cols--filter) { max-width: calc(var(--wrap) + 232px + var(--gap)); }

/* 필터 + 본문 두 칸이 기본이고, 옆칸까지 있는 곳은 세 칸이다.
   칸 수를 안 맞추면 옆칸이 아래로 밀려난다. */
.cols--filter { grid-template-columns: 232px minmax(0, 1fr); }
.cols--filter:has(> .aside) { grid-template-columns: 232px minmax(0, 1fr) var(--aside); }

@media (max-width: 1180px) {
  .cols--filter:has(> .aside) { grid-template-columns: 232px minmax(0, 1fr); }
  .cols--filter:has(> .aside) > .aside { display: none; }
}

/* 필터는 한 덩이로 보이게 카드로 감싼다 — 글쓰기 화면의 분류 칸과 같은 결. */
/* 축이 많은 게시판(자료실)은 필터 칸이 화면보다 길어진다.
   그러면 '필터 적용' 이 화면 밖에 있어서, 다 고르고도 한참 내려야 누를 수 있었다.
   칸 안쪽만 스크롤시키고 버튼은 바닥에 붙여 둔다. */
.facets {
  position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 16px);
  align-self: start;
  max-height: calc(100dvh - var(--header-h) - var(--subnav-h) - 32px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  padding: 16px 14px 0; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  scrollbar-width: thin; scrollbar-color: #d7dbe0 transparent;
}
.facets::-webkit-scrollbar { width: 6px; }
.facets::-webkit-scrollbar-thumb { background: #d7dbe0; border-radius: 3px; }
.facets::-webkit-scrollbar-track { background: transparent; }

/* 적용·초기화 버튼은 붙여 둔다 — .facets 의 20px 간격이 그대로 먹으면 너무 벌어진다. */
.facets__act {
  position: sticky; bottom: 0; z-index: 1;
  margin-top: auto;                 /* 항목이 적어도 바닥에 붙는다 */
  margin-inline: -14px;             /* 칸 안쪽 여백만큼 넓혀 좌우 끝까지 덮는다 */
  padding: 10px 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff;
}
/* 목록이 버튼 밑으로 잘리는 자리를 흐리게 덮는다 — 선 하나로 자르면 잘린 티가 난다. */
.facets__act::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 28px; pointer-events: none;
  background: linear-gradient(to top, #fff 30%, rgba(255, 255, 255, 0));
}
.stack-4 { gap: 4px; }
.stack-12{ gap: 12px; }
.stack-24{ gap: 24px; } .stack-32 { gap: 32px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spacer { flex: 1; }

/* ---------- 4. Header ---------- */
/*
 * 두 줄 헤더 — 인벤·네이버 게임과 같은 짜임.
 *  윗줄: 로고 · 가운데 큰 검색창 · 계정. 찾기와 들어가기만 둔다.
 *  아랫줄: 가고 싶은 곳 전부(서버 · 게시판 · 이벤트)를 굵은 글자 한 줄로.
 * 예전엔 윗줄에 바로가기와 검색이 같이 있고 아랫줄에 게시판이 있어, 두 줄 다 메뉴라 빽빽해 보였다.
 * 줄마다 할 일을 하나씩 맡기면 메뉴가 많아도 정돈돼 보인다.
 * --header-h 는 윗줄 높이다. 옆칸 sticky 가 이 값을 쓴다.
 */
.gnb {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
}
.gnb__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
  background: #fff;
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
/* 로고는 이미지 락업(심볼+워드마크)을 그대로 쓴다 — 글자를 CSS 로 다시 그리지 않는다.
   가로 폭만 잡고 높이는 비율대로 둔다(원본 196x64). */
.brand__logo { width: 112px; height: auto; }
.foot .brand__logo { width: 112px; }

/* 윗줄 메뉴 — 사이트의 큰 목적지 다섯 곳. 아랫줄 게시판 글자보다 한 단계 크게 두어 두 줄의 위계를 가른다. */
.gnb__nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; margin-left: 12px; }
.gnb__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding-inline: 14px; border-radius: 10px;
  font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
  white-space: nowrap; transition: background .15s, color .15s;
}
.gnb__link:hover { background: var(--bg-soft); color: var(--brand-ink); }
.gnb__link[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }
/* 서버 리스트 — 사이트의 첫 번째 목적지라 어느 화면에서든 배경을 깔아 둔다(원픽 자리).
   다른 메뉴는 머물 때만 배경이 생기므로, 이쪽은 늘 켜져 있어야 한눈에 갈린다.
   지금 보고 있을 때는 테두리를 한 겹 더 진하게 한다. */
.gnb__link--main {
  color: var(--brand-ink); background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.gnb__link--main:hover { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.gnb__link--main[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--brand); }
.gnb__link--main .gnb__pick { width: 22px; height: 22px; }
/* 탭바에서도 서버리스트만 그림 아이콘이다 — 선 아이콘 사이에서 먼저 눈에 띈다. */
.tabbar .tabbar__pick { width: 22px; height: 22px; }

/* 이 묶음은 반드시 24번 반응형 블록보다 위에 둔다. 미디어쿼리는 특이도를 올려 주지 않아서,
   파일 뒤쪽에 같은 선택자를 한 번 더 쓰면 모바일에서 숨기는 규칙을 덮어쓴다. */
.gnb__util { display: flex; align-items: center; gap: 4px; flex: none; }
.gnb__bar .icon-btn[aria-current] { background: var(--brand-soft); color: var(--brand); }

.gnb__login {
  display: inline-flex; align-items: center; height: 38px; margin-left: 6px; padding: 0 18px;
  border-radius: 10px; background: var(--cta); color: #fff;
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
  transition: background .15s;
}
.gnb__login:hover { background: var(--cta-on); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--ink-2);
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn--bell { position: relative; }
.icon-btn--bell::after {
  content: ""; position: absolute; top: 7px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--hot);
  box-shadow: 0 0 0 2px #fff;
}

/* 아이콘만 있는 버튼은 무슨 기능인지 알기 어렵다 — 마우스를 올리면 아래에 말풍선으로 알려준다.
   터치 화면에서는 누른 뒤에도 툴팁이 남아 거슬리므로 마우스가 있는 화면에서만 켠다. */
@media (hover: hover) and (pointer: fine) {
  .icon-btn[data-tip],
  .pub__tip[data-tip],
  .ed__btn[data-tip] { position: relative; }
  .icon-btn[data-tip]:hover,
  .pub__tip[data-tip]:hover,
  .ed__btn[data-tip]:hover { z-index: 2; }
  .icon-btn[data-tip]::before,
  .icon-btn[data-tip]::after,
  .pub__tip[data-tip]::before,
  .pub__tip[data-tip]::after,
  .ed__btn[data-tip]::before,
  .ed__btn[data-tip]::after {
    position: absolute; left: 50%; top: calc(100% + 8px);
    opacity: 0; pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
  }
  .icon-btn[data-tip]::before,
  .pub__tip[data-tip]::before,
  .ed__btn[data-tip]::before {
    content: attr(data-tip);
    transform: translate(-50%, -4px);
    padding: 6px 10px; border-radius: 7px;
    background: rgba(23, 25, 28, .92); color: #fff;
    font-size: 12.5px; font-weight: 500; line-height: 1.3;
    letter-spacing: -.02em; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  }
  /* 말풍선 꼭지 — 네모를 45도 돌려 아이콘 쪽을 가리키게 한다. */
  .icon-btn[data-tip]::after,
  .pub__tip[data-tip]::after,
  .ed__btn[data-tip]::after {
    content: ""; top: calc(100% + 3px);
    transform: translate(-50%, -4px) rotate(45deg);
    width: 8px; height: 8px; border-radius: 2px 0 0 0;
    background: rgba(23, 25, 28, .92);
  }
  .icon-btn[data-tip]:hover::before,
  .icon-btn[data-tip]:focus-visible::before,
  .pub__tip[data-tip]:hover::before,
  .ed__btn[data-tip]:hover::before { opacity: 1; transform: translate(-50%, 0); }
  .icon-btn[data-tip]:hover::after,
  .icon-btn[data-tip]:focus-visible::after,
  .pub__tip[data-tip]:hover::after,
  .ed__btn[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }

  /* 편집기 버튼은 촘촘히 붙어 있어 말풍선이 옆 버튼을 덮는다 — 조금 작게 둔다. */
  .ed__btn[data-tip]::before { font-size: 12px; padding: 5px 9px; }
  /* 발행 시트의 말풍선은 한 문장이 아니라 설명이라 줄을 접는다.
     nowrap 으로 두면 시트 폭을 훌쩍 넘어 화면 밖으로 나간다. */
  .pub__tip[data-tip]::before { white-space: normal; width: 232px; text-align: left; }
  /* 키보드로 옮겨 다닐 때는 띄우지 않는다 — 서식 버튼은 눌러 보며 익히는 것이라
     초점이 지나갈 때마다 말풍선이 뜨면 오히려 가린다. */
}

/* 서브 내비 — 게시판 트리 */
/* 메뉴 줄 — 위아래로 화면 끝까지 선을 그어 한 줄짜리 띠로 세운다. */
.snb { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
/* overflow-x 를 켜면 스크롤 컨테이너가 되어 메가메뉴가 잘린다 —
   드롭다운이 필요 없는 좁은 화면에서만 가로 스크롤을 허용한다. */
/* 게시판 줄(좌) + 미션·교환소(우) 를 한 줄에 둔다. */
.snb__bar { display: flex; align-items: center; gap: 16px; }
/* 첫 링크의 글자를 윗줄 로고 왼쪽 끝과 맞춘다 — 링크 안쪽 여백만큼 당긴다. */
.snb__list { display: flex; align-items: center; height: var(--subnav-h); gap: 2px; flex: 1; min-width: 0; margin-left: -14px; }
/* 서버 · 게시판 · 이벤트 세 덩이 사이 */
.snb__sep { flex: none; width: 1px; height: 14px; margin-inline: 10px; background: var(--line-strong); list-style: none; }
.snb__util { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
/* 오른쪽 끝 버튼 묶음 — 게시판 줄이 flex:1 로 밀어내 오른쪽에 선다.
   둘을 한 덩이로 두어야 서로 붙어 보인다. */
.snb__act { flex: none; display: flex; align-items: center; gap: 6px; }

/* ── 최근에 들른 게시판 ──
   헤더(.gnb) 바깥, 바로 아래에 둔다. 헤더 안에 두면 sticky 헤더가 그만큼 길어져
   옆칸들이 헤더 밑으로 파고들고, 배지가 생겼다 없어질 때마다 헤더 높이가 흔들렸다.
   바깥에 두면 헤더는 늘 같은 높이이고, 이 줄은 본문과 함께 스크롤되어 올라간다.
   좁은 화면에서는 옆으로 민다.
   위 여백은 현재 위치(.crumb)와 같게 둔다 — 두 줄이 같은 간격으로 이어져 보인다. */
.snb__recent {
  display: flex; align-items: center;
  padding-block: 18px 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
/* display 를 준 순간 hidden 속성이 먹지 않는다 — 브라우저 기본 [hidden]{display:none} 보다
   이쪽 규칙이 세다. 담아 둔 것이 없을 때 빈 줄이 여백만 차지하고 있었다. */
.snb__recent[hidden] { display: none; }
.snb__recent::-webkit-scrollbar { display: none; }
.snb__recent-list { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* 배지 하나 = 이동 링크 + 지우기 버튼. 둘을 한 알약 안에 담되 누르는 자리는 갈라 둔다 —
   지우려다 게시판으로 넘어가면 되돌릴 방법이 없다. */
.rcnt {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  transition: border-color .15s;
}
.rcnt:hover { border-color: var(--line-strong); }
.rcnt__go {
  display: inline-flex; align-items: center; padding: 4px 4px 4px 11px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.rcnt__go:hover { color: var(--brand); }
.rcnt__x {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px 0 5px; border: 0; background: none; cursor: pointer;
  color: var(--ink-4); line-height: 1;
}
.rcnt__x svg { width: 11px; height: 11px; }
.rcnt__x:hover { color: var(--red); }
.imgbtn { display: inline-flex; transition: transform .15s, filter .15s; }
.imgbtn img { display: block; }
.imgbtn:hover { transform: translateY(-1px); filter: saturate(1.08) brightness(1.05); }
.imgbtn:active { transform: translateY(0); filter: brightness(.96); }

/* ── 헤더 버튼 (디스코드 · 광고 문의) ──
   글자를 구운 그림이었다. 배율이 오르면 흐려지고 문구 한 자를 고치려도 그림을 다시
   만들어야 했다. 아이콘과 글자로 세운다 — 높이(31px)는 그림 시절과 맞춰 둔다. */
.hbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 31px; padding: 0 11px; border-radius: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .15s, background .15s, border-color .15s;
}
.hbtn svg { width: 15px; height: 15px; flex: none; }
.hbtn:hover { transform: translateY(-1px); }
.hbtn:active { transform: translateY(0); }

/* 디스코드는 저쪽 브랜드 색을 그대로 쓴다 — 알아보는 색이라 글자를 읽기 전에 걸린다. */
.hbtn--discord { background: #5865f2; color: #fff; }
.hbtn--discord:hover { background: #4752c4; }

/* 광고 문의는 채워 두지 않는다. 디스코드와 나란히 둘 다 칠하면 헤더가 시끄러워지고,
   둘 중 어느 쪽을 눌러야 하는지도 흐려진다. */
.hbtn--ad {
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2);
}
.hbtn--ad:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-soft); }

@media (prefers-reduced-motion: reduce) {
  .hbtn:hover, .hbtn:active { transform: none; }
}
.snb__util a {
  padding: 7px 11px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.snb__util a:hover { background: var(--bg-soft); color: var(--brand-ink); }
/* 이벤트는 잠깐 여는 것이라 눈에 띄게 */
.snb__util--event { color: var(--hot); }
.snb__util--event:hover { background: var(--hot-soft); color: var(--hot); }
.snb__item { position: relative; flex: none; }
.snb__link {
  position: relative;
  display: flex; align-items: center; gap: 5px;
  height: var(--subnav-h); padding-inline: 14px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-2);
  white-space: nowrap;
  transition: color .15s;
}
.snb__link:hover, .snb__item:hover > .snb__link { color: var(--brand); }
/* 지금 보고 있는 곳 — 글자 밑에 굵은 초록 선. 띠 아래 선에 겹쳐 앉힌다. */
.snb__link[aria-current="page"] { color: var(--ink); }
.snb__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--brand);
}
/* 서버 리스트 — 사이트의 첫 번째 목적지라 늘 초록으로 띄운다. */
.snb__link--main { color: var(--brand-ink); }
.snb__link--main svg { width: 17px; height: 17px; color: var(--brand); }
.snb__link--main[aria-current="page"] { color: var(--brand-ink); }
.snb__link .caret { width: 12px; height: 12px; opacity: .5; }

.mega {
  position: absolute; top: 100%; left: 0; z-index: 70;
  border-radius: 0 0 14px 14px;
  min-width: 200px; padding: 18px 20px;
  display: none; grid-auto-flow: column; grid-auto-columns: minmax(132px, max-content);
  gap: 18px 30px; align-items: start;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 44px -10px rgba(20,25,35,.26), 0 2px 8px rgba(20,25,35,.08);
}
/* 열이 여럿인 그룹(자료)은 열 사이에 얇은 구분선을 둔다. */
.mega--wide { min-width: 480px; }
.mega--wide .mega__col + .mega__col { padding-left: 30px; margin-left: -15px; border-left: 1px solid var(--line); }
.snb__item:hover .mega, .snb__item:focus-within .mega { display: grid; }
.mega__col h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 8px;
}
.mega__col a {
  display: block; padding: 5px 8px; margin-inline: -8px;
  border-radius: 6px; font-size: 15px; color: var(--ink-2); font-weight: 500;
}
.mega__col a:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* 헤더·메뉴·제목 계열은 Paperlogy 로 */
.gnb__util .btn,
.snb__link,
.snb__util a,
.mega__col h4,
.drawer__nav > a,
.drawer__group h3,
.drawer__links a,
.tabbar > * span,
h1, h2, h3,
.bigtabs button,
.sec__head h2,
.w__title,
.ms-card__label,
.qa__topic {
  font-family: var(--display);
}

/* 다만 글 제목·설명·본문은 읽기용이라 Pretendard 로 둔다. */
.article__title,
.post__title,
.alist__title,
.qa-q__title,
.prose,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--sans);
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding-inline: 16px;
  border-radius: 10px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn svg { width: 16px; height: 16px; }

/* 못 누르는 버튼은 그렇게 보여야 한다.
   disabled 는 클릭만 막을 뿐 색은 그대로여서, 눌러 보고 나서야 안 되는 걸 알게 된다.
   hover 효과도 함께 걷는다 — 색이 변하면 눌리는 줄 안다. */
.btn:disabled {
  background: var(--bg-sunken); color: var(--ink-4);
  border-color: transparent; cursor: not-allowed;
}
.btn:disabled:hover { background: var(--bg-sunken); color: var(--ink-4); border-color: transparent; }

.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-on); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink-2); background: #fff; }
.btn--ghost:hover { border-color: var(--ink-4); color: var(--ink); }
.btn--soft { background: var(--bg-soft); color: var(--ink-2); }
.btn--soft:hover { background: var(--bg-sunken); color: var(--ink); }
.btn--sm { height: 32px; padding-inline: 12px; font-size: 13.5px; border-radius: 8px; }
.btn--lg { height: 46px; padding-inline: 22px; font-size: 15.5px; border-radius: 12px; }
.btn--block { width: 100%; }
.bigtabs__meta { margin-left: auto; font-size: 13px; color: var(--ink-3); }

/* 작은 세그먼트 탭 */

/* ---------- 7. Cards & feed ---------- */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .14s, transform .14s;
}
.card--pad { padding: 20px; }
a.card:hover, .card--hover:hover { border-color: var(--brand-line); }

.feed { display: flex; flex-direction: column; gap: 12px; }

/*
 * 격자 목록 — 자료 게시판이 쓴다.
 *
 * 자료는 "무엇인지" 를 그림이 먼저 말해 준다. 줄 카드는 128px 짜리 썸네일을 옆에 붙이지만,
 * 격자는 카드 폭 전체를 그림에 준다. 카드 마크업은 그대로 두고 자리만 바꾼다 —
 * 목록마다 다른 카드를 만들면 한쪽만 고쳐 놓고 어긋난다.
 */
.feed--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* 본문 위에 그림. 마크업은 본문 → 썸네일 순서라 order 로 올린다(제목이 먼저 읽히는 편이 낫다). */
.feed--grid .post { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
/* 격자 칸은 3:2. 줄 목록(16:10)과 비율이 다르지만 그림을 두 벌 만들지는 않는다 —
   contain 이라 남는 자리는 밑색으로 채워질 뿐이고, 카테고리 그림은 배경이 투명하다. */
.feed--grid .post__thumb { order: -1; width: 100%; aspect-ratio: 3/2; border-radius: 8px; }
/*
 * 제목은 한 줄로 자른다.
 *
 * 줄 목록에서는 제목이 두 줄이 되어도 그 줄만 길어지고 끝이다. 격자에서는 옆 카드까지
 * 같이 늘어나 한 줄 전체가 들쭉날쭉해진다. 카드 높이를 고르게 두는 쪽을 택했다 —
 * 잘린 제목은 눌러 보면 되지만, 어긋난 격자는 볼 때마다 거슬린다.
 * (기본값이 -webkit-box + line-clamp 라 display 까지 되돌려야 말줄임이 걸린다.)
 */
.feed--grid .post__title {
  font-size: 15.5px;
  display: block; -webkit-line-clamp: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*
 * 격자에서는 설명과 날짜를 뺀다.
 *
 * 자료는 그림·제목·받은 수로 고른다. 좁아진 카드에 설명까지 넣으면 정작 제목이 눌리고,
 * 글마다 길이가 달라 카드 높이도 어긋난다. 날짜는 자료에서 결정에 거의 안 쓰인다 —
 * 둘 다 글을 열면 그대로 있다.
 */
.feed--grid .post__excerpt { display: none; }
.feed--grid .post__time,
.feed--grid .post__dot--time { display: none; }
/* 버전·로더·장르 칩도 뺀다 — 개수가 글마다 달라 카드 높이가 어긋나고,
   좁은 카드에서는 두세 줄로 꺾여 제목보다 자리를 더 차지한다. 자세한 건 글을 열면 있다. */
.feed--grid .chip-row { display: none; }
/*
 * 본문 칸을 카드 폭에 묶는다.
 *
 * 제목에 nowrap 을 걸면 그 줄의 max-content 가 카드보다 넓어지는데, 그때 이 칸이 카드(341px)를
 * 넘어 645px 까지 늘어났다. 말줄임은 넘칠 때 걸리는 것이라, 칸 자체가 넉넉해지면 아무 일도
 * 일어나지 않는다 — 글자는 카드 밖으로 나가 잘려 보이기만 했다. 폭을 못 넘게 못 박는다.
 */
.feed--grid .post { min-width: 0; }
.feed--grid .post__body { gap: 6px; width: 100%; min-width: 0; }
/* 좁아진 카드에서 메타 줄이 두 줄로 꺾이면 카드 높이가 서로 어긋난다. */
.feed--grid .post__meta { gap: 10px; flex-wrap: wrap; row-gap: 4px; }
/* 그림이 없는 자료도 자리를 지켜야 카드 높이가 들쭉날쭉하지 않다. */
.feed--grid .post:not(:has(.post__thumb))::before {
  content: ""; order: -1; width: 100%; aspect-ratio: 3/2;
  border-radius: 8px; background: var(--bg-sunken);
}
/* 빈 목록 안내는 격자 칸 하나에 갇히면 안 된다 — 줄 전체를 쓴다. */
.feed--grid .empty { grid-column: 1 / -1; }

/* 썸네일이 왼쪽, 글이 오른쪽. 마크업 순서(본문 → 썸네일)는 그대로 두고 자리만 바꾼다 —
   화면 낭독기와 검색엔진에는 제목이 먼저 읽히는 편이 낫다. */
.post {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px;
  padding: 20px; align-items: start;
}
.post__body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.post__eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.post__eyebrow .board { color: var(--brand); font-weight: 700; }
.post__eyebrow .dot::before { content: "·"; margin-inline: 2px; }
.post__title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.028em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post:hover .post__title { color: var(--brand-ink); }
.post__excerpt {
  font-size: 15.5px; color: var(--ink-2); line-height: 1.68;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post__meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.post__meta .m { display: inline-flex; align-items: center; gap: 4px; }
.post__meta svg { width: 14px; height: 14px; opacity: .75; }
/*
 * contain — 올린 그림을 자르지 않는다.
 *
 * cover 는 칸을 꽉 채우는 대신 가장자리를 잘라낸다. 자료 글의 대표 이미지는 스킨 전신샷이나
 * 맵 전경처럼 세로로 긴 것이 흔한데, 그런 그림은 잘리면 정작 보여 줘야 할 데가 사라진다.
 * 남는 자리는 밑색(--bg-sunken)이 채운다 — 카테고리 대체 그림은 배경을 투명하게 뽑아
 * 그 밑색과 이어지므로 여백이 눈에 띄지 않는다.
 */
.post__thumb {
  width: 132px; aspect-ratio: 16/10; border-radius: 10px; object-fit: contain;
  background: var(--bg-sunken); flex: none;
}
.post__thumb--sq { width: 88px; aspect-ratio: 1; }
/* 밑색이 드러나는 그림은 잘라서 채운다 — 어느 그림이 그런지는 thumb-fit.js 가 재서 붙인다.
   너무 많이 잘려야 하는 그림(띠 배너·폰 스크린샷)만 띠를 둔 채로 남는다. */
.post__thumb--fill { object-fit: cover; }

/* ---------- 8. Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding-inline: 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--bg-sunken); color: var(--ink-2);
}
.chip--ver { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
.chip--brand { background: var(--brand-soft); color: var(--brand-ink); }
.chip--info  { background: var(--info-soft); color: var(--info); }
.chip--warn  { background: var(--warn-soft); color: var(--warn); }
.chip--forge  { background: #ede9fe; color: #6d3fd4; }
.chip--fabric { background: #fef0e6; color: #9a4708; }
.chip--quilt  { background: #fde8f3; color: #b4218a; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }

.pill-count {
  min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--r-pill);
  background: var(--hot); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}

/* 정품인증 뱃지 */
.verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; color: var(--brand);
}
.verified svg { width: 13px; height: 13px; }

/* ---------- 9. Section header ---------- */
.sec { margin-top: 44px; }
.sec__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sec__head h2 { font-size: 19px; }
.sec__head .more { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.sec__head .more:hover { color: var(--brand); }

/* 섹션 머리 표식 — MINECAP 심볼(잔디 얹은 키캡). 도트 그대로 보이도록 pixelated. */
.mark { width: 20px; height: 20px; flex: none; }
.sec__head .mark { width: 22px; height: 22px; }
.w__title .mark { width: 17px; height: 17px; }

/* ---------- 12. Aside widgets ---------- */
.aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 16px); }
.w { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: #fff; }
.w__title { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.w__title .more { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

/* ---------- 12-1. 좌우 여백 광고 ----------

  본문 폭이 정해져 있어 넓은 화면에서는 양옆이 비는데, 그 자리에 세운다.

  화면마다 본문 폭이 다르다(기본 1240 · 전체글 1400 · 필터 목록 1504).
  자리를 화면별로 손으로 잡으면 폭이 하나 늘 때마다 또 손봐야 하므로,
  본문 폭(--wrap-max) 하나만 알려 주면 나머지는 계산으로 따라오게 해 둔다.

  fixed 가 아니라 absolute 다 — 화면에 붙어 따라다니지 않고 글과 함께 밀려 올라간다.
*/
:root { --wrap-max: var(--wrap); }
body:has(.cols--filter) { --wrap-max: calc(var(--wrap) + 232px + var(--gap)); }

/* 최근에 들른 게시판 줄(.snb__recent)이 뜨면 서브내비가 한 줄 더 커진다.
   --subnav-h 는 고정값이라 그 줄을 모르니, 사이드바 광고가 헤더에 바싹 붙어 보인다 —
   그 줄이 보일 때만 여기서 만큼 더 내려 앉힌다. */
body:has(.snb__recent:not([hidden])) { --subnav-h: 82px; }

.wing {
  /* 남는 자리 한쪽 = (화면 - 본문) / 2. 그 안에서 배너(160)를 가운데 세우면
     본문과의 간격은 (화면 - 본문 - 320) / 4 이 된다.
     화면이 아주 넓을 때 끝으로 달아나지 않게 위를, 좁을 때 본문을 밀지 않게 아래를 묶는다. */
  --wing-gap: clamp(20px, (100vw - var(--wrap-max) - 320px) / 4, 80px);
  display: none;
  position: absolute;
  top: calc(var(--header-h) + var(--subnav-h) + 16px);
  width: 160px;
  z-index: 20;
}
.wing--left  { right: calc(50% + (var(--wrap-max) / 2) + var(--wing-gap)); }
.wing--right { left:  calc(50% + (var(--wrap-max) / 2) + var(--wing-gap)); }
.wing__frame { display: block; width: 160px; height: 600px; border: 0; border-radius: var(--r-md); overflow: hidden; }
.wing__note { margin-top: 6px; font-size: 10px; line-height: 1.4; color: var(--ink-3); text-align: center; }

/* 쿠팡 아래 한 칸 더. 여기 들어가는 배너는 한 장짜리라 ad-wing.js 가 번갈아 갈아 끼운다.
   짧은 페이지에서는 배너가 푸터를 뚫고 잘리므로, 자리가 되는지 재 볼 때까지 접어 둔다(hidden). */
.wing__slot { margin-top: 14px; width: 160px; }
.wing__lp { display: block; width: 160px; height: 600px; border-radius: var(--r-md); overflow: hidden; }
.wing__lp img { display: block; width: 160px; height: 600px; transition: opacity .35s; }
.wing__lp.is-swapping img { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wing__lp img { transition: none; } }

/* 들어갈 자리가 있는 화면에서만 꺼낸다 — 본문 폭 + (160 + 최소 여백 20) × 2 + 여유.
   조건은 계산식에 담을 수 없어 본문 폭마다 한 줄씩 둔다. */
@media (min-width: 1620px) { .wing { display: block; } }
@media (max-width: 1883px) { body:has(.cols--filter) .wing { display: none; } }


.login-w { background: linear-gradient(160deg, #f4faf5, #fff 62%); border-color: var(--brand-line); }
/* 옆칸은 폭이 좁다(286px). 아바타를 글 상세만큼 키우면 긴 닉네임이 설 자리가 없어
   한 단계 작은 52px 로 둔다 — 그래도 원래 38px 보다 확실히 잘 보인다. */
.login-w__me { display: flex; align-items: center; gap: 12px; }
/* 줄 전체가 마이페이지로 가는 문이다 — 위아래 여백만큼 바깥으로 당겨, 자리는 그대로 두고 누를 곳만 넓힌다.
   좌우는 당기지 않는다 — 카드 안쪽 선에 맞춰 서 있어야 아래 항목들과 왼쪽 끝이 맞는다. */
a.login-w__me {
  margin: -8px 0; padding: 8px; border-radius: 12px;
  color: inherit; transition: background .12s;
}
a.login-w__me:hover { background: rgba(22,128,58,.07); }
a.login-w__me:hover .login-w__name { color: var(--brand-ink); }
.login-w__me > .avatar { width: 52px; height: 52px; }
.login-w__b { flex: 1; min-width: 0; }
.login-w__name {
  font-size: 15px; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.login-w__dia { margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.login-w--intro { text-align: center; padding: 22px 20px 20px; }
.login-w__art { display: block; width: 148px; height: auto; margin: 0 auto 12px; }
.login-w__title { font-size: 15px; font-weight: 700; letter-spacing: -.025em; }
.login-w__desc { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin: 8px 0 16px; }
.login-w__desc strong { color: var(--brand-ink); }
.oauth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.oauth button {
  height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff;
  display: grid; place-items: center;
  transition: filter .12s, border-color .12s;
}
.oauth button svg { width: 21px; height: 21px; }
.oauth .kk { background: #fee500; border-color: #fee500; }
.oauth .nv { background: #03c75a; border-color: #03c75a; }
.oauth .kk:hover, .oauth .nv:hover { filter: brightness(.95); }
.oauth .gg:hover { border-color: var(--ink-4); }

/* 소셜 / 이메일 구분선 */

/* ---------- 오늘의 출석체크 카드 ---------- */
/* 한 장의 카드로 읽히게 — 헤더에 색띄를 깔지 않고 여백과 선으로만 구분한다. */
.atd {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: #fff; overflow: hidden;
}

.atd__head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 12px; }
.atd__head-t { min-width: 0; }
.atd__title {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: -.035em; color: var(--ink);
}
.atd__reward {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.atd__reward img { display: inline-block; }

.atd__body { padding: 0 16px; }
/* 안 했으면 "하세요", 했으면 "했어요" — 그림 한 장과 두 줄이 전부다. */
.atd__state { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; text-align: center; }
.atd__state[hidden] { display: none; }
.atd__art { width: 76px; height: 76px; margin-bottom: 8px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .14)); }
.atd__state-t { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.atd__state-m { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.atd__state-m b { font-family: var(--mono); font-weight: 700; color: var(--brand); }
.atd__state--done .atd__art { animation: atd-pop .38s cubic-bezier(.3,1.6,.6,1); }
@keyframes atd-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .atd__state--done .atd__art { animation: none; } }

.atd__foot { padding: 12px; }
.atd__btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--cta); color: #fff; text-decoration: none;
  font-family: var(--display); font-size: 14.5px; font-weight: 700; letter-spacing: -.025em;
  box-shadow: 0 6px 16px var(--cta-shadow);
  transition: background .15s, box-shadow .15s, transform .08s;
}
.atd__btn:hover { background: var(--cta-on); }
.atd__btn:active { transform: translateY(1px); }
.atd__btn svg { width: 15px; height: 15px; }
.atd__btn--ghost { background: var(--bg-sunken); color: var(--ink-2); box-shadow: none; }
.atd__btn--ghost:hover { background: var(--line-strong); color: var(--ink); }

/* 출석 완료 모달 */
.atd-pop { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.atd-pop[hidden] { display: none; }
.atd-pop__dim { position: absolute; inset: 0; background: rgba(15,20,32,.5); }
.atd-pop__box {
  position: relative; width: 100%; max-width: 340px; padding: 30px 26px 22px;
  border-radius: 18px; background: #fff; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.18); animation: accPopIn .2s ease;
}
.atd-pop__mark { margin-bottom: 12px; }
.atd-pop__mark img { margin: 0 auto; }
.atd-pop__title { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.atd-pop__msg { margin: 8px 0 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }

.ad-slot {
  border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--bg-soft);
  min-height: 250px; display: grid; place-items: center; text-align: center;
  color: var(--ink-4); font-size: 12.5px; line-height: 1.8;
}
.ad-slot span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
/* 접속 표시 — 목록에서 한눈에 갈려야 하니 또렷한 색으로 둔다. */
/* ── 접속 표시등 ──
   동그란 점이었다. 지금은 마크 블록 그림을 쓴다 — 목록의 다른 그림들과 결이 맞고,
   켜짐·꺼짐이 색만이 아니라 그림 자체로 갈려 색을 잘 못 가리는 눈에도 전해진다.
   pixelated 를 못 박아 둔다. 4배로 내보낸 그림이라 배율이 정수배로 떨어진다. */
.led {
  flex: none; display: inline-block; vertical-align: -2px;
  width: 14px; height: 14px;
  image-rendering: pixelated;
}
/* 12px 에 --ink-4(3.2:1) 를 쓰면 소문 글씨라 흐리게 읽힌다 — 대문자 변형을 걷고 본문 잉크로 세운다. */
.facet__title {
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: 9px;
}
/* 선택지가 몇 개 안 되니 접지 않고 전부 펼쳐 둔다 — 스크롤 없음. */
.facet__list { display: flex; flex-direction: column; gap: 1px; }
/* 좌우 bleed(margin-inline:-8px)는 쓰지 않는다 — 좁은 화면에서 가로 스크롤을 만든다. */
.facet-opt {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 8px; border-radius: 7px;
  font-size: 15px; color: var(--ink); cursor: pointer;
}
.facet-opt:hover { background: var(--bg-soft); }
.facet-opt input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; flex: none; }
.facet-opt .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-opt .n { margin-left: auto; padding-left: 6px; font-size: 12.5px; font-family: var(--mono); color: var(--ink-3); flex: none; }
.facet-opt input:checked ~ .l { color: var(--brand-ink); font-weight: 600; }

/*
 * 카테고리 목록 — 누르면 바로 그리로 간다.
 *
 * 라디오 + '필터 적용' 이 아니다. 한 번에 하나만 고르는 값이라 두 번 누를 이유가 없고,
 * 링크라야 새 탭으로 열거나 주소를 그대로 건네줄 수 있다. 동그라미가 사라진 자리는
 * 지금 보고 있는 칸을 칠해서 대신한다.
 */
/* 제목과 목록 사이를 띄운다 — 라디오였을 때보다 칸이 두꺼워져 제목이 목록에 붙어 보였다. */
.cat-nav > div { margin: 10px 0; }
.cat-nav .facet__title { margin-bottom: 18px; }
.cat-nav__list { display: flex; flex-direction: column; gap: 1px; }
.cat-nav__item {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 10px; border-radius: 8px;
  font-size: 15px; color: var(--ink-2);
}
.cat-nav__item:hover { background: var(--bg-soft); color: var(--ink); }
.cat-nav__item .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-nav__item .n {
  margin-left: auto; padding-left: 6px; flex: none;
  font-size: 12.5px; font-family: var(--mono); color: var(--ink-4, #b3b9c4);
}
.cat-nav__item.is-on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.cat-nav__item.is-on .n { color: var(--brand-ink); }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px 0 10px;
  border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12.5px; font-weight: 600;
}
.filter-tag button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; opacity: .6; }
.filter-tag button:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* ---------- 15. Server cards ---------- */
.online { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); }

/* ---------- 15-b. 서버 랭킹 리스트 ---------- */

.srv-sec { margin-top: 26px; }
.srv-sec--first { margin-top: 30px; }   /* 히어로를 없앤 자리 — 첫 섹션이 헤더에 붙지 않게 */
.srv-sec__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.srv-sec__head h2 { font-size: 18px; letter-spacing: -.03em; }
.srv-sec__note {
  font-size: 11.5px; color: var(--warn); background: var(--warn-soft);
  border-radius: var(--r-pill); padding: 3px 9px; font-weight: 700;
}
.mcs-list--featured { border-top-color: var(--brand); background: linear-gradient(180deg, #fbfefb, #fff 70%); }

/* minelist 배치를 따른다: 순위 파비콘 | 서버 요약 | 배너(움짤) | 버전·에디션·추천 */
/* 추천 수는 배지 대신 아이콘 + 숫자로 다음 줄에 */

.srv-list__empty { padding: 72px 20px; text-align: center; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--bg-sunken); flex: none; object-fit: cover; }

/* 짧은 글도 본문 자리가 잡혀 보이도록 최소 높이를 준다. */
/* 줄간격 기본값은 에디터(.ed__area)와 같은 160% 로 맞춘다 — 쓸 때 본 대로 보여야 한다. */
.prose { font-size: 16px; line-height: 1.6; color: #2b3038; padding: 28px 0; min-height: 150px; }
/* 에디터에서 나란히 흐르게 둔 사진이 다음 문단을 파고들지 않게 바닥을 받쳐 준다. */
.prose::after { content: ""; display: block; clear: both; }
.prose > * + * { margin-top: 18px; }
/* 에디터와 같은 규칙 — 쓸 때 본 줄 간격이 읽을 때도 그대로여야 한다. */
.prose > :is(p, div) + :is(p, div) { margin-top: 0; }
.prose h2 {
  font-size: 20px; margin-top: 40px; padding-top: 4px;
  display: flex; align-items: center; gap: 9px;
}
.prose h2::before {
  content: ""; width: 16px; height: 4px; border-radius: 2px; flex: none;
  background-image: linear-gradient(90deg, var(--grass) 0 50%, var(--brand) 50% 100%);
  background-size: 8px 4px;
}
.prose h1 { font-size: 24px; margin-top: 44px; }
.prose h3 { font-size: 16.5px; margin-top: 30px; }
.prose h4 { font-size: 15px; margin-top: 26px; }
.prose h5 { font-size: 14px; margin-top: 22px; color: var(--ink-2); }
.prose h6 { font-size: 13px; margin-top: 20px; color: var(--ink-3); }
.prose ul, .prose ol { padding-left: 20px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 7px; }
/* 본문 이미지는 모서리를 깎지 않는다 — 원본 그대로 보여 준다. */
.prose img { margin-block: 24px; }
.prose figure { margin: 24px 0; }
/* 캡션이 달린 이미지는 캡션과 한 덩이로 본다 — 사이는 좁히고 여백은 바깥에만 준다. */
.prose figure img { margin-block: 0; }
.prose figure figcaption { margin-top: 4px; }
/* 본문에 그대로 박힌 유튜브 임베드 — 감싸는 요소 없이도 16:9 로 편다. */
.prose iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.prose figcaption { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 4px; }
.prose a:not(.btn) { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* 드라이브 받기 링크 — 글 속 주소가 아니라 받기 버튼으로 보인다. */
.prose a.mc-dl, .ed__area a.mc-dl {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px;
  background: var(--brand); color: #fff; text-decoration: none; font-weight: 600;
}
.prose a.mc-dl::before, .ed__area a.mc-dl::before { content: "⬇"; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose code {
  font-family: var(--mono); font-size: .89em; background: var(--bg-sunken);
  padding: 2px 5px; border-radius: 5px; color: #b02a5b;
}
.prose pre {
  background: #191c22; color: #e5e9f0; border-radius: var(--r);
  padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.68;
}
.prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
/* 생김새를 고른 인용구(.mc-q)는 자기 스타일을 쓴다 — 기본 꼴을 덮어씌우지 않는다. */
.prose blockquote:not(.mc-q) {
  border-left: 3px solid var(--brand-line); padding: 2px 0 2px 16px;
  color: var(--ink-2); font-size: 14.5px;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: var(--bg-soft); font-weight: 700; }
.callout {
  border: 1px solid var(--warn-soft); background: var(--warn-soft);
  border-radius: var(--r); padding: 14px 16px; font-size: 14px; color: #7a4f06;
}
.callout--info { background: var(--info-soft); border-color: var(--info-soft); color: #1c3d8f; }

/* 복셀 아이콘 — 크기는 쓰는 자리에서 정한다. 추천은 켜지면 초록판으로 바뀐다. */
.ico { display: inline-block; flex: none; background: center / contain no-repeat; }
.cmt-ico[data-on="1"] { color: var(--brand); font-weight: 700; }
.qa-act__btn[data-on="1"] { color: var(--brand); background: var(--brand-soft); }

.ico--like { background-image: url("https://cdn.minecap.co.kr/badges/icon-like.png"); }
/* 눌렀다고 아이콘 그림까지 바꾸지 않는다 — 켜진 것은 버튼 바탕과 글씨색으로 알린다. */
.react-btn .n { font-family: var(--mono); }
.react-btn .ico { width: 19px; height: 19px; }
.cmt-ico .n { font-family: var(--mono); }
.cmt-ico.is-on { color: var(--brand); }
.lvl__bar { width: 100%; height: 6px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; margin-top: 8px; }
.lvl__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--grass)); }

/* 레벨 배지 — 3레벨마다 아이콘 등급이 올라간다(총 10등급, 최고 30레벨). */
.lvlbadge {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 11px 12px; border-radius: var(--r);
  background: var(--bg-soft); border: 1px solid var(--line);
}
/* 배지를 누르면 등급 화면으로 간다. 누를 수 있다는 것은 커지는 것으로만 알린다 —
   테두리를 두르면 옆의 아바타와 두 개의 버튼처럼 보인다. */
.lvlbadge__link { flex: none; display: block; line-height: 0; transition: transform .12s; }
.lvlbadge__link:hover { transform: scale(1.08); }
.lvlbadge__icon {
  width: 40px; height: 40px; flex: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
}
.lvlbadge__b { flex: 1; min-width: 0; }
.lvlbadge__top { display: flex; align-items: baseline; gap: 6px; }
.lvlbadge__top strong { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.lvlbadge__tier { font-size: 11.5px; font-weight: 700; color: var(--brand-ink); }
.lvlbadge__b .lvl__bar { margin-top: 6px; }
.lvlbadge__next { font-size: 11px; color: var(--ink-3); margin-top: 5px; }

/* 목록·상세에서 닉네임 옆에 붙는 작은 배지 */

.search-inline {
  display: flex; align-items: center; gap: 7px; height: 36px; padding-inline: 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; min-width: 220px;
}
.search-inline:focus-within { border-color: var(--brand); }
.search-inline input { border: 0; outline: none; flex: 1; min-width: 0; font-size: 14px; background: none; }
.search-inline svg { width: 16px; height: 16px; color: var(--ink-4); flex: none; }
.search-inline select { border: 0; outline: none; font-size: 13px; color: var(--ink-3); background: none; flex: none; }

/* ---------- 20. Pagination ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 32px; }
.pager a, .pager span {
  min-width: 34px; height: 34px; padding-inline: 8px; border-radius: 8px;
  display: inline-grid; place-items: center; font-size: 14px; color: var(--ink-2);
  font-family: var(--mono);
}
.pager a:hover { background: var(--bg-soft); }
.pager [aria-current="page"] { background: var(--brand); color: #fff; font-weight: 700; }
.pager .gap { color: var(--ink-3); }
/* 창 밖으로 나간 쪽으로 건너뛰는 « » 는 숫자가 아니라 방향이라 조금 흐리게 둔다. */
.pager__i { text-decoration: none; }

/* 붙은 칸 모양(서버 리스트) — ‹ 1 2 3 4 5 … 13 › 를 테두리 하나로 묶고 칸 사이에 가는 선을 긋는다. */
.pager--group {
  width: fit-content; max-width: 100%; margin-inline: auto; gap: 0;
  border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: #fff;
}
.pager--group a, .pager--group span {
  min-width: 40px; height: 38px; padding-inline: 10px; border-radius: 0;
  font-size: 14.5px; color: var(--brand-ink);
}
.pager--group > * + * { border-left: 1px solid var(--line-strong); }
.pager--group a:hover { background: var(--brand-soft); }
.pager--group [aria-current="page"] { background: var(--brand); color: #fff; }
.pager--group .gap { color: var(--ink-3); }
.pager--group .is-off { color: var(--ink-4); }
/* 가운데 쪽에서는 ‹ 1 … 3 4 5 6 7 8 › 열 칸이 된다 — 좁은 화면(343px)에서도 한 줄에 들도록 칸을 좁힌다. */
@media (max-width: 768px) {
  .pager--group a, .pager--group span { min-width: 32px; height: 36px; padding-inline: 4px; font-size: 13.5px; }
}

/* ---------- 내가 쓴 글 — 정렬 + 제목 검색 ---------- */
/* 카드 머리(제목 · 건수)와 붙어 있어 한 덩이로 읽혔다 — 위를 띄워 도구 줄로 갈라 준다. */
.mypost-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 14px 16px;
}
.mypost-sort { display: inline-flex; gap: 2px; background: var(--bg-soft); border-radius: 8px; padding: 3px; }
.mypost-sort__i {
  padding: 6px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-3); white-space: nowrap;
}
.mypost-sort__i.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.mypost-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 180px; max-width: 280px; }
.mypost-search svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.mypost-search input {
  width: 100%; height: 34px; padding: 0 12px 0 32px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; background: #fff;
}
.mypost-search input:focus { outline: none; border-color: var(--brand); }

/* 좁은 화면에서는 정렬이 위, 검색이 아래로 — 나란히 두면 검색칸이 눌린다. */
@media (max-width: 768px) {
  .mypost-tools { flex-direction: column; align-items: stretch; }
  .mypost-search { max-width: none; }
}

/* ---------- 21. Notice strip ---------- */
.notice-strip {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
  font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px;
}
.notice-strip .chip { flex: none; }
.notice-strip .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 한 줄 안내(토스트). 본문 흐름에 끼워 넣으면 그 줄만큼 화면이 밀려 내려가므로 띄워서 얹는다.
   글이 길어도 읽히도록 줄바꿈은 허용하되, 어절 중간에서는 끊지 않는다. */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 200;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 10px;
  background: rgba(20, 25, 35, .88); color: #fff;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; line-height: 1.45;
  text-align: center; word-break: keep-all;
  box-shadow: 0 12px 32px -10px rgba(20, 25, 35, .5);
  transform: translate(-50%, 0);
  pointer-events: none;
  /* 등장은 CSS 로만 처리한다 — 자바스크립트가 막히면 안내가 영영 안 보이면 안 된다.
     사라지는 것은 minecap.js 가 is-off 를 붙여서 한다. */
  animation: toast-rise .22s ease both;
}
@keyframes toast-rise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast.is-off {
  opacity: 0; transform: translate(-50%, 14px);
  transition: opacity .25s ease, transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation-duration: .01s; }
  .toast.is-off { transition-duration: .01s; }
}

/* ---------- 22. Footer ---------- */
.foot {
  --foot-bg:   #191919;
  --foot-ink:  #e8e9ea;
  --foot-ink-2:#9aa0a6;
  --foot-line: #2e2e2e;
  background: var(--foot-bg);
  color: var(--foot-ink-2);
  /* 글이 적은 화면에서 어두운 푸터가 바로 치고 올라오지 않도록 넉넉히 띄운다. */
  margin-top: 104px;
  padding-top: 16px;
  padding-bottom: 46px;
}

.foot__grid {
  display: grid;
  /* 왼쪽 소개 한 칸 + 메뉴 다섯 칸. 칸 수를 바꾸면 여기 숫자도 함께 바꾼다 —
     안 맞추면 마지막 칸이 다음 줄로 혼자 떨어진다. */
  grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr));
  gap: 36px 24px;
  padding-top: 40px;
}
/* 중간 폭에서는 메뉴를 세 칸씩 접는다 — 여섯 칸을 억지로 밀어 넣으면 글자가 꺾인다. */
@media (max-width: 1180px) {
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__about { grid-column: 1 / -1; }
}
.foot__desc { font-size: 13px; color: var(--foot-ink-2); line-height: 1.8; margin-top: 12px; max-width: 300px; }

/*
 * 기계 번역 알림 — 글 본문 위와 댓글 아래.
 *
 * 눈에 띄되 내용을 밀어내지는 않아야 한다. 배경을 깔지 않고 왼쪽 선 하나로만 구분한다.
 */
.post__tr {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 8px 0 8px 12px;
  border-left: 3px solid var(--line, #e3e5e8);
  font-size: 13px; color: var(--ink-3, #6b7280);
}
.post__tr a { color: var(--brand, #16803a); text-decoration: underline; text-underline-offset: 2px; }
.cmt__tr { margin: 6px 0 0; font-size: 12px; color: var(--ink-3, #6b7280); }
/* 아직 오지 않은 번역 — 기다리는 중이라는 것이 보이게 흐리게 둔다. */
.cmt__tr--wait { opacity: .65; font-style: italic; }

/*
 * 언어 선택 — 꼬리말 소개글 아래에 둔다.
 *
 * 목록이 버튼 위로 열린다(bottom: 100%). 꼬리말은 문서 맨 끝이라 아래로 열면
 * 화면 밖으로 나가 스크롤이 생긴다.
 */
.langpick { position: relative; margin-top: 18px; display: inline-block; }
.langpick__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 1px solid #3a3f45; border-radius: 8px;
  background: transparent; color: var(--foot-ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.langpick__btn:hover { border-color: var(--grass); color: var(--foot-ink); }
.langpick__globe { width: 15px; height: 15px; flex: none; }
.langpick__caret { width: 9px; height: 6px; flex: none; transition: transform .15s; }
.langpick.is-open .langpick__caret { transform: rotate(180deg); }

.langpick__list {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 100%; margin: 0; padding: 5px; list-style: none;
  background: #24282d; border: 1px solid #3a3f45; border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.langpick__list[hidden] { display: none; }
.langpick__item {
  display: block; white-space: nowrap;
  padding: 8px 12px; border-radius: 6px;
  font-size: 13.5px; color: var(--foot-ink-2);
}
/* 꼬리말 링크 공통 규칙(.foot__col a)의 밀림 효과를 여기서는 끈다 — 목록 안에서는 어색하다. */
.langpick__item:hover { background: #2e343a; color: var(--foot-ink); transform: none; }
.langpick__item.is-on { color: var(--grass); font-weight: 700; }

.foot h5 {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--foot-ink); margin-bottom: 12px; font-weight: 700; letter-spacing: -0.01em;
}
.foot h5::before { content: ""; width: 6px; height: 6px; background: var(--grass); flex: none; }
.foot__col a {
  display: block; font-size: 13.5px; color: var(--foot-ink-2); padding: 4px 0;
  transition: color .12s, transform .12s;
}
.foot__col a:hover { color: var(--grass); transform: translateX(3px); }
/* 묶음 목록으로 보내는 줄 — 게시판 이름들과 성격이 달라 한 칸 띄우고 밝게 둔다. */
.foot__col a b { color: var(--foot-ink); }
.foot__col a:has(b) { margin-top: 6px; }

.foot__legal {
  margin-top: 40px; padding-top: 22px;
  border-top: 3px dotted var(--foot-line);
  font-size: 12.5px; color: #7d8288; line-height: 1.85;
}
.foot__legal p + p { margin-top: 4px; }

/* 사업자 정보 — 한 줄에 이어 붙이되 가운뎃점으로 끊어 준다. */
.foot__corp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  margin: 14px 0 10px; font-size: 12px; color: #7d8288;
}
.foot__corp li { display: inline-flex; align-items: center; }
.foot__corp li + li::before { content: "·"; margin-inline: 8px; color: #55595e; }
.foot__corp-name { font-weight: 700; color: var(--foot-ink-2); }
.foot__corp a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* 회사 이름은 홈페이지로 가지만 밑줄은 두지 않는다 — 이메일과 달리 줄 머리라 줄이 그어지면 지저분하다. */
.foot__corp-name a { text-decoration: none; }
.foot__corp a:hover { color: var(--grass); }

.foot__legal-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.foot__legal-links strong {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--foot-ink); background: #242424; padding: 3px 8px;
}
.foot__legal-links a { font-size: 12.5px; color: var(--foot-ink-2); }
.foot__legal-links a:hover { color: var(--grass); }
.foot__legal-links b { font-weight: 700; color: var(--foot-ink); }

/* 무단 크롤링 금지 — 링크 줄에 서지만 경고라 테두리를 둘러 옆 링크와 성격을 가른다. */
/* 경고 문구다 — 알림·주의를 뜻하는 붉은 계열로 두고, 알약 모양 대신 각진 표식으로 세운다. */
.foot__crawl {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid #7a2b2e; background: #341a1c; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em; color: #f0a3a3;
  transition: border-color .12s, color .12s, background .12s;
}
.foot__crawl::before { content: "⚠"; font-size: 11px; }
.foot__crawl:hover { border-color: #e06a6a; background: #451f22; color: #ffc4c4; }

/* ---------- 21-x. 발행 시트 ----------
   등록을 누르면 아래에서 올라온다.

   가운데 뜨는 상자가 아니라 하단 시트인 이유: 쓰던 글이 위에 그대로 남아 있어야
   무엇을 발행하려는 참인지 눈에서 사라지지 않는다. 가운데 상자는 글을 덮는다.

   행마다 왼쪽에 무엇을 묻는지, 오른쪽에 고르는 것. 칸을 네모로 두르지 않고 밑줄만 긋는다 —
   상자가 겹치면 시트 자체가 또 하나의 상자라 답답해진다. */
.pub { position: fixed; inset: 0; z-index: 220; }
.pub[hidden] { display: none; }
.pub__dim { position: absolute; inset: 0; background: rgba(15,20,32,.38); }

.pub__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; overflow-y: auto;
  background: #fff; border-radius: 12px 12px 0 0;
  box-shadow: 0 -14px 50px rgba(15,20,32,.18);
  animation: pubUp .22s cubic-bezier(.22,.8,.3,1);
}
@keyframes pubUp {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.pub__inner { max-width: 820px; margin: 0 auto; padding: 24px 24px 28px; }

.pub__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.pub__h { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.035em; }
/* CCL 은 쓰는 사람이 적다. 접어 두고 눌러서 펼치게 한다. */
.pub__ccl-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; background: none; transition: color .12s;
}
.pub__ccl-btn svg { width: 13px; height: 13px; transition: transform .16s; }
.pub__ccl-btn:hover { color: var(--ink); }
.pub__ccl-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 무엇을 발행하는지 — 제목을 다시 보여 준다. 임시저장이 여럿이면 엉뚱한 글을 올릴 수 있다. */
.pub__title {
  margin: 18px 0 6px; font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -.035em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub__title:empty { display: none; }

.pub__cols { display: flex; gap: 28px; align-items: flex-start; }
.pub__fields { flex: 1; min-width: 0; }
.pub__side { flex: none; width: 168px; }

.pub__row { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.pub__label { flex: none; width: 62px; padding-top: 3px; font-size: 13px; color: var(--ink-3); }
.pub__field { flex: 1; min-width: 0; }
.pub__hint { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-4); }

/* 대표 이미지 — 목록에서 이 글이 어떤 얼굴로 나갈지 미리 보인다. */
.pub__thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pub__thumbs:empty { display: none; }
.pub__thumb {
  aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: 10px; background: var(--bg-sunken);
  transition: border-color .12s;
}
.pub__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub__thumb:hover { border-color: var(--ink-4); }
.pub__thumb.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* 고를 그림이 없을 때. 빈 칸을 두면 무언가 깨진 것처럼 보인다. */
.pub__thumb-none {
  display: grid; place-items: center; gap: 8px;
  aspect-ratio: 1; padding: 14px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: 12px;
  color: var(--ink-4); font-size: 11.5px; line-height: 1.55;
}
.pub__thumb-none[hidden] { display: none; }
.pub__thumb-none svg { width: 26px; height: 26px; }
/* 따로 올린 대표 이미지 — 지우는 단추를 모서리에 얹는다. */
.pub__thumb-own { position: relative; display: block; }
.pub__thumb-own .pub__thumb { width: 100%; }
.pub__thumb-del {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(16, 24, 40, .72); color: #fff;
  font-size: 15px; line-height: 22px; cursor: pointer;
}
.pub__thumb-del:hover { background: rgba(16, 24, 40, .9); }
/* 본문 밖 그림을 대표로 올리는 자리. 누르거나 끌어다 놓는다. */
.pub__thumb-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 10px; padding: 12px 10px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: 12px;
  color: var(--ink-3); font-size: 12px; line-height: 1.45;
  transition: border-color .12s, background .12s;
}
.pub__thumb-drop svg { width: 20px; height: 20px; color: var(--ink-4); }
.pub__thumb-drop:hover, .pub__thumb-drop.is-drop { border-color: var(--brand); background: var(--brand-soft); }
.pub__thumb-drop.is-busy { cursor: progress; opacity: .7; }
.pub__thumb-drop-t { font-weight: 600; }
.pub__thumb-drop-s { font-size: 11px; color: var(--ink-4); }

.pub__checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
/* 체크 한 벌 + 물음표. 물음표를 라벨 안에 넣으면 누를 때마다 체크가 같이 뒤집힌다. */
.pub__checkwrap { display: inline-flex; align-items: center; gap: 5px; }
.pub__tip {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: #fff;
  color: var(--ink-4); font-size: 10.5px; font-weight: 700; line-height: 1; cursor: help;
}
.pub__tip:hover { border-color: var(--ink-4); color: var(--ink-2); }
.pub__check, .pub__radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; }
.pub__check input, .pub__radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.pub__check { position: relative; }
.pub__box-i {
  display: grid; place-items: center; width: 19px; height: 19px; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 5px; color: transparent; background: #fff;
  transition: background .12s, border-color .12s, color .12s;
}
.pub__box-i svg { width: 12px; height: 12px; }
.pub__check:has(input:checked) .pub__box-i { background: var(--brand); border-color: var(--brand); color: #fff; }
.pub__check:has(input:focus-visible) .pub__box-i { box-shadow: 0 0 0 3px var(--brand-soft); }

.pub__row--ccl[hidden] { display: none; }
.pub__ccl { margin-top: 12px; padding: 13px 15px; border-radius: 10px; background: var(--bg-soft); }
.pub__ccl[hidden] { display: none; }
.pub__ccl-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pub__ccl-g + .pub__ccl-g { margin-top: 10px; }
.pub__ccl-t { width: 74px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.pub__radio { position: relative; font-size: 13.5px; }
.pub__radio span { position: relative; padding-left: 21px; }
.pub__radio span::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.pub__radio:has(input:checked) span::before { border-color: var(--brand); border-width: 4.5px; }
.pub__radio:has(input:focus-visible) span::before { box-shadow: 0 0 0 3px var(--brand-soft); }

/* 시트 안의 입력칸은 밑줄만 — 네모를 또 그리면 칸 안에 칸이 된다. */
.pub__input {
  width: 100%; height: 36px; padding: 0 2px; background: none;
  border: 0; border-bottom: 1px solid var(--line-strong);
  font-family: inherit; font-size: 14px; color: var(--ink);
}
.pub__input:focus { outline: none; border-bottom-color: var(--brand); }

.pub__row--vow .vow__note { display: block; margin-top: 5px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.pub__row--vow.is-warn { background: var(--hot-soft); border-radius: 10px; padding-inline: 12px; }

.pub__foot { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.pub__btn {
  min-width: 118px; height: 46px; padding-inline: 26px;
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  transition: background .12s, color .12s, opacity .12s;
}
.pub__btn--cancel { background: var(--bg-sunken); color: var(--ink-2); }
.pub__btn--cancel:hover { background: #e6e9ec; color: var(--ink); }
.pub__btn--send { background: var(--cta); color: #fff; }
.pub__btn--send:hover { background: var(--cta-on); }
/* 서약 전에는 눌러도 넘어가지 않는다는 걸 색으로 먼저 알린다. */
.pub__btn--send.is-locked { opacity: .45; }
/* 보내는 중. 첨부가 붙으면 몇 초 걸리는데, 아무 말이 없으면 안 눌린 줄 알고 또 누른다.
   누를 수 없게 막고(pointer-events) 지금 무엇을 하는 중인지 글자로 알린다. */
.pub__btn--send.is-sending { opacity: .6; pointer-events: none; cursor: default; }

@media (max-width: 768px) {
  .pub__sheet { max-height: 92dvh; }
  .pub__inner { padding: 20px 16px 24px; }
  .pub__cols { flex-direction: column-reverse; gap: 4px; }
  .pub__side { width: 100%; }
  .pub__thumbs { grid-template-columns: repeat(4, 1fr); }
  .pub__thumb-none { aspect-ratio: auto; grid-auto-flow: column; justify-content: center; padding: 14px 12px; }
  .pub__row { flex-direction: column; gap: 8px; }
  .pub__label { width: auto; padding-top: 0; }
  .pub__ccl-t { width: 100%; }
  .pub__btn { flex: 1; min-width: 0; padding-inline: 12px; }
}

/* ---------- 21-y. 댓글 수정 ----------
   본문을 감추고 그 자리에 수정창을 세운다. 게시판과 질문답변이 같은 조각을 쓴다.
   고친 댓글에는 "수정됨" 을 붙인다 — 말이 바뀐 것은 읽는 쪽도 알아야 한다. */
.cmt__edited { font-size: 11.5px; font-weight: 500; color: var(--ink-4); }

.cmt-edit { margin-top: 10px; }
.cmt-edit[hidden] { display: none; }
.cmt-edit__ta {
  width: 100%; padding: 11px 13px; border-radius: 10px; resize: vertical;
  border: 1px solid var(--line-strong); background: #fff;
  font-family: inherit; font-size: 14.5px; line-height: 1.7; color: var(--ink);
}
.cmt-edit__ta:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,128,58,.12); }
.cmt-edit__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* ---------- 21-z. 신고 팝업 ----------
   글과 댓글이 같은 화면에 있어 팝업은 하나만 세우고 사유 목록만 갈아 끼운다.
   접수 뒤에는 같은 상자 안에서 완료 화면으로 바뀐다 — 새 창이 뜨면 흐름이 끊긴다.

   판은 셋(사유 → 덧붙일 내용 → 완료). 완료 판은 한 줄만 알리므로 상자가 좁아진다.
   :has 로 지금 보이는 판을 보고 상자가 스스로 줄어든다. */
.rpt {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px;
  /* 마무리 버튼은 사이트 기본 버튼과 같은 초록으로 둔다 — 팝업만 다른 색을 쓰면
     여기서 누르는 것이 이 사이트의 확인 버튼이라는 게 한 번에 안 읽힌다. */
  --rpt-ok:    #16803a;
  --rpt-ok-on: #0e5c28;
}
.rpt[hidden] { display: none; }
.rpt__dim { position: absolute; inset: 0; background: rgba(15,20,32,.55); }
.rpt__box {
  position: relative; width: min(480px, 100%); max-height: calc(100dvh - 40px);
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15,20,32,.28);
  padding: 28px 24px 22px;
  animation: rptIn .18s ease;
  transition: width .16s ease;
}
.rpt__box:has(.rpt__step--done:not([hidden])) { width: min(350px, 100%); padding: 32px 22px 22px; }
@keyframes rptIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.rpt__title {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -.035em; color: var(--ink); line-height: 1.4;
}
.rpt__sub { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }

/* 사유가 많다. 목록만 스크롤시키고 제목·버튼은 붙잡아 둔다. */
.rpt__scroll {
  margin-top: 18px; max-height: min(46dvh, 400px); overflow-y: auto;
  padding-right: 12px; scrollbar-width: thin; scrollbar-color: #cdd1d6 transparent;
}
.rpt__scroll::-webkit-scrollbar { width: 6px; }
.rpt__scroll::-webkit-scrollbar-thumb { background: #cdd1d6; border-radius: 3px; }
.rpt__scroll::-webkit-scrollbar-track { background: transparent; }

.rpt__reasons { display: flex; flex-direction: column; }
.rpt__reason {
  position: relative;
  display: flex; align-items: center; gap: 15px; cursor: pointer;
  padding: 12px 2px; border-radius: 8px;
}
.rpt__reason input { position: absolute; opacity: 0; width: 0; height: 0; }

/* 동그란 체크 — 안 고른 것도 보여 줘야 고를 수 있는 줄이라는 게 읽힌다.
   --hot-soft 는 흰 종이 위에서 거의 안 보인다. 흰 체크가 얹히는 자리라 한 단계 더 짙게 쓴다.
   분홍 → 빨강으로 짙어지는 한 갈래라, 고른 것과 안 고른 것이 같은 말로 읽힌다. */
.rpt__tick {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: #f3c2c3; color: #fff;
  transition: background .12s;
}
.rpt__tick svg { width: 15px; height: 15px; }
.rpt__reason:hover .rpt__tick { background: #eaa8a9; }
/* 고른 표시는 빨강 — 신고 버튼과 같은 색이라 무엇을 하려는 참인지 한눈에 읽힌다. */
.rpt__reason:has(input:checked) .rpt__tick { background: var(--hot); }
.rpt__reason:has(input:focus-visible) .rpt__tick { box-shadow: 0 0 0 3px rgba(200,38,43,.28); }

.rpt__reason-t { font-size: 15px; color: var(--ink); letter-spacing: -.02em; line-height: 1.5; }
.rpt__reason-h { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

.rpt__detail {
  width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 10px; resize: vertical;
  border: 1px solid var(--line-strong); font-size: 14px; line-height: 1.6; color: var(--ink);
  font-family: inherit;
}
.rpt__detail:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 3px rgba(200,38,43,.12); }

.rpt__err { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--hot); }

.rpt__foot { display: flex; gap: 14px; margin-top: 22px; }
.rpt__btn {
  flex: 1; height: 52px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
  transition: background .12s, color .12s;
}
.rpt__btn--cancel { background: var(--bg-sunken); color: var(--ink-2); }
.rpt__btn--cancel:hover { background: #e6e9ec; color: var(--ink); }
.rpt__btn--send { background: var(--hot-soft); color: var(--hot); }
.rpt__btn--send:hover { background: #fadada; }
.rpt__btn--send:disabled { background: var(--bg-sunken); color: var(--ink-4); cursor: not-allowed; }
.rpt__btn--ok { width: 100%; background: var(--rpt-ok); color: #fff; }
.rpt__btn--ok:hover { background: var(--rpt-ok-on); }

/* 접수 완료 — 사이렌 하나, 한 줄, 확인. 더 얹으면 읽지 않고 닫는다. */
.rpt__step--done { text-align: center; }
.rpt__siren {
  display: block; width: 72px; height: 72px; margin: 0 auto;
  image-rendering: pixelated;   /* 복셀 그림이라 흐리게 늘어나면 결이 죽는다 */
}
.rpt__done-t { margin: 30px 0 34px; font-size: 15px; color: var(--ink); letter-spacing: -.02em; }

/* 이미 신고한 대상 — 사유를 묻기 전에 이 판이 열린다.
   한 줄로 끝내면 "그래서 어떻게 됐는데" 가 남는다. 어디서 진행을 보는지까지 적어 준다. */
.rpt__step--dup .rpt__done-t { margin: 28px 0 8px; font-weight: 700; }
.rpt__dup-sub { margin: 0 0 26px; font-size: 13px; line-height: 1.7; color: var(--ink-3); }
.rpt__dup-sub a { color: var(--rpt-ok); font-weight: 700; text-decoration: underline; }

@media (max-width: 768px) {
  .rpt { padding: 14px; }
  .rpt__box { padding: 24px 20px 20px; }
  .rpt__title { font-size: 19px; }
  .rpt__foot { gap: 10px; }
}

/* ---------- 22-a. 안내 팝업 (무단 크롤링 금지 · 저작권) ----------
   신고 팝업(.rpt)과 같은 치수·같은 리듬으로 맞춘다 — 사이트에서 뜨는 상자가
   저마다 다른 여백·다른 버튼 높이를 쓰면 같은 서비스로 안 읽힌다.
   상자 480px / 모서리 12px / 안쪽 28-24-22 / 버튼 52px 은 .rpt 에서 가져온 값이다. */
.crawl-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.crawl-modal[hidden] { display: none; }
.crawl-modal__dim { position: absolute; inset: 0; background: rgba(15,20,32,.55); }
.crawl-modal__box {
  position: relative; width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15,20,32,.28);
  padding: 28px 24px 22px;
  animation: rptIn .18s ease;
}
.crawl-modal__x {
  position: absolute; right: 12px; top: 12px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: none; cursor: pointer; color: var(--ink-3);
}
.crawl-modal__x:hover { background: var(--bg-sunken); color: var(--ink); }
.crawl-modal__x svg { width: 13px; height: 13px; }

/* 머리 — 그림 한 장과 제목. 동그란 색 배지 대신 다른 화면과 같은 복셀 그림을 쓴다. */
.crawl-modal__head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.crawl-modal__art { display: block; width: 72px; height: 72px; }
.crawl-modal__title {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -.035em; color: var(--ink); line-height: 1.4;
}

.crawl-modal__body {
  margin-top: 16px; text-align: center;
  font-size: 13.5px; line-height: 1.75; color: var(--ink-3); letter-spacing: -.02em;
}
/* 문단 사이는 여백으로만 끊는다 — 줄까지 그으면 짧은 안내가 서류처럼 보인다. */
.crawl-modal__body p + p { margin-top: 10px; }
.crawl-modal__body b { font-weight: 700; color: var(--ink); }

.crawl-modal__foot { display: flex; gap: 14px; margin-top: 22px; }
.crawl-modal__foot .btn {
  flex: 1; height: 52px; border-radius: 10px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
}
/* 읽고 닫기만 하는 안내다 — 초록 확인 버튼은 무언가를 실행하는 자리라서 여기서는 회색으로 둔다. */
.crawl-modal__btn {
  background: var(--bg-sunken); color: var(--ink-2);
  border: 0; cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s;
}
.crawl-modal__btn:hover { background: #e6e9ec; color: var(--ink); }

/* 저작권 줄 옆 물음표 — 글자 크기에 묻히지 않게 동그란 표식으로 세운다. */
.foot__copy { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.foot__copy-i {
  /* padding 을 0 으로 지운다 — 버튼은 브라우저가 기본 여백(1px 6px)을 주는데,
     16px 짜리 동그라미에 그게 남아 있으면 안쪽 자리가 2px 밖에 안 남아
     물음표가 가운데가 아니라 오른쪽으로 밀린다. */
  display: grid; place-items: center; padding: 0;
  width: 16px; height: 16px; flex: none;
  border-radius: 50%; border: 1px solid currentColor; background: none; cursor: pointer;
  font-size: 10px; font-weight: 700; line-height: 1; opacity: .7;
  transition: opacity .12s, background .12s, color .12s;
}
.foot__copy-i:hover { opacity: 1; background: rgba(255, 255, 255, .14); }

.alist__empty { padding: 64px 20px; text-align: center; color: var(--ink-3); border-bottom: 1px solid var(--line); }

/* ---------- 22-c. 에디터 ---------- */
/*
 * overflow 는 hidden 이 아니라 clip 이다.
 * hidden 은 스크롤 상자를 만들어 안쪽 sticky 를 죽인다 — 툴바가 따라오지 않던 원인.
 * clip 은 모서리를 자르는 일만 하고 스크롤 상자를 만들지 않는다.
 */
.ed { position: relative; border: 1px solid var(--line-strong); border-radius: 10px; overflow: clip; background: #fff; }
.ed:focus-within { border-color: var(--brand); }
/*
 * 글이 길어지면 화면 밖으로 나가던 툴바를 위에 붙여 둔다.
 *
 * 붙는 높이는 화면마다 다르다 — 글쓰기 화면에는 등록 버튼 줄이 이미 붙어 있어 그 아래로
 * 내려가야 한다. 그 줄의 실제 높이는 editor.js 가 재서 --ed-bar-top 으로 넘겨준다.
 */
.ed__bar {
  position: sticky; top: var(--ed-bar-top, 0px); z-index: 20;
  background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 5px 6px;
}
.ed__row { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.ed__row + .ed__row { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); }

/* 넣기 줄 — 무엇이 들어가는지 한눈에 보여야 해 아이콘 아래에 이름을 붙인다. */
.ed__row--insert { gap: 2px; padding: 4px 2px 6px; }
.ed__ins {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 54px; padding: 6px 2px; border-radius: 8px;
  background: none; cursor: pointer; color: var(--ink-2);
  font-size: 11px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap;
}
.ed__ins:hover { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.1); }
.ed__ins svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* 사진을 고르면 열리는 줄. */
.ed__hint { font-size: 11.5px; font-weight: 700; color: var(--ink-3); padding-inline: 6px; flex: none; }
.ed__num { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.ed__num input {
  width: 62px; height: 26px; padding: 0 6px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  font-family: var(--mono); font-size: 12px; text-align: right;
}
.ed__num input:focus { outline: none; border-color: var(--brand); }
.ed__num span { font-size: 11px; color: var(--ink-4); }
.ed__btn--danger:hover { background: #fff; color: var(--red); }
.ed__row--image[hidden], .ed__row--table[hidden] { display: none; }

@media (max-width: 768px) {
  .ed__ins { width: 48px; font-size: 10.5px; }
  .ed__ins svg { width: 19px; height: 19px; }
}
.ed__btn {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding-inline: 6px;
  border-radius: 6px; font-size: 13.5px; color: var(--ink-2); background: none;
}
.ed__btn:hover { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.ed__btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); }
.ed__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ed__btn sub, .ed__btn sup { font-size: 9px; }
.ed__sep { width: 1px; height: 18px; background: var(--line-strong); margin-inline: 5px; flex: none; }
.ed__color { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; }
.ed__color:hover { background: #fff; }
.ed__color input { width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }

/* 줄간격 기본값 160% — 툴바에서 문단마다 바꾸면 그 문단에 line-height 가 직접 걸린다. */
.ed__area {
  min-height: 340px; padding: 16px 18px; font-size: 16px; line-height: 1.6; color: #2b3038;
  outline: none; overflow-wrap: anywhere;
}
.ed.is-empty .ed__area::before {
  content: attr(data-placeholder); color: var(--ink-4); pointer-events: none;
}
/* 나란히 흐르는 사진이 아래 문단을 파고들지 않게 바닥을 받쳐 준다. */
.ed__area::after { content: ""; display: block; clear: both; }
.ed__area > * + * { margin-top: 14px; }
/*
 * 문단 사이는 여백을 두지 않는다 — 줄 사이를 벌리는 건 줄간격이 맡는다. 한 줄 띄우려면 엔터.
 * div 까지 함께 봐야 한다. 엔터가 만드는 줄이 예전에는 div 였고 붙여넣은 글에도 섞여 있어,
 * p 만 짚으면 그 줄들만 14px 씩 더 벌어져 줄간격이 160% 로 보이지 않았다.
 */
.ed__area > :is(p, div) + :is(p, div) { margin-top: 0; }
/* 제목 1~6. 단계가 늘었으니 크기 차이가 보여야 고른 값이 맞는지 알 수 있다. */
.ed__area h1 { font-size: 24px; font-weight: 700; }
.ed__area h2 { font-size: 20px; font-weight: 700; }
.ed__area h3 { font-size: 17px; font-weight: 700; }
.ed__area h4 { font-size: 15.5px; font-weight: 700; }
.ed__area h5 { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ed__area h6 { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.ed__area ul, .ed__area ol { padding-left: 22px; list-style: disc; }
.ed__area ol { list-style: decimal; }
.ed__area img { max-width: 100%; }
/* 링크는 걸어 놓고도 티가 나야 한다 — 본문 화면(.prose a)과 같은 색·밑줄로 둔다.
   이게 없어서 링크를 걸어도 아무 일도 일어나지 않은 것처럼 보였다. */
.ed__area a {
  color: var(--brand); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.ed__area blockquote:not(.mc-q) { border-left: 3px solid var(--brand-line); padding-left: 14px; color: var(--ink-2); }
.ed__area pre {
  background: #191c22; color: #e5e9f0; border-radius: var(--r);
  padding: 14px 16px; font-family: var(--mono); font-size: 13px; overflow-x: auto;
}
.ed__area table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ed__area th, .ed__area td { border: 1px solid var(--line-strong); padding: 8px 10px; }
.ed__area th { background: var(--bg-soft); font-weight: 700; }
.ed__source {
  width: 100%; min-height: 340px; border: 0; padding: 16px 18px; outline: none; resize: vertical;
  font-family: var(--mono); font-size: 13px; line-height: 1.7; background: #fbfcfd;
}
/* ── 구분선·인용구 고르기 판 ── */
.ed-pick {
  position: absolute; z-index: 30; padding: 6px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(12,16,24,.16);
}
/* 고르는 판 — 떠 있는 막대와 같은 미리보기를 격자로 늘어놓는다. */
.ed-pick--hr { display: grid; grid-template-columns: repeat(4, 46px); gap: 2px; }
.ed-pick--quote { display: grid; grid-template-columns: repeat(3, 58px); gap: 2px; }
.ed-pick__opt {
  display: block; border-radius: 7px;
  background: none; cursor: pointer; text-align: left;
}
.ed-pick__opt:hover { background: var(--bg-soft); }
.ed-pick__opt[aria-pressed="true"] { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.ed-pick__opt .mc-q p { margin: 0; }

/* 미리보기 크기 — 떠 있는 막대와 고르는 판이 같은 것을 쓴다. */
.ed-pick__opt--hr { width: 46px; padding: 4px; }
.ed-pick__opt--hr .mc-hr { height: 22px; margin: 0; }
.ed-pick__opt--hr .mc-hr::before { max-width: 38px; }
.ed-pick__opt--hr .mc-hr--bar::before { height: 18px; }
.ed-pick__opt--q { width: 58px; padding: 4px; }
.ed-pick__opt--q .mc-q {
  margin: 0; padding: 8px 5px; font-size: 8px; line-height: 1.3;
  max-width: none; pointer-events: none; overflow: hidden;
}
.ed-pick__opt--q .mc-q::before, .ed-pick__opt--q .mc-q::after { font-size: 12px; }
.ed-pick__opt--q .mc-q--line { border-left-width: 3px; padding-left: 7px; }
.ed-pick__opt--q .mc-q--bubble { border-width: 2px; }
.ed-pick__opt--q .mc-q--bubble::before, .ed-pick__opt--q .mc-q--bubble::after { display: none; }
.ed-pick__opt--q .mc-q--postit { border-width: 2px; box-shadow: none; }
.ed-pick__opt--q .mc-q--corner::before, .ed-pick__opt--q .mc-q--corner::after {
  width: 10px; height: 10px; border-width: 3px;
}

/* 끌어서 잡아 둔 칸. */
.ed__area td.is-sel, .ed__area th.is-sel {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.ed__hint--sel { color: var(--brand); font-weight: 800; }

/* ── 표에 직접 붙는 손잡이 ──
   툴바까지 눈을 옮기지 않고 표 옆에서 바로 행·열을 넣고 뺀다. */
.ed-tbl { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.ed-tbl[hidden] { display: none; }
.ed-tbl__grip {
  position: absolute; display: flex; pointer-events: auto;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 7px;
  box-shadow: 0 2px 8px rgba(12,16,24,.14); overflow: hidden;
}
.ed-tbl__grip--row { flex-direction: column; transform: translateY(-50%); }
.ed-tbl__grip--col { transform: translateX(-50%); }
.ed-tbl__grip button {
  width: 22px; height: 22px; display: grid; place-items: center;
  background: none; cursor: pointer; color: var(--ink-3);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.ed-tbl__grip button:hover { background: var(--brand-soft); color: var(--brand); }
.ed-tbl__grip--row button + button { border-top: 1px solid var(--line); }
.ed-tbl__grip--col button + button { border-left: 1px solid var(--line); }

.ed-tbl__x {
  position: absolute; pointer-events: auto;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 7px;
  box-shadow: 0 2px 8px rgba(12,16,24,.14); cursor: pointer; color: var(--ink-3);
}
.ed-tbl__x:hover { border-color: var(--red); color: var(--red); }
.ed-tbl__x svg { width: 11px; height: 11px; }

/* 칸 배경색 — 표 오른쪽 위, 삭제 단추 옆. */
.ed-tbl__paint {
  position: absolute; pointer-events: auto;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 7px;
  box-shadow: 0 2px 8px rgba(12,16,24,.14); cursor: pointer; color: var(--ink-3);
}
.ed-tbl__paint:hover { border-color: var(--brand); color: var(--brand); }
.ed-tbl__paint svg { width: 12px; height: 12px; grid-area: 1 / 1; pointer-events: none; }
/* 고르개 자체는 보이지 않게 겹쳐 둔다 — 눌러야 열리므로 자리는 차지해야 한다. */
.ed-tbl__paint input { grid-area: 1 / 1; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }

/* 열 너비를 바꿀 수 있는 자리 — 칸 오른쪽 경계. */
.ed__area.is-colresize { cursor: col-resize; }
.ed__area.is-colresize td, .ed__area.is-colresize th { cursor: col-resize; }

/* ── 사진 나란히 놓기 (.mc-row) ──
   글쓰기 화면과 본문 화면이 같은 CSS 를 쓴다. 사진을 다른 사진 옆으로 끌어다 놓으면
   에디터가 이 줄을 만든다 — 한 줄에 세 장까지.

   예전에는 float 로 옆에 붙였다. 띄운 사진은 제자리를 비워 두고 흐르는 것이라
   뒤따르는 글이 옆으로 파고들고, 줄이 어디서 바뀔지 아무도 알 수 없었다.
   한 줄을 실제 상자로 만들면 그 안에서만 나뉘어 자리가 흔들리지 않는다.

   각자 정해 둔 너비를 그대로 쓰되(flex-basis: auto) 줄을 넘치면 함께 줄어든다 —
   좁은 화면에서 줄이 깨져 아래로 떨어지는 것보다 조금 작아지는 편이 낫다. */
/* 여백을 직접 준다 — 바로 위의 `:is(p, div) + :is(p, div) { margin-top: 0 }` 이
   줄도 문단으로 보고 붙여 버려, 앞 문단에 딱 달라붙는다. */
.prose .mc-row,
.ed__area .mc-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-block: 24px;
}
/* .prose img 의 위아래 여백은 줄 안에서 걷어낸다 — 줄 자체가 이미 간격을 갖는다. */
.prose .mc-row > img,
.ed__area .mc-row > img {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  height: auto; margin: 0; float: none; display: block;
}

/* ── 구분선 여덟 가지 ──
   글쓰기 화면과 본문 화면이 같은 CSS 를 쓴다. 종류는 class 로만 남는다. */
/*
 * 구분선은 한 줄을 통째로 쓰는 덩어리다 — 60px 높이 칸 안에 선이 가운데 놓인다.
 * 크기·색은 네이버 스마트에디터 여덟 종을 실제로 재어 맞췄다. 선 자체는 ::before 로 그려
 * 정렬(왼쪽·가운데·오른쪽)을 margin 하나로 바꿀 수 있게 했다.
 */
.mc-hr {
  border: 0; background: none; height: 60px; margin: 30px 0 0;
  display: flex; align-items: center;
}
.mc-hr::before { content: ""; display: block; margin-inline: auto; }

.mc-hr--left::before { margin-inline: 0 auto; }
.mc-hr--center::before { margin-inline: auto; }
.mc-hr--right::before { margin-inline: auto 0; }

.mc-hr--plain::before { width: 220px; height: 1px; background: #ddd; }
.mc-hr--wide::before { width: 100%; height: 1px; background: #ddd; }
.mc-hr--thick::before { width: 67px; height: 3px; background: #333; }
.mc-hr--bar::before { width: 2px; height: 60px; background: #aaa; }

/* 장식이 들어간 것들은 그림 한 장으로 그린다 — 정렬해도 모양이 흐트러지지 않는다. */
.mc-hr--chevron::before {
  width: 238px; height: 9px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='238' height='9'%3E%3Cpath d='M0 1.5h108l11 6 11-6h108' fill='none' stroke='%23ddd' stroke-width='1'/%3E%3C/svg%3E");
}
.mc-hr--diamond::before {
  width: 192px; height: 23px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='23'%3E%3Cpath d='M0 11.5h84M108 11.5h84' stroke='%23ddd' stroke-width='1'/%3E%3Cpath d='M96 4l7.5 7.5L96 19l-7.5-7.5z' fill='none' stroke='%23ddd' stroke-width='1'/%3E%3C/svg%3E");
}
.mc-hr--dots::before {
  width: 66px; height: 6px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='6'%3E%3Cg fill='%23ccc'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='15' cy='3' r='3'/%3E%3Ccircle cx='27' cy='3' r='3'/%3E%3Ccircle cx='39' cy='3' r='3'/%3E%3Ccircle cx='51' cy='3' r='3'/%3E%3Ccircle cx='63' cy='3' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.mc-hr--slash::before {
  width: 44px; height: 44px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M30 8L14 36' stroke='%23bbb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 구분선은 한 줄을 통째로 차지하는 덩어리다 — 커서가 들어가지 않는다. */
.ed__area .mc-hr { cursor: grab; user-select: none; }

/*
 * 덩어리(구분선·인용구)에 손을 올리거나 골랐을 때.
 *
 * 올리면 옅은 네모가 미리 보여 "여기가 한 덩어리"라는 걸 알려 주고, 고르면 진해진다.
 * 얇은 구분선은 테두리를 더 멀리 띄워야 네모로 읽힌다.
 */
.ed__area .mc-hr, .ed__area .mc-q { transition: outline-color .12s; }

/* 구분선은 이제 60px 칸이라 테두리를 바짝 붙여도 네모로 읽힌다. */
.ed__area .mc-hr:hover { outline: 2px solid var(--brand-line); outline-offset: -1px; }
.ed__area .mc-hr.is-picked { outline: 2px solid var(--brand); outline-offset: -1px; }

/* 잡아 끌 수 있는 것에는 손 모양을 준다 — 네이버의 grab 커서와 같은 뜻이다.
   인용구는 글자 위에서는 글쓰기 커서로 돌아온다(안쪽에 글을 써야 하므로). */
.ed__area .mc-q { cursor: grab; }
.ed__area .mc-q p, .ed__area .mc-q li { cursor: text; }
.ed__area .mc-q:hover { outline: 2px solid var(--brand-line); outline-offset: 6px; }
.ed__area .mc-q.is-picked { outline: 2px solid var(--brand); outline-offset: 6px; }

/* 끌어 옮기는 동안은 잡고 있는 게 보이게 흐려 둔다. */
.ed__area .mc-hr.is-moving, .ed__area .mc-q.is-moving { opacity: .35; }

/* 고른 덩어리 위에 떠서 따라다니는 막대. */
/* 툴바(z-index 20)가 붙어 다니므로 그보다 위에 떠야 가려지지 않는다. */
.ed-float {
  position: absolute; z-index: 26;
  display: flex; align-items: center; gap: 2px; padding: 4px 6px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(12,16,24,.16);
}
.ed-float[hidden] { display: none; }
.ed-float .ed__sep { margin-inline: 4px; }

/* ── 인용구 여섯 가지 ──
   치수·색·너비를 네이버 스마트에디터에서 재어 그대로 옮겼다. 따옴표·말풍선 꼬리·접힌 모서리는
   원본이 그림이라 같은 모양으로 다시 그려 넣었다.
   말풍선·포스트잇·모서리는 본문 폭을 다 쓰지 않고 460px 로 좁혀 가운데에 놓인다. */
.mc-q { position: relative; margin: 30px 0; color: var(--ink); line-height: 1.8; }
/* 정렬은 종류마다 다르다 — 상자꼴은 가운데로 모으고, 왼쪽에 표식이 붙는 것은 왼쪽에 둔다. */
.mc-q--mark, .mc-q--bubble, .mc-q--postit, .mc-q--corner { text-align: center; }
.mc-q--line, .mc-q--underline { text-align: left; }
.mc-q p { margin: 0; }
.mc-q p + p { margin-top: 8px; }

/* 1. 따옴표 — 글은 왼쪽에 두고 인용부호만 위아래 가운데에 놓는다. */
.mc-q--mark { padding: 35px 0 33px; }
.mc-q--mark::before, .mc-q--mark::after {
  content: ""; position: absolute; left: 0; right: 0; margin-inline: auto;
  width: 21px; height: 16px; background: no-repeat center/contain;
}
.mc-q--mark::before { top: 0; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='16'><g fill='%23bfbfbf'><path d='M9.5 0.4 9.9 0.5 9.6 1.0 6.9 2.4 4.9 4.2 3.9 5.6 3.2 7.4 3.4 7.9 4.9 7.6 6.4 8.0 7.4 8.9 7.8 9.5 8.0 10.6 7.9 12.1 6.9 13.8 5.2 14.9 4.6 15.0 2.2 14.9 1.5 14.4 0.6 13.4 0.4 12.2 0.0 11.8 0.0 10.9 0.4 10.0 0.5 8.9 1.0 7.4 1.6 6.1 2.6 4.8 4.2 3.1 5.8 2.0 6.2 1.9 7.6 1.0 9.4 0.5Z'/><path d='M19.2 0.5 20.0 0.5 20.1 0.8 17.9 1.9 16.5 2.9 14.5 5.0 13.4 7.4 13.4 7.6 13.8 8.0 14.2 7.8 15.8 7.8 16.6 8.0 17.9 9.2 18.2 10.2 18.2 11.5 17.9 12.2 17.9 12.6 17.4 13.4 16.4 14.4 16.1 14.4 15.5 14.9 13.1 15.0 12.2 14.8 11.5 14.2 10.6 12.9 10.5 9.6 11.5 6.8 12.6 5.0 15.2 2.5 15.5 2.5 16.0 2.0 16.5 1.9 17.9 1.0 19.1 0.6Z'/></g></svg>"); }
.mc-q--mark::after { bottom: 0; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='16'><g fill='%23bfbfbf'><path d='M5.8 0.4 7.0 0.4 8.1 0.6 8.9 1.1 9.9 2.8 9.8 6.2 8.9 8.6 7.8 10.4 5.8 12.4 3.8 13.8 0.9 15.0 0.2 14.8 0.4 14.5 1.6 14.0 3.9 12.5 5.9 10.4 7.0 8.0 7.0 7.8 6.6 7.4 6.1 7.6 4.6 7.6 3.8 7.4 2.5 6.1 2.1 5.1 2.1 4.0 2.5 2.8 3.0 2.0 4.0 1.0 5.0 0.5 5.6 0.5Z'/><path d='M16.0 0.4 18.0 0.5 18.9 1.0 19.9 2.1 20.2 3.6 19.9 6.8 18.8 9.2 17.8 10.6 16.1 12.2 14.6 13.4 11.5 14.9 11.0 15.0 10.5 14.9 10.8 14.4 12.8 13.5 14.1 12.5 16.0 10.5 17.0 8.6 17.1 8.0 17.0 7.5 15.5 7.8 14.0 7.4 13.4 6.9 12.5 5.6 12.4 4.8 12.5 3.2 13.6 1.5 14.9 0.6 15.9 0.5Z'/></g></svg>"); }

/* 2. 세로선 — 위아래로 2px 씩 들여 세운다. */
.mc-q--line { padding: 2px 0 2px 16px; }
.mc-q--line::before {
  content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px;
  border-left: 5px solid #000;
}

/* 3. 말풍선 — 꼬리의 흰 부분이 아래 테두리를 덮어 구멍을 내고, 대각선만 테두리 색으로 잇는다. */
.mc-q--bubble {
  max-width: 460px; margin-inline: auto;
  padding: 35px 21px 33px; border: 5px solid #e4e4e4; background: #fff;
}
.mc-q--bubble::after {
  content: ""; position: absolute; left: 126px; bottom: -42px;
  width: 38px; height: 42px; background: no-repeat left top;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='42'><path d='M0.0 0.0 37.9 0.0 37.9 4.9 36.2 4.9 35.8 5.1 1.8 39.1 0.6 40.5 0.0 40.5 0.0 0.1Z' fill='%23fff'/><path d='M33.4 0.0 37.9 0.0 37.9 4.9 36.2 4.9 35.8 5.1 1.8 39.1 0.6 40.5 0.0 40.5 0.0 33.1 0.6 33.0 28.2 5.2 29.9 4.0 33.2 0.6 33.4 0.1Z' fill='%23e4e4e4'/></svg>");
}

/* 4. 밑줄 — 얇은 선 하나와 왼쪽 위 따옴표. */
.mc-q--underline { padding: 40px 0 25px; border-bottom: 1px solid #9b9b9b; }
.mc-q--underline::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 24px; height: 15px; background: no-repeat left top;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='15'><g fill='%239b9b9b'><path d='M8.2 0.0 9.5 0.0 9.9 0.8 9.2 1.4 8.9 1.4 7.8 1.9 6.8 2.5 5.9 3.8 5.9 4.8 6.1 5.0 7.9 5.5 8.8 6.1 9.8 7.2 10.4 8.5 10.4 11.2 9.4 13.0 8.5 13.9 6.9 14.6 6.8 14.9 3.9 14.9 3.6 14.5 3.0 14.4 2.1 13.9 1.0 12.8 0.6 12.1 0.4 11.0 0.0 10.6 0.0 7.2 0.4 7.0 0.6 5.9 1.6 4.2 2.6 3.1 4.6 1.6 5.8 1.0 6.1 1.0 7.0 0.5 7.9 0.4 8.1 0.1Z'/><path d='M21.6 0.0 23.0 0.0 23.1 0.9 22.9 1.2 21.1 1.9 20.1 2.5 19.4 3.5 19.2 4.6 19.6 5.0 21.2 5.5 22.1 6.1 22.8 6.8 23.5 8.2 23.9 8.6 23.9 11.2 23.5 11.5 23.4 12.1 22.9 12.9 21.9 13.9 21.0 14.4 20.4 14.5 20.1 14.9 17.2 14.9 17.0 14.5 16.4 14.4 15.4 13.8 14.6 13.0 14.0 12.1 14.0 11.8 13.5 10.6 13.5 7.4 13.9 6.6 14.0 5.9 15.0 4.2 16.8 2.5 18.0 1.6 20.0 0.6 21.0 0.5 21.5 0.1Z'/></g></svg>");
}

/* 5. 포스트잇 — 본체 + 아래 띠 + 접힌 모서리, 세 조각으로 이루어진다.
      띠와 접힘을 상자 밖에 매달면 고를 때 테두리가 그것들을 감싸지 못한다 —
      아래 여백을 띠 높이만큼 잡아 두고 안쪽에 앉힌다. */
.mc-q--postit {
  max-width: 460px; margin-inline: auto;
  padding: 33px 33px 49px; background: #fff;
  border: 4px solid #d5d5d5; border-bottom: 0;
}
.mc-q--postit::after {
  content: ""; position: absolute; left: -4px; right: 38px; bottom: 0;
  height: 49px; background: #fff;
  border-left: 4px solid #d5d5d5; border-bottom: 4px solid #d5d5d5;
}
.mc-q--postit::before {
  content: ""; position: absolute; right: -4px; bottom: 0;
  width: 42px; height: 49px; background: no-repeat left top;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='49'><path d='M0 0H41.9V7L1 48.9H0Z' fill='%23d5d5d5'/><path d='M5 11H37.6L5 44.8Z' fill='%23bfbfbf'/></svg>");
}

/* 6. 모서리 — 굵은 갈고리 두 개로 감싼다. */
.mc-q--corner { max-width: 460px; margin-inline: auto; padding: 39px 36px; }
.mc-q--corner::before, .mc-q--corner::after {
  content: ""; position: absolute; width: 26px; height: 26px;
}
.mc-q--corner::before { left: 0; top: 0; border-left: 6px solid #4a4a4a; border-top: 6px solid #4a4a4a; }
.mc-q--corner::after { right: 0; bottom: 0; border-right: 6px solid #4a4a4a; border-bottom: 6px solid #4a4a4a; }

/* 발판 — 왼쪽에 편집 모드, 오른쪽에 글자수. */
.ed__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-top: 1px solid var(--line); background: var(--bg-soft);
  font-size: 11.5px; color: var(--ink-3);
}
.ed__len { margin-left: auto; font-family: var(--mono); }
.ed__modes { display: flex; align-items: center; gap: 7px; }
.ed__modes-bar { color: var(--line-strong); }
.ed__mode {
  padding: 3px 2px; background: none; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--ink-4); letter-spacing: -.02em;
}
.ed__mode:hover { color: var(--ink-2); }
.ed__mode.is-on { color: var(--brand); font-weight: 800; }
.ed.is-over .ed__len { color: var(--hot); font-weight: 700; }
.ed.is-uploading .ed__len::before { content: "이미지 올리는 중… "; color: var(--brand); }

/* 업로드가 끝나기 전 이미지는 반투명하게 둔다 — 아직 임시 미리보기다. */
.ed__area img[data-uploading] { opacity: .45; filter: saturate(.4); }
.ed.is-drop { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand-soft); }

/* ── 사진 고르기 · 옮기기 · 크기 ──
   고른 사진에는 초록 테두리와 손잡이가 붙는다. 손잡이는 .ed 기준 절대 위치라
   본문이 스크롤되어도 JS 가 다시 자리를 잡아 준다. */
.ed__area img.is-picked { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.ed__area img.is-moving { opacity: .35; }
.ed__area img { cursor: grab; }

/* 끄는 동안에는 화면 전체가 쥔 손 모양이 되고, 글자가 선택되지 않는다. */
.ed.is-dragging, .ed.is-dragging * { cursor: grabbing !important; }
.ed.is-dragging .ed__area { user-select: none; }

.ed__grip {
  position: absolute; z-index: 4; width: 11px; height: 11px;
  border-radius: 3px; background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(12,16,24,.3);
}
.ed__grip--w, .ed__grip--e { cursor: ew-resize; }
.ed__grip--nw, .ed__grip--se { cursor: nwse-resize; }
.ed__grip--ne, .ed__grip--sw { cursor: nesw-resize; }

/* 좌측 메뉴 */
.acc-nav-wrap {
  position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 16px);
  width: 320px; flex: none;
  display: flex; flex-direction: column; gap: 4px;
}
/* 내 이름 줄은 계정 설정으로 가는 링크다 — 내가 쓴 글·댓글에서 돌아오는 길. */
.acc-me { display: flex; align-items: center; gap: 12px; padding: 4px 12px 12px; border-radius: var(--r); }
.acc-me:hover .acc-me__b strong { color: var(--brand-ink); }

/* 적립·사용 토글 — 목록 위에 붙는 세 칸. */
/* 위쪽 padding 이 0이라 머리줄(적립·사용 내역)에 붙어 있었다 — 사이를 띄운다. */
.acc-seg { display: flex; gap: 6px; padding: 14px 20px 12px; }
.acc-seg a {
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--ink-3);
  font-size: 13px; font-weight: 600;
}
.acc-seg a:hover { background: var(--bg-sunken); color: var(--ink-2); }
.acc-seg a[aria-current] { background: var(--brand); color: #fff; }

/* 내가 쓴 글은 게시판 목록과 같은 카드로 세운다 — 카드가 제 여백을 들고 있어 칸만 만든다. */
.acc-cards { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
.acc-me__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acc-me__b strong { font-size: 15.5px; letter-spacing: -.03em; }
.acc-me__b span { font-size: 12.5px; color: var(--ink-3); }
.acc-me__stat {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 12px 14px;
  background: var(--bg-soft); border-radius: 12px; font-size: 14px;
}
.acc-me__stat b { font-family: var(--mono); font-size: 15px; }
.acc-me__stat a { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand); }

.acc-nav { display: flex; flex-direction: column; }
/* 오른쪽 끝에 배지를 붙이는 항목이 있어 flex 로 둔다 — 글자만 있는 항목은 보이는 게 같다. */
.acc-nav a { margin-bottom: 10px; padding: 14px 12px; border-radius: 12px; display: flex; align-items: center; gap: 8px; }
.acc-nav a span { font-size: 15px; letter-spacing: -.02em; }
/* 지금 보고 있는 곳 — 브랜드 초록을 옅게 깐다.
   예전에는 --bg-sunken(#f1f3f4) 을 썼는데, 옆칸에는 제 배경이 없어 페이지 바탕이 그대로 비친다.
   서버 관리 화면은 바탕이 .page-soft(#f4f5f7) 라 두 색 차이가 거의 없어 표시가 안 보였다.
   헤더 바로가기·더보기 화면도 현재 위치를 이 색으로 알린다 — 사이트에서 같은 뜻은 같은 색으로. */
.acc-nav a.active { background: var(--brand-soft); pointer-events: none; }
.acc-nav a.active span { color: var(--brand-ink); font-weight: 700; }
.acc-nav a.inactive span { color: var(--ink-2); font-weight: 500; }
.acc-nav a.inactive:hover { background: var(--bg-soft); }
.acc-nav__hr { border: 0; border-top: 1px solid var(--line); margin: 8px 12px; }
/* 오른쪽 끝에 붙는 등급 배지. */
.acc-nav__tier { width: 18px; height: 18px; margin-left: auto; flex: none; object-fit: contain; }
.acc-social--kakao { background: #fee500; }
.acc-social--naver { background: #03c75a; }
.acc-social--google { background: #fff; border: 1px solid var(--line-strong); }
.acc-social--discord { background: #5865f2; }
@keyframes accPopIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- 22-b-3. 비밀번호 재설정 ---------- */
/* 헤더·푸터 없이 단계만 보이는 독립 화면. */
.rp-body { display: flex; flex-direction: column; min-height: 100vh; }
.rp-header { padding: 20px 24px; display: flex; align-items: center; }
.rp-container {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 24px 80px;
}
.rp-step {
  display: none; flex-direction: column; align-items: center;
  width: 100%; max-width: 480px;
  animation: rpIn .2s ease;
}
.rp-step.active { display: flex; }
@keyframes rpIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* 비밀번호 찾기 화면의 강조색. 제목 하이라이트와 다음/확인 버튼이 이 값을 함께 쓴다. */
:root { --rp-accent: #2563eb; --rp-accent-on: #1d4ed8; }
.rp-icon { width: 100%; max-width: 260px; height: auto; object-fit: contain; margin-block: 4px 16px; }
.rp-title, .rp-form-title, .rp-complete-title {
  font-family: var(--display);
  font-size: 23px; font-weight: 700; color: var(--ink);
  text-align: center; line-height: 1.5; letter-spacing: -.035em;
  margin-bottom: 8px;
}
/* 이 화면의 강조색 — 아래 버튼(.btn-rp-next)과 같은 파랑이어야 한다.
   예전에는 제목만 브랜드 초록이라 버튼과 따로 놀았다. 두 곳이 같은 값을 보게 묶어 둔다. */
.rp-title .highlight { color: var(--rp-accent); }
.rp-subtitle {
  font-size: 15px; color: var(--ink-3); text-align: center;
  line-height: 1.6; letter-spacing: -.02em; margin-bottom: 12px;
}
.rp-field-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-bottom: 14px; }
.rp-label { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.rp-label .required { color: var(--hot); margin-left: 2px; }
.rp-input-wrap { position: relative; width: 100%; }
.rp-input {
  width: 100%; height: 54px; border-radius: 14px;
  border: 1.5px solid var(--line-strong); background: #fff;
  padding: 0 52px 0 18px; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.rp-input::placeholder { color: var(--ink-4); }
.rp-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,128,58,.12); }
.rp-pw-toggle {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--ink-4); display: grid; place-items: center; transition: color .15s;
}
.rp-pw-toggle:hover { color: var(--ink-2); }
.rp-pw-toggle svg { width: 20px; height: 20px; }
.rp-error-msg { font-size: 13.5px; font-weight: 600; color: var(--hot); letter-spacing: -.02em; }
.rp-error-msg:empty { display: none; }

.rp-btn-row { display: flex; gap: 10px; width: 100%; max-width: 360px; margin-top: 20px; justify-content: center; }
.rp-btn-row.single { margin-top: 28px; }
.btn-rp-back, .btn-rp-next, .btn-rp-primary {
  height: 54px; border-radius: 14px; font-size: 16px; font-weight: 700;
  letter-spacing: -.03em; cursor: pointer; transition: background .15s, border-color .15s;
  font-family: var(--display);
}
.btn-rp-back { flex: 1; border: 1.5px solid var(--line-strong); background: var(--bg-soft); color: var(--ink-2); }
.btn-rp-back:hover { background: var(--bg-sunken); }
/* 비밀번호 재설정 CTA 는 브랜드 초록이 아니라 모두의지원금과 같은 파랑을 쓴다 */
.btn-rp-next, .btn-rp-primary { background: var(--rp-accent); color: #fff; border: none; }
.btn-rp-next:hover, .btn-rp-primary:hover { background: var(--rp-accent-on); }
.btn-rp-next { flex: 2; }
.btn-rp-primary { width: 100%; }
.btn-rp-next:disabled, .btn-rp-primary:disabled { background: var(--line-strong); color: var(--ink-4); cursor: not-allowed; }

.rp-footer { padding: 20px 24px 28px; text-align: center; font-size: 12.5px; color: var(--ink-4); }

/* 서약 전 등록 버튼 — 눌리긴 하되(안내를 띄운다) 색으로 잠금을 표시한다 */
.btn.is-locked {
  background: var(--bg-sunken); color: var(--ink-4);
  box-shadow: none; border-color: transparent;
}
/* 마우스를 올리면 왜 못 누르는지 몸으로 알려 준다 — 빨갛게 되면서 한 번 흔들린다. */
.btn.is-locked:hover {
  background: #fdecec; color: var(--red, #d64545);
  box-shadow: inset 0 0 0 1px rgba(214, 69, 69, .35);
  cursor: not-allowed;
}
/* 눌렀는데 안 넘어갈 때 한 번 흔든다.
   글로만 알리면 화면 어딘가에 뜬 문구를 찾아야 한다 — 방금 누른 자리가 직접 반응해야 빠르다.
   .btn 말고도 제 모양을 가진 버튼(신고 팝업, 발행 시트)이 있어 함께 받는다. */
.btn.is-shake,
.rpt__btn.is-shake,
.pub__btn.is-shake { animation: btn-nope .38s; }
@keyframes btn-nope {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-shake, .rpt__btn.is-shake, .pub__btn.is-shake { animation: none; }
}
/* span 으로 찍는 잠긴 버튼은 눌러도 아무 데도 가지 않는다 — 커서로 먼저 알려 준다. */
span.btn.is-locked { cursor: not-allowed; }

/* ---------- 등급 잠금 안내 ----------
   글쓰기·다운로드가 등급 때문에 막혔을 때, 무엇이 잠겼고 어떻게 여는지를 함께 둔다. */
.tier-gate,
.dl-gate {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; border: 1px solid var(--brand-line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, #f4faf5, #fff 62%);
}
.tier-gate { margin-bottom: 16px; }
.dl-gate { margin-top: 14px; }
/* 안내는 상자 안에서 한 줄을 통째로 쓴다.
   .dl-box 가 flex-wrap 이라 그냥 두면 파일 버튼 옆에 끼어 좁아지고, 문장이 서너 줄로 접힌다. */
.dl-box .dl-gate { flex: 1 0 100%; width: 100%; }
.tier-gate__icon,
.dl-gate__icon { width: 40px; height: 40px; flex: none; }
.tier-gate__b,
.dl-gate__b { flex: 1; min-width: 200px; }
.tier-gate__t,
.dl-gate__t { font-family: var(--display); font-size: 14.5px; font-weight: 700; letter-spacing: -.03em; }
.tier-gate__m,
.dl-gate__m { margin-top: 5px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.tier-gate__act { display: flex; gap: 8px; flex: none; }

/* 출처·라이선스 — 파일 없이 적어 둔 글에서 본문 아래에 붙는다.
   아래 여백을 비워 두면 바로 다음에 오는 반응 줄(.reactions)의 윗선이 상자 밑변에 딱 붙어,
   모서리만 둥근 네모에 직선이 하나 그어진 것처럼 보인다. */
.src-note {
  display: flex; gap: 13px; align-items: center;
  margin: 22px 0 28px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-soft);
  /* 본문 글꼴과 달리 둬야 글쓴이가 쓴 말이 아니라 서비스가 붙인 안내로 읽힌다. */
  font-family: var(--display);
}
.src-note__ico { width: 48px; height: 48px; flex: none; }
.src-note__b { min-width: 0; }
.src-note__t { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: -.02em; }
.src-note__m { margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
/* 라이선스 칸에 적어 둔 주소 — 눌러서 갈 수 있다는 게 보여야 한다. */
.src-note__m a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.src-note__m a:hover { color: var(--brand-ink); }
.src-note__link {
  display: inline-block; margin-top: 3px; font-size: 13px; color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}

/* 접속한 시각에 맞춰 하늘이 바뀐다. 같은 마을을 빛만 달리 그린 다섯 벌. */
.lg__brand--dawn { background-image: url("https://cdn.minecap.co.kr/assets/img/auth/login-dawn.png"); }
.lg__brand--morning { background-image: url("https://cdn.minecap.co.kr/assets/img/auth/login-morning.png"); }
.lg__brand--noon { background-image: url("https://cdn.minecap.co.kr/assets/img/auth/login-noon.png"); }
.lg__brand--golden { background-image: url("https://cdn.minecap.co.kr/assets/img/auth/login-golden.png"); }
.lg__brand--night { background-image: url("https://cdn.minecap.co.kr/assets/img/auth/login-night.png"); }
.lg__brand--noon::after, .lg__brand--morning::after {
  background: linear-gradient(180deg, rgba(8,13,24,.52) 0%, rgba(8,13,24,.42) 45%, rgba(8,13,24,.72) 100%);
}

/* 좁은 화면에서는 좌측 패널을 접고 로고만 폼 위에 세운다 */

/* ---------- 22-b-2. 가입 — 프로필 이미지 선택 ---------- */
.apick { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 4px; }
.apick__circle {
  position: relative; width: 112px; height: 112px; border-radius: 50%;
  overflow: hidden; cursor: pointer; padding: 0;
  border: 1px solid var(--line-strong); background: var(--bg-soft);
  transition: border-color .15s, transform .15s;
}
.apick__circle:hover { border-color: var(--brand); transform: scale(1.03); }
.apick__circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apick__edit {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}
.apick__hint { font-size: 12.5px; color: var(--ink-3); }

/* 팝업 폭은 한 곳(--apick-w)에서 정한다 — 칸 크기 계산이 이 값을 그대로 쓴다. */
.apick-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  --apick-w: min(600px, calc(100vw - 32px));
}
.apick-modal[hidden] { display: none; }
.apick-modal__dim { position: absolute; inset: 0; background: rgba(15,20,32,.55); }
.apick-modal__box {
  position: relative; width: var(--apick-w);
  max-height: min(720px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(15,20,32,.28);
}
.apick-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
}
.apick-modal__head h2 { font-size: 17px; letter-spacing: -.03em; }
/* 칸 크기를 CSS 로 되짚어 3줄까지만 보이고 나머지는 스크롤되게 높이를 잡는다. */
.apick-modal__grid {
  --apick-cols: 5;
  --apick-gap: 12px;
  --apick-pad: 20px;
  --apick-cell: calc((var(--apick-w) - var(--apick-pad) * 2
                      - var(--apick-gap) * (var(--apick-cols) - 1)) / var(--apick-cols));
  overflow-y: auto; padding: var(--apick-pad);
  max-height: calc(var(--apick-cell) * 3 + var(--apick-gap) * 2 + var(--apick-pad) * 2);
  display: grid; grid-template-columns: repeat(var(--apick-cols), minmax(0, 1fr)); gap: var(--apick-gap);
}
.apick-opt {
  position: relative;
  width: 100%; aspect-ratio: 1; padding: 0; border-radius: 50%; overflow: hidden;
  cursor: pointer; background: var(--bg-soft);
  border: 3px solid transparent; outline: 1px solid var(--line);
  transition: transform .12s, border-color .12s;
}
.apick-opt:hover { transform: scale(1.06); }
.apick-opt.is-on { border-color: var(--brand); outline-color: var(--brand); }
.apick-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 첫 칸 — 직접 올리기 */
.apick-opt--up { outline-style: dashed; outline-width: 2px; outline-color: var(--line-strong); background: var(--bg-soft); }
.apick-opt--up.has-img { outline-style: solid; outline-width: 1px; outline-color: var(--line); }
.apick-up {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-3); pointer-events: none;
}
.apick-opt--up.has-img .apick-up {
  inset: auto 0 0 0; height: 38%; gap: 0;
  background: rgba(0,0,0,.5); color: #fff;
}
.apick-opt--up.has-img .apick-up svg { display: none; }
.apick-up svg { width: 26px; height: 26px; }
.apick-up em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: -.02em; }
.apick-up__busy {
  position: absolute; inset: 0; background: rgba(255,255,255,.72);
  display: grid; place-items: center;
}
.apick-up__busy::after {
  content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--brand);
  animation: apick-spin .7s linear infinite;
}
@keyframes apick-spin { to { transform: rotate(360deg); } }

.apick-modal__err {
  margin: 0 20px; padding: 8px 10px; border-radius: var(--r-sm, 8px);
  background: #fdecec; color: #c0392b; font-size: 12.5px; letter-spacing: -.02em;
}
.apick-modal__err[hidden] { display: none; }
.apick-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px 18px; border-top: 1px solid var(--line);
}

/* ---------- 22-c-1. 글쓰기 레이아웃 ---------- */
/* 자료실·서버 글은 옵션이 많아 목록 필터와 같은 모양으로 좌측에 세운다. */
/* 좌측 정보 패널이 없는 글쓰기(자유게시판 등)는 한 단이라 폭을 좁혀 준다. */
.wr2__acts .btn { height: 36px; }

/* 종이 안에서는 에디터가 자기 테두리를 버리고 이어진다. */
.wr2__paper .ed { border: 0; border-radius: 0; }
.wr2__paper .ed__bar { border-top: 1px solid var(--line); border-radius: 0; }
.wr2__paper .ed__area { min-height: 420px; }
.wr2__opt { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; }
/* 옵션 묶음이 한 겹 더 감싸여 있으면 옆칸의 gap 이 닿지 않는다 — 여기서 직접 띄운다. */
.wr2__opt + .wr2__opt { margin-top: 14px; }
[data-option-slot] + .wr2__opt { margin-top: 0; }
/* 분류가 없는 게시판이면 빈 껍데기가 gap 만 벌린다. */
[data-option-slot]:empty { display: none; }
.wr2__opt-h {
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.wr2__opt-h svg {
  width: 15px; height: 15px; flex: none; color: var(--ink-3);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.wr2__opt .facet + .facet { margin-top: 14px; }
.wr2__opt-input {
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px;
}
.wr2__opt-input:focus { outline: none; border-color: var(--brand); }
.wr2__opt .attach__drop { padding: 16px 10px; }
.wr2__opt .attach__drop-t { font-size: 12.5px; }

/* 글쓰기 화면(.wr2__*)의 좁은 화면 대응은 styles/write.mustache 안에 있다 —
   기본 규칙이 그 파일에 있고 <style> 이 이 파일보다 뒤에 붙어서, 여기 적으면 먹지 않는다. */

/* 제목 · 내용 · 시각을 각각 한 줄씩 — 한 줄에 몰아넣으면 무엇이 무엇인지 읽히지 않는다. */
.ditem { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 10px; }
.ditem:hover { background: var(--bg-soft); }
.ditem + .ditem { border-top: 1px solid var(--line); }
.ditem__body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  text-align: left; background: none; cursor: pointer;
}
.ditem__t {
  font-size: 14px; color: var(--ink); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ditem__x2 {
  font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ditem__m { font-size: 11.5px; color: var(--ink-4); }
.ditem__x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-4); }
.ditem__x:hover { color: var(--red); }
.ditem__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dmodal__empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* ---------- 22-d-1. 말머리 선택 (구인구직) ---------- */

/* 목록 제목 앞에 붙는 말머리 */
.prefix-tag {
  flex: none; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  background: var(--brand); color: #fff;
}
.prefix-tag--seek { background: var(--info); }
.ed--slim .ed__bar { background: none; border-bottom: 1px solid var(--line-strong); padding: 6px 8px; }
.ed--slim .ed__btn:hover { background: #fff; }
.ed--slim .ed__area { min-height: 280px; background: none; }

/* ---------- 22-f. 빈 목록 ---------- */
/* 테두리 없이 아이콘 + 한 줄 안내만. 목록 자리를 넉넉히 차지해 푸터가 바로 올라붙지 않게 한다. */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 84px 20px 96px; text-align: center;
}
.empty__icon { width: 72px; height: auto; fill: var(--line-strong); margin-bottom: 14px; }
.empty__icon-dim { fill: var(--bg-sunken); }
/* 빈 화면은 그림이 크게 자리를 잡는 만큼 글도 또렷해야 한다 — 흐리면 안내가 눈에 안 들어온다. */
.empty__text {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: -.025em; color: var(--ink);
}
.empty__sub { margin-top: 7px; font-size: 14px; color: var(--ink-3); }
.empty__action { margin-top: 18px; }

/* ---------- 22-g. 교환소 ---------- */
/* 다이아 심볼 — 포인트 표기에 항상 따라붙는다. */
/* 전역 `img { display:block }` 때문에 줄이 끊기므로 인라인으로 되돌린다. */
.dia {
  display: inline-block; width: 1.25em; height: 1.25em; flex: none;
  image-rendering: pixelated; vertical-align: -0.26em; margin-right: 3px;
}

.shop-tabs {
  display: flex; gap: 4px; margin-top: 20px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs a {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; font-size: 13.5px; color: var(--ink-3); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.shop-tabs a em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.shop-tabs a:hover { color: var(--ink); }
.shop-tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--brand); }
.shop-tabs a[aria-current="page"] em { color: var(--brand); }

/* PC 는 한 줄 5개 고정, 좁아지면 아래 미디어쿼리에서 단수를 줄인다. */
.shop-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px;
  margin-top: 16px;
}
.shop-card { display: flex; flex-direction: column; gap: 10px; }
.shop-card__thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--r);
  background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden;
}
.shop-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.shop-card:hover .shop-card__thumb { border-color: var(--line-strong); box-shadow: 0 6px 18px -8px rgba(16,24,40,.18); }
.shop-card__soldout {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.shop-card__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shop-card__brand { font-size: 11.5px; color: var(--ink-3); }
.shop-card__name {
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-card:hover .shop-card__name { color: var(--brand-ink); }
.shop-card__price {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-family: var(--mono); font-size: 14.5px; font-weight: 700; color: var(--ink);
}

/* ── 상세 */
.shop-detail { padding-bottom: 20px; }
.shop-detail__top {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px;
  margin-top: 18px; align-items: start;
}
.shop-detail__thumb {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-soft); overflow: hidden;
}
.shop-detail__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.shop-detail__brand { font-size: 13px; color: var(--brand); font-weight: 600; }
.shop-detail__name { font-size: 24px; letter-spacing: -.035em; margin-top: 6px; line-height: 1.35; }
.shop-detail__price {
  display: flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--mono); font-size: 28px; font-weight: 700;
}
.shop-detail__meta {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.shop-detail__meta > div { display: flex; gap: 14px; font-size: 13.5px; }
.shop-detail__meta dt { width: 84px; flex: none; color: var(--ink-3); }
.shop-detail__meta dd { margin: 0; color: var(--ink-2); }
.shop-detail__cta { margin-top: 24px; }
.shop-detail__cta:disabled { background: var(--line-strong); cursor: not-allowed; }
.shop-detail__cta-note { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 8px; }

.shop-detail__sections { margin-top: 44px; }
.shop-detail__sections > h2 {
  font-size: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px;
}
.shop-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.shop-sec h3 { font-size: 14px; margin-bottom: 8px; }
.shop-sec p { font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.shop-sec__none { padding: 24px 0; font-size: 13.5px; color: var(--ink-3); }
.shop-detail__back { margin-top: 32px; text-align: center; }
.shop-detail__cta-note a { text-decoration: underline; text-underline-offset: 3px; }
/* 기프티쇼 규격서 — 쿠폰을 직접 보여 주면 상품공급자와 발행사업자를 판매 화면에 적어야 한다. */
.shop-detail__supplier { margin-top: 14px; font-size: 11.5px; color: var(--ink-4); text-align: center; }

/* 교환 확인 창 — 서버 추천 결과 창(.vpop)과 같은 틀이다. */
.xpop {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 12, 16, .45); opacity: 0; transition: opacity .18s ease;
}
.xpop[hidden] { display: none; }
.xpop.is-open { opacity: 1; }
.xpop__box {
  width: min(380px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 26px 24px 20px; border-radius: var(--r-lg);
  background: var(--bg); color: var(--ink); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  transform: translateY(10px) scale(.96); transition: transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
.xpop.is-open .xpop__box { transform: none; }
.xpop__thumb {
  width: 96px; height: 96px; margin: 0 auto 12px; padding: 8px; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
}
.xpop__ico { width: 88px; height: 88px; margin: 0 auto 14px; image-rendering: pixelated; }
.xpop.is-open [data-step="result"]:not([hidden]) .xpop__ico { animation: vpop-bounce .5s ease .05s both; }
.xpop__brand { font-size: 12.5px; font-weight: 600; color: var(--brand); }
.xpop__title { margin-top: 4px; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.4; }
.xpop__msg { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.xpop__calc {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13.5px;
}
.xpop__calc > div { display: flex; justify-content: space-between; gap: 12px; }
.xpop__calc dt { color: var(--ink-3); }
.xpop__calc dd { margin: 0; font-family: var(--mono); font-weight: 700; color: var(--ink); }
.xpop__calc dd.is-minus { color: var(--hot); }
.xpop__calc .is-total { padding-top: 6px; border-top: 1px solid var(--line); }
.xpop__calc .is-total dd { color: var(--brand); }
.xpop__note { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--ink-3); word-break: keep-all; }
.xpop__acts { display: flex; gap: 8px; margin-top: 18px; }
.xpop__btn {
  flex: 1; height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.xpop__btn[hidden] { display: none; }
.xpop__btn--main { background: var(--cta); color: #fff; }
.xpop__btn:disabled { opacity: .7; cursor: progress; }
@keyframes vpop-bounce {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .xpop, .xpop__box { transition: none; }
  .xpop.is-open [data-step="result"]:not([hidden]) .xpop__ico { animation: none; }
}

/* ---------- 22-h. 미션 ---------- */
/* 회색 바탕 위에 흰 카드를 얹는 구성. 페이지 단위로 바탕색을 바꾼다. */
.page-soft { background: #f4f5f7; }
.page-soft .foot { margin-top: 64px; }

.ms { padding-block: 30px 40px; }
.ms__head { margin-bottom: 22px; }
.ms__head h1 { font-size: 30px; letter-spacing: -.04em; }
.ms__head p { font-size: 14.5px; color: var(--ink-2); font-weight: 600; margin-top: 8px; }

.ms__cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.ms__main { display: flex; flex-direction: column; gap: 16px; }
.ms__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 16px); }
.ms-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-card__count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--brand); }
.ms-card__reset { font-size: 12px; color: var(--ink-4); }
.ms-card--guest { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ms-guest__art { width: 66px; height: auto; flex: none; }
.ms-guest__b { flex: 1; min-width: 200px; }
.ms-guest__b strong {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-size: 16px; letter-spacing: -.03em; color: var(--ink);
}
.ms-card--guest p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.ms-card--guest .btn { flex: none; }
@media (max-width: 768px) {
  /* 좁아지면 그림 옆에 글이 눌린다 — 그림·글을 위에 나란히 두고 버튼만 아래로 내린다. */
  .ms-guest__art { width: 56px; }
  .ms-guest__b { min-width: 0; }
  .ms-card--guest .btn { width: 100%; }
}

/* 내 활동 */
.ms-me { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.ms-me__badge { image-rendering: pixelated; flex: none; }
.ms-me__b { flex: 1; min-width: 170px; }
.ms-me__lv { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.ms-me__lv span { font-family: var(--sans); font-size: 12px; color: var(--brand-ink); margin-left: 4px; }
.ms-me__bar { height: 6px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; margin-top: 7px; }
.ms-me__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--grass)); }
.ms-me__next { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.ms-me__dia { text-align: right; flex: none; }
.ms-me__dia span { display: block; font-size: 11.5px; color: var(--ink-3); }
.ms-me__dia strong {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-family: var(--mono); font-size: 19px; font-weight: 700;
}

/* 미션 줄 */
.ms-rows { margin-top: 6px; }
.ms-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; }
.ms-row__ico {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 11px; background: var(--bg-soft);
}
.ms-row__ico img { }
.ms-row.is-done .ms-row__ico { background: var(--brand-soft); }
.ms-row__b { flex: 1; min-width: 0; }
.ms-row__title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ms-row.is-done .ms-row__title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
/* 무엇을 해야 채워지는지. 제목보다 한 칸 낮춰 두 줄이 서로 안 다투게 한다. */
.ms-row__desc { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.ms-row.is-done .ms-row__desc { color: var(--ink-4); }
.ms-row__reward {
  display: flex; align-items: center; gap: 3px; margin-top: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--brand);
}
.ms-row__right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 74px; }
.ms-row__num { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.ms-row__num em { font-style: normal; font-size: 11.5px; color: var(--ink-4); font-weight: 500; }
.ms-row__bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; }
.ms-row__bar i { display: block; height: 100%; background: var(--brand); }
.ms-row__done {
  font-size: 12px; font-weight: 700; color: var(--brand-ink);
  background: var(--brand-soft); border-radius: var(--r-pill); padding: 4px 10px;
}

/* 사이드 — 교환소 배너. 상품 카드 대신 그림 한 장으로 끝낸다. */
.ms-promo {
  display: block; overflow: hidden; border-radius: 16px; background: #a8e6c1;
}
.ms-promo__art { width: 100%; height: auto; display: block; }
.ms-promo__b { display: block; padding: 16px 18px 18px; background: #fff; }
.ms-promo__eyebrow { display: block; font-size: 12.5px; color: var(--ink-3); }
.ms-promo__title { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.03em; margin-top: 4px; }
.ms-promo__cta {
  display: block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--brand);
}
.ms-promo:hover .ms-promo__cta { color: var(--brand-ink); }
.ms-rank__badge { image-rendering: pixelated; flex: none; }

/* '이렇게 쌓여요' 안내 카드(.ms-guide)는 걷어냈다 — 같은 내용이 내 등급 화면에 더 자세히 있다. */
/* 헤더는 반투명이라 어두운 배경이 비쳐 회색으로 보인다 — 이 페이지에서만 불투명하게. */
.ev-body .gnb { background: #fff; }
.ev-body .foot { margin-top: 0; }
.ev-announce__cta .btn--ghost { border-color: #3a4356; color: #dfe3ea; background: transparent; }
.ev-announce__cta .btn--ghost:hover { border-color: #5b6478; color: #fff; }

/* ---------- 23. Breadcrumb ---------- */
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); padding-block: 18px 0; }
.crumb a:hover { color: var(--brand); }
.crumb .sep { color: var(--ink-3); }
.qa-act__btn .ico { width: 18px; height: 18px; }
.qa-act__btn--adopt { margin-left: auto; color: var(--brand); font-weight: 700; background: var(--brand-soft); }
.qa-act__btn--adopt:hover { background: #dcf0e3; color: var(--brand-ink); }
.qa-count__ico {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; flex: none;
}
.qa-count__solved {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--r-pill); padding: 3px 10px;
}
.qa-answer__flag {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--brand);
  border-radius: var(--r-pill); padding: 4px 11px;
}

.qa-closed {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 12px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  font-size: 13.5px; color: var(--brand-ink);
}
.ql-card__face { border-radius: 50%; object-fit: cover; background: var(--bg-sunken); flex: none; }
.ql-act .ico { width: 18px; height: 18px; }

/* ---------- 23-b. 모바일 — 햄버거 서랍 + 하단 탭바 ---------- */
/* 데스크톱에서는 둘 다 감춘다. 표시는 아래 미디어쿼리에서 켠다. */
.gnb__burger, .tabbar { display: none; }

.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer__dim { position: absolute; inset: 0; background: rgba(16, 20, 26, .45); }
/* 왼쪽에 화면을 조금 남긴다 — 눌러서 닫을 자리이자, 뒤에 화면이 남아 있다는 표시다
   (덮개로 오해하지 않게). 게시판이 마흔 개 넘게 들어가지만 이름은 칩으로 접히므로
   폭을 다 쓰지 않아도 된다. */
/* 칸(머리말·검색·메뉴·회사정보)이 저마다 좌우 여백을 들고, 패널은 여백 없이 둔다.
   맨 위 칸에 바탕색을 깔고 칸 사이를 두꺼운 띠로 끊으려면 그 둘이 화면 끝까지 닿아야 한다. */
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: 82%; max-width: 340px;
  background: #fff; overflow-y: auto;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom));
  box-shadow: -12px 0 32px -12px rgba(16, 24, 40, .28);
  animation: drawer-in .18s ease-out;
}
@keyframes drawer-in { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
body.is-drawer-open { overflow: hidden; }

.drawer__sec { padding: 16px max(18px, env(safe-area-inset-right)) 16px 18px; }
/* 칸 사이를 가르는 띠 — 선 하나로 끊으면 목록 안 구분선과 구별이 안 된다. */
.drawer__bar { height: 8px; background: var(--bg-sunken); }

/* ── 서랍 맨 위 칸 ── */
.drawer__head {
  position: relative;
  padding: 18px max(18px, env(safe-area-inset-right)) 18px 18px;
  background: var(--bg-soft);
}
/* 로그인 전에는 이 칸이 서랍의 얼굴이다 — 브랜드 초록을 옅게 깔아 한 장으로 읽히게 한다. */
.drawer__head--guest {
  padding-top: 14px;
  background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 100%);
  text-align: center;
}
.drawer__x {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(16, 20, 26, .06); color: var(--ink-2);
  transition: background .15s, color .15s;
}
.drawer__x:hover, .drawer__x:active { background: rgba(16, 20, 26, .12); color: var(--ink); }
.drawer__x svg { width: 17px; height: 17px; }

/* 비로그인 — 그림 + 환영 문구 + 버튼 하나 */
.drawer__art { width: 132px; height: auto; margin: 0 auto 2px; }
.drawer__welcome { margin-bottom: 16px; }
.drawer__welcome h2 {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.035em; color: var(--ink);
}
.drawer__welcome p {
  margin-top: 2px;
  font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.035em; color: var(--brand);
}

/* 로그인 — 프로필 + 숫자 세 칸 */
.drawer__me { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.drawer__me-face { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; background: var(--bg-sunken); }
.drawer__me-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.drawer__me-b strong {
  display: flex; align-items: center; gap: 5px;
  font-size: 16px; letter-spacing: -.02em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer__me-b span { font-size: 12.5px; color: var(--ink-3); }

.drawer__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px; border-radius: var(--r); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.drawer__stats a { padding: 11px 4px; text-align: center; border-radius: var(--r); }
.drawer__stats a + a { box-shadow: inset 1px 0 0 var(--line); }
.drawer__stats a:hover { background: var(--brand-soft); }
.drawer__stats b {
  display: block; font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer__stats span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }

/* 칸 맨 아래 버튼 — 로그인 전에는 초록 CTA, 로그인 뒤에는 흰 바탕 테두리. */
.drawer__headbtn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; height: 46px; border-radius: var(--r);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink);
  font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  transition: background .15s, box-shadow .15s;
}
.drawer__headbtn:hover { background: var(--bg-soft); }
.drawer__headbtn svg { width: 18px; height: 18px; color: var(--ink-3); }
/* 로그인 버튼 — 글자까지 들어 있는 그림 한 장이다. 칸 폭에 맞춰 늘어난다. */
.drawer__cta { display: block; border-radius: var(--r); filter: drop-shadow(0 6px 12px var(--cta-shadow)); }
.drawer__cta img { width: 100%; height: auto; }
.drawer__cta:hover { filter: drop-shadow(0 8px 16px var(--cta-shadow)) brightness(1.05); }
.drawer__cta:active { filter: drop-shadow(0 4px 8px var(--cta-shadow)) brightness(.96); }

/* 로그아웃은 잘못 누르면 되돌리기 번거롭다 — 눈에 띄되 앞서지는 않게 회색으로 둔다. */
.drawer__out {
  display: flex; align-items: center; gap: 10px;
  padding: 15px max(18px, env(safe-area-inset-right)) 15px 18px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
}
.drawer__out:hover { background: var(--bg-soft); }
.drawer__out svg { width: 18px; height: 18px; color: var(--ink-4); }

.drawer__search { width: 100%; height: 44px; }
.drawer__nav > a {
  display: block; padding: 11px 4px; font-size: 15px; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.drawer__group { padding: 14px 0 6px; border-bottom: 1px solid var(--line); }
.drawer__group h3 {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-4); margin-bottom: 8px;
}
.drawer__group h3::before { content: ""; width: 5px; height: 5px; background: var(--grass); flex: none; }
.drawer__links { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer__links a {
  padding: 7px 11px; border-radius: 8px; background: var(--bg-soft);
  font-size: 13.5px; color: var(--ink-2);
}
.drawer__links a:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* 서랍 하단 회사 정보 — 모바일에서는 푸터를 숨기므로 여기서 대신 보여 준다.
   좌우 여백은 .drawer__sec 이 들고 있다. */
.drawer__corp { font-size: 11.5px; color: var(--ink-4); line-height: 1.7; }
/* 목록 맨 아래 칸은 밑줄을 지운다 — 바로 아래 띠가 이미 끊어 준다. */
.drawer__nav .drawer__group:last-child { border-bottom: 0; padding-bottom: 0; }
.drawer__corp p + p { margin-top: 2px; }
.drawer__corp-name { font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.drawer__corp-note { margin-top: 10px; }
.drawer__corp a { text-decoration: underline; text-underline-offset: 2px; }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 150;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff; border-top: 1px solid var(--line);
  /* 스크롤해도 이 줄은 화면 바닥에 그대로 있어야 한다.
     iOS 사파리는 스크롤 방향에 따라 아래 주소창을 접었다 폈다 하는데, 펼 때
     그 막대가 레이아웃 뷰포트 아래쪽을 덮는다. 그만큼이 safe-area-inset-bottom 으로
     들어오지만, head 의 viewport 에 viewport-fit=cover 가 없으면 이 값이 늘 0이라
     탭바가 주소창 뒤로 들어가 사라진 것처럼 보인다 — 둘은 한 짝으로 봐야 한다.
     아이폰 홈 인디케이터 자리를 비우는 것도 같은 값이 한다. */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.tabbar > * {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 0 7px; font-size: 11px; color: var(--ink-3); background: none;
  /* 다섯 칸이라 가장 좁은 화면(320px)에서 한 칸이 64px 남는다 —
     '서버리스트' 가 두 줄로 꺾이면 이 줄만 두꺼워져 다른 칸과 어긋난다. */
  white-space: nowrap; letter-spacing: -.03em;
}
.tabbar svg { width: 22px; height: 22px; }
.tabbar [aria-current="page"] { color: var(--brand); font-weight: 700; }


/* ---------- 24. Responsive ---------- */
/* 브레이크포인트는 768px 하나만 쓴다. 그 위는 데스크톱 배치, 아래는 모바일 배치다. */
@media (max-width: 768px) {
  :root { --gap: 20px; --header-h: 56px; --subnav-h: 0px; }
  .wrap { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }

  /* ── 헤더 · 하단 탭바 ── */
  /* 모바일 헤더 — 좌상단 로고, 우상단 햄버거. 나머지는 전부 서랍으로 넘긴다.
     gnb__quick(서버리스트·이벤트·미션·교환소)이 빠져 있어서 좁은 화면에서 넘쳐
     로고·햄버거와 겹쳤다. 셋을 한 줄에 다 넣을 폭이 애초에 안 나온다. */
  .gnb__util, .gnb__nav, .snb, .snb__recent { display: none; }
  .gnb { border-bottom: 1px solid var(--line); }
  .gnb__bar { height: 56px; }
  .gnb__bar .brand__logo { width: 96px; }
  .gnb__burger {
    display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto;
    border-radius: 10px; color: var(--ink-2);
  }
  .gnb__burger:hover { background: var(--bg-soft); }
  .gnb__burger svg { width: 24px; height: 24px; }

  .tabbar { display: grid; }
  /* 하단 탭바가 가리지 않도록 본문 아래를 비워 둔다.
     탭바는 안전 영역만큼 더 두꺼워지므로 그 값도 같이 더한다. */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  /* 토스트도 탭바 위로 올린다 — 겹치면 안내가 탭에 가린다. */
  .toast { bottom: calc(62px + 16px + env(safe-area-inset-bottom)); }

  /* 푸터는 서랍 안(회사 정보 + 이용안내)으로 옮겼다. */
  .foot { display: none; }
  /* 로그인 유도 위젯은 서랍과 하단 탭바에 이미 로그인 진입이 있어 모바일에서는 뺀다. */
  /* 로그인 위젯은 통째로 숨긴다.
     좁은 화면에서는 옆칸이 본문 아래로 내려가는데, 내 이름·등급·다이아는 이미
     머리말과 마이페이지에 있다. 아래에 한 번 더 쌓이면 스크롤만 길어진다. */
  .login-w--intro,
  .login-w { display: none; }
  /* 출석체크도 같은 이유로 뺀다 — 위젯 바로 뒤에 딸려 오는 카드라
     본문을 다 읽고 한참 내려온 자리에 남는다. 출석은 마이페이지에서 한다. */
  .atd { display: none; }

  /* ── 공통 레이아웃 ── */
  .cols, .cols--filter { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* 좁은 화면에서는 필터를 서랍으로 접는다(facet-drawer.js).
     본문 위에 통째로 펼쳐지면 축이 많은 자료실은 화면 두세 개 분량이라 목록이 한참 밀린다. */
  .facets {
    position: static; display: flex; flex-direction: column; gap: 20px;
    border: 0; border-radius: 0; padding: 0 0 12px;
    max-height: none; overflow: visible;
  }
  .facets__act {
    position: sticky; bottom: 0; margin: auto 0 0; padding: 12px 0 0;
    background: #fff;
  }
  .facets__act::before { height: 20px; }

  /* 목록 위에 세우는 여는 버튼 */
  .facet-open {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 14px; margin-bottom: 14px;
    border: 1px solid var(--line-strong); border-radius: 10px; background: #fff;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  }
  .facet-open svg { width: 17px; height: 17px; }
  .facet-open__n {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700;
  }
  .facet-open__n[hidden] { display: none; }

  .facet-drawer { position: fixed; inset: 0; z-index: 200; }
  .facet-drawer[hidden] { display: none; }
  .facet-drawer__dim { position: absolute; inset: 0; background: rgba(16, 20, 26, .45); }
  .facet-drawer__panel {
    position: absolute; inset: 0 0 0 auto; width: calc(100% - 10px); max-width: 420px;
    display: flex; flex-direction: column;
    background: #fff; padding: 14px 16px 16px; overflow-y: auto;
    box-shadow: -12px 0 32px -12px rgba(16, 24, 40, .28);
    animation: drawer-in .18s ease-out;
  }
  .facet-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  }
  .facet-drawer__head strong { font-family: var(--display); font-size: 16px; letter-spacing: -.03em; }
  .facet-drawer__x {
    display: grid; place-items: center; width: 32px; height: 32px;
    border-radius: 9px; color: var(--ink-3); background: none; cursor: pointer;
  }
  .facet-drawer__x:hover { background: var(--bg-sunken); color: var(--ink); }
  .facet-drawer__x svg { width: 18px; height: 18px; }
  /* 서랍 안에서는 목록만 늘어나고 적용 버튼은 바닥에 붙는다. */
  .facet-drawer__panel > .facets { flex: 1; min-height: 0; }
  .facet__list { max-height: none; }
  .facet__list { max-height: 180px; }

  /* 히어로(.hero*)와 큰 탭(.bigtabs)의 모바일 대응은 여기 두지 않는다.
     기본 규칙이 styles/home.mustache 안에 있고 그 <style> 은 이 파일보다 뒤에 붙는다 —
     특이도가 같으면 뒤가 이기므로 여기 적어 봐야 먹지 않는다. 그 파일 안에 함께 둔다. */

  .post { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; padding: 16px; }
  .post__thumb { width: 88px; }
  .post__title { font-size: 15.5px; }
  .bigtabs__meta { display: none; }
  /* .article__title 은 styles/post-detail.mustache 안에 있다 — 기본값이 그 파일에 있어서
     여기 적으면 뒤에 붙는 그쪽 <style> 에 밀린다. */
  .prose { font-size: 15px; }

  /* ── 서버 카드 ── */
  /* .mcs-list--compact .mcs 가 클래스 2개라 우선순위가 높다 — 같이 지정해야 실제로 접힌다. */

  /* ── 서버 목록 한 줄 ── */
  /* 배너 칸의 최소 폭이 468px 이라 다섯 칸을 그대로 두면 줄 하나가 950px 을 넘어
     화면 밖으로 밀린다. 이름 줄 / 배너 / 칩 세 층으로 접는다. */
  .srv {
    grid-template-columns: 30px 44px minmax(0, 1fr);
    grid-template-areas: "rank icon main" "promo promo promo" "side side side";
    gap: 10px 10px; padding: 14px;
  }
  .srv__rank { grid-area: rank; font-size: 15px; }
  .srv__icon { grid-area: icon; width: 44px; height: 44px; }
  .srv__medal { width: 28px; height: 28px; }
  .srv__main { grid-area: main; }
  .srv__promo { grid-area: promo; }
  .srv__side { grid-area: side; flex-direction: row; flex-wrap: wrap; gap: 6px; }

  /* ── 전체글 · 글쓰기 · 질문 ──
     .alist__* 는 styles/board-list.mustache, .qna-* / .wr2__* 는 styles/write.mustache,
     .qa* 는 styles/qna.mustache 안에 있다. 기본값이 그 파일들에 있어서
     여기 적으면 뒤에 붙는 그쪽 <style> 에 밀린다. */

  /* ── 미션 · 교환소 ── */
  .ms__cols { grid-template-columns: minmax(0, 1fr); }
  .ms__side { position: static; }
  /* 넓은 화면에서만 세우는 옆칸 카드 — 좁은 화면에서는 본문 아래로 내려가 정작 본문을 밀어낸다. */
  .ms-card--wide-only { display: none; }
  .shop-detail__top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .shop-detail__thumb { max-width: 280px; margin-inline: auto; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 자료 격자도 좁은 화면에서는 둘씩 — 셋이면 카드 하나가 100px 남짓이라 그림도 제목도 안 읽힌다. */
  .feed--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .feed--grid .post__title { font-size: 14px; }

  /* ── 마이페이지 — 좌측 메뉴를 가로 스크롤 칩으로 ── */
  .acc { padding: 24px 16px 84px; gap: 18px; }
  .acc__title { font-size: 21px; }
  .acc__layout { flex-direction: column; gap: 18px; }
  .acc-nav-wrap { position: static; width: 100%; }
  .acc-nav { flex-direction: row; overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; }
  .acc-nav::-webkit-scrollbar { display: none; }
  /* 좁은 화면에서는 세로로 쌓이지 않고 옆으로 눕는다 — 아래 여백은 gap 이 대신한다. */
  .acc-nav a { flex: none; margin-bottom: 0; padding: 10px 14px; border-radius: 999px; background: var(--bg-soft); }
  .acc-nav a span { font-size: 14px; white-space: nowrap; }
  .acc-nav__hr { display: none; }
  .acc-card { padding: 24px 20px 28px; border-radius: 16px; gap: 24px; }
  .acc-card__fields { gap: 24px; }
  .acc-card__head--pad { padding: 18px 20px 14px; }
  .acc-btn { height: 44px; min-width: 72px; padding: 0 20px; border-radius: 10px; font-size: 14px; }
  /* 칸 안쪽(.acc-item · .acc-input · .acc-field__* · .acc-avatar)과 팝업(.acc-pop*)의
     좁은 화면 대응은 styles/my.mustache 안에 있다 — 기본 규칙이 그 파일에 있고
     <style> 이 이 파일보다 뒤에 붙어서, 여기 적으면 먹지 않는다. */

  /* ── 로그인 — 좌측 브랜딩을 접는다 ── */
  /* 로그인 화면의 모바일 대응은 styles/login.mustache 안에 있다 —
     기본 규칙이 그 파일에 있고 <style> 이 이 파일보다 뒤에 붙어서, 여기 적으면 먹지 않는다. */

  /* ── 프로필 이미지 고르기 ── */
  /* 칸 수만 바꾸면 높이(3줄)는 --apick-cell 계산이 알아서 따라온다. */
  .apick-modal__grid { --apick-cols: 4; --apick-gap: 10px; --apick-pad: 16px; }
  .apick-modal__head { padding: 16px 16px 12px; }
  .apick-modal__err { margin: 0 16px; }
  .apick-modal__foot { padding: 12px 16px 16px; }

  /* ── 약관 · 이벤트 ── */
  /* .policy-* 는 styles/policy.mustache, .ev-* 는 styles/event.mustache 안에 있다 —
     기본 규칙이 그 파일들에 있고 <style> 이 이 파일보다 뒤에 붙어서, 여기 적으면 먹지 않는다.
     표 최소 폭만 여기 남는다 — .policy-content table 의 min-width 는 저쪽에 없다. */
  .policy-content table { min-width: 560px; }
}
.sup-chip--live  { background: var(--brand); color: #fff; }
.sup-chip--ready { background: var(--info-soft); color: var(--info); }
.sup-chip--done  { background: var(--bg-sunken); color: var(--ink-4); }
.sup-pager__n.is-on { background: var(--ink); color: #fff; font-weight: 600; }
.sup-pager__n.is-on:hover { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* ::details-content 는 위 * 선택자에 안 잡힌다 — FAQ 아코디언은 따로 꺼 준다. */
  details::details-content { transition: none !important; }
}

/* ---------- 작성자 표시 (프로필 이미지 + 닉네임 + 등급) ---------- */
/* 닉네임이 나오는 자리는 어디든 이 한 세트로 통일한다. */
/* 주변 글과 같은 줄에 섞이므로 inline 으로 흐른다 — inline-flex 로 두면 기준선이 어긋나
   닉네임만 살짝 내려앉는다. 아바타는 vertical-align 으로 글자 가운데에 맞춘다. */
.by { display: inline; max-width: 100%; }
.by__face {
  display: inline-block; vertical-align: -0.28em; margin-right: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover; background: var(--bg-soft); image-rendering: pixelated;
}
.by__name { color: inherit; font-weight: 600; }
a.by__name:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.by__mark {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  vertical-align: -0.2em; margin-left: 3px;
}
.by__mark svg { width: 100%; height: 100%; }
.by__mark--staff { color: var(--brand); }
img.by__mark { object-fit: contain; }

/* 운영팀 방패 + 이름표 묶음. 올리면 서버 인증 배지와 같은 풍선(.vtip, layouts/staff-tip)이 뜬다.
   .vtip 은 inline-flex 라 기준선이 없다 — 가운데로 맞춰 닉네임 줄에서 뜨지 않게 한다. */
.by__staff { vertical-align: middle; margin-top: -2px; }
.by__staff .vtip__body { left: -6px; }
.by__mark--partner { color: #d99a12; }

/* 등급·파트너 배지. 선으로 그린 아이콘은 작을 때 눈에 안 걸려 그림으로 바꿨다. */
.by__tier {
  display: inline-block; vertical-align: -0.22em; margin-left: 3px;
  width: 16px; height: 16px; object-fit: contain; flex: none;
}
.by__tier--partner { filter: drop-shadow(0 0 4px rgba(217, 154, 18, .55)); }

.by__label {
  display: inline-block; vertical-align: 1px; margin-left: 3px;
  padding: 1px 6px; border-radius: 5px;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 11px; font-weight: 700; letter-spacing: -.01em;
}
.by--staff .by__name { color: var(--brand-ink); }

/*
 * '공식 소식' 딱지 — 사람이 아니라 서비스가 낸 글에 붙는다(layouts/badge-source).
 *
 * 높이를 22px 로 못박아 둔다 — 운영팀 딱지·닉네임 옆 어디에 서도 줄 높이가 같다.
 * 색은 파랑이다. 운영팀 딱지(.by__label)는 '누가 썼다', 이쪽은 '무엇이 실렸다' 라,
 * 같은 초록으로 묶으면 뜻이 섞인다.
 */
.badge-src {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  vertical-align: middle; height: 22px; padding: 0 9px 0 7px;
  border-radius: var(--r-pill);
  background: var(--info-soft); color: var(--info);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 22%, transparent);
  font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1;
  white-space: nowrap;
}
.badge-src svg { width: 13px; height: 13px; flex: none; }

/* 큰 자리(상세 헤더 등)에서는 얼굴을 키운다 */
.by--lg { gap: 8px; }
.by--lg .by__face { width: 34px; height: 34px; }
.by--lg .by__name { font-size: 14.5px; }

/* 좁은 메타 줄에 들어갈 때는 더 작게 — 줄 높이를 밀지 않는다. */
.post__eyebrow .by__face,
.hero__txt .by__face,
.alist__author .by__face { width: 16px; height: 16px; }
.post__eyebrow .by__name,
.alist__author .by__name { font-weight: 600; color: inherit; }
.post__eyebrow .by__label,
.alist__author .by__label { font-size: 10.5px; padding: 0 5px; }
.post__eyebrow .by__mark,
.alist__author .by__mark { width: 13px; height: 13px; }
.post__eyebrow .by__tier,
.alist__author .by__tier { width: 14px; height: 14px; }

/* 전체글 표 — 가운데 정렬 유지하고 이름만 줄임표 */
.alist__author .by { justify-content: center; }
.alist__author .by__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 히어로 카드는 배경이 사진이라 흰 글씨 + 테두리로 띄운다 */
.hero__txt .by__name { color: #fff; }
.hero__txt .by__face { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.hero__txt .by__label { background: rgba(255,255,255,.22); color: #fff; }
.hero__txt .by__mark--staff { color: #b6f0c4; }

/* ---------- 목록 스켈레톤 ---------- */
/* API 응답을 기다리는 동안 카드 자리를 잡아 둔다 — 화면이 덜컥거리지 않게. */
@keyframes skelShine {
  0% { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}
.skel {
  display: block; border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-sunken) 50%, var(--bg-soft) 75%);
  background-size: 420px 100%;
  animation: skelShine 1.3s infinite linear;
}
.skel--line { height: 13px; margin-bottom: 10px; }
.skel--title { height: 20px; width: 72%; margin-bottom: 12px; }
.skel--sm { height: 11px; width: 38%; }
.skel--short { width: 55%; margin-bottom: 0; }
.skel--thumb { width: 128px; height: 84px; border-radius: var(--r); flex: none; }
.post--skel { pointer-events: none; }
.post--skel .post__body { flex: 1; min-width: 0; }

@media (max-width: 768px) {
  .skel--thumb { width: 92px; height: 64px; }
}

/* ---------- 글쓰기 — 말머리 + 제목 한 줄 ---------- */

@media (max-width: 768px) {
}

/* 버전 일괄 선택 버튼 — 하나만 골랐을 때만 나타난다. */
.facet__bulk { display: flex; gap: 6px; margin-top: 8px; }
.facet__bulk[hidden] { display: none; }
.facet__bulk button {
  flex: 1; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: #fff; color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.facet__bulk button:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.facet-opt.is-locked { opacity: .4; cursor: not-allowed; }

/* 목록에 없는 버전 직접 넣기 — 글쓰기 폼에만 있다. */
.facet__add { display: flex; gap: 6px; margin-top: 10px; }
.facet__add-in {
  flex: 1; min-width: 0; height: 30px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
  color: var(--ink); font-family: inherit; font-size: 12px;
}
.facet__add-in:focus { outline: none; border-color: var(--brand); }
.facet__add-in::placeholder { color: var(--ink-3); }
.facet__add-btn {
  flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: #fff; color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.facet__add-btn:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.facet__add-msg { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: #c0392b; }
.facet__add-msg.is-ok { color: var(--brand-ink); }
.facet__add-msg[hidden] { display: none; }

/* ---------- 에디터 확장 (글꼴·형광펜·표편집·특수문자·동영상) ---------- */
.ed { position: relative; }

/* 글자색·형광펜 — 아이콘 아래에 현재 색 띠를 깐다(툴바 버튼과 같은 크기). */
.ed__color {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; width: 30px; height: 30px; border-radius: 6px;
  cursor: pointer; color: var(--ink-2);
}
.ed__color:hover { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.ed__color input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0;
}
.ed__color-ico { width: 15px; height: 15px; pointer-events: none; }
.ed__color-bar {
  width: 15px; height: 3px; border-radius: 2px; pointer-events: none;
  background: currentColor; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.ed__row--table {
  background: var(--brand-soft); border-top: 1px solid var(--brand-line);
  margin: 2px -6px -5px; padding: 5px 8px;
}
.ed__row--table[hidden] { display: none; }
.ed__hint { font-size: 11.5px; font-weight: 700; color: var(--brand-ink); margin-right: 4px; }
.ed__btn--wide {
  width: auto; padding: 0 9px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); background: #fff; border: 1px solid var(--brand-line);
}
.ed__btn--wide:hover { background: #fff; border-color: var(--brand); color: var(--brand-ink); }

/* 특수문자 고르기 */
.ed-chars {
  position: absolute; right: 10px; top: 92px; z-index: 26; width: 320px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,24,40,.16); overflow: hidden;
}
.ed-chars[hidden] { display: none; }
.ed-chars__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--bg-soft);
}
.ed-chars__head button { border: 0; background: none; color: var(--ink-3); cursor: pointer; }
.ed-chars__head svg { width: 13px; height: 13px; }
.ed-chars__grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px;
  padding: 8px; max-height: 220px; overflow-y: auto;
}
.ed-chars__grid button {
  height: 28px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-size: 14px; color: var(--ink);
}
.ed-chars__grid button:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* 본문 동영상 */
.ed-video, .prose .ed-video {
  position: relative; width: 100%; aspect-ratio: 16/9; margin: 0;
  border-radius: var(--r); overflow: hidden; background: #000;
}
.ed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 본문 이미지 업로드 진행 ----------
   본문 HTML 을 건드리지 않으려고 에디터 위에 따로 덮는 층이다.
   자리는 editor.js 가 매 프레임 잡아 준다. */
.ed-uplayer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ed-up {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  border-radius: 6px; background: rgba(12, 16, 24, .55);
  backdrop-filter: blur(1px); color: #fff;
}
.ed-up__ring { position: relative; width: 44px; height: 44px; }
.ed-up__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ed-up__ring circle { fill: none; stroke-width: 4; }
.ed-up__trk { stroke: rgba(255, 255, 255, .28); }
.ed-up__bar { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .18s linear; }
.ed-up__pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ed-up__label { font-size: 12px; font-weight: 600; letter-spacing: -.02em; opacity: .92; }

/* 다 보낸 뒤 서버가 저장하는 동안 — 멈춘 게 아니라는 걸 원판을 돌려 보여 준다. */
.ed-up.is-saving .ed-up__ring svg { animation: ed-up-spin 1s linear infinite; }
@keyframes ed-up-spin { to { transform: rotate(270deg); } }

/* 작은 사진 위에서는 원판만 남긴다. */
.ed-up.is-sm { gap: 0; }
.ed-up.is-sm .ed-up__label { display: none; }
.ed-up.is-sm .ed-up__ring { width: 34px; height: 34px; }
.ed-up.is-sm .ed-up__pct { font-size: 9.5px; }

/* ---------- 사진이 너무 클 때 ---------- */
.sizepop { position: fixed; inset: 0; z-index: 130; }
.sizepop[hidden] { display: none; }
.sizepop__dim { position: absolute; inset: 0; background: rgba(12, 16, 24, .5); }
.sizepop__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 40px)); padding: 8px 24px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(12, 16, 24, .3);
  animation: sizepop-in .22s cubic-bezier(.2, .9, .3, 1.25);
}
@keyframes sizepop-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
}
/* 무거운 걸 든 캐릭터라 살짝 휘청이게 둔다. */
.sizepop__img { width: 150px; height: auto; animation: sizepop-wobble 1.6s ease-in-out infinite; }
@keyframes sizepop-wobble {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-3px); }
}
.sizepop__t { font-size: 18px; font-weight: 800; letter-spacing: -.04em; margin-top: 2px; }
.sizepop__d { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.sizepop__d b { color: var(--hot); font-weight: 700; }
.sizepop__file {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  margin-top: 14px; padding: 8px 12px; border-radius: 9px;
  background: var(--bg-sunken); font-size: 12.5px; color: var(--ink-3);
}
.sizepop__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sizepop__file b { flex: none; color: var(--hot); font-weight: 700; font-variant-numeric: tabular-nums; }
.sizepop__ok {
  width: 100%; height: 44px; margin-top: 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
}
.sizepop__ok:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .ed-up.is-saving .ed-up__ring svg,
  .sizepop__img,
  .sizepop__panel { animation: none; }
}

/* ---------- 첨부파일 내려받기 ----------
   큰 파일은 눌러도 한동안 아무 일이 없어 안 눌린 줄 알고 다시 누르게 된다.
   그렇다고 화면을 덮을 일은 아니다 — 진행 중인 것은 파일 하나이지 이 화면 전체가 아니고,
   덮어 버리면 정작 어느 첨부를 받는 중인지 누른 자리에서는 알 수 없다.
   버튼 자신이 진행 막대가 된다. 색이 차오르고 괄호 안의 크기가 백분율로 바뀐다. */
.btn.is-dling {
  position: relative; overflow: hidden;
  /* 받는 동안은 누르는 자리가 아니다 — 커서로 먼저 알린다(두 번 눌러도 JS 가 흘려보낸다). */
  cursor: default;
}
.btn__dlfill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(255, 255, 255, .26);
  transition: width .15s linear;
}
/* 채움 위로 글자가 올라와야 한다 — 아이콘도 같이 올린다. */
.btn.is-dling > svg,
.btn__dlname,
.btn__dlpct { position: relative; }
/* 파일 이름이 길어도 버튼이 늘어나지 않게 자른다. 백분율은 언제나 다 보인다. */
.btn__dlname {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.btn__dlpct { flex: none; font-variant-numeric: tabular-nums; }

/* 전체 크기를 모르면(Content-Length 가 없으면) 눈금을 못 낸다 — 띠가 흐른다. */
.btn.is-dlunsure .btn__dlfill {
  width: 42%; transition: none; animation: btn-dl-slide 1.15s ease-in-out infinite;
}
@keyframes btn-dl-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(250%); }
}
/* 다 받은 순간. 잠깐만 밝아졌다가 원래 버튼으로 돌아간다. */
.btn.is-dlok .btn__dlfill { width: 100%; background: rgba(255, 255, 255, .34); }

/* 못 받았을 때 — 첨부 상자 아래 한 줄. 카드도 alert 도 띄우지 않는다.
   .dl-box 가 flex-wrap 이라 그냥 두면 버튼 옆에 끼어 좁아진다(.dl-gate 와 같은 이유). */
.dl-box__msg {
  flex: 1 0 100%; width: 100%; margin-top: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: -.02em; color: var(--hot);
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-dlunsure .btn__dlfill { animation: none; width: 100%; opacity: .5; }
  .btn__dlfill { transition: none; }
}


/* 필수 분류 표시 */
.facet__req {
  margin-left: 5px; padding: 1px 5px; border-radius: 4px; font-style: normal;
  background: var(--hot-soft); color: var(--hot); font-size: 10px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.facet.is-missing { border-radius: 10px; box-shadow: 0 0 0 2px var(--hot); padding: 6px; margin: -6px; }
.facet.is-missing .facet__title { color: var(--hot); }

/* 버전 일괄 선택 — 고른 줄 바로 아래에 붙는다 */
.facet__bulk { margin: 2px 0 4px 22px; }

/* ---------- 커스텀 드롭다운 ---------- */
/* 기본 select 는 숨겨 두고(폼 전송·값 보관용) 눈에 보이는 목록만 새로 그린다. */
.dd { position: relative; display: inline-block; }
/*
 * 마크업이 곧 목록이라, dropdown.js 가 패널로 감싸기 전까지는 선택지가 화면에 그대로 쏟아진다
 * (글쓰기 화면이 잠깐 무너져 보이던 원인). 감싸고 나면 .dd__panel 의 자식이 되므로 이 규칙에서
 * 벗어나 제대로 보인다.
 */
.dd > .dd__opt { display: none; }
.dd__native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* 눌러서 여는 단추와 열리는 목록판. 글쓰기·회원가입·서버등록·글 상세가 같은 것을 쓴다. */
.dd__btn {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 44px;
  padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 14.5px; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.dd__btn:hover { border-color: var(--ink-4); }
.dd__btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,128,58,.12); }
.dd__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__caret {
  flex: none; width: 7px; height: 7px; margin-right: 2px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.dd__panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%;
  padding: 5px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff;
  box-shadow: 0 10px 28px rgba(16,24,40,.14);
  display: none;
  /* 고를 것이 가장 많은 축이 게임 버전(11개)이라 260px 이면 늘 스크롤이 생겼다.
     한 번에 다 보이게 올리되, 화면 밖으로 넘어가지 않도록 화면 높이로도 묶는다. */
  max-height: min(420px, 60vh); overflow-y: auto;
}
.dd.is-open .dd__btn { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,128,58,.12); }
.dd.is-placeholder .dd__label { color: var(--ink-4); }
.dd.is-open .dd__caret { transform: rotate(225deg) translate(-2px, -2px); }
.dd.is-open .dd__panel { display: block; }
.dd__opt {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: 14px; text-align: left; white-space: nowrap;
}
.dd__opt:hover, .dd__opt:focus-visible { background: var(--bg-soft); color: var(--ink); outline: none; }
.dd__opt.is-on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }

/* 미선택 상태로 등록을 누른 경우 */
.dd.is-missing .dd__btn { border-color: var(--hot); box-shadow: 0 0 0 3px rgba(200,38,43,.10); }

/* 제목 줄에 들어가는 말머리 */

/* 에디터 툴바 안에서는 작게 */
.ed__bar .dd__btn {
  height: 30px; padding: 0 8px; border-radius: 6px; font-size: 12.5px;
  border-color: transparent; background: none; color: var(--ink-2);
}
.ed__bar .dd__btn:hover { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.ed__bar .dd__caret { width: 6px; height: 6px; }
.ed__bar .dd__panel { min-width: 130px; }


/* 빈 목록 그림 — 아이콘 대신 일러스트를 쓴다. */
.empty__art { width: 132px; height: auto; margin: 0 auto 16px; display: block; }
.acc-empty .empty__art { width: 112px; margin-bottom: 12px; }
@media (max-width: 768px) { .empty__art { width: 108px; } }


/* 표처럼 폭이 좁은 칸에서는 다시 flex 로 — 가운데 정렬과 줄임표가 필요하다. */
.alist__author .by { display: inline-flex; align-items: center; max-width: 100%; }
.alist__author .by__face { vertical-align: baseline; }
.alist__author .by__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 상표 고지 — 링크는 본문보다 한 톤 밝게 두되 밑줄로 구분한다. */
.foot__legal-note a { color: var(--foot-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__legal-note a:hover { color: #fff; }
.drawer__corp-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 19. Toolbar / sort / search ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sortlinks { display: flex; align-items: center; gap: 3px; }
.sortlinks button { padding: 5px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink-3); font-weight: 500; }
.sortlinks button[aria-pressed="true"] { color: var(--ink); font-weight: 700; background: var(--bg-soft); }

.mcs-list { border-top: 2px solid var(--ink); }

/* 메인 서버 섹션 — 본문 열이 좁아 한 단계 촘촘하게 */

/* 마이페이지·서버 관리가 함께 쓰는 껍데기.
   한쪽 화면의 스타일 조각에만 두면, 그걸 안 불러오는 다른 화면이 폭 제한 없이 퍼진다. */
.acc {
  /* 컨테이너 1172 / 사이드 320 / 간격 40 */
  width: min(1172px, 100%);
  margin-inline: auto;
  padding: 40px 16px 96px;
  display: flex; flex-direction: column; gap: 28px;
}
.acc__title { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.acc__layout { display: flex; gap: 40px; align-items: flex-start; }
.acc__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.acc-me__img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; image-rendering: pixelated; background: var(--bg-soft); }

/* 카드 */
.acc-card {
  display: flex; flex-direction: column; gap: 32px;
  padding: 32px 40px 40px;
  border: 1px solid var(--line-strong); border-radius: 20px; background: #fff;
}
.acc-card--flush { padding: 0; gap: 0; overflow: hidden; }
.acc-card__title { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.acc-card__head { display: flex; align-items: center; gap: 10px; }
.acc-card__head--pad { padding: 24px 28px 16px; border-bottom: 1px solid var(--line); }
.acc-card__head .acc-count { margin-left: auto; font-size: 13px; color: var(--ink-3); }
/* 머리줄에 놓는 실행 버튼은 오른쪽 끝으로 민다 — 제목 바로 옆에 붙으면 둘이 한 덩이로 읽힌다. */
.acc-card__head > .btn,
.acc-card__head > .imgbtn { margin-left: auto; }
.acc-card__desc { font-size: 16px; color: var(--ink-2); line-height: 1.75; }
.acc-card__desc--warn { color: var(--hot); }
.acc-card__fields { display: flex; flex-direction: column; gap: 32px; }

/* 한 줄 = 왼쪽에 이름·값, 오른쪽에 그 줄에서 할 수 있는 일.
   마이페이지에서 시작했지만 서버 관리에서도 같은 줄을 쓴다 — 같은 짜임이면 같은 곳에 둔다. */
.acc-hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

.acc-row { display: flex; align-items: center; gap: 16px; }
.acc-row__left { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.acc-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.acc-field--icon { flex-direction: row; align-items: center; gap: 8px; }
.acc-field__label { font-size: 16px; font-weight: 600; color: var(--ink); }
.acc-field__label--mute { color: var(--ink-4); font-weight: 500; }
.acc-field__value { font-size: 16px; font-weight: 500; color: var(--ink-3); word-break: break-all; }
.acc-field__value:empty { display: none; }
/* 값 아래 한 줄 — 왜 필요한지 같은 곁말. 값보다 작고 흐리게 둬 값을 가리지 않는다. */
.acc-field__hint { font-size: 13px; line-height: 1.55; color: var(--ink-4, #b3b9c4); }

.acc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; min-width: 100px; padding: 0 36px; flex: none;
  border: 0; border-radius: 14px; background: var(--bg-sunken); color: var(--ink-2);
  font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.02em;
  cursor: pointer; transition: background .15s, color .15s;
}
.acc-btn:hover { background: var(--line-strong); }
.acc-btn--primary { background: var(--cta); color: #fff; }
.acc-btn--primary:hover { background: var(--cta-on); color: #fff; }
.acc-btn--danger { background: var(--hot-soft); color: var(--hot); }
.acc-btn--danger:hover { background: #fadada; }
.acc-card__hint { font-size: 12.5px; color: var(--ink-4); line-height: 1.7; }
/* 마이크로소프트 버튼은 공식 로고 규격대로 흰 바탕 + 회색 테두리를 쓴다. */
.acc-btn--ms {
  gap: 10px; padding: 0 24px;
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink);
}
.acc-btn--ms:hover { background: var(--bg-soft); }
.acc-btn--ms svg { width: 18px; height: 18px; flex: none; }

.ms-card { background: #fff; border-radius: 16px; padding: 22px 24px; }
.ms-card__label { font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.ms-card__sub { font-size: 12px; color: var(--ink-4); margin-top: 3px; }

/* 사이드 — 전문가 랭킹 */
.ms-rank { margin-top: 12px; }
.ms-rank__row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.ms-rank__row + .ms-rank__row { border-top: 1px solid var(--line); }
.ms-rank__no {
  width: 20px; flex: none; text-align: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink-4);
}
.ms-rank__row.is-top .ms-rank__no { color: var(--brand); }
.ms-rank__face { width: 28px; height: 28px; border-radius: 8px; flex: none; object-fit: cover; background: var(--bg-sunken); }
.ms-rank__name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-rank__name:hover { color: var(--brand-ink); }
.ms-rank__n { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.ms-rank__empty { padding: 18px 0; font-size: 13px; color: var(--ink-3); text-align: center; }

/* 서버 관리 — 마이페이지와 같은 결로 맞춘 조각들 */
.acc-me__badge {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.acc-me__badge svg { width: 26px; height: 26px; }

/* 추천 아이콘 — 글·질문과 같은 그림(.ico--like)을 쓴다. 크기만 자리마다 정한다. */
.sd__vote .ico { width: 22px; height: 22px; transition: transform .12s; }
.sd__vote:hover .ico { transform: translateY(-2px); }
.acc-me__stat .ico { width: 18px; height: 18px; }

/* ── 서버 목록 ─────────────────────────────────────── */
.srv {
  display: grid; align-items: center; gap: 0 18px;
  /*
   * 배너가 이 줄의 주인공이다. 홍보판 표준 크기(468×60)를 밑돌지 않게 두고 남는 자리는
   * 전부 배너가 가져간다 — 이름 칸에 1fr 을 주면 이름은 짧은데 칸만 길게 남는다.
   * 아이콘과 이름은 한 칸(.srv__id)을 같이 쓴다. 칸을 갈라 두면 이름이 짧은 서버에서
   * 아이콘과 이름 사이가 벌어져 같은 서버로 안 읽힌다.
   */
  grid-template-columns: 40px minmax(200px, 276px) minmax(468px, 1fr) 148px;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
  /* 광고 딱지(.srv__adtag)가 모서리에 붙는 기준이다. */
  position: relative;
}
.srv + .srv { margin-top: 10px; }
.srv:hover { border-color: var(--line-strong); box-shadow: 0 4px 16px rgba(15,23,42,.06); }

.srv__rank { text-align: center; color: var(--ink-3); font-family: var(--display); font-size: 17px; font-weight: 700; }
.srv__rank b { font-weight: 700; }

/* ── 돈 주고 산 맨 위 네 자리 ──
   묶음 상자로 감싸지 않는다. 카드(.srv) 안에 또 카드가 든 것처럼 보여서다 —
   줄 자체의 테두리 색과 오른쪽 위 딱지로만 가른다.
   금빛은 순위 메달(금·은·동)과 겹치지 않게 흐린 모래빛으로만 쓴다. */
.srv--ad {
  border-color: #e3cf9e;
  /* 산 자리는 가만히 있어도 떠 보여야 한다 — 여느 줄이 마우스를 얹어야 얻는 그림자를
     여기서는 처음부터 준다. 그래서 훑는 눈에 위 네 줄이 먼저 걸린다. */
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
/* 기본이 이미 떠 있으므로 호버는 한 단계 더 올려야 눌리는 줄이라는 것이 전해진다.
   테두리를 짙은 금빛으로 바꾸고 그림자를 넓게 깔아 갈라 둔다. */
.srv--ad:hover {
  border-color: var(--warn);
  box-shadow: 0 8px 24px rgba(138, 88, 6, .18);
}
/* 광고 자리의 광물 그림. 트로피(.srv__medal, 52px)보다 조금 작게 둔다 —
   등수가 아닌 자리가 순위 1~3위보다 커 보이면 안 된다. */
.srv__gem { display: block; width: 40px; height: 40px; margin: 0 auto; }

/* ── 산 자리와 순위표를 가르는 줄 ──
   말은 얹지 않는다. 줄 하나로 충분히 갈리고, 글자를 두면 훑는 눈에 또 하나의 읽을거리가
   걸린다. 가운데 span 은 비어 있어도 둔다 — 나중에 말을 되살릴 자리다. */
.sl__split {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 2px;
}
.sl__split::before, .sl__split::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* 줄 오른쪽 위 붙박이 '광고' 딱지.
   등수 자리에 넣으면 순위 아이콘을 밀어내므로 카드 모서리에 얹는다. 네모로 두는 이유는
   둥근 알약이 옆의 버전·에디션 칩과 같은 것으로 읽혀서다 — 저건 정보고 이건 표시다. */
.srv__adtag {
  position: absolute; top: 5px; right: 5px; z-index: 1;
  padding: 3px 8px; border-radius: 4px;
  background: var(--bg-sunken); color: var(--ink-4);
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.5;
}
/* 1~3위는 금·은·동 메달. 숫자가 그림 안에 들어 있어 색을 따로 주지 않는다. */
/* 1~3위 트로피는 한눈에 띄어야 순위표로 읽힌다 — 나머지보다 크게 세운다. */
/* 이제 그림은 1~3위 트로피뿐이다. 4위 이하는 도트체 숫자(.srv__no)로 찍는다. */
.srv__medal { display: block; width: 36px; height: 36px; margin: 0 auto; }

/* 4위 이하 순위 숫자.
   그림 스무 장을 받아 두는 대신 도트체로 찍는다 — 순위가 몇까지 늘어도 파일이 필요 없고,
   글자라 확대·화면 낭독기·복사가 모두 그대로 된다.

   22px 인 이유는 두 가지가 겹쳐서다.
   ① Galmuri11 은 11px 판이라 크기가 11의 배수여야 점이 어긋나지 않는다.
   ② 순위 칸이 40px(좁아지면 34px · 30px)이다. 이 글꼴은 한 자가 글자 크기의 0.67배라
      33px 로 두면 '20' 이 44px 이 되어 칸을 넘긴다. 22px 이면 29px 로 어느 폭에도 들어간다.
   그래서 좁은 화면에서도 크기를 따로 주지 않는다. */
.srv__no {
  display: block; font-family: var(--dot); font-size: 22px; font-weight: 400;
  line-height: 1; color: var(--ink-2); letter-spacing: .02em;
}
.srv-row__rank--top .srv__medal,
.srv__rank--top .srv__medal { width: 52px; height: 52px; }

/* 아이콘 + (이름 · 장르 · 소개) 한 덩어리. 아이콘은 줄어들지 않고, 나머지가 남는 폭을 쓴다. */
.srv__id { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* 배경을 깔지 않는다 — 장르 아이콘이 투명 배경이라 깔면 그림 뒤로 회색 타일이 비친다. */
.srv__icon {
  width: 48px; height: 48px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; flex: none;
}
/* 서버가 올린 아이콘은 대개 64px 도트라 뭉개지지 않게 그대로 두고, 장르 기본 아이콘은
   그림이라 부드럽게 줄인다 — 둘 다 무난한 auto 로 맞춘다. */
.srv__icon img { width: 100%; height: 100%; object-fit: cover; }
.srv__icon--empty { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink-3); }

.srv__main { min-width: 0; flex: 1; }
.srv__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.srv__name {
  font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none;
}
.srv__name:hover { color: var(--brand); }
.srv__badge { display: block; flex: none; width: 18px; height: 18px; }
.srv__tag {
  padding: 2px 7px; border-radius: 5px; background: var(--bg-sunken);
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
}
.srv__tag--edition { background: var(--brand-soft); color: var(--brand-ink); }

.srv__intro {
  margin-top: 5px; font-size: 13.5px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srv__intro:empty { display: none; }

/* 장르 배지 — 서버 이름 바로 아랫줄. 알약이 아니라 각진 배지라 아이콘 모서리와 결이 맞는다. */
.srv__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.srv__tag {
  padding: 4px 9px; border-radius: 5px;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; transition: background .12s, color .12s;
}
.srv__tag:hover { background: var(--brand); color: #fff; }

.srv__addr {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 0 0 8px 8px; background: var(--bg-soft);
  /*
   * 이 줄의 높이는 안에 무엇이 들어오느냐에 따라 달라진다 — 주소 버튼이 서면 약 36px,
   * 오픈 예정 안내만 서면 24px 다. 그대로 두면 광고 딱지와 아래 칩 사이 간격이 줄마다
   * 달라 보인다. 큰 쪽(주소 버튼)에 맞춰 바닥을 깔아 둔다.
   */
  min-height: 48px;
}
/* ── 접속자 수 ──
   회색 글씨로 두면 줄 끝에서 아무도 안 본다. 켜진 서버는 초록 점을 앞에 세우고 숫자를 키운다.
   붐비는 서버는 알약 모양으로 한 단계씩 더 튄다 — 100 초록 · 300 주황 · 500 빨강 · 1000 보라. */
.srv__players {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.srv__players b { font-family: var(--mono); font-size: 16px; font-weight: 800; color: #15803d; }
.srv__players--base::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.srv__players--t100, .srv__players--t300, .srv__players--t500, .srv__players--t1000 {
  padding: 4px 11px 4px 9px; border-radius: 999px;
}
.srv__players--t100 { background: #dcfce7; color: #166534; }
.srv__players--t100::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.srv__players--t300 { background: #ffedd5; color: #9a3412; }
.srv__players--t300 b { color: #ea580c; }
.srv__players--t500 { background: #fee2e2; color: #991b1b; }
.srv__players--t500 b { color: #dc2626; }
.srv__players--t1000 {
  background: linear-gradient(90deg, #7c3aed, #db2777); color: #fff;
  box-shadow: 0 3px 12px rgba(219,39,119,.35);
}
.srv__players--t1000 b { color: #fff; }
.srv__players--off { color: var(--ink-3); font-weight: 500; }
.srv__fire { width: 18px; height: 18px; flex: none; }

/* ── 인증 배지 설명 풍선 (layouts/verify-tip) ──
   배지 아래로 편다. 목록 첫 줄에서도 머리글에 가리지 않게 위가 아니라 아래다.
   줄(.srv)이 쌓임 맥락을 만들지 않으므로 z-index 만으로 다음 줄 위에 뜬다. */
.vtip { position: relative; display: inline-flex; align-items: center; cursor: help; outline: none; }
.vtip__body {
  position: absolute; left: -14px; top: calc(100% + 12px); z-index: 40;
  width: min(300px, calc(100vw - 32px)); padding: 15px 17px;
  border-radius: 14px; background: #1f2530; color: #e8ecf2;
  box-shadow: 0 12px 32px rgba(15,23,42,.28);
  font-family: var(--sans, inherit); font-size: 13px; font-weight: 400; line-height: 1.6;
  letter-spacing: -.01em; text-align: left; white-space: normal;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  pointer-events: none;
}
/* 꼬리 — 배지를 가리킨다. */
.vtip__body::before {
  content: ""; position: absolute; left: 20px; top: -6px;
  width: 12px; height: 12px; background: #1f2530; transform: rotate(45deg); border-radius: 2px;
}
.vtip:hover .vtip__body, .vtip:focus .vtip__body, .vtip:focus-within .vtip__body {
  opacity: 1; visibility: visible; transform: none;
}
.vtip__title {
  display: flex; align-items: center; gap: 7px; margin-bottom: 2px;
  font-size: 14.5px; font-weight: 700; color: #fff;
}
.vtip__title img { width: 16px; height: 16px; flex: none; }
.vtip__line { display: block; }
.vtip__line--sub { margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); color: #aab3c2; font-size: 12.5px; }
/* ── 접속자 수 자리에 들어서는 상태 한 마디 ──
   접속자 수는 오른쪽 끝에 붙는 숫자라 margin-left:auto 로 밀어 두지만, 이쪽은 읽는 문장이다.
   주소 다음에 바로 이어 붙여 왼쪽부터 읽히게 한다 — 앞 여백은 두지 않는다.
   숫자보다 한 단계 크고 진하게 — 작게 두면 회색 글씨에 묻혀 아무도 안 읽는다. */
.srv__players--notice {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 0; margin-right: auto;
  font-size: 15px; font-weight: 700; color: var(--ink-2);
}
/* 앞에 세우는 확성기. 줄 높이에 눌리지 않게 크기를 못 박고, 픽셀 그림이라 보간을 끈다. */
.srv__notice-ico {
  flex: none; display: block; width: 20px; height: 20px;
  image-rendering: pixelated;
}
.srv__copy {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-sunken);
  font-size: 16px; font-weight: 600; color: var(--ink-2);
}
.srv__copy:hover { border-color: var(--brand); color: var(--brand); }
.srv__copy svg { width: 13px; height: 13px; }

/* 배너와 접속 주소를 한 덩어리로 — 배너 아래에 주소가 붙는다. */
.srv__promo { min-width: 0; }
/* 장르 기본 배너도 서버가 올린 배너와 같은 자리를 그대로 채운다. */
.srv__banner--genre { width: 100%; height: 100%; object-fit: cover; }
.srv__banner {
  display: grid; place-items: center; width: 100%; aspect-ratio: 468 / 60;
  border-radius: 8px 8px 0 0; overflow: hidden; background: var(--bg-sunken);
}
.srv__banner img, .srv__banner video { width: 100%; height: 100%; object-fit: cover; }
.srv__banner--empty { font-size: 12px; color: var(--ink-4, #b3b9c4); }

/* 오른쪽 — 버전·에디션·추천을 같은 모양 칩으로 쌓는다. */
.srv__side { display: flex; flex-direction: column; gap: 5px; }
.srv__pill {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; padding-inline: 10px; border-radius: 7px;
  background: var(--bg-sunken); color: var(--ink-2);
  font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
/* 추천은 이 줄에서 유일하게 누르는 것이라 도드라지게 둔다.
   다만 아이콘이 초록 복셀이라 바탕까지 초록으로 채우면 아이콘이 묻힌다 — 옅게 깐다. */
.srv__pill--vote {
  background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand-line);
}
.srv__pill--vote:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--brand); }
.srv__pill--vote .ico { width: 14px; height: 14px; }

.svr__foot .btn { flex: 1; height: 52px; border-radius: 14px; font-size: 15px; font-weight: 700; }
.svr__foot .btn--ghost { flex: 0 0 34%; }
.sv-seg__b.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.sheet__foot .btn { flex: 1; }

.su-eye.is-on { color: var(--ink); }
.svr-body .sv-seg__b.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.svr-body .dd.is-open .dd__btn, .svr-body .dd__btn:focus-visible { border-color: var(--brand); }
.svr-body .dd__opt.is-on { color: var(--brand-ink); background: var(--brand-soft); }

/* 프로필 고르기 — 정품인증한 사람에게만 보이는 내 스킨 칸 */
.apick-opt--mc { position: relative; }
.apick-opt--mc img { }
.apick-mc {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 0; background: rgba(16, 20, 28, .72); color: #fff;
  font-size: 10.5px; font-weight: 700; text-align: center; letter-spacing: -.02em;
}

/* 현재 위치 — 게시판 묶음까지 보여 줘 같은 이름의 게시판을 가른다. */
.crumb__now { color: var(--ink); font-weight: 600; }


/* ---------- 댓글 스켈레톤 ----------
   댓글을 올리거나 지운 뒤 목록 조각을 받아 오는 동안 세워 두는 자리.
   빈 곳을 두면 목록이 사라진 것처럼 보이고, 스피너만 돌리면 무엇이 생길지 안 보인다. */
.cmt-skel { display: flex; gap: 12px; padding: 18px 0; }
.cmt-skel--card { background: #fff; border-radius: 16px; padding: 24px 26px; }

.cmt-skel__face { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.cmt-skel--card .cmt-skel__face { width: 48px; height: 48px; border-radius: 11px; }

.cmt-skel__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding-top: 3px; }
.cmt-skel__line { height: 11px; border-radius: 6px; }
.cmt-skel__line--sm { width: 26%; }
.cmt-skel__line--md { width: 62%; }

.cmt-skel__face,
.cmt-skel__line {
  background-color: var(--bg-sunken);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: cmt-skel-shine 1.15s ease-in-out infinite;
}
@keyframes cmt-skel-shine {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}
/* 움직임을 줄여 달라고 한 사람에게는 잔물결 없이 회색 칸만 보여 준다. */
@media (prefers-reduced-motion: reduce) {
  .cmt-skel__face,
  .cmt-skel__line { animation: none; background-image: none; }
}


/* ---------- 쪽 넘김 뼈대 ----------
   목록 조각을 받아 오는 동안 세워 두는 자리(pagelet.js).
   빈 곳을 두면 목록이 사라진 것처럼 보이고, 스피너만 돌리면 무엇이 올지 안 보인다.
   높이는 갈아 끼울 항목과 비슷하게 잡아 화면이 덜컥 접히지 않게 한다. */
.pg-skel {
  border-radius: var(--r);
  background-color: var(--bg-sunken);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: cmt-skel-shine 1.15s ease-in-out infinite;
}
.pg-skel--card { height: 132px; border-radius: var(--r-lg); }
.pg-skel--row  { height: 58px; }
.pg-skel--srv  { height: 168px; border-radius: var(--r-lg); }
.pg-skel--grid { aspect-ratio: 1 / 1.15; border-radius: var(--r-lg); }
/* 자료 격자는 교환소 카드보다 납작하다 — 같은 뼈대를 쓰면 넘길 때 목록이 훌쩍 길어졌다가
   글이 들어오면서 줄어들어 화면이 한 번 튄다. 실제 카드 비율(3:2 그림 + 세 줄)에 맞춘다.
   교환소(.shop-grid)는 세로형 그대로다 — 여기서만 좁힌다. */
.feed--grid .pg-skel--grid { aspect-ratio: 1 / 0.95; }
/* 목록이 flex/grid 라 간격은 목록이 들고 있다 — 세로로 쌓기만 하는 곳에는 여백을 준다. */
.pg-skel + .pg-skel { margin-top: 12px; }
[data-pagelet-list][aria-busy="true"] { display: block; }
/* 격자 목록(교환소)은 원래 칸 배치를 그대로 쓴다. */
[data-pagelet-skel="grid"][aria-busy="true"] { display: grid; }
[data-pagelet-skel="grid"] .pg-skel + .pg-skel { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .pg-skel { animation: none; background-image: none; }
}

/* ---------- 25. 팝업 껍데기 · 공유 팝업 ----------
   질문 화면의 평가·응원 팝업도 이 껍데기(.qm*)를 쓴다.
   공유는 글·질문·서버 어디서나 열리므로 전역에 둔다. */
.qm { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.qm[hidden] { display: none; }
.qm__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .46); }
.qm__box {
  position: relative; width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 28px; padding: 20px 28px 32px;
  text-align: center;
}
.qm__box--wide { width: min(620px, calc(100vw - 32px)); text-align: left; }
.qm__box--share { padding-bottom: 40px; }
.qm__x { display: flex; justify-content: flex-end; }
.qm__xbtn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--bg-sunken); color: #fff;
}
.qm__xbtn svg { width: 20px; height: 20px; }
.qm__xbtn:hover { background: var(--ink-4); }
.qm__err { margin-top: 14px; font-size: 13px; color: var(--danger); }
.qm__go {
  width: 100%; margin-top: 22px; height: 52px; border-radius: 12px;
  background: var(--brand); color: #fff; font-size: 15px; font-weight: 700;
}
.qm__go:hover { background: var(--brand-ink); }
.qm__go:disabled { background: var(--bg-soft); color: var(--ink-4); cursor: not-allowed; }

/* 공유 */
.qm-share__head { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.qm-share__art { width: 80px; height: 80px; color: var(--brand); }
.qm-share__title { font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.qm-share__row { display: flex; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.qm-share__btn {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink);
}
.qm-share__btn:hover { background: var(--line); }
.qm-share__btn svg { width: 24px; height: 24px; }

/* ── 로그아웃 폼 ───────────────────────────────────────────
   로그아웃은 링크가 아니라 POST 폼이다(남의 페이지에서 걸리는 것을 막는다).
   폼이 끼면 줄이 하나 더 생기므로, 자리는 없애고 안의 버튼이 원래 링크 자리를 그대로 쓰게 한다. */
.logout-form { display: contents; }
/*
 * 글씨처럼 보여야 하는 자리(머리말·서랍·더보기)를 위한 벗기기.
 *
 * :not(.acc-btn) 이 붙은 이유 — 마이페이지 로그아웃은 옆 줄들과 같은 '변경' 버튼(.acc-btn)이라야
 * 하는데, 이 규칙이 특이도로 이겨 배경과 테두리를 지워 버렸다. 그 버튼만 혼자 글씨처럼 보였다.
 * 클래스로 제 모양을 들고 온 버튼은 건드리지 않는다.
 */
.logout-form button:not(.acc-btn) {
  font: inherit; color: inherit; text-align: inherit;
  background: none; border: 0; cursor: pointer;
}
/* 더보기 화면의 약관 줄 — 옆 링크들과 같은 글씨로 보이게 맞춘다. */
.mr__legal-out { padding: 0; text-decoration: none; }
.mr__legal-out:hover { text-decoration: underline; }

/* ---------- 서버 등록 갈림길 (layouts/server-reg-pop) ----------
   "서버 등록" 을 누르면 서버장 길과 플레이어 길을 먼저 고른다.
   상자 치수·여백·닫기 단추는 안내 팝업(.crawl-modal)과 맞춘다 — 사이트에서 뜨는 상자가
   저마다 다른 모양이면 같은 서비스로 안 읽힌다. 두 길은 나란한 카드로 세워 견주어 고르게 하고,
   좁은 화면에서는 위아래로 쌓는다. */
.regpick { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.regpick[hidden] { display: none; }
.regpick__dim { position: absolute; inset: 0; background: rgba(15,20,32,.55); }
.regpick__box {
  position: relative; width: min(600px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--bg); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15,20,32,.28);
  padding: 28px 24px 24px;
  animation: rptIn .18s ease;
}
.regpick__x {
  position: absolute; right: 12px; top: 12px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: none; border: 0; cursor: pointer; color: var(--ink-3);
}
.regpick__x:hover { background: var(--bg-sunken); color: var(--ink); }
.regpick__x svg { width: 13px; height: 13px; }

.regpick__head { text-align: center; padding: 0 20px; }
.regpick__title {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -.035em; color: var(--ink); line-height: 1.4;
}
.regpick__sub { margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); letter-spacing: -.02em; }

.regpick__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
/*
 * 카드 안은 그림 · 제목과 설명 · 아래 꼬리 세 칸이다. 꼬리를 바닥에 붙여 두 카드의 설명 길이가
 * 달라도 '바로 등록 / 승인 후 등록' 이 같은 높이에 선다 — 두 길의 차이가 거기서 한눈에 갈린다.
 */
.regpick__card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 18px 16px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
  transition: border-color .12s, background .12s, box-shadow .12s, transform .12s;
}
.regpick__card:hover, .regpick__card:focus-visible {
  border-color: var(--rp-c); background: var(--rp-soft);
  box-shadow: 0 6px 18px rgba(15,20,32,.08);
}
.regpick__card:active { transform: scale(.99); }
/* 서버장 길은 브랜드 초록, 플레이어 길은 정보 파랑 — 색만 봐도 두 길이 갈린다. */
.regpick__card--owner  { --rp-c: var(--brand); --rp-soft: var(--brand-soft); --rp-ink: var(--brand-ink); }
.regpick__card--player { --rp-c: var(--info);  --rp-soft: var(--info-soft);  --rp-ink: #1d3f9e; }

.regpick__ico {
  display: grid; place-items: center; width: 56px; height: 56px; flex: none;
  border-radius: 14px; background: var(--rp-soft); color: var(--rp-c);
}
.regpick__ico svg { width: 34px; height: 34px; }
.regpick__card:hover .regpick__ico { background: var(--bg); }

.regpick__body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.regpick__body strong { font-size: 16px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.regpick__body span { font-size: 13px; line-height: 1.6; color: var(--ink-3); letter-spacing: -.02em; }

.regpick__meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--rp-ink);
}
.regpick__meta em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.regpick__meta svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  /* 좁은 화면에서는 바닥에서 올라오는 시트로 — 가운데 띄우면 주소창·탭바 사이에 끼어 잘린다(.acc-pop 과 같은 이유). */
  .regpick { place-items: end stretch; padding: 0; }
  .regpick__box {
    width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0;
    padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
    animation: regpickUp .25s ease;
  }
  .regpick__title { font-size: 18px; }
  .regpick__grid { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  /* 쌓으면 세로가 길어진다 — 그림을 옆으로 돌려 카드 한 장을 낮게 만든다. */
  .regpick__card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; padding: 16px 14px 12px; }
  .regpick__ico { width: 48px; height: 48px; border-radius: 12px; grid-row: span 1; }
  .regpick__ico svg { width: 28px; height: 28px; }
  .regpick__meta { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; }
}
@keyframes regpickUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .regpick__box { animation: none; }
  .regpick__card { transition: none; }
  .regpick__card:active { transform: none; }
}

/* ── 같은 소식의 MCNOW 기사로 건너가는 줄 (게시글 본문 아래) ── */
.mcnow-link { display: flex; align-items: center; gap: 14px; margin: 28px 0 8px; padding: 16px 20px; border-radius: 14px; background: #111315; color: #fff; text-decoration: none; }
.mcnow-link:hover { background: #1b1f22; }
.mcnow-link__brand { font-weight: 900; font-size: 18px; letter-spacing: -.04em; flex: none; }
.mcnow-link__brand b { color: #b6ff3b; }
.mcnow-link__t { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.mcnow-link__go { color: #b6ff3b; font-weight: 900; }