/*
Theme Name:   홈마카세
Theme URI:    https://hommakase.com
Description:  Twenty Twenty-Five 자식 테마. 숫자를 읽기 쉽게 만드는 데 초점을 둔다 —
              표와 금액이 본문의 주인공이고, 장식은 그것을 방해하지 않는 선까지만 한다.
Author:       홈마카세
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  hommakase
*/

/* 제목·본문 IBM Plex Sans KR · 숫자 IBM Plex Mono.
   숫자용 서체를 따로 두는 이유는 분양가·세대수가 표에서 자릿수로 정렬돼야 하기 때문이다. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=Gowun+Dodum&display=swap');

/* ── 숫자 ────────────────────────────────────────────────────────────
   금액·세대수·경쟁률은 전부 등폭 + tabular-nums 로 간다.
   자릿수가 세로로 맞아야 표에서 9억과 1억 1천을 눈으로 비교할 수 있다. */
:root {
  --hm-mono: "IBM Plex Mono", ui-monospace, monospace;
}

.wp-block-table td,
.wp-block-table th {
  font-variant-numeric: tabular-nums;
}

.wp-block-table {
  font-size: 0.95rem;
}

/* 표는 이 사이트의 본문이다. 얇은 가로선만 남기고 세로선을 없애면
   숫자 덩어리가 시각적으로 훨씬 빨리 읽힌다. */
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

.wp-block-table th {
  background: var(--wp--preset--color--paper-shade);
  font-weight: 700;
  text-align: left;
}

.wp-block-table td,
.wp-block-table th {
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 0.6em 0.8em;
}

.wp-block-table tr:last-child td {
  border-bottom: 0;
}

/* ── 카드 그리드 ──────────────────────────────────────────────────── */
.wp-block-post-template.is-flex-container {
  gap: 2rem;
}

.wp-block-post-featured-image img {
  border-radius: 6px;
  aspect-ratio: 1200 / 630;   /* 썸네일이 오픈그래프 규격이라 그대로 맞춘다 */
  object-fit: cover;
}

.wp-block-post-title a {
  text-decoration: none;
}

.wp-block-post-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-block-post-date {
  font-family: var(--hm-mono);
  font-size: 0.8rem;
  opacity: 0.65;
}

/* ── 출처 표기 ────────────────────────────────────────────────────────
   YMYL 카테고리라 모든 수치에 출처가 붙는다. 본문에서 눈에 띄되
   읽기를 끊지 않을 만큼만 죽인다. */
.hm-source,
.wp-block-post-content p > em:only-child {
  font-size: 0.85em;
  opacity: 0.7;
}

/* ── 인용/주의 박스 ─────────────────────────────────────────────────── */
.wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--primary);
  padding-left: 1.2em;
  font-style: normal;
}

