/* 하위 페이지 팔레트 A(2026-10-15 Owner 「하위 페이지에도 새 메뉴랑 색 적용하자」) — 홈 v5 와 같은 색(gnb-v5.css 의 --kr-*).
   옛 따뜻한 종이색 토큰(style.css :root --koc-*)을 덮는다. 빨강 포인트(--koc-point #C41E2F)는 그대로 — 홈 버튼·강조와 같은 빨강. */
:root{
  --koc-paper:#F7F7F4; --koc-paper-soft:#EAEEF1; --koc-ink:#1A1D23; --koc-mut:#5E6470; --koc-line:#DFE2E4;
}

/* 붙는 메뉴 줄(52px, 720px 이하 48px — gnb-v5.css .kr-menu) 아래로 — 옛 머리글은 붙지 않아 이 칸들이 화면 맨 위에 붙었다 */
.koc-article-grid .koc-rail{top:calc(52px + 1.5rem)}
.koc-pl-rail{top:calc(52px + 1.5rem)} /* 서울 30곳 리모컨 위 = 카드 멈춤 위치(style.css 0.24.97 Owner 규칙: 둘 다 1.5rem) — 메뉴 줄 몫은 html scroll-padding 52px 가 카드에 더한다 */
.koc-em-search{top:52px}
@media (max-width:1023px){ .koc-pl-chips{top:52px;background:rgba(247,247,244,.96)} }
@media (max-width:720px){ .koc-pl-chips,.koc-em-search{top:48px} }

/* 버튼 — 홈 v5(.kr-btn)와 같은 모양·색(10-15 Owner 「버튼도 새 색·모양으로」): 둥근 알약, 빨강 채움 + 흰 글씨, 대문자·자간 없음.
   채움 버튼(primary·cue·대표 링크·검색) = 빨강, 테두리 버튼 = 흰 바탕 + 회색 선, 올리면 빨강 선·글씨 */
