/*
Theme Name: SKINMODU
Theme URI: https://skinmodu.com
Description: Twenty Twenty-Five 자식 테마. 피부시술·화장품 정보 사이트의 에디토리얼 디자인을 적용한다. 디자인 토큰은 theme.json, 웹폰트 적재는 functions.php에 있다.
Author: SKINMODU
Template: twentytwentyfive
Version: 0.10.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skinmodu
*/

/* ──────────────────────────────────────────────
   한글 조판
   theme.json으로 제어할 수 없는 항목만 여기 둔다.
   ────────────────────────────────────────────── */

/* 어절 단위 줄바꿈. 한글에서 단어가 중간에 잘리는 것을 막는다.
   워드프레스 코어에 GUI 토글이 없어 CSS로만 가능하다. */
body,
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, figcaption, blockquote, .wp-block-button__link {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 한글 제목은 자간을 좁혀야 덩어리로 읽힌다.
   theme.json의 letterSpacing은 단일 값만 받아 크기별 조정이 어려우므로 여기서 처리한다. */
h1 { letter-spacing: -0.045em; }
h2 { letter-spacing: -0.035em; }
h3 { letter-spacing: -0.03em; }

/* 제목 줄바꿈을 의미 단위로 균형 있게 */
h1, h2, h3 { text-wrap: balance; }

/* 본문 문단은 마지막 줄에 한 단어만 남는 것을 피한다 */
p { text-wrap: pretty; }

/* ──────────────────────────────────────────────
   링크
   ────────────────────────────────────────────── */

a { text-underline-offset: 5px; }

/* 포커스 표시를 명확히. 키보드 사용자와 저시력 독자를 위한 것이므로 지우지 않는다. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
}

/* ──────────────────────────────────────────────
   블록 기본값 보정
   ────────────────────────────────────────────── */

/* 인용문을 장식 대신 정보 블록으로 쓴다 */
.wp-block-quote {
  border-left: 2px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--soft);
  padding: 18px 22px;
  font-style: normal;
}

/* 표는 가로 스크롤이 되게. 시술 비교표가 모바일에서 잘리지 않아야 한다. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; }
.wp-block-table th,
.wp-block-table td {
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 10px 12px;
}
.wp-block-table th {
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

/* 이미지가 레이아웃을 밀지 않도록 */
img { max-width: 100%; height: auto; }

/* ──────────────────────────────────────────────
   홈페이지 전용
   목업의 전체 폭 구성을 재현한다. 다른 페이지에는 적용되지 않는다.
   ────────────────────────────────────────────── */

/* 홈은 히어로 문장이 제목 역할을 하므로 페이지 제목("홈")을 숨긴다.
   제목을 지우지 않고 숨기는 이유는 관리자 목록과 검색에서는 필요하기 때문이다. */
.home .wp-block-post-title {
  display: none;
}

/* 목업은 1180px 폭이었다. 본문 기본 폭(680px)에 갇히면 히어로 제목이 네 줄로 깨진다. */
.home {
  --wp--style--global--content-size: 1180px;
}

/* 다만 섹션 설명 문단까지 1180px로 늘어나면 한 줄이 너무 길어 읽기 어렵다.
   그룹의 직계 문단만 읽기 폭으로 되돌린다.
   칼럼 안의 문단은 칼럼이 이미 폭을 제한하므로 영향을 받지 않는다. */
.home .wp-block-post-content > .wp-block-group > p {
  max-width: 680px;
  /* 워드프레스 코어가 .is-layout-constrained 자식에 margin-left:auto를
     !important로 걸어 가운데로 민다. 같은 무게로 맞받아야 왼쪽 정렬이 된다. */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 홈 상단 여백.
   제목을 숨겨도 그 자리의 여백은 남는다. 실측하니 네 겹이 쌓여 180px였다.
   main 52 + 제목 래퍼 52 + post-content 24 + 첫 섹션 52.
   첫 섹션의 52px만 남기고 위의 세 겹을 걷어낸다. */
.home main {
  margin-top: 0 !important;
}

.home main > .wp-block-group {
  padding-top: 0 !important;
}

.home .wp-block-post-content {
  margin-top: 0 !important;
}

/* 모바일에서는 첫 섹션 여백도 줄인다. 화면이 좁을수록 빈 공간이 크게 느껴진다. */
@media (max-width: 640px) {
  .home .wp-block-post-content > .wp-block-group:first-child {
    padding-top: 24px !important;
  }
}

/* ──────────────────────────────────────────────
   아직 없는 페이지
   skinmodu-core 플러그인이 본문의 죽은 링크를 이 글자로 바꾼다.
   링크가 아니라는 것이 마우스를 올리기 전에 보여야 한다.
   ────────────────────────────────────────────── */

.skinmodu-soon {
  color: var(--wp--preset--color--muted);
}

/* 히어로 아래 앵커 링크.
   46px는 손가락으로 누를 수 있는 최소 높이라 줄이지 않는다. */
.skinmodu-tlink a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  border-bottom: 1px solid var(--wp--preset--color--ink);
  text-decoration: none;
  font-size: 15px;
}

.skinmodu-tlink a:hover {
  border-bottom-width: 2px;
}

/* 화살표 */
.skinmodu-tlink a span {
  font-size: 20px;
}

/* ──────────────────────────────────────────────
   홈 히어로 오른쪽 — "읽으시기 전에"
   목업의 01·02·03 번호를 재현한다.
   번호를 본문에 직접 쓰지 않고 CSS 카운터로 넣는 이유는,
   항목을 더하거나 순서를 바꿔도 번호가 자동으로 맞기 때문이다.
   히어로는 post-content의 첫 그룹이므로 그 안의 오른쪽 칼럼만 잡는다.
   ────────────────────────────────────────────── */

.home .wp-block-post-content > .wp-block-group:first-child .wp-block-column:last-child {
  counter-reset: pledge;
}

.home .wp-block-post-content > .wp-block-group:first-child .wp-block-column:last-child > h2 {
  font-size: 27px;
}

/* 문단은 일반 흐름 그대로 두고 번호만 왼쪽 여백에 띄운다.
   그리드로 만들면 문단 안의 <strong>이 독립된 그리드 항목이 되어
   뒤따르는 문장이 번호 열로 밀려난다. 인라인 요소도 항목이 되기 때문이다. */
.home .wp-block-post-content > .wp-block-group:first-child .wp-block-column:last-child > p {
  position: relative;
  padding-left: 46px;
}

.home .wp-block-post-content > .wp-block-group:first-child .wp-block-column:last-child > p::before {
  counter-increment: pledge;
  content: counter(pledge, decimal-leading-zero);
  position: absolute;
  left: 0;
  /* 문단의 위쪽 안쪽 여백(12px)만큼 내려야 본문 첫 줄과 윗선이 맞는다 */
  top: 12px;
  line-height: inherit;
  font-family: var(--wp--preset--font-family--serif-en);
  color: var(--wp--preset--color--accent);
  font-weight: 600;
}