/* ── 링크 ────────────────────────────────────────────────────────────── */
.wp-block-post-content a {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ── 글 상단 ──────────────────────────────────────────────────────────
   카테고리 뱃지 → 제목 → 작성자·날짜 → 공유 → 대표이미지.
   기사처럼 보이는 순서다. 누가 언제 썼는지가 제목 바로 밑에 있어야
   YMYL 카테고리에서 신뢰 신호가 된다. */
.hm-post-head {
  margin-block-start: var(--wp--preset--spacing--40);
}

.hm-cats {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-block-end: .8rem;
}

.hm-cats a {
  display: inline-block;
  padding: .28em .75em;
  border-radius: 3px;
  background: #E8F0EC;
  color: var(--wp--preset--color--primary);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}

.hm-cats a:hover {
  background: var(--wp--preset--color--primary);
  color: #fff;
}

.hm-title {
  margin: 0 0 .9rem;
  line-height: 1.28;
}

/* 작성자·날짜 줄. 본문보다 확실히 죽여서 제목이 살게 한다. */
.hm-byline {
  padding-block: .7rem;
  border-block: 1px solid var(--wp--preset--color--line);
  font-size: .85rem;
  color: var(--wp--preset--color--ink-soft);
}

.hm-byline .wp-block-group { gap: .5rem; align-items: center; }
.hm-author { font-weight: 700; color: var(--wp--preset--color--ink); }
.hm-date   { font-family: var(--hm-mono); }
.hm-sep    { margin: 0; opacity: .35; }

/* ── 공유 ─────────────────────────────────────────────────────────── */
.hm-share { display: flex; gap: .4rem; }

.hm-share-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38em .8em;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  background: #fff;
  color: var(--wp--preset--color--ink);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.hm-share-btn:hover {
  background: var(--wp--preset--color--paper-shade);
  border-color: var(--wp--preset--color--ink-soft);
}

.hm-share-btn.is-done {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* 링크 복사만 먹색 정사각으로 떼어낸다. 가장 자주 눌리는 동작이라
   '공유하기' 안에 묻어두지 않고 한 번에 닿게 한다. */
.hm-copy {
  padding-inline: .6em;
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: #fff;
}

.hm-copy:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* ── 대표이미지 ───────────────────────────────────────────────────── */
.hm-hero {
  margin-block: 1.6rem 2rem;
}

.hm-hero img {
  width: 100%;
  border-radius: 6px;
}

.hm-hero figcaption {
  margin-block-start: .6rem;
  text-align: center;
  font-size: .8rem;
  font-style: italic;
  color: var(--wp--preset--color--ink-soft);
}

/* ── 글 하단 ─────────────────────────────────────────────────────── */
.hm-post-foot {
  margin-block-start: var(--wp--preset--spacing--40);
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--wp--preset--color--line);
  font-size: .82rem;
  color: var(--wp--preset--color--ink-soft);
}

.hm-tags a {
  color: var(--wp--preset--color--ink-soft);
  text-decoration: none;
}

.hm-tags a:hover { text-decoration: underline; }

.hm-copyright {
  margin-block-start: .8rem;
  font-size: .78rem;
  opacity: .55;
}


/* ── 본문 리듬 ────────────────────────────────────────────────────────
   홈두부는 H2 앞에 여백을 크게 두고 소제목을 굵게 세운다. 표가 많은 글에서
   구획이 눈에 들어와야 스크롤하며 읽을 수 있다. */
.wp-block-post-content h2 {
  margin-block-start: 2.6rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--wp--preset--color--line);
}

.wp-block-post-content h2:first-of-type {
  border-block-start: 0;
  padding-block-start: 0;
}

.wp-block-post-content h3 {
  margin-block-start: 1.8rem;
  font-weight: 600;
}

/* 별점 줄은 크게. 이 사이트에서 제일 먼저 읽히는 값이다. */
.wp-block-post-content p:has(+ .wp-block-table) { margin-block-end: .8rem; }

/* ── 헤더 ─────────────────────────────────────────────────────────────
   폭은 템플릿의 constrained 레이아웃이 잡는다. 여기서는 모양만 손댄다 —
   CSS 로 폭까지 잡으려다 한 번 크게 어긋났다. */
.hm-header {
  padding-block: .9rem;
  border-block-end: 1px solid var(--wp--preset--color--line);
  background: #fff;
}

.hm-header-inner { gap: 1.5rem; }

/* 워드마크만 부드러운 서체를 쓴다. 본문은 데이터라 또렷해야 하지만
   이름은 마스코트(마카)와 같은 톤이어야 한다. */
.hm-brand { gap: .5rem; flex: 0 0 auto; }

.hm-wordmark a,
.hm-wordmark {
  font-family: "Gowun Dodum", "IBM Plex Sans KR", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.6rem !important;
  letter-spacing: -.01em !important;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
}

.hm-mark img { display: block; border-radius: 6px; }

.hm-search {
  flex: 1 1 auto;
  max-width: 360px;
  margin: 0;
}

.hm-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
}

.hm-search .wp-block-search__input {
  border: 0;
  background: transparent;
  padding: .55em 1em;
  font-size: .88rem;
}

.hm-search .wp-block-search__button {
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  padding: .55em 1.2em;
}

.hm-nav {
  flex: 0 0 auto;
  font-size: .92rem;
  font-weight: 600;
}

.hm-nav .wp-block-navigation__container { gap: 1.15rem; }
.hm-nav a { text-decoration: none; color: var(--wp--preset--color--ink); }
.hm-nav a:hover { color: var(--wp--preset--color--primary); }

