/*
Theme Name:  Japansunbae Child
Theme URI:   https://japansunbae.com
Description: 일본선배(japansunbae.com) 전용 GeneratePress 자식 테마. 한국어 본문 줄바꿈 최적화, 일본어 병기 표시, 「함께 읽으면 좋은 글」 박스, 글 템플릿 보조 스타일. 외부 라이브러리·웹폰트 없음(용량 1.4GB 제약 준수).
Author:      일본선배 류상
Template:    generatepress
Version:     0.1.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: japansunbae-child
*/

/* ==========================================================================
   이 파일은 자식 테마를 활성화하면 GeneratePress가 자동으로 불러온다.
   functions.php에서 다시 불러오지 않는다(이중 로드 방지).

   색상·글꼴 크기 같은 「취향 설정」은 WP 관리자 → 외모 → 사용자 정의하기
   (커스터마이저)에서 하고, 이 파일에는 커스터마이저로 할 수 없는 것만 둔다.
   여기에 본문 폰트·색을 하드코딩하면 커스터마이저 설정과 충돌한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 한국어 본문 줄바꿈
   --------------------------------------------------------------------------
   word-break: keep-all  → 한국어 단어가 중간에서 끊겨 줄바꿈되는 것을 방지.
                           (「은행계좌」가 「은행계 / 좌」로 갈라지지 않게)
   overflow-wrap: break-word → 긴 URL·일본어 연속 문자열이 화면 밖으로
                           삐져나갈 때만 강제로 꺾는 안전장치.
   -------------------------------------------------------------------------- */
body {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   2. 일본어 병기 — functions.php의 [jp] 숏코드와 한 쌍
   --------------------------------------------------------------------------
   한국어 폰트로 일본어 한자를 그리면 자형이 미묘하게 어긋난다(直·曜 등).
   [jp] 숏코드가 씌우는 lang="ja" 부분만 독자 기기에 이미 설치된
   일본어 폰트로 표시한다. 웹폰트 다운로드 없음 — 용량·속도 제약 준수.
   폰트 순서: mac·iPhone(Hiragino) → Windows(Yu Gothic·Meiryo) → 기타.
   -------------------------------------------------------------------------- */
.jp,
:lang(ja) {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
		"Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}

/* --------------------------------------------------------------------------
   3. 「함께 읽으면 좋은 글」 박스 — functions.php의 [sunbae_related]와 한 쌍
   --------------------------------------------------------------------------
   브랜드 색을 정하면 아래 border-left 색상 한 곳만 바꾸면 된다.
   -------------------------------------------------------------------------- */
.sunbae-related {
	margin: 2.5em 0 1.5em;
	padding: 1.1em 1.4em;
	border: 1px solid #dfe3e8;
	border-left: 4px solid #1e73be;
	border-radius: 4px;
	background: #f8f9fa;
}

.sunbae-related-title {
	margin: 0 0 0.6em;
	font-weight: 700;
}

.sunbae-related ul {
	margin: 0 0 0 1.2em;
	padding: 0;
}

.sunbae-related li {
	margin: 0 0 0.45em;
}

/* --------------------------------------------------------------------------
   4. 표 — 좁은 화면 대응
   --------------------------------------------------------------------------
   원칙은 「본문에 표를 쓰지 않는다」(content-rules.md §1). 라벨+설명 구조의
   2단 표는 모바일 폭에서 반드시 무너지기 때문이다.
   아래는 수치 비교표처럼 표가 불가피한 경우를 위한 안전장치다.

   핵심: 화면이 좁을 때 셀을 찌그러뜨리는 대신 「표 안에서만」 좌우 스크롤이
   생기게 한다. 페이지 전체가 좌우로 밀리는 것을 막는다.
   블록 에디터의 표는 <figure class="wp-block-table">로 감싸여 출력되므로
   그 바깥 요소에 스크롤을 준다.
   -------------------------------------------------------------------------- */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	min-width: 22rem; /* 이보다 좁아지면 찌그러뜨리지 않고 스크롤 */
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.55em 0.7em;
	border: 1px solid #dfe3e8;
	vertical-align: top; /* 셀 내용 길이가 다를 때 위쪽 정렬 — 읽기 편하다 */
}

.wp-block-table thead th {
	background: #f2f4f6;
	text-align: left;
}

/* --------------------------------------------------------------------------
   5. 글 템플릿 보조 박스 — content-rules.md §1의 ①결론·④실패담용
   --------------------------------------------------------------------------
   블록 에디터에서 그룹(또는 문단·목록) 블록 선택 → 오른쪽 「고급」 →
   「추가 CSS 클래스」에 아래 이름을 넣으면 적용된다.

   sunbae-conclusion → ① 결론 3줄 박스 (글 최상단)
   sunbae-pitfall    → ④ 실패담·함정 박스
   -------------------------------------------------------------------------- */
.sunbae-conclusion {
	margin: 0 0 2em;
	padding: 1.1em 1.4em;
	border: 1px solid #d4e3f3;
	border-left: 4px solid #1e73be;
	border-radius: 4px;
	background: #f2f7fc;
}

.sunbae-pitfall {
	margin: 2em 0;
	padding: 1.1em 1.4em;
	border: 1px solid #f0d8d2;
	border-left: 4px solid #c0533f;
	border-radius: 4px;
	background: #fdf6f4;
}

/* 박스 안 마지막 요소의 아래 여백 제거 — 박스 하단이 뚱뚱해지는 것 방지 */
.sunbae-related > :last-child,
.sunbae-conclusion > :last-child,
.sunbae-pitfall > :last-child {
	margin-bottom: 0;
}