/*
Theme Name: Genealogy Post
Theme URI: https://genealogypost.com/
Update URI: false
Author: Genealogy Post
Description: 족보와 가계 기록을 다루는 매거진형 테마. 크림빛 지면 위에 세로형 표지 이미지와 굵은 제목을 얹고, 홈은 전면 색 띠(band)를 번갈아 쌓아 잡지처럼 넘어가게 만든다. 본문은 한글 가독성을 우선해 word-break:keep-all 과 Pretendard 를 기본으로 쓴다.
Version: 1.0.0
Requires at least: 6.0
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: genealogy-post
Tags: magazine, blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. 디자인 토큰
   색을 바꾸고 싶으면 여기만 고치면 된다. 나머지 규칙은 전부 이 변수를 본다.
   ========================================================================== */
:root{
  --gp-bg:        #fbfcf6;   /* 지면 — 순백이 아닌 크림빛. 종이 느낌을 준다 */
  --gp-ink:       #111111;   /* 본문/제목 */
  --gp-ink-soft:  #555555;   /* 보조 텍스트 */
  --gp-ink-faint: #8a8a85;   /* 날짜·캡션 */
  --gp-line:      #e3e4dd;   /* 구분선 — 배경과 같은 계열의 따뜻한 회색 */
  --gp-accent:    #b5502a;   /* 강조 — 고문서 인장에서 가져온 테라코타 */
  --gp-accent-2:  #2f5d50;   /* 보조 강조 — 짙은 청록 */

  /* 홈 색 띠. 섹션이 번갈아 이 색을 깐다 */
  --gp-band-1: #f0e6d2;      /* 모래 */
  --gp-band-2: #fbfcf6;      /* 크림 */
  --gp-band-3: #dbe3d7;      /* 세이지 */
  --gp-band-4: #fbfcf6;
  --gp-band-5: #d9e2e8;      /* 흐린 청 */

  --gp-measure: 720px;       /* 본문 한 줄 길이 */
  --gp-wide:    1280px;      /* 그리드 최대 폭 */
  --gp-gut:     24px;        /* 좌우 여백 */
  --gp-radius:  2px;         /* 모서리는 거의 각지게 — 인쇄물 느낌 */
}

