/* ── 게시판 본문(블록 렌더) ────────────────────────────────────────────────
   ⚠ **`skin.css` 를 안 건드린다** — 2,448줄짜리 충돌 지대이고 지금 다른 웨이브가
   그 안에 있다(`web/home.css`·`web/codex.css` 와 같은 결정).
   ⚠ 중단점을 쓰지 않는다 — 쓰려면 `{620,720,900,1100,1240}` 다섯 중 하나여야
   한다(`tests/mobile.test.js`). 이 파일은 흐르는 배치라 필요가 없다. */
.boardlist-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.boardlist-head .title { grid-column: 2; margin-bottom: 0; }
.boardlist-head #boardwritebtn { grid-column: 3; justify-self: end; }

/* ── 본문은 **읽는 글**이다 (2026-09-10 사용자 지적: 「폰트 색상도 어둡고 글자도
   작으니 보이지도 않고」) ─────────────────────────────────────────────────
   여기는 사람이 쓴 글이고 다른 탭(내 빌드·계산)은 기계가 그린 데이터다. 둘은 눈이
   하는 일이 다른데 — 읽기 대 훑기 — 크기가 같으면 그 차이가 화면에 안 드러난다.
   `--fs-lg` 는 주석에 「훑는 화면 본문(**게시판**·프로필)」이라고 쓰임까지 적혀
   있으면서 정작 게시판 본문이 안 쓰고 있었다(상속으로 13px 이 내려왔다).
   실측(2026-09-09, 조회 246 짜리 빌드 글): 문서 3,922px 에 요소 602개인데
   **15px 이상 글자가 9개(1.5%)** 였고 13px 이 462자리였다. */
.bb { margin-top: var(--sp-4); font-size: var(--fs-lg); line-height: 1.85; color: var(--text); }
.bb-p { margin: 0 0 var(--sp-4); }
/* 절 제목. 본문이 15px 이 되면 h2 기본값(1.5em)은 22.5px 이라 조금 크다 —
   21px 로 못박아 본문과의 사이를 일정하게 둔다. */
.bb-h { margin: var(--sp-6) 0 var(--sp-2); font-family: var(--font-title); font-size: 21px; }
.bb-list { margin: 0 0 var(--sp-3) var(--sp-5); }
.bb-li { margin-bottom: var(--sp-1); }
.bb-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); }
.bb-td { border: 1px solid var(--line); padding: var(--sp-1) var(--sp-2); }
.bb-hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.bb-al { text-align: left; }
.bb-ac { text-align: center; }
.bb-ar { text-align: right; }
/* ── 그림 덩어리는 **선으로** 본문에서 떼어낸다 (2026-09-10) ────────────────
   캡션(`.bb-cap`)을 본문과 같은 크기·색으로 올리기로 하면서(아래) 위계를 만들
   수단이 하나 사라진다. 그 자리를 색이 아니라 **선**이 맡는다 — 사용자 결정
   (「색이 아닌 구분선으로 구분 효과를 주는 게 좋지 않을까」).
   위아래 둘 다 긋는 것은 넷을 나란히 놓고 고른 것이다: 캡션 위에만 그으면
   캡션과 **다음 문단**이 여전히 안 갈린다(실측: 그 둘이 붙어 보였다). */
