/*
Theme Name: Kongkongy
Theme URI: https://kongkongy.com
Author: 콩콩이 그림가게
Description: 콩콩이 그림가게·노랑고양이 공식 홈페이지 테마. 흰색·베이지 바탕에 검정 글씨, 노랑고양이의 노란색을 작은 포인트로 쓰는 차분한 편집숍 스타일입니다. 테마를 켜면 홈, About, Artwork, Products, Yellowcat, Visit & Class, Business, Contact 페이지가 자동으로 만들어집니다.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kongkongy
*/

/* ---------- 기본 ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
:where(a):focus-visible,
:where(button):focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}
img { height: auto; }

/* 아직 채우지 않은 정보 표시 (관리자 화면에서 고치면 사라짐) */
mark.kk-todo {
	background: transparent;
	color: inherit;
	border-bottom: 1px dashed var(--wp--preset--color--ochre);
	padding: 0 .1em;
}

/* ---------- 헤더 ---------- */
.kk-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}
.kk-header .wp-block-site-title { margin: 0; line-height: 1.2; }
.kk-header .wp-block-site-title a { text-decoration: none; }
/* 노랑고양이를 뜻하는 작은 노란 점 */
.kk-header .wp-block-site-title a::after {
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	margin-left: .3em;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow);
	vertical-align: .1em;
}
.kk-header .wp-block-navigation a { text-decoration: none; }
.kk-header .wp-block-navigation a:hover,
.kk-header .wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* ---------- 공통 섹션 ---------- */
.kk-section { padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.kk-section + .kk-section { padding-top: 0; }
.kk-band { background: var(--wp--preset--color--oat); }
.kk-band + .kk-section,
.kk-section + .kk-band { padding-top: clamp(3.5rem, 8vw, 6.5rem); }

.kk-en {
	color: var(--wp--preset--color--stone);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.wp-block-heading + .kk-en { margin-top: .5rem; }
.kk-lead { font-size: var(--wp--preset--font-size--medium); line-height: 1.75; }

/* 페이지 머리말 */
.kk-pagehead { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.kk-pagehead .wp-block-heading { margin: 0; }

/* ---------- 홈 첫 화면 ---------- */
.kk-hero { gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.kk-hero .kk-display { margin: 0 0 1.5rem; }
.kk-hero .kk-tag { margin: 0 0 1.25rem; color: var(--wp--preset--color--stone); }
.kk-hero .wp-block-buttons { margin-top: 2rem; }

/* ---------- 홈 목차 (무엇을 하러 오셨나요) ---------- */
.kk-index { border-top: 1px solid var(--wp--preset--color--ink); }
.kk-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: 2rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-block-start: 0 !important;
}
.kk-row > * { margin: 0; }
.kk-row .wp-block-heading { grid-column: 1; grid-row: 1 / span 2; }
.kk-row .wp-block-heading a { text-decoration: none; }
.kk-row .wp-block-heading a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.kk-row p { grid-column: 2; }
.kk-row p + p { margin-top: .25rem; }
@media (max-width: 640px) {
	.kk-row { grid-template-columns: 1fr; }
	.kk-row .wp-block-heading, .kk-row p { grid-column: 1; grid-row: auto; }
	.kk-row .wp-block-heading { margin-bottom: .5rem; }
}

/* ---------- 이미지 ---------- */
.wp-block-image img { display: block; }
.wp-block-image figcaption,
.wp-block-gallery figcaption { color: var(--wp--preset--color--stone); font-size: var(--wp--preset--font-size--small); text-align: left; margin-top: .6rem; }
.kk-strip.wp-block-columns { gap: clamp(1rem, 2.5vw, 2rem); }

/* ---------- 정보 블록 (매장, 클래스, 연락처) ---------- */
.kk-info { border-top: 1px solid var(--wp--preset--color--ink); padding-top: 1.25rem; }
.kk-info > .wp-block-heading:first-child { margin-top: 0; }
.kk-facts { list-style: none; padding-left: 0; }
.kk-facts li { padding: .55rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.kk-facts li:first-child { border-top: 1px solid var(--wp--preset--color--line); }

/* ---------- 노랑고양이 ---------- */
.kk-yellow-mark {
	display: inline-block;
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	padding: .15em .55em;
}

/* ---------- 버튼 ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: .8rem 1.4rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--oat); }
.wp-block-button__link:hover { background: #3a3835; }

/* ---------- 푸터 ---------- */
.kk-footer { background: var(--wp--preset--color--oat); font-size: var(--wp--preset--font-size--small); }
.kk-footer p { margin: 0 0 .35rem; }
.kk-footer .wp-block-heading { font-size: var(--wp--preset--font-size--base); margin: 0 0 .75rem; }
.kk-footer a { color: inherit; }
.kk-footer .kk-legal { color: var(--wp--preset--color--stone); border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.25rem; margin-top: 2.5rem; }

/* ---------- 모바일 ---------- */
@media (max-width: 781px) {
	.kk-hero { flex-direction: column-reverse; align-items: stretch; }
	.kk-hero .kk-display { margin-top: .5rem; }
}

/* ---------- 왼쪽 정렬 편집 레이아웃 ----------
   글 단(760px)을 가운데가 아니라 넓은 단(1200px)의 왼쪽 선에 맞춰,
   사진·목록과 글의 시작선이 한 줄로 이어지게 합니다. */
.kk-section.is-layout-constrained > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)),
.kk-pagehead.is-layout-constrained > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* 섹션 안쪽 좌우 여백 (휴대폰에서 글이 화면 끝에 붙지 않게) */
.kk-section.alignfull,
.kk-pagehead.alignfull {
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}
.kk-pagehead + .kk-section { padding-top: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > main { margin-block-start: 0; }
.kk-footer { border-top: 1px solid var(--wp--preset--color--line); }

/* 1.0.1: 홈 목록을 사진 줄과 같은 폭(1200px)으로 넓힘 */
.kk-section.is-layout-constrained > .kk-index {
	max-width: var(--wp--style--global--wide-size) !important;
	width: 100%;
}
.kk-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 640px) {
	.kk-row { grid-template-columns: 1fr; }
}