@charset "utf-8";
/* ============================================================
   liveserver blog. 워드프레스 보강분

   app.css 는 본사이트 원본 그대로다. 손대지 않는다.
   워드프레스만 만들어 내는 마크업(관리바·블록·댓글·페이지넘기기)이
   그 디자인 안에 들어앉도록 여기서만 맞춘다.
   ============================================================ */

/* ── 관리바 ─────────────────────────────────────────────
   로그인 상태에서는 화면 위 32px 를 워드프레스 관리바가 가져간다.
   sticky 헤더를 그만큼 내리지 않으면 헤더가 관리바 밑에 깔린다. */
body.admin-bar .header { top: 32px; }
body.admin-bar .article__toc { top: 140px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* ── 접근성 ─────────────────────────────────────────────
   워드프레스 관례인 .screen-reader-text. 화면에서만 숨기고 읽어 주기는 남긴다.
   display:none 으로 지우면 스크린리더에서도 사라진다. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 999; width: auto; height: auto;
  margin: 0; padding: 10px 18px; clip: auto; clip-path: none;
  background: var(--brand); color: #fff; border-radius: var(--r); font-weight: 600;
}

/* ── 목차 없는 글 ───────────────────────────────────────
   .article 은 본문 + 240px 목차 2단이다. 목차가 없으면 빈 칸이 남으므로 1단으로 되돌린다. */
.article--notoc { grid-template-columns: minmax(0, 1fr); gap: 0; }
.article--notoc > article { max-width: 820px; }

/* 읽고 있는 자리의 목차 항목. app.css 의 :hover 와 같은 색을 쓰되 굵기로 구분한다. */
.article__toc a.is-active { color: var(--brand); font-weight: 700; }

/* ── 글 목록 ────────────────────────────────────────────
   상단 고정 글은 목록에서 한 번에 알아볼 수 있어야 한다. */
.post-item.sticky .meta::before {
  content: '고정'; background: var(--ink); color: #fff;
  border-radius: var(--r-pill); padding: 2px 9px; font-size: 11px; font-weight: 700;
}

/* ── 페이지 넘기기 ──────────────────────────────────────
   워드프레스가 .navigation.pagination 으로 뱉는다. 알약 버튼과 같은 어휘로 맞춘다. */
.navigation.pagination,
.navigation.comments-pagination { margin-top: 44px; }
.navigation .nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.navigation .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--ink); background: #fff;
  transition: border-color .15s, background .15s, color .15s;
}
.navigation .page-numbers:hover { border-color: var(--ink); }
.navigation .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.navigation .page-numbers.dots { border-color: transparent; color: var(--muted-2); }

/* ── 검색창 ─────────────────────────────────────────────── */
.lsb-search { display: flex; gap: 8px; }
.lsb-search input[type='search'] {
  flex: 1; height: 44px; padding: 0 16px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink);
}
.lsb-search input[type='search']:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.lsb-search .btn { height: 44px; }

/* ── 코드블록 ──────────────────────────────────────────
   본사이트의 어두운 판(.prose pre.code) 대신 면 하나로 조용히 구분한다.
   접속 주소 한 줄짜리 블록이 대부분인데, 검은 판은 그 한 줄을 과장한다.

   긴 한 줄은 **접는다**. 가로 스크롤로 두면 화면에 보이는 것은 주소의 앞 토막뿐이고,
   정작 비교해야 할 포트와 UUID 는 스크롤 밖에 있다. 접어 두면 한눈에 다 들어온다. */