/* ==========================================================================
   2. 기초
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--gp-bg);
  color:var(--gp-ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-weight:500;                 /* 한글은 400 이면 얇아 보인다 */
  font-size:16px;
  line-height:1.6;
  word-break:keep-all;             /* 한글 단어를 중간에서 자르지 않는다 */
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.gp-panel-open{overflow:hidden;touch-action:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.03em;          /* 굵은 한글은 자간을 좁혀야 덩어리로 읽힌다 */
}
p{margin:0}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.gp-wrap{max-width:var(--gp-wide);margin:0 auto;padding:0 var(--gp-gut)}
.gp-measure{max-width:var(--gp-measure);margin:0 auto;padding:0 var(--gp-gut)}
.gp-skip{position:absolute;left:-9999px}
.gp-skip:focus{left:8px;top:8px;z-index:999;background:var(--gp-ink);color:#fff;padding:10px 16px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ==========================================================================
   3. 머리말 — 로고 왼쪽, 메뉴 버튼 오른쪽. 전면 패널로 열린다.
   ========================================================================== */
.gp-header{position:sticky;top:0;z-index:60;background:var(--gp-bg);border-bottom:1px solid var(--gp-line)}
.gp-header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.gp-logo{letter-spacing:-0.045em;font-weight:800;font-size:19px;text-transform:uppercase}
.gp-logo:hover{text-decoration:none;opacity:.6}
.gp-logo img{max-height:44px;width:auto}
.gp-header-actions{display:flex;align-items:center;gap:14px}
.gp-search-toggle,.gp-burger{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 4px;
}
.gp-burger-bars{display:inline-block;width:22px}
.gp-burger-bars i{display:block;height:2px;background:var(--gp-ink);margin:4px 0;transition:transform .25s}

/* 전면 메뉴 패널 */
.gp-panel{position:fixed;inset:0;z-index:80;background:var(--gp-bg);transform:translateY(-100%);transition:transform .45s cubic-bezier(.16,1,.3,1);overflow-y:auto;visibility:hidden}
.gp-panel.is-open{transform:translateY(0);visibility:visible}
.gp-panel-head{display:flex;align-items:center;justify-content:space-between;height:72px;border-bottom:1px solid var(--gp-line)}
.gp-panel-close{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.gp-panel-body{padding:40px 0 80px}
.gp-panel-search{margin-bottom:40px}
.gp-panel-search form{display:flex;gap:8px;border-bottom:2px solid var(--gp-ink);padding-bottom:8px}
.gp-panel-search input[type=search]{flex:1;border:0;background:transparent;font:inherit;font-size:20px;font-weight:700;padding:6px 0;outline:none}
.gp-panel-search button{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gp-panel-nav ul{list-style:none;margin:0;padding:0}
.gp-panel-nav > div > ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px 32px}
.gp-panel-nav > div > ul > li > a{display:block;font-size:26px;font-weight:800;letter-spacing:-0.04em;padding-bottom:8px}
.gp-panel-nav .sub-menu{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px}
.gp-panel-nav .sub-menu a{font-size:14px;font-weight:500;color:var(--gp-ink-soft)}
.gp-panel-foot{border-top:1px solid var(--gp-line);padding:24px 0;font-size:13px;color:var(--gp-ink-faint)}

/* ==========================================================================
   4. 카드 — 이 테마의 중심. 세로형 표지 + 2줄 제목 + 발췌 + 글쓴이.
   ========================================================================== */
.gp-card{position:relative;margin-bottom:48px}
.gp-card-image{display:block;position:relative;height:0;padding-bottom:125%;overflow:hidden;margin-bottom:16px;background:var(--gp-line);border-radius:var(--gp-radius)}
.gp-card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.gp-card:hover .gp-card-image img{transform:scale(1.07) rotate(1.5deg)}
.gp-card-image:hover{text-decoration:none}
.gp-card-image .gp-cat{
  position:absolute;left:14px;bottom:14px;z-index:2;
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
/* 아래쪽 어둠은 표지 위의 흰 분류 라벨을 읽히게 하려는 것이므로, 사진이 있을 때만 깐다 */
.gp-card-image:has(img)::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.42),transparent);pointer-events:none}
/* 대표 이미지가 없는 카드 */
.gp-card-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(17,17,17,.055)}
.gp-card-placeholder b{font-size:clamp(48px,7vw,96px);font-weight:800;letter-spacing:-.05em;color:rgba(17,17,17,.16);line-height:1}
.gp-card-image:not(:has(img)) .gp-cat{color:var(--gp-accent);text-shadow:none}
.gp-card-cat-text{display:none;font-size:13px;font-weight:800;letter-spacing:0;color:var(--gp-accent);margin-bottom:6px;line-height:1}
.gp-card-title{
  font-size:1.5rem;line-height:1.3;letter-spacing:-0.04em;margin:0 0 10px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  transition:color .3s;
}
.gp-card-title a:hover{text-decoration:underline;text-underline-offset:4px}
.gp-card-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gp-card-excerpt{
  font-size:15px;color:var(--gp-ink-soft);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.gp-card-date{font-size:14px;color:var(--gp-ink-faint);margin-top:8px}
.gp-card-author{flex:0 0 60px;text-align:center}
.gp-card-author .gp-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;margin:0 auto 4px}
.gp-card-author .gp-avatar img{width:100%;height:100%;object-fit:cover}
.gp-card-author p{font-size:13px;color:var(--gp-ink-soft);margin:0}

/* 그리드 */
.gp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.gp-grid--3{grid-template-columns:repeat(3,1fr)}

/* ==========================================================================
   5. 홈 — 전면 색 띠를 번갈아 쌓는다. 왼쪽은 고정 이미지, 오른쪽은 스크롤 목록.
   ========================================================================== */