.bb-icons {
  margin: var(--sp-4) 0; padding: var(--sp-3) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bb-icon-folder {
  margin: 0 0 var(--sp-3); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.bb-icon-folder-title {
  cursor: pointer; padding: var(--sp-2) var(--sp-3); color: var(--text-2);
  font-family: var(--font-title); font-size: var(--fs-sm);
}
.bb-icon-folder[open] > .bb-icon-folder-title { border-bottom: 1px solid var(--line); color: var(--text); }
/* ⚠ 폴더 안에서는 그 선을 **뺀다** — 폴더가 이미 테두리를 갖고 있어 두 겹이 된다. */
.bb-icon-folder > .bb-icons { margin: 0; padding: var(--sp-3); border: 0; }
/* ── 아이콘 무리는 **격자**다 (2026-08-29 사용자 지적: 「너무 지저분한 거 같아」) ──
   전에는 `flex-wrap` 이라 칩이 흘러가며 줄바꿈됐다. 이름 길이가 제각각이라
   (「파도 어머니의 망토」 대 「빛」) 줄 끝이 들쭉날쭉했고, 장비 25개쯤 되면
   **어디까지가 한 항목인지** 눈으로 못 갈랐다.

   `auto-fill` 이라 칸 수는 폭이 정한다 — 좁은 화면에서 저절로 줄어든다.
   ⚠ **이름을 안 자른다.** `text-overflow: ellipsis` 로 줄이면 「지옥 토벌
   기병대의…」가 되어 **무엇인지 알 수 없다** — 아이템 이름은 그 자체가 정보다.
   칸 안에서 줄바꿈시키고 위를 맞춘다(`align-items: start`).
   ⚠ **`minmax(0, …)` 이 아니라 `minmax(11rem, …)`** — 최소값이 0 이면 긴 이름이
   한 글자씩 끊긴다. 11rem 은 「신도의 애뮬릿」이 한 줄에 들어가는 폭이다. */
.bb-iconrow {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-2); align-items: start;
  list-style: none; margin: 0; padding: 0;
}
/* ⚠ **좁은 화면에서는 칸을 좁혀 2열을 지킨다.** 11rem 을 그대로 두면 390px 폭에서
   **1열**이 되어 장비 26개가 980px 높이가 된다(실측 2026-08-29) — 흘림보다도
   길어져서, 「지저분하다」를 고치려다 「너무 길다」를 만든다. 8rem 이면 같은
   폭에서 2열이고 이름은 여전히 안 잘린다(칸 안에서 줄바꿈된다).
   실측(장비 26개, 이름 잘림 0 · 가로 넘침 0):
       폭 1440·1100·900·600·390·320  →  열 6·5·4·4·2·1
       줄 높이  182·220·258·287·496·980px
   ⚠ **320px 은 1열로 둔다.** 거기서 2열로 만들면 칸이 120px 쯤이 되어 긴 이름이
   서너 줄로 접히고 **오히려 더 길어진다** — 재 보고 안 건드리기로 한 것이다. */
/* ⚠ **8rem → 9rem**(2026-09-10). 위 실측의 잣대는 「신도의 애뮬릿이 한 줄에
   들어간다」인데, 이름이 12px → 15px 이 되고 아이콘이 28 → 34px 이 되면서 8rem
   (128px)의 이름 칸이 90px = 6자로 줄어 그 잣대가 깨진다. 9rem(144px)이면
   이름 칸 106px = 7자라 다시 들어가고, 390px 에서 2열도 그대로다(계산).
   ⚠ 여기는 **계산이지 실측이 아니다** — `tools/mobile-measure.mjs` 로 재 볼 것. */
@media (max-width: 620px) {
  .bb-iconrow { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
}
/* 글리프가 **늘 깔려 있고** 그림이 그 위에 얹힌다 — 그림이 없거나 못 불러오면
   `data-fallback="제거"` 가 img 를 떼고 글리프가 드러난다(깨진 그림 금지). */
.bb-icon { position: relative; }
/* ⚠ **`align-items: start`** — 이름이 두 줄이 되면 아이콘이 가운데로 내려가
   윗줄이 어긋난다. 격자에서는 그게 바로 눈에 띈다.
   ⚠ **아이콘은 안 줄어든다**(`flex-shrink: 0`, `.bb-icon-g` 쪽) — 안 막으면
   긴 이름이 아이콘을 눌러 찌그러뜨린다. */
.bb-icon a { display: flex; align-items: start; gap: var(--sp-1); text-decoration: none; }
/* ⚠ 이름이 커지면(아래) 아이콘도 같이 커져야 한다 — 28px 옆에 15px 글자를 두면
   글자가 그림보다 커 보인다. 34px 은 이름 두 줄(15px×1.5=22.5px 두 줄=45px)보다
   여전히 작아서 격자 줄 높이를 정하는 쪽은 이름 그대로다. */
.bb-icon-g { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
             border: 1px solid var(--line); border-radius: 6px; color: var(--text-3); }
.bb-icon-i { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 6px; }
/* ⚠ **첫 줄을 아이콘(34px) 가운데에 맞춘다.** `line-height: 34px` 로 맞추면
   한 줄일 때는 예쁜데 **두 줄이 되면 줄간격이 34px 로 벌어진다.** 대신 위쪽
   여백으로 밀어 첫 줄만 맞추고 줄간격은 본문 그대로 둔다.
   값은 재는 것이지 고르는 것이 아니다: (34 − 15×1.5) / 2 ≈ 6px. */
/* ⚠ **회색이 아니라 본문색이다**(2026-09-10 사용자 결정). 아이템 이름은 캡션과
   달리 **정보 그 자체**라 「부연」이 아니다. 갈림은 위 `.bb-icons` 의 선이 맡는다. */
.bb-icon-n { font-size: var(--fs-lg); color: var(--text); line-height: 1.5; padding-top: 6px; }

/* ── 목차 (2026-08-29) ────────────────────────────────────────────────────
   작성자가 고른 제목만 글 차례대로 선다. 작은 제목(h3)은 한 칸 들여쓴다.
   ⚠ **번호를 안 붙인다**(`list-style: none`). 작성자가 일부만 골랐을 때
   「1·2·5」처럼 뛰면 빠뜨린 것처럼 보인다 — 고른 것만 보이는 게 맞다. */
.bb-toc {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: 8px;
}
/* 「목차」라는 이름. **본문 제목보다 작고 흐리게** — 길잡이지 글의 절이 아니다. */
.bb-toctitle {
  margin: 0 0 var(--sp-2); font-family: var(--font-title);
  font-size: var(--fs-sm); color: var(--text-3); letter-spacing: .04em;
}
.bb-toclist { list-style: none; margin: 0; padding: 0; }
.bb-tocline { margin: 2px 0; font-size: var(--fs-sm); }
/* 작은 제목은 들여쓰고 한 톤 흐리게 — 층이 눈에 보여야 목차 노릇을 한다. */
.bb-toc3 { padding-left: var(--sp-4); color: var(--text-2); }
.bb-toclink { color: var(--text-2); text-decoration: none; }
.bb-toclink:hover, .bb-toclink:focus-visible {
  color: var(--gold-1); text-decoration: underline; text-underline-offset: 3px;
}
/* ⚠ **눌러서 뛴 자리가 머리말에 가리지 않게 한다.** 게시판 글은 머리말이
   붙박이가 아니지만, 제목이 화면 맨 위에 딱 붙으면 「여기가 시작」이 안 보인다. */
.bb-h { scroll-margin-top: var(--sp-5); }

/* ⚠ **본문과 같은 크기·색이다**(2026-09-10 사용자 결정). 그림 설명도 작성자가
   쓴 글이라 12px 회색으로 깔아 두면 읽히지 않는다. 본문과 갈리는 몫은 위
   `.bb-icons` 의 위아래 선이 진다 — 색이 아니라 선으로. */
.bb-cap { font-size: var(--fs-lg); color: var(--text); line-height: 1.8; margin-top: var(--sp-2); }
/* 「모름」은 **드러낸다.** 조용히 사라지면 사람이 자기 글이 지워진 줄 안다. */
.bb-unknown { color: var(--text-3); border-bottom: 1px dashed var(--line); }

/* ── 2차: 레벨 배지 · 링크 없는 칩 · 캡션 자리 ─────────────────────────── */
/* 레벨 배지 — 왼쪽에 붙는다. 숫자라 --font-num 이 맞다. */
.bb-lv {
  flex: 0 0 auto; align-self: flex-start;
  padding: 2px 8px; border-radius: 10px;
  background: var(--m-line, #4a3f2e); color: var(--text, #e6dcc4);
  font-family: var(--font-num); font-size: 13px; white-space: nowrap;
}
/* 도감 페이지가 없는 칩(기술·재주·패시브·일리시드) — 링크가 아니므로
   커서·밑줄을 안 준다. 「눌러도 아무 일이 안 일어나는」 링크를 안 만드는 것이
   이 클래스의 목적이다. */
.bb-nolink > span { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: default; }
/* 캡션 자리 둘. below = 지금까지의 동작이라 **옛 글이 그대로** 그려진다.
   ⚠ **여기 `gap` 을 주지 않는다.** `.bb-cap` 이 이미 `margin-top: var(--sp-1)` 을
   갖고 있어서 gap 을 얹으면 이미 쓰인 글의 간격이 **두 배**가 된다 — 옛 동작이
   기본값이어야 한다는 규칙이 CSS 쪽에서 깨지는 자리다. 세로 쌓기는 그대로 두고,
   flex 로 만드는 것은 `.bb-lv` 의 `align-self` 가 두 자리에서 다 먹게 하려는 것뿐. */
.bb-cap-below { display: flex; flex-direction: column; }
.bb-cap-side { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bb-cap-side > .bb-cap { margin: 0; }

/* ── 편집기 ──────────────────────────────────────────────────────────── */
.bbe { border: 1px solid var(--line); border-radius: 8px; padding: var(--sp-3); }
.bbe-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap;
           gap: var(--sp-2); padding: var(--sp-2); background: var(--surface-2);
           border-bottom: 1px solid var(--line); }
.bbe-grp { display: flex; gap: var(--sp-1); align-items: center; }
.bbe-btn { padding: 2px var(--sp-2); border: 1px solid var(--line);
           border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; }
.bbe-btn.on { background: var(--surface-3); color: var(--accent); }
.bbe-sel { min-width: 72px; }
.bbe-color { width: 32px; height: 24px; padding: 0; border: 1px solid var(--line); }
.bbe-warn { color: var(--warn); font-size: var(--fs-sm); }
/* ── 초점 교대(2차 Task 8) ────────────────────────────────────────────
   문서 한 흐름. 블록 사이 간격은 삽입 자리가 갖는다. */
.bbe-doc { display: flex; flex-direction: column; }
/* 블록 한 덩이 — 왼쪽 여백에 손잡이. */
.bbe-blk { position: relative; padding-left: 28px; }
.bbe-blk.on { background: color-mix(in srgb, var(--m-line, #4a3f2e) 22%, transparent); border-radius: 6px; }
.bbe-body { min-height: 1.6em; }
/* 손잡이 — hover/초점/선택일 때만 **보인다**(DOM 에는 늘 있다 — `hidden` 을 쓰면
   하네스의 위임 클릭이 안 닿고 그물이 죽는다). */
.bbe-handle {
  position: absolute; left: 0; top: 2px; display: flex; flex-direction: column; gap: 1px;
  opacity: 0; transition: opacity .12s;
}
.bbe-blk:hover .bbe-handle,
.bbe-blk:focus-within .bbe-handle,
.bbe-blk.on .bbe-handle { opacity: 1; }
.bbe-hbtn {
  width: 22px; height: 18px; line-height: 1; padding: 0;
  background: transparent; color: var(--text-2, #9a8e76);
  border: 1px solid var(--m-line, #4a3f2e); border-radius: 4px; cursor: pointer; font-size: 11px;
}
.bbe-hbtn:hover { color: var(--text, #e6dcc4); }
/* 삽입 자리 — 블록 사이의 「+」.
   ⚠ **늘 보인다(흐리게).** 처음엔 `opacity: 0` 에 높이 10px 이라 hover 전까지
   시각적 단서가 **하나도** 없었다. 툴바에서 블록 추가 단추 여섯을 빼고(조작기
   16→9) 이 「+」로 접었으므로, 이게 안 보이면 **블록을 만드는 눈에 보이는 길이
   0개**가 된다 — 실제로 사용자가 「+ 가 아예 없는데?」로 걸렸다(2026-08-26).
   「조작기를 줄인다」와 「길을 감춘다」는 다르다. */
.bbe-ins { position: relative; height: 22px; display: flex; align-items: center; }
.bbe-ins::before { content: ''; flex: 1; height: 1px; background: transparent; transition: background .12s; }
.bbe-ins:hover::before { background: var(--m-line, #4a3f2e); }
.bbe-insbtn {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; line-height: 1; padding: 0; border-radius: 50%;
  background: var(--bg, #0b0907); color: var(--text-2, #9a8e76);
  border: 1px solid var(--m-line, #4a3f2e); cursor: pointer; font-size: 13px;
  opacity: .4; transition: opacity .12s;
}
.bbe-ins:hover .bbe-insbtn, .bbe-insbtn:focus { opacity: 1; }
/* 문서가 비었을 때 — **빈 화면에 10px 띠 하나**는 안내가 아니다. */
.bbe-empty { color: var(--text-2, #9a8e76); font-size: var(--fs-sm); margin: 0 0 var(--sp-1); }
/* ── 삽입 메뉴 · 표 맥락 막대(2차 Task 10) ───────────────────────────── */
.bbe-menu {
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  background: var(--pane, #221c15); border: 1px solid var(--m-line, #4a3f2e); border-radius: 8px;
}
.bbe-menurow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bbe-mlabel { color: var(--text-2, #9a8e76); font-size: 12px; min-width: 34px; }
.bbe-mi {
  padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
  background: transparent; color: var(--text, #e6dcc4); border: 1px solid var(--m-line, #4a3f2e);
}
.bbe-mi:hover { background: color-mix(in srgb, var(--m-line, #4a3f2e) 40%, transparent); }
.bbe-mi-lv { min-width: 26px; text-align: center; font-family: var(--font-num); }
/* 표 맥락 막대 — 표 블록 **위에** 붙는다. 상단 툴바에 붙었다 떨어지면 다른
   단추들의 자리가 흔들린다(그래서 여기로 나왔다). */
.bbe-tablebar { display: flex; gap: 4px; margin-bottom: 4px; }
.bbe-text { width: 100%; min-height: 3em; resize: vertical; }
/* 아이콘 블록은 아이콘을 보면서 그 아래에 캡션을 쓴다. */
.bbe-icon-edit { display: flex; flex-direction: column; }
.bbe-folder-name {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2);
  color: var(--text-2); font-size: var(--fs-sm);
}
.bbe-folder-input { flex: 1; width: auto; min-height: 2em; resize: none; }
/* 표 셀(셀 편집 웨이브). `.bbe-text` 뒤에 와야 min-height·resize 를 이긴다 —
   같은 우선순위라 소스 순서가 가른다. */
.bbe-cellgrid { width: 100%; border-collapse: collapse; }
.bbe-cellgrid td { border: 1px solid var(--line); padding: 2px; }
.bbe-cell { min-height: 1.6em; resize: none; }
.bbe-msg { display: block; margin-top: var(--sp-2); }

/* ── 엔티티 픽커(스펙 §3, Task 8) ────────────────────────────────────── */
.bbe-pick { border: 1px solid var(--line); border-radius: 6px; padding: var(--sp-2); margin-top: var(--sp-2); }
.bbe-picktabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.bbe-picktab { padding: 2px var(--sp-2); border: 1px solid var(--line); border-radius: 4px;
               background: var(--surface); color: var(--text-2); cursor: pointer; }
.bbe-picktab.on { color: var(--accent); border-color: var(--accent); }
/* 종류 거르개(2026-08-26). 모집단이 5,298이라 글자 검색만으로는 못 찾는다.
   ⚠ 줄바꿈을 허용한다 — 열한 갈래라 좁은 폭에서 한 줄에 안 들어간다. */
.bbe-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.bbe-kind {
  padding: 2px var(--sp-2); border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--fs-sm);
}
.bbe-kind:hover { color: var(--text); border-color: var(--text-3); }
.bbe-kind.on { color: var(--accent); border-color: var(--accent); }
.bbe-pickbulk {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center;
  margin-bottom: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--line); border-radius: 6px;
}
.bbe-pickbulk::before { content: '장비 묶음'; color: var(--text-3); font-size: var(--fs-sm); }
.bbe-pickbulkbtn {
  padding: 3px var(--sp-2); border: 1px solid var(--m-line, #4a3f2e); border-radius: 999px;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--fs-sm);
}
.bbe-pickbulkbtn:hover, .bbe-pickbulkbtn:focus-visible { color: var(--accent); border-color: var(--accent); }
.bbe-pickbulkbtn span { color: var(--text-3); }
.bbe-pickq { width: 100%; margin-bottom: var(--sp-2); }
.bbe-pickgrid { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0;
                max-height: 260px; overflow-y: auto; }
.bbe-pickcell { position: relative; display: flex; align-items: center; gap: var(--sp-1);
                padding: 2px var(--sp-2); border: 1px solid var(--line); border-radius: 4px;
                background: var(--surface); color: var(--text); cursor: pointer; }
.bbe-pickcell:focus-visible { outline: 2px solid var(--accent); }
.bbe-pg { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-3); }
.bbe-pi { position: absolute; left: 8px; width: 24px; height: 24px; }
.bbe-pn { font-size: var(--fs-sm); }

/* ── 목차 편집 표면 (2026-08-29) ─────────────────────────────────────────
   글 안의 제목을 다 늘어놓고 켜고 끈다. **글자는 못 고친다** — 목차 줄의 글자는
   제목에서 그때그때 가져오므로 여기서 칠 자리를 주면 둘이 갈린다. */
.bbe-tocedit { display: grid; gap: var(--sp-2); }
.bbe-tocpicks { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.bbe-tocpick {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer;
}
.bbe-tocpick:hover { color: var(--text-1); border-color: var(--line-1); }
/* 고른 것. **색만 바꾸지 않는다** — 테두리까지 굵어져 형태로도 드러난다. */
.bbe-tocpick.on { color: var(--gold-1); border-color: var(--gold-2); font-weight: 600; }
/* 작은 제목 표시. 목차에서 들여쓰는 것과 같은 층을 여기서도 보여 준다. */
.bbe-tocsub { color: var(--text-3); }
.bbe-tocempty { color: var(--text-3); font-size: var(--fs-sm); margin: 0; }

/* 인쇄(=PDF 저장) 전용 칸. **화면에서는 안 보인다.**
 *
 * ⚠ `hidden` 속성을 쓰지 않는다 — 그러면 되살리는 쪽이 `!important` 를 쓸 수밖에
 *   없고, 그건 `tests/hidden-attr.test.js` 가 막는 자리다(「`hidden` 이 조용히 안
 *   먹는」 사고를 네 번 겪고 세운 규칙). 되살리는 것은 `print.css` 가 **id 특정도**로
 *   한다 — 클래스(0,1,0) < id(1,0,0) 이라 껍데기 싣는 차례에 안 물린다. */
.printonly { display: none; }