/*
 * 기억의 이야기(postkit) - GOIN 화면에 맞춘 사이트별 CSS (2026-10-18). goincokr 저장소 파일 - postkit 원천에서 전파하지 않는다.
 * postkit.css 다음에 읽힌다. 색·글꼴은 GOIN site.css 의 :root 값(--green·--gold·--ink·--serif …)을 그대로 쓴다.
 * 머리 부분은 예전 /journal 목록을 줄인 모양(빵부스러기 한 줄 + 제목·소개 한 줄, 2026-10-18 사용자 요청)과 같게 둔다.
 */
:root {
  --pk-accent: var(--green);
  --pk-accent-dark: var(--green-dark);
  --pk-accent-soft: var(--sage);
  --pk-bg: transparent;
  --pk-surface: var(--white);
  --pk-muted-bg: var(--sand);
  --pk-text: var(--ink);
  --pk-text-2: var(--muted);
  --pk-text-3: #858d85;
  --pk-line: var(--line);
  --pk-line-2: var(--line);
  --pk-link: var(--green);
  --pk-font: var(--font);
  --pk-radius: var(--radius);
  --pk-radius-sm: var(--radius-sm);
  --pk-wrap: var(--max);
}

/* 감싼 상자 - postkit 은 body.pk 에 바탕 규칙을 두는데 GOIN 은 body 를 쓰므로 여기로 옮긴다 */
.pk-embed { color: var(--pk-text); font-family: var(--pk-font); word-break: keep-all; overflow-wrap: anywhere; }
/* 폭은 네비게이션과 같게(.shell = --max 1160px) - GOIN .subpage 의 1040px 제한을 이 폴더만 푼다(2026-10-18 사용자 요청) */
.subpage.pk-goin { max-width: none; }
.pk-goin .pk-wrap { max-width: none; padding: 0 0 24px; }
/* 글 화면도 목차 + 본문이 네비게이션 오른쪽 끝까지 (postkit 기본은 본문 760px 로 가운데) */
.pk-goin .pk-view { max-width: none; padding: 0 0 48px; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.pk-goin .pk-view.pk-has-toc { grid-template-columns: 220px minmax(0, 1fr); }
@media (max-width: 991.98px) { .pk-goin .pk-view.pk-has-toc { grid-template-columns: minmax(0, 1fr); } }
.pk-goin .pk-view { padding-top: 0; }

/* 위쪽 한 줄 - 빵부스러기(왼쪽) · 분류와 검색(오른쪽) */
.pk-goin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 10px; }
.pk-goin-bar .breadcrumb { margin: 0; }
.pk-goin-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }
.pk-goin-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-goin-cats a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--muted); font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.pk-goin-cats a:hover { border-color: var(--green); color: var(--green); }
.pk-goin-cats a.on { border-color: var(--green); background: var(--green); color: var(--white); }
.pk-goin-search { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.pk-goin-search:focus-within { border-color: var(--green); }
/* GOIN 머리글은 이 파일을 site.css 보다 먼저 읽는다 - site.css 의 공통 입력칸 규칙(input:not(...) 3단계)보다 우선순위를 높게 쓴다 */
.pk-goin-bar .pk-goin-search input:not([type=checkbox]):not([type=radio]) { width: 160px; min-height: 34px; padding: 0 4px 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; color: var(--ink); }
.pk-goin-bar .pk-goin-search input:focus { outline: 0; }
.pk-goin-search button { display: grid; place-items: center; width: 38px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.pk-goin-search button:hover { color: var(--green); }
.pk-goin-search svg { width: 17px; height: 17px; }

/* 목록 머리 - 제목과 소개를 한 줄에 (예전 .journal-heading 과 같은 크기) */
.pk-goin .pk-hero { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; row-gap: 4px; margin: 0 0 18px; padding: 0; background: none; color: var(--ink); text-align: left; }
.pk-goin .pk-hero h1 { margin: 0; font: 400 30px/1.4 var(--serif); letter-spacing: 0; white-space: nowrap; }
.pk-goin .pk-hero p { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: 15px; }
.pk-goin .pk-list-head h1 { font: 400 26px/1.4 var(--serif); }

/* 목록 - GOIN 제목 글꼴·초록 */
.pk-goin .pk-card-title { font-family: var(--serif); font-weight: 400; }
.pk-goin .pk-card-cat { color: var(--gold); }
.pk-goin .pk-card:hover { border-color: #cbbfa8; }
.pk-goin .pk-layout-switch button[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: var(--white); }

/* 글 - 제목은 GOIN 명조, 본문 링크는 초록 */
.pk-goin .pk-article-title { font-family: var(--serif); font-weight: 400; }
.pk-goin .pk-content h2, .pk-goin .pk-content h3 { font-family: var(--font); }
.pk-goin .pk-content a { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.pk-goin .pk-meta-cat { background: var(--sand); color: var(--gold); }
.pk-goin .pk-summary { background: var(--sand); }
.pk-goin .pk-toc { top: 110px; }

@media (max-width: 767px) {
  .pk-goin-bar { align-items: flex-start; }
  .pk-goin-tools { margin-left: 0; width: 100%; }
  .pk-goin-cats { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .pk-goin-cats::-webkit-scrollbar { display: none; }
  .pk-goin-search { width: 100%; }
  .pk-goin-bar .pk-goin-search input:not([type=checkbox]):not([type=radio]) { flex: 1; width: auto; }
  .pk-goin .pk-hero h1 { font-size: 25px; }
  .pk-goin .pk-hero p { font-size: 14px; }
}