.prose pre {
  margin: 0;
  background: var(--tint);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 18px 20px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.prose pre code {
  background: none; padding: 0; border-radius: 0;
  color: inherit; font-size: inherit;
}

/* 복사 버튼. JS 가 붙인다(.has-copy). 평소엔 거의 보이지 않다가 블록에 손이 가면 드러난다. */
.prose pre.has-copy { position: relative; padding-right: 72px; }
.prose pre .lsb-copy {
  position: absolute; top: 10px; right: 10px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted-2);
  font-size: 12px; font-weight: 600; line-height: 1;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.prose pre.has-copy:hover .lsb-copy,
.prose pre .lsb-copy:focus-visible { opacity: 1; }
.prose pre .lsb-copy:hover { color: var(--brand); border-color: var(--brand); }
/* 터치 화면에는 hover 가 없다. 거기서는 늘 보여 준다. */
@media (hover: none) {
  .prose pre .lsb-copy { opacity: 1; }
}

/* ── 구텐베르크 블록 ────────────────────────────────────
   .prose 는 손으로 쓴 HTML 을 기준으로 만든 규칙이라, 블록 에디터가 끼워 넣는
   래퍼(figure.wp-block-image, .wp-block-group …)에는 그대로 걸리지 않는다. */

.prose figure { margin: 34px 0 10px; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.prose figcaption,
.prose .wp-element-caption {
  margin-top: 10px; font-size: 13px; color: var(--muted-2); line-height: 1.6; text-align: left;
}

.prose .alignleft  { float: left;  margin: 6px 26px 18px 0; max-width: 42%; }
.prose .alignright { float: right; margin: 6px 0 18px 26px; max-width: 42%; }
.prose .aligncenter { margin-left: auto; margin-right: auto; }
.prose .alignwide, .prose .alignfull { margin-left: 0; margin-right: 0; }
.prose .wp-block-image.alignleft img,
.prose .wp-block-image.alignright img { border-radius: var(--r); }

/*
 * 블록 에디터의 인용 블록. app.css 의 .prose blockquote 가 이미 면 있는 상자로 꾸미므로
 * 패딩을 건드리면 안 된다(한 번 0 으로 덮었다가 납작한 띠가 됐다).
 * 블록 라이브러리가 기본으로 넣는 왼쪽 선과 기울임만 걷어낸다.
 */
.prose .wp-block-quote,
.prose .wp-block-pullquote {
  border-left: 0; font-style: normal;
}
.prose .wp-block-quote > :first-child,
.prose .wp-block-pullquote > :first-child { margin-top: 0; }
.prose .wp-block-quote cite,
.prose .wp-block-pullquote cite {
  display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--muted-2);
}

.prose .wp-block-separator {
  border: 0; border-top: 1px solid var(--line-2); margin: 44px 0;
}
.prose .wp-block-separator.is-style-dots { border: 0; text-align: center; }

/*
 * 표.
 *
 * 블록 라이브러리는 셀마다 1px 테두리를 둘러 격자를 만든다. 본사이트 표는 그렇지 않다.
 * 세로선과 바깥 상자를 모두 버리고 행 사이 실선 하나로만 끊는다. 선이 줄어들수록
 * 눈은 칸이 아니라 값을 따라간다. 격자를 걷어내고 app.css 의 규칙이 드러나게 한다.
 */
.prose .wp-block-table { margin: 34px 0 10px; }
.prose .wp-block-table table {
  font-size: 15px; border-collapse: collapse; border: 0; width: 100%;
}
.prose .wp-block-table th,
.prose .wp-block-table td {
  border: 0; border-bottom: 1px solid var(--line-3);
  padding: 13px 16px; text-align: left; vertical-align: top;
}
.prose .wp-block-table thead { border-bottom: 0; }
.prose .wp-block-table thead th {
  background: var(--tint); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
/* 첫 칸은 행의 이름표다. 값보다 먼저 읽히도록 굵기만 준다. */
.prose .wp-block-table tbody th { font-weight: 700; color: var(--ink); }
.prose .wp-block-table tbody tr:last-child td,
.prose .wp-block-table tbody tr:last-child th { border-bottom: 0; }
/* 좁은 화면에서 표가 글을 밀어내지 않게. 표만 안에서 가로로 움직인다. */
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-table table { min-width: 420px; }
/* 줄무늬 변형을 고른 경우에도 세로선은 두지 않는다. */
.prose .wp-block-table.is-style-stripes table { border: 0; }
.prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--line-3); }
.prose .wp-block-table.is-style-stripes th,
.prose .wp-block-table.is-style-stripes td { border-bottom: 0; }

.prose .wp-block-table figcaption { text-align: left; }

.prose .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
}
.prose .wp-block-button__link:hover { background: var(--brand-hover); }
.prose .wp-block-button.is-style-outline .wp-block-button__link {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}

.prose .wp-block-embed figcaption { text-align: left; }
.prose .wp-block-embed__wrapper { position: relative; }
.prose .wp-block-embed iframe { max-width: 100%; border-radius: var(--r-md); }

.prose .wp-block-gallery { display: grid; gap: 14px; }
.prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.prose .wp-block-gallery figure { margin: 0; }

.prose .wp-block-group,
.prose .wp-block-columns { margin-top: 22px; }
.prose .wp-block-columns { display: flex; gap: 24px; flex-wrap: wrap; }
.prose .wp-block-column { flex: 1 1 260px; min-width: 0; }

/*
 * 블록 에디터가 ul/ol 에 붙이는 wp-block-list 는 app.css 의 .prose ul 규칙을
 * 그대로 받는다(불릿을 지우고 틸 점을 찍는 규칙). 다만 체크·번호 없는 목록을
 * 고른 경우까지 점이 찍히면 뜻이 달라지므로 그 변형만 되돌린다.
 */
.prose ul.is-style-none > li { padding-left: 0; }
.prose ul.is-style-none > li::before { display: none; }

.prose .has-brand-color { color: var(--brand) !important; }
.prose .has-brand-background-color { background-color: var(--brand) !important; }
.prose .has-tint-background-color { background-color: var(--tint) !important; }

/* ── 글 안에서 쓸 수 있는 보조 클래스 ──────────────────
   에디터의 "고급 → CSS 클래스" 칸에 적어 넣으면 본사이트와 같은 박스가 나온다. */
.prose .note { margin: 28px 0; }

/* ── 첨부·보호글 ────────────────────────────────────────── */
.post-password-form input[type='password'] {
  font: inherit; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px;
}