.koc-btn{min-height:40px;padding:0 18px;gap:8px;border:1px solid var(--koc-line);border-radius:20px;background:#fff;color:var(--koc-ink);font:600 14px/1.2 var(--kr-sans);letter-spacing:0;text-transform:none;transition:background .15s,border-color .15s,color .15s}
.koc-btn:hover{background:#fff;border-color:var(--kr-cta);color:var(--kr-cta)}
.koc-btn-line{background:transparent}
.koc-btn-primary,.koc-btn-cue{background:var(--kr-cta);border-color:var(--kr-cta);color:#fff}
.koc-btn-primary:hover,.koc-btn-cue:hover{background:var(--kr-cta-d);border-color:var(--kr-cta-d);color:#fff}
.koc-btn:active{transform:translateY(1px)}
.koc-ex-go{border-radius:23px;background:var(--kr-cta)} .koc-ex-go:hover{background:var(--kr-cta-d)}
.koc-pl-links-row a:first-child:not([target]){background:var(--kr-cta);border-color:var(--kr-cta)}
.koc-pl-links-row a:first-child:not([target]):hover{background:var(--kr-cta-d);border-color:var(--kr-cta-d)}
@media (max-width:720px){ .koc-btn{min-height:40px;font-size:13px} }

/* 위·아래 이동 버튼 — 휴대폰은 「맨 위로」 하나만(홈 v5 와 같은 결정, 10-15 Owner 「모바일 이동 버튼 최적으로」). 글에서는 미니 리모컨까지 셋이 겹쳐 본문을 가렸다 */
@media (max-width:720px){ .koc-pagenav [data-koc-nav="bottom"]{display:none} .koc-pagenav-btn{width:40px;height:40px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(26,29,35,.14)} }

/* 동네 필터 칩 — 홈 권역 탭(.kr-tab)과 같은 둥근 알약, 고른 칩은 쪽빛 채움(10-15 Owner). 서울 30곳 휴대폰 탭 줄(.koc-pl-chips)은 밑줄 탭 그대로 */
.koc-chip{min-height:36px;padding:0 16px;border:1px solid var(--koc-line);border-radius:18px;background:#fff;color:var(--koc-ink);font:500 13px/1.2 var(--kr-sans);transition:border-color .15s,color .15s,background .15s}
.koc-chip:hover{border-color:var(--kr-primary);color:var(--kr-primary)}
.koc-chip-on,.koc-chip-on:hover{background:var(--kr-primary);border-color:var(--kr-primary);color:#fff;font-weight:600}
.koc-pl-chips .koc-chip{background:transparent}

/* 404 — 문구·검색칸·홈으로·안내 8칸(inc/design/home-v5.php koc_v5_404_html) */
.koc-404{padding:72px 0 96px;font-family:var(--kr-sans);color:var(--kr-ink)}
.koc-404-in{max-width:var(--kr-w);margin:0 auto;padding:0 24px;box-sizing:content-box} /* 메뉴 줄(.kr-gnb-in)과 같은 세로선 */
.koc-404 .kr-guide-cell{text-decoration:none;color:var(--kr-ink)} .koc-404 .kr-guide-cell:hover b{color:var(--kr-primary)} /* 하위 페이지 링크 기본 밑줄을 칸에서 뺀다 */
.koc-404-code{margin:0;font:800 64px/1 var(--kr-sans);letter-spacing:-.03em;color:var(--kr-cta)}
.koc-404 h1{margin:16px 0 0;font:700 32px/1.3 var(--kr-sans);letter-spacing:-.02em}
.koc-404-lead{max-width:560px;margin:12px 0 0;font:400 16px/1.7 var(--kr-sans);color:var(--kr-muted)}
.koc-404-search{max-width:560px;margin-top:28px;background:#fff}
.koc-404-home{margin-top:16px}
.koc-404-h{margin:64px 0 20px;font:700 20px/1.3 var(--kr-sans)}
@media (max-width:720px){
  .koc-404{padding:40px 0 64px} .koc-404-in{padding:0} /* 휴대폰은 본문 틀(.koc-main 24px)이 이미 여백을 준다 — 다른 하위 페이지와 같은 선 */
  .koc-404-code{font-size:48px} .koc-404 h1{font-size:24px} .koc-404-lead{font-size:15px}
  .koc-404-search{grid-column:auto;grid-row:auto} .koc-404-h{margin-top:44px}
}

/* 모바일 함께 점검(10-15 Owner 「모바일 화면도 같이 체크」) */
/* 캐스트 목록 — 열이 늘 다섯이라 휴대폰에서 역할·이름·소개가 잘렸다(「Rook creat」「Dram to…」) → 태블릿 3열·휴대폰 2열 */
@media (max-width:1023px){ .koc-archive .koc-cast-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1rem} }
@media (max-width:720px){
  .koc-archive .koc-cast-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .9rem}
  /* 동네 허브 「추천 읽기 순서」 — 2열에 21px 명조 제목이라 한 칸이 열네 줄까지 내려갔다 → 한 열 */
  .koc-path{grid-template-columns:minmax(0,1fr);gap:2rem}
  body .koc-path strong{font-size:19px;line-height:1.5}
  /* 글 제목 — 긴 제목이 34px 로 아홉 줄(첫 화면 전부) → 26px */
  body .wp-block-post-title{font-size:26px;line-height:1.38}
  /* 푸터 — 세 열이라 「서울 30곳, 가는 길」·「개인정보 처리방침」이 두 줄로 꺾였다 → 두 열 */
  .koc-footer-main{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
}

/* 글꼴 통일(2026-10-15 Owner) — 하위 페이지 제목·인용의 명조를 홈 v5 와 같은 Pretendard 로.
   경위: 사이트는 원래 Pretendard 하나(0.18.0) → 09-26 제목 명조 부활(0.24.46, 내 제안) → 10-15 「클로드코드 디자인」 피드백으로 홈은 명조를 버림 → 하위도 맞춘다.
   --koc-serif 를 쓰는 곳(style.css 53곳·typography 의 heading 프리셋)을 한 번에 돌린다. 언어별 --koc-sans(JA Pretendard JP·ZH Noto Sans TC)를 그대로 따른다. */
:root,html[lang^="ja"],html[lang^="zh"]{--koc-serif:var(--koc-sans)}
/* 홈 v5 제목 문법: Bold·자간 -2% */
body :is(h1,h2){font-weight:700;letter-spacing:-.02em} body h3{letter-spacing:-.01em}