.gp-band{padding:0;overflow:hidden}
.gp-band:nth-child(5n+1){background:var(--gp-band-1)}
.gp-band:nth-child(5n+2){background:var(--gp-band-2)}
.gp-band:nth-child(5n+3){background:var(--gp-band-3)}
.gp-band:nth-child(5n+4){background:var(--gp-band-4)}
.gp-band:nth-child(5n+5){background:var(--gp-band-5)}
.gp-band-in{display:flex;justify-content:space-between;gap:0;width:100%}
.gp-band:nth-child(even) .gp-band-in{flex-direction:row-reverse}
.gp-band-sticky{width:50%;position:relative;align-self:flex-start;position:sticky;top:72px}
.gp-band-sticky-media{position:relative;height:min(calc(100vh - 72px),760px);min-height:420px;overflow:hidden;display:block}
.gp-band-sticky-media:hover{text-decoration:none}
/* 대표 이미지가 없을 때의 지면 — 제목 첫 글자를 크게 앉힌다 */
.gp-band-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.045)}
.gp-band-placeholder b{font-size:clamp(120px,18vw,280px);font-weight:800;letter-spacing:-.06em;color:rgba(0,0,0,.13);line-height:1}
/* 이미지가 없으면 캡션을 먹 글씨로 바꾼다 — 흰 글씨는 밝은 지면에서 안 보인다 */
.gp-band-sticky-cap.is-plain{color:var(--gp-ink);text-shadow:none}
.gp-band-sticky-cap.is-plain .gp-band-label{color:var(--gp-accent)}
.gp-band-sticky-media img{width:100%;height:100%;object-fit:cover}
.gp-band-sticky-cap{position:absolute;left:32px;bottom:32px;right:32px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.gp-band-sticky-cap .gp-band-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.gp-band-sticky-cap h2{font-size:2.4rem;line-height:1.2}
.gp-band-scroll{width:50%;padding:96px 40px}
.gp-band-scroll .gp-card{margin-bottom:72px}
.gp-band-scroll .gp-card:last-child{margin-bottom:0}
.gp-band-title{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:32px;color:var(--gp-accent)}

/* ==========================================================================
   6. 목록 머리 — 글쓴이/분류/검색 페이지 공통. 여백을 넉넉히 준다.
   ========================================================================== */
.gp-arch-head{padding:120px 0 48px;text-align:center}
.gp-arch-head .gp-avatar-lg{width:180px;height:180px;border-radius:50%;overflow:hidden;margin:0 auto 24px;background:var(--gp-line)}
.gp-arch-head .gp-avatar-lg img{width:100%;height:100%;object-fit:cover}
.gp-arch-head .gp-kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gp-accent);margin-bottom:14px}
.gp-arch-head h1{font-size:2.4rem;letter-spacing:-0.04em}
.gp-arch-head .gp-bio{max-width:560px;margin:14px auto 0;color:var(--gp-ink-soft);font-size:15px}
.gp-arch-head .gp-stats{display:flex;justify-content:center;gap:36px;margin-top:24px}
.gp-arch-head .gp-stats div{font-size:12px;color:var(--gp-ink-faint);letter-spacing:.08em;text-transform:uppercase}
.gp-arch-head .gp-stats b{display:block;font-size:24px;color:var(--gp-ink);letter-spacing:-0.03em}
.gp-arch-body{padding-top:40px}

/* ==========================================================================
   7. 낱글
   ========================================================================== */
.gp-single-head{padding:80px 0 28px;text-align:center}
.gp-single-head .gp-kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gp-accent);margin-bottom:16px}
.gp-single-head h1{font-size:2.9rem;letter-spacing:-0.045em;line-height:1.22}
.gp-single-head .gp-dek{font-size:18px;color:var(--gp-ink-soft);margin-top:14px}
.gp-single-byline{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;font-size:14px;color:var(--gp-ink-faint)}
.gp-single-byline .gp-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden}
.gp-single-byline .gp-avatar img{width:100%;height:100%;object-fit:cover}
.gp-single-byline b{font-weight:700;color:var(--gp-ink)}
.gp-cover{max-width:1100px;margin:0 auto;padding:0 var(--gp-gut)}
.gp-cover img{width:100%;border-radius:var(--gp-radius)}
.gp-cover figcaption{text-align:center;font-size:12px;color:var(--gp-ink-faint);margin-top:10px}