@media (max-width: 900px) {
  .hm-header-inner { flex-wrap: wrap !important; }
  .hm-search { order: 3; max-width: none; flex-basis: 100%; }
}

/* ── 홈 ───────────────────────────────────────────────────────────── */
.hm-home { padding-block: 2.2rem 4rem; }
.hm-home-cols { gap: 3rem; }

.hm-section-title {
  margin: 0 0 1.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.hm-cards { gap: 2rem 1.6rem !important; }

.hm-card-media { position: relative; margin: 0; }

.hm-card-img img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

/* 카테고리 뱃지를 썸네일 좌하단에 얹는다. 카드 목록에서 무슨 종류의 글인지
   제목을 읽기 전에 알 수 있어야 한다. */
.hm-card-cat {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: .25rem;
}

.hm-card-cat a {
  display: inline-block;
  padding: .3em .75em;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 5px 0 5px;
}

.hm-card-title {
  margin: .75rem 0 .35rem;
  font-size: 1.02rem;
  line-height: 1.42;
  letter-spacing: -.025em;
}

.hm-card-title a { text-decoration: none; }
.hm-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hm-card-date {
  margin: 0;
  font-family: var(--hm-mono);
  font-size: .78rem;
  color: var(--wp--preset--color--ink-soft);
}

.hm-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--wp--preset--color--ink-soft);
}

.hm-pager { margin-block-start: 3rem; gap: .6rem; font-size: .9rem; }

/* ── 사이드바 ─────────────────────────────────────────────────────── */
.hm-side-box {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: #fff;
  margin-block-end: 1.5rem;
}

.hm-side-title {
  margin: 0 0 .9rem;
  padding-inline-start: .6rem;
  border-inline-start: 3px solid var(--wp--preset--color--primary);
  font-size: 1rem;
}

.hm-side-list li + li,
.hm-side-list > * + * { margin-block-start: .9rem; }

.hm-side-item {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
}

.hm-side-item a { text-decoration: none; }
.hm-side-item a:hover { text-decoration: underline; }

.hm-side-date {
  margin: .15rem 0 0;
  font-family: var(--hm-mono);
  font-size: .74rem;
  color: var(--wp--preset--color--ink-soft);
}

.hm-side-cats ul { list-style: none; margin: 0; padding: 0; }
.hm-side-cats li { padding-block: .35rem; font-size: .9rem; }
.hm-side-cats a { text-decoration: none; }

@media (max-width: 781px) {
  .hm-home-cols { gap: 2rem; }
  .hm-search { order: 3; max-width: none; }
}

/* 헤더 안쪽만 폭을 묶는다. 배경선은 화면 끝까지 가야 한다. */
.hm-header > .hm-header-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* 홈 카드에서 대표이미지가 없을 때 자리를 남겨 카드 높이를 맞춘다. */
.hm-card-media:empty { display: none; }


/* ── 푸터 ─────────────────────────────────────────────────────────────
   부모 테마 기본 푸터는 없는 페이지들로 링크가 걸려 있다. 우리 것으로 바꾸고,
   YMYL 카테고리에서 필요한 출처·면책을 여기 고정한다. */
.hm-footer {
  margin-block-start: 4rem;
  padding-block: 2.5rem 1.8rem;
  border-block-start: 1px solid var(--wp--preset--color--line);
  background: #fff;
}

.hm-footer-inner { gap: 2.5rem; align-items: flex-start; }
.hm-footer-brand { flex: 1 1 380px; max-width: 520px; }

.hm-footer-note {
  margin-block-start: .7rem;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-soft);
}

.hm-footer-nav { flex: 0 0 auto; }

.hm-footer-title {
  margin: 0 0 .6rem;
  font-size: .85rem;
  color: var(--wp--preset--color--ink-soft);
}

.hm-footer-cats ul { list-style: none; margin: 0; padding: 0; }
.hm-footer-cats li { padding-block: .22rem; font-size: .86rem; }
.hm-footer-cats a { text-decoration: none; }
.hm-footer-cats a:hover { text-decoration: underline; }

.hm-footer-copy {
  margin-block-start: 2rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--wp--preset--color--line);
  font-size: .76rem;
  color: var(--wp--preset--color--ink-soft);
}