.gp-content{max-width:var(--gp-measure);margin:0 auto;padding:48px var(--gp-gut) 24px;font-size:17px;line-height:1.9}
.gp-content > * + *{margin-top:26px}
.gp-content h2{font-size:1.6rem;margin-top:48px}
.gp-content h3{font-size:1.3rem;margin-top:36px}
.gp-content blockquote{border-left:3px solid var(--gp-accent);padding:6px 0 6px 20px;margin-left:0;color:var(--gp-ink-soft);font-size:16px}
.gp-content img,.gp-content figure{border-radius:var(--gp-radius)}
.gp-content figcaption{font-size:12px;color:var(--gp-ink-faint);text-align:center;margin-top:8px}
.gp-content a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gp-accent)}
.gp-content ul,.gp-content ol{padding-left:1.3em}
.gp-content li + li{margin-top:8px}
.gp-content code{background:#efefe8;padding:2px 6px;border-radius:2px;font-size:.9em}
.gp-content pre{background:#efefe8;padding:16px;border-radius:var(--gp-radius);overflow-x:auto}
.gp-content table{width:100%;border-collapse:collapse;font-size:15px}
.gp-content th,.gp-content td{border:1px solid var(--gp-line);padding:8px 10px;text-align:left}

.gp-tags{max-width:var(--gp-measure);margin:0 auto;padding:8px var(--gp-gut) 32px}
.gp-tags a{display:inline-block;border:1px solid var(--gp-line);border-radius:20px;padding:6px 14px;font-size:12px;color:var(--gp-ink-soft);margin:0 6px 8px 0}
.gp-tags a:hover{text-decoration:none;border-color:var(--gp-ink);color:var(--gp-ink)}

.gp-related{border-top:1px solid var(--gp-line);margin-top:32px;padding-top:48px}
.gp-related .gp-sec-title{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gp-accent);margin-bottom:28px}

/* ==========================================================================
   8. 쪽 넘김 — 상자 없이 숫자만. 현재 쪽은 굵은 밑줄.
   ========================================================================== */
.gp-pagination{text-align:center;padding:16px 0 96px}
.gp-pagination .page-numbers{
  display:inline-block;min-width:40px;padding:2px 8px;margin:0 2px;
  font-size:1.35rem;font-weight:800;color:var(--gp-ink-faint);letter-spacing:-0.02em;
}
.gp-pagination a.page-numbers:hover{color:var(--gp-ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.gp-pagination .page-numbers.current{color:var(--gp-accent);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.gp-pagination .page-numbers.dots{text-decoration:none}

/* ==========================================================================
   9. 꼬리말
   ========================================================================== */
.gp-footer{border-top:1px solid var(--gp-line);padding:56px 0 72px;font-size:14px;color:var(--gp-ink-soft)}
.gp-footer-in{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.gp-footer-widgets{display:flex;gap:40px;flex-wrap:wrap}
.gp-footer-widget-title{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gp-ink-faint);margin-bottom:8px}
.gp-footer-widget ul{list-style:none;margin:0;padding:0}
.gp-footer-widget li{margin:4px 0;font-size:14px}
.gp-footer .gp-logo{font-size:17px;margin-bottom:12px}
.gp-footer nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.gp-footer .gp-copy{font-size:13px;color:var(--gp-ink-faint);margin-top:24px;width:100%}

/* 댓글 */
.gp-comments{max-width:var(--gp-measure);margin:0 auto;padding:48px var(--gp-gut) 80px}
.gp-comments h2{font-size:1.2rem;margin-bottom:24px}
.gp-comments ol{list-style:none;padding:0;margin:0}
.gp-comments .comment{border-top:1px solid var(--gp-line);padding:20px 0}
.gp-comments input[type=text],.gp-comments input[type=email],.gp-comments input[type=url],.gp-comments textarea{
  width:100%;border:1px solid var(--gp-line);background:#fff;padding:10px 12px;font:inherit;border-radius:var(--gp-radius)
}
.gp-comments .submit{background:var(--gp-ink);color:#fff;padding:12px 24px;font-weight:700;border-radius:var(--gp-radius);cursor:pointer;border:0}

/* 검색 결과 없음 / 404 */
.gp-empty{text-align:center;padding:120px var(--gp-gut) 160px}
.gp-empty h1{font-size:2.2rem;margin-bottom:12px}
.gp-empty p{color:var(--gp-ink-soft)}

/* ==========================================================================
   10. 반응형
   좁은 화면에서 카드는 가로형으로 눕는다 — 목록을 훑기 쉬워진다.
   ========================================================================== */
@media (max-width:1200px){
  .gp-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .gp-band-in{display:block}
  .gp-band-sticky{width:100%;position:relative;top:0}
  .gp-band-sticky-media{height:56vw;max-height:520px}
  .gp-band-scroll{width:100%;padding:48px var(--gp-gut)}
  .gp-band-scroll .gp-card{margin-bottom:40px}
  .gp-single-head h1{font-size:2.1rem}
}
@media (max-width:820px){
  .gp-grid,.gp-grid--3{grid-template-columns:repeat(2,1fr);gap:0 20px}
  .gp-arch-head{padding:64px 0 32px}
  .gp-arch-head .gp-avatar-lg{width:110px;height:110px}
  .gp-arch-head h1{font-size:1.8rem}
  .gp-card-title{font-size:1.15rem}
}
@media (max-width:600px){
  :root{--gp-gut:18px}
  .gp-grid,.gp-grid--3{display:block}
  .gp-card{display:flex;gap:14px;margin-bottom:26px}
  .gp-card-image{flex:0 0 40%;padding-bottom:52%;margin:0}
  .gp-card-image .gp-cat,.gp-card-image::after{display:none}
  .gp-card-body{flex:1 1 60%;min-width:0}
  .gp-card-cat-text{display:block}
  .gp-card-title{font-size:1.05rem;-webkit-line-clamp:3;margin-bottom:6px}
  .gp-card-excerpt{display:none}
  .gp-card-foot{display:block}
  .gp-card-author{display:flex;align-items:center;gap:8px;text-align:left;margin-top:8px}
  .gp-card-author .gp-avatar{width:26px;height:26px;margin:0}
  .gp-card-author p{font-size:12px}
  .gp-card-date{margin-top:6px;font-size:13px}
  .gp-single-head{padding:48px 0 20px}
  .gp-single-head h1{font-size:1.7rem}
  .gp-content{font-size:16px;padding-top:32px}
  .gp-panel-nav > div > ul > li > a{font-size:20px}
  .gp-pagination .page-numbers{font-size:1.1rem;min-width:32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   11. 하위 분류 띠 — 상위 분류 아래에 ALL + 자식 분류를 나란히 둔다
   ========================================================================== */
.gp-subnav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:24px}
.gp-subnav a{
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gp-ink-faint);padding-bottom:5px;border-bottom:2px solid transparent;
}
.gp-subnav a:hover{color:var(--gp-ink);text-decoration:none;border-bottom-color:var(--gp-line)}
.gp-subnav a.is-current{color:var(--gp-ink);border-bottom-color:var(--gp-accent)}

/* ==========================================================================
   12. 준비중 지면
   빈 목록을 그냥 두면 사이트가 고장 난 것처럼 보인다. 아직 준비 중이라는
   사실을 분명히 알리되, 지면 자체는 나머지 화면과 같은 격을 유지한다.
   ========================================================================== */
.gp-soon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:96px 24px 140px;
}
.gp-soon-mark{display:flex;gap:10px;margin-bottom:36px}
.gp-soon-mark span{
  width:12px;height:12px;border-radius:50%;background:var(--gp-accent);
  animation:gp-soon-pulse 1.4s ease-in-out infinite;
}
.gp-soon-mark span:nth-child(2){background:var(--gp-accent-2);animation-delay:.18s}
.gp-soon-mark span:nth-child(3){background:var(--gp-ink);animation-delay:.36s}
@keyframes gp-soon-pulse{
  0%,100%{transform:translateY(0);opacity:.35}
  50%    {transform:translateY(-9px);opacity:1}
}
.gp-soon-label{
  font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gp-accent);margin-bottom:16px;
}
.gp-soon h2{font-size:2.6rem;letter-spacing:-0.045em;margin-bottom:14px}
.gp-soon-desc{color:var(--gp-ink-soft);font-size:16px;max-width:460px;margin:0 auto}
.gp-soon-desc b{color:var(--gp-ink);font-weight:800}
.gp-soon-back{
  margin-top:36px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:2px solid var(--gp-ink);padding-bottom:4px;
}
.gp-soon-back:hover{text-decoration:none;color:var(--gp-accent);border-bottom-color:var(--gp-accent)}
@media (max-width:600px){
  .gp-soon{padding:64px 18px 96px}
  .gp-soon h2{font-size:1.8rem}
}

/* ==========================================================================
   13. 편집자 통로 — 글을 쓸 수 있는 사람에게만 보인다
   ========================================================================== */
.gp-write-btn,.gp-desk-btn{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border-radius:3px;line-height:1;
}
.gp-write-btn{background:var(--gp-ink);color:var(--gp-bg)}
.gp-write-btn:hover{background:var(--gp-accent);text-decoration:none}
.gp-desk-btn{border:1px solid var(--gp-line);color:var(--gp-ink-soft)}
.gp-desk-btn:hover{border-color:var(--gp-ink);color:var(--gp-ink);text-decoration:none}
@media (max-width:600px){ .gp-desk-btn{display:none} .gp-write-btn{padding:7px 10px} }

/* 카드의 회원공개 표시 */
.gp-card-lock{
  display:inline-block;margin-left:6px;font-size:11px;font-weight:800;
  letter-spacing:.06em;color:var(--gp-accent-2);vertical-align:middle;
}

/* ==========================================================================
   14. 낱글 표지 (hero)
   화면을 가득 채운 표지가 스크롤과 함께 흐려지고, 그 아래에서 본문이 올라온다.
   흐려지는 거리는 화면 두 배(200vh)로 잡는다 — 휠을 서너 번 굴려야 본문에 닿는다.
   ========================================================================== */
.gp-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:transparent;pointer-events:none}
.gp-progress i{display:block;height:100%;width:100%;background:var(--gp-accent);transform:scaleX(0);transform-origin:0 50%}

/* 표지가 머무는 무대. 이 높이만큼 굴려야 표지가 다 흐려진다. */
.gp-hero-stage{height:200vh;position:relative}
:root{--gp-headh:72px}

.gp-hero{
  /* 머리말이 sticky 로 위에 붙어 있으므로 그 높이만큼 내리고 그만큼 줄인다.
     이걸 안 하면 아래쪽의 글쓴이 사진과 SCROLL 표시가 화면 밖으로 잘린다. */
  position:sticky;top:var(--gp-headh,72px);height:calc(100vh - var(--gp-headh,72px));
  display:flex;overflow:hidden;
  background:var(--gp-hero-bg);color:var(--gp-hero-ink);
  opacity:var(--gp-hero-op,1);
  will-change:opacity;
}
.gp-hero-image{flex:1 1 50%;position:relative;overflow:hidden;background:rgba(0,0,0,.15)}
.gp-hero-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gp-hero-noimg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(120px,20vw,300px);font-weight:800;letter-spacing:-.06em;
  color:rgba(255,255,255,.14);
}

.gp-hero-desc{flex:1 1 50%;position:relative;padding:3vw;display:flex;flex-direction:column;justify-content:flex-start}
.gp-hero-top{padding-top:9vh;max-width:640px}
.gp-hero-cat{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;opacity:.85}
.gp-hero-cat a:hover{text-decoration:none;opacity:.7}

/* 제목이 이 화면의 주인공이다. 화면 폭에 따라 커지고, 굵은 밑줄로 못을 박는다. */
.gp-hero-title{
  font-size:clamp(30px,4.4vw,76px);line-height:1.14;letter-spacing:-0.045em;margin:0 0 18px;
  text-decoration:underline;text-decoration-thickness:.32vw;text-underline-offset:.7vw;
  text-decoration-color:currentColor;
}
.gp-hero-dek{font-size:clamp(15px,1.15vw,20px);line-height:1.6;opacity:.86;margin-bottom:20px;max-width:34em}
.gp-hero-date{font-size:14px;opacity:.7}

.gp-hero-bottom{position:absolute;right:3vw;bottom:3vw}
.gp-hero-author{display:block;text-align:center}
.gp-hero-author:hover{text-decoration:none;opacity:.8}
.gp-hero-avatar{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;margin:0 auto 8px}
.gp-hero-avatar img{width:100%;height:100%;object-fit:cover}
.gp-hero-name{font-size:14px;font-weight:700}

.gp-hero-scroll{
  position:absolute;left:3vw;bottom:3vw;font-size:11px;font-weight:800;
  letter-spacing:.2em;opacity:.65;display:flex;align-items:center;gap:10px;
}
.gp-hero-scroll span{display:block;width:1px;height:34px;background:currentColor;animation:gp-scroll-hint 1.8s ease-in-out infinite}
@keyframes gp-scroll-hint{0%,100%{transform:scaleY(.3);transform-origin:0 0;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* 본문은 표지 아래에서 올라온다. 배경을 깔아야 흐려진 표지가 비쳐 보이지 않는다. */
.gp-single-body{position:relative;z-index:2;background:var(--gp-bg);padding-top:8px}

/* ABOUT AUTHOR — 모든 글 아래에 놓이는 글쓴이 칸 */
.gp-about-author{max-width:var(--gp-measure);margin:8px auto 0;padding:32px var(--gp-gut) 8px;border-top:1px solid var(--gp-line)}
.gp-about-label{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gp-accent);margin-bottom:18px}
.gp-about-inner{display:flex;gap:20px;align-items:flex-start}
.gp-about-image{flex:0 0 84px}
.gp-about-image a,.gp-about-image img{display:block;width:84px;height:84px;border-radius:50%;overflow:hidden}
.gp-about-image img{object-fit:cover}
.gp-about-desc h3{font-size:1.2rem;margin-bottom:8px}
.gp-about-desc p{font-size:14px;color:var(--gp-ink-soft);line-height:1.75}
/* 익명일 때 — 이름과 소개를 흐리게 두어 '비어 있음'이 아니라 '가려 둠'으로 읽히게 한다 */
.gp-about-author.is-hidden .gp-about-desc h3{color:var(--gp-ink-faint);letter-spacing:.04em}
.gp-about-author.is-hidden .gp-about-desc p{color:var(--gp-ink-faint);font-style:italic}
.gp-about-author.is-hidden .gp-about-image img{border:1px solid var(--gp-line)}

@media (max-width:900px){
  /* 좁은 화면에서는 표지를 위아래로 쌓고, 흐려지는 거리도 줄인다. */
  .gp-hero-stage{height:170vh}
  .gp-hero{flex-direction:column;height:100vh}
  .gp-hero-image{flex:0 0 42%}
  .gp-hero-desc{flex:1 1 auto;padding:22px 18px 74px;overflow:hidden}
  .gp-hero-top{padding-top:0}
  .gp-hero-title{font-size:clamp(24px,7vw,38px);text-decoration-thickness:3px;text-underline-offset:5px}
  .gp-hero-dek{font-size:15px;margin-bottom:12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .gp-hero-bottom{right:18px;bottom:18px}
  .gp-hero-avatar{width:48px;height:48px}
  .gp-hero-name{font-size:12px}
  .gp-hero-scroll{left:18px;bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  /* 움직임을 줄이는 설정이면 표지를 굴리지 않고 바로 지나가게 한다. */
  .gp-hero-stage{height:100vh}
  .gp-hero-scroll span{animation:none}
}

/* REFERENCES — IEEE 방식 번호 매김. 본문보다 한 단 작고 조밀하게 짠다. */
.gp-refs{max-width:var(--gp-measure);margin:0 auto;padding:28px var(--gp-gut) 4px;border-top:1px solid var(--gp-line)}
.gp-refs-label{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gp-accent);margin-bottom:16px}
.gp-refs-list{list-style:none;margin:0;padding:0;counter-reset:gp-ref}
.gp-refs-list li{display:flex;gap:10px;font-size:14px;line-height:1.7;color:var(--gp-ink-soft);margin-bottom:8px}
.gp-refs-num{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--gp-ink)}
.gp-refs-text{flex:1 1 auto;word-break:break-word}
.gp-refs-empty{font-size:14px;color:var(--gp-ink-faint)}

/* 로고 — 계보선 심볼 + 글자를 한 줄로.
   예전에는 글자를 두 줄로 쌓았는데, 머리말 높이 안에서 위가 잘리고 아래가 빠듯했다.
   한 줄로 펴면 잘릴 일이 없고 가로로도 안정적으로 읽힌다. */
.gp-logo{display:inline-flex;align-items:center;gap:10px;color:var(--gp-ink);line-height:1}
.gp-logo-mark{width:32px;height:32px;flex:0 0 32px;display:block}
.gp-logo-words{display:inline-flex;flex-direction:row;align-items:baseline;gap:.32em;line-height:1.1;white-space:nowrap}
.gp-logo-words span{display:inline}
.gp-logo-words span:first-child{color:var(--gp-ink)}   /* GENEALOGY — 검정 */
.gp-logo-words span:last-child{color:var(--gp-accent)}  /* POST — 강조색 유지 */

/* 꼬리말 로고는 가운데로 모은다 */
.gp-footer .gp-logo{display:flex;justify-content:center;width:100%}
.gp-footer .gp-logo-mark{width:26px;height:26px;flex:0 0 26px}
.gp-footer-brand{text-align:center;width:100%}
.gp-footer-brand p{margin-top:8px;font-size:13px;color:var(--gp-ink-faint)}

@media (max-width:600px){
  .gp-logo-mark{width:26px;height:26px;flex:0 0 26px}
  .gp-logo{font-size:16px}
}