/* =========================================================================
   정병오 인생 라이브러리 — DARK (서고 톤)
   Neil Gaiman 디자인 시스템 이식판. "헌책방 + 극장 포스터".
   classic / bold 와 완전히 다른 어두운 문학적 톤.
   ========================================================================= */

/* ---------- Fonts: Paperlogy (로컬) ---------- */
@font-face { font-family:'Paperlogy'; font-weight:400; font-style:normal; font-display:swap;
  src:url('assets/fonts/Paperlogy-4Regular.ttf') format('truetype'); }
@font-face { font-family:'Paperlogy'; font-weight:500; font-style:normal; font-display:swap;
  src:url('assets/fonts/Paperlogy-5Medium.ttf') format('truetype'); }
@font-face { font-family:'Paperlogy'; font-weight:600; font-style:normal; font-display:swap;
  src:url('assets/fonts/Paperlogy-6SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Paperlogy'; font-weight:700; font-style:normal; font-display:swap;
  src:url('assets/fonts/Paperlogy-7Bold.ttf') format('truetype'); }
@font-face { font-family:'Paperlogy'; font-weight:800; font-style:normal; font-display:swap;
  src:url('assets/fonts/Paperlogy-8ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Paperlogy'; font-weight:900; font-style:normal; font-display:swap;
  src:url('assets/fonts/Paperlogy-9Black.ttf') format('truetype'); }

/* ---------- Design Tokens (게이먼 실측값 기반) ---------- */
:root {
  /* 배경 / 판 */
  --bg-deep:      #17100c;   /* 사이트 배경 (게이먼 #1d130f 보다 살짝 더 깊게) */
  --bg-hero:      #1d130f;   /* 히어로 */
  --bg-hero-2:    #2a1c14;   /* 히어로 그라데이션 상단 */
  --parchment:    #e0d1b2;   /* 콘텐츠 판 (양피지 탄) */
  --parchment-dk: #d2c09b;
  --cream:        #eee8d5;   /* 카드 */
  --cream-2:      #fff9e6;   /* 표지 뒤 얇은 크림 */
  --cream-border: #cbc5b7;
  --paper:        #ffffff;

  /* 잉크 / 텍스트 */
  --ink:          #241813;   /* 양피지 위 본문 */
  --ink-soft:     #5c4a3a;
  --on-dark:      #f3e9d6;   /* 어두운 배경 위 텍스트 */
  --on-dark-soft: #b7a284;

  /* 강조 */
  --nav:          #4a2410;
  --green:        #40643a;
  --green-bright: #88bd8b;
  --green-hover:  #6ba85e;
  --gold:         #b98a2e;   /* 게이먼 #644a13 를 밝은 금색 라인용으로 */
  --gold-deep:    #644a13;
  --blue:         #2a5a9e;
  --bread:        #c49d79;
  --amber:        #9e6a12;
  --rss:          #c26320;

  /* 유형별 색인 (콘텐츠 종류 = 색) */
  --t-book:   #61756a;   /* 저서 — 세이지 */
  --t-media:  #3e3842;   /* 인터뷰·미디어 — 퍼플그레이 */
  --t-essay:  #495878;   /* 칼럼·기고 — 슬레이트 블루 */
  --t-voice:  #3c322f;   /* 어록·강연 — 다크 브라운 */
  --t-act:    #40643a;   /* 활동·연대기 — 딥 그린 */

  /* 타이포 */
  --f-display: 'Paperlogy', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;  /* 라벨·대문자 */
  --f-head:    'Paperlogy', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;  /* 헤드라인 */
  --f-body:    'Paperlogy', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;  /* 본문 */

  /* 형태 */
  --maxw: 1200px;
  --indent: 8%;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-shell: 0 0 60px rgba(0,0,0,.85);
  --shadow-card:  0 2px 10px rgba(20,12,8,.12);
  --shadow-glow:  0 6px 26px rgba(20,12,8,.32);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.25em; }
ul { margin: 0; padding: 0; list-style: none; }

/* =========================================================================
   Shell — 어둠 위에 떠 있는 지면 (게이먼 시그니처)
   ========================================================================= */
.shell {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--bg-hero);
  box-shadow: var(--shadow-shell);
  overflow: hidden;
}
/* 종이 그레인 오버레이 */
.shell::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* =========================================================================
   Hero (dark)
   ========================================================================= */
.hero {
  position: relative;
  padding: 0 var(--indent) 70px;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-hero-2) 0%, var(--bg-hero) 55%, #150d09 100%);
  color: var(--on-dark);
  overflow: hidden;
}
/* 서가(책등) 느낌의 아주 옅은 세로선 */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: repeating-linear-gradient(
    90deg, transparent 0 46px,
    rgba(0,0,0,.35) 46px 47px,
    rgba(255,240,210,.03) 47px 48px);
  mask-image: linear-gradient(180deg, transparent, #000 60%, transparent);
}

/* 상단 바 */
.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 30px 0 26px;
  border-bottom: 1px solid rgba(185,138,46,.28);
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand .mark {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .34em;
  color: var(--gold);
  text-transform: uppercase;
}
.brand .name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .12em;
  color: var(--on-dark);
  margin-top: 8px;
}

/* Nav (게이먼: 링크 hover → 녹색) */
.nav { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.nav a {
  position: relative;
  font-family: var(--f-head);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--on-dark-soft);
  padding: 4px 0;
  transition: color .25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--green-bright);
  transition: width .3s var(--ease);
}
.nav a:hover { color: var(--green-bright); }
.nav a:hover::after { width: 100%; }

/* 히어로 본문 */
.hero-main {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  align-items: end;
  padding-top: 68px;
}
.hero-kicker {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}
.hero-title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: .96;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero-title .en {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(.9rem, 2.2vw, 1.25rem);
  letter-spacing: .5em;
  color: var(--on-dark-soft);
  margin-top: 22px;
  padding-left: .5em;
}
.hero-role {
  margin-top: 30px;
  font-family: var(--f-head);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: var(--on-dark);
  letter-spacing: .04em;
}
.hero-role .dot { color: var(--green-bright); margin: 0 .5em; }
.hero-desc {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--on-dark-soft);
  font-size: 1rem;
  line-height: 1.95;
}

/* "지금" 패널 — 게이먼 New Releases 오버레이 이식 */
.now {
  position: relative;
  padding: 30px 30px 32px;
  background: linear-gradient(160deg, rgba(60,42,28,.55), rgba(20,13,9,.65));
  border: 1px solid rgba(185,138,46,.35);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(2px);
}
.now::before {
  content: "";
  position: absolute; left: 0; top: 20px; bottom: 20px;
  width: 3px; background: var(--gold);
}
.now h2 {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.now .sub {
  font-family: var(--f-head);
  color: var(--on-dark);
  font-size: 20px;
  margin-bottom: 18px;
}
.now ul li {
  padding: 11px 0;
  border-top: 1px solid rgba(255,240,210,.12);
  color: var(--on-dark);
  font-size: 15px;
  line-height: 1.5;
}
.now ul li:first-child { border-top: 0; }
.now ul li b { color: var(--green-bright); font-weight: 500; }
.now ul li span { display: block; color: var(--on-dark-soft); font-size: 13px; }

/* =========================================================================
   Jagged divider — 게이먼 톱니선 이식 (CSS zigzag)
   ========================================================================= */
.divider {
  position: relative; z-index: 4;
  height: 18px;
  background:
    linear-gradient(-45deg, var(--parchment) 9px, transparent 0) 0 9px,
    linear-gradient( 45deg, var(--parchment) 9px, transparent 0) 0 9px;
  background-size: 18px 18px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 -3px 6px rgba(0,0,0,.4));
}

/* =========================================================================
   Parchment 본문 판
   ========================================================================= */
.panel {
  position: relative;
  background: var(--parchment);
  background-image:
    radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.35), transparent 40%);
  color: var(--ink);
  padding: 8px var(--indent) 80px;
}

/* 섹션 제목 공통 */
.sec-head { margin: 76px 0 30px; }
.sec-head .eyebrow {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 10px;
}
.sec-head h2 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1.05;
}
.sec-head .lead {
  margin-top: 14px;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ---------- 홈 3단 (게이먼 bottom-area) ---------- */
.home-grid {
  display: grid;
  grid-template-columns: .85fr 1.2fr .95fr;
  gap: 34px;
  padding-top: 54px;
}
.col h3.col-title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: .04em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(36,24,19,.18);
}
.col-a h3.col-title { color: var(--gold-deep); }
.col-b h3.col-title { color: var(--green); }
.col-c h3.col-title { color: var(--blue); }

/* 오늘의 문장 (Coming Soon 이식) */
.today {
  background: linear-gradient(155deg, #24312c, #171d1a);
  color: var(--cream);
  border: 2px solid #10140f;
  border-radius: var(--radius-sm);
  padding: 34px 28px;
  position: relative;
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: center;
}
.today .qmark {
  font-family: Georgia, serif;
  font-size: 84px; line-height: .3;
  color: rgba(136,189,139,.5);
  margin-bottom: 26px;
}
.today p {
  font-family: var(--f-head);
  font-size: 1.35rem;
  line-height: 1.55;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.today cite {
  font-style: normal;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-bright);
}

/* 저널 종이 카드 (paper 이식) */
.paper {
  background: var(--paper);
  border: 1px solid var(--cream-border);
  box-shadow: var(--shadow-card);
  padding: 30px 32px 34px;
}
.paper .date {
  text-align: right;
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.paper h4 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.35;
  color: #7a2718;
  margin-bottom: 14px;
}
.paper p { color: #33241c; font-size: .98rem; }
.paper .src { color: var(--ink-soft); font-size: .85rem; font-style: italic; }
.morelink {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber);
  margin-top: 20px;
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.morelink::after { content: "→"; transition: transform .25s var(--ease); }
.morelink:hover { color: #7a2718; }
.morelink:hover::after { transform: translateX(4px); }

/* 연대기 (updates 이식) */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(var(--blue), transparent);
}
.timeline li {
  position: relative;
  padding: 0 0 20px 4px;
}
.timeline li::before {
  content: ""; position: absolute; left: -22px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--parchment); border: 2px solid var(--blue);
}
.timeline .yr {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px; letter-spacing: .1em;
  color: var(--blue);
}
.timeline .ev { display: block; color: var(--ink); font-size: .95rem; line-height: 1.5; }

/* =========================================================================
   서가 — 저서 그리드 (one-work 이식)
   ========================================================================= */
.stacks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 26px;
}
.book {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  padding: 16px 14px 18px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.book:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); }
.book .cover {
  background: var(--cream-2);
  border: 1px solid #e6ddc2;
  padding: 14px;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  height: 200px;
  overflow: hidden;
}
.book .cover img {
  max-height: 100%;
  width: auto;
  box-shadow: 0 4px 14px rgba(20,12,8,.28);
  transition: transform .4s var(--ease);
}
.book:hover .cover img { transform: scale(1.04); }
.book .bt {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 6px;
}
.book .bm {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .1em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* =========================================================================
   유형별 색인 (Cool Stuff box-tag 이식) — 콘텐츠 종류 = 색
   ========================================================================= */
.index-list { display: grid; gap: 20px; }
.index-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.index-row:hover { box-shadow: var(--shadow-glow); transform: translateX(4px); }
.index-tag {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 20px 12px;
  color: #fff;
}
.index-tag .label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: .12em;
}
.index-tag.book  { background: var(--t-book); }
.index-tag.media { background: var(--t-media); }
.index-tag.essay { background: var(--t-essay); }
.index-tag.voice { background: var(--t-voice); }
.index-body { padding: 26px 30px; }
.index-body .count {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 8px;
}
.index-body h3 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.index-body p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 12px; }
.index-body .ex { color: var(--ink); }
.index-body .ex b { font-weight: 700; }

/* =========================================================================
   어록 (interview-quote 이식)
   ========================================================================= */
.voices {
  background: linear-gradient(180deg, #1d130f, #241812);
  color: var(--on-dark);
  margin: 80px calc(-1 * var(--indent)) -80px;
  padding: 90px var(--indent) 96px;
  position: relative;
}
.voices .sec-head h2 { color: #fff; }
.voices .sec-head .eyebrow { color: var(--green-bright); }
.voices .sec-head .lead { color: var(--on-dark-soft); }
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 42px;
}
.quote {
  position: relative;
  padding: 40px 30px 30px;
  border: 1px solid rgba(185,138,46,.28);
  border-radius: var(--radius-sm);
  background: rgba(255,240,210,.02);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.quote:hover { border-color: rgba(136,189,139,.5); background: rgba(136,189,139,.05); }
.quote::before {
  content: "\201C";
  position: absolute; top: 8px; left: 18px;
  font-family: Georgia, serif;
  font-size: 76px; line-height: 1;
  color: rgba(185,138,46,.4);
}
.quote p {
  font-family: var(--f-head);
  font-size: 1.2rem;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 18px;
}
.quote cite {
  font-style: normal;
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-bright);
}

/* =========================================================================
   Footer
   ========================================================================= */
.foot {
  background: #120c08;
  color: var(--on-dark-soft);
  padding: 56px var(--indent) 60px;
  position: relative; z-index: 4;
}
.foot-top {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: flex-end;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(185,138,46,.22);
}
.foot .mark {
  font-family: var(--f-display);
  font-weight: 700; font-size: 13px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold);
}
.foot .fname {
  font-family: var(--f-head);
  font-weight: 800; font-size: 1.6rem; letter-spacing: .1em;
  color: var(--on-dark); margin-top: 8px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 9px 10px; }
.foot-links a {
  font-family: var(--f-head); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
  color: #fff; background: var(--amber); border: 1px solid transparent;
  padding: 6px 16px; border-radius: 20px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.foot-links a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.4); filter: brightness(1.08); }
/* 유형별 색 — 라이브러리 미리보기 칩과 동일 */
.foot-links a[href="books.html"]      { background: var(--t-book); }
.foot-links a[href="columns.html"]    { background: var(--t-essay); }
.foot-links a[href="interviews.html"] { background: var(--t-media); }
.foot-links a[href="activities.html"] { background: var(--t-act); }
.foot-links a[href="quotes.html"]     { background: var(--t-voice); }
/* 홈 · 열람실 = 중립 아웃라인 */
.foot-links a[href="index.html"],
.foot-links a[href="catalog.html"] {
  background: transparent; color: var(--on-dark-soft);
  border-color: rgba(185, 138, 46, .45);
}
.foot-links a[href="index.html"]:hover,
.foot-links a[href="catalog.html"]:hover { color: #fff; border-color: var(--green-bright); filter: none; }
/* 공유 — 헤더에서 푸터로 이동 */
.foot-share {
  display: flex; align-items: center; gap: 14px;
  padding: 24px 0 2px;
}
.foot-share .lbl {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.foot-share a { display: inline-flex; }
.foot-share svg { width: 20px; height: 20px; fill: var(--on-dark-soft); transition: fill .2s var(--ease); }
.foot-share a:hover svg { fill: var(--green-bright); }
.foot-bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 13px; color: #6b5844;
}
.foot-bottom .gift { color: var(--bread); }

/* =========================================================================
   Motion — 로드 스태거 + 스크롤 리빌
   ========================================================================= */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.load { opacity: 0; animation: rise .9s var(--ease) forwards; }
.d1 { animation-delay: .15s; }
.d2 { animation-delay: .3s; }
.d3 { animation-delay: .45s; }
.d4 { animation-delay: .6s; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .load, [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
  :root { --indent: 6%; }
  .hero-main { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .now { max-width: 460px; }
  .home-grid { grid-template-columns: 1fr 1fr; }
  .col-c { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --indent: 22px; }
  body { font-size: 15px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nav { gap: 2px 18px; }
  .hero-main { padding-top: 44px; }
  .home-grid { grid-template-columns: 1fr; gap: 40px; }
  .col-c { grid-column: auto; }
  .stacks { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
  .index-row { grid-template-columns: 92px 1fr; }
  .index-tag .label { font-size: 1.3rem; }
  .index-body { padding: 22px; }
  .voices { padding: 64px var(--indent) 70px; }
}
@media (max-width: 420px) {
  .stacks { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 3rem; }
}

/* =========================================================================
   INSIDE 템플릿 + 상세 페이지 (게이먼 2-템플릿 구조)
   ========================================================================= */

/* 홈 히어로 (간략판) */
.hero .hero-lead.solo { padding: 66px 0 44px; max-width: 940px; }
.nav a.active { color: var(--green-bright); }
.nav a.active::after { width: 100%; }

/* inside 히어로 — 홈보다 낮게 */
.hero.inside { padding-bottom: 46px; }
.page-title { position: relative; z-index: 3; padding-top: 50px; }
.page-title .hero-kicker { margin-bottom: 16px; }
.page-title h1 {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
}
.page-title .pt-sub {
  margin-top: 18px;
  max-width: 52ch;
  color: var(--on-dark-soft);
  font-size: 1.02rem;
}

/* 빵부스러기 */
.breadcrumbs {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a6f4f;
  padding: 26px 0 4px;
}
.breadcrumbs a { color: #9a7449; transition: color .25s var(--ease); }
.breadcrumbs a:hover { color: var(--nav); }
.breadcrumbs .sep { margin: 0 .6em; opacity: .45; }
.breadcrumbs .here { color: var(--ink); }

/* 리드 문단 */
.lede {
  font-family: var(--f-head);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 62ch;
  margin: 30px 0 6px;
}
.count-line {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber);
  margin: 34px 0 0;
}

/* =========================================================================
   홈 목차 (TOC) — 도서관 입구
   ========================================================================= */
.toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.toc a {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-left: 5px solid var(--c, var(--amber));
  border-radius: var(--radius-sm);
  padding: 26px 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.toc a:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); }
.toc a.book  { --c: var(--t-book); }
.toc a.essay { --c: var(--t-essay); }
.toc a.media { --c: var(--t-media); }
.toc a.act   { --c: var(--t-act); }
.toc a.voice { --c: var(--t-voice); }
.toc .num {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber);
}
.toc h3 {
  font-family: var(--f-head);
  font-weight: 800; font-size: 1.55rem; color: var(--ink);
  margin-top: 4px;
}
.toc p { margin: 7px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.toc .arw {
  font-family: var(--f-display);
  font-size: 1.5rem; color: var(--c, var(--amber));
  transition: transform .3s var(--ease);
}
.toc a:hover .arw { transform: translateX(6px); }

/* =========================================================================
   기록 리스트 (칼럼 · 인터뷰) — one-blog 이식
   ========================================================================= */
.records { margin-top: 30px; border-top: 1px solid var(--cream-border); }
.record {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 6px 26px;
  align-items: baseline;
  padding: 22px 6px;
  border-bottom: 1px dashed #b9a985;
  transition: background .25s var(--ease);
}
.record:hover { background: rgba(255,255,255,.42); }
.record .rd {
  font-family: var(--f-display);
  font-weight: 600; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--acc, var(--amber));
}
.record .rt {
  font-family: var(--f-head);
  font-weight: 700; font-size: 1.16rem; line-height: 1.45; color: var(--ink);
}
.record .rt .tag {
  font-family: var(--f-body); font-weight: 400; font-size: .82rem;
  color: var(--ink-soft); margin-left: .5em;
}
.record .rs { color: var(--ink-soft); font-size: .84rem; white-space: nowrap; }
.records.essay { --acc: var(--t-essay); }
.records.media { --acc: var(--t-media); }
/* 클릭 가능한 기록(원문 링크) */
a.record { cursor: pointer; }
a.record .rs { text-decoration: underline; text-underline-offset: 3px; }
a.record:hover .rt { color: var(--acc, var(--amber)); }
/* 인용 출처 링크 */
.quote cite a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .2s var(--ease); }
.quote cite a:hover { color: var(--green-bright); }
.quote.light cite a:hover { color: var(--green); }

/* 서브섹션 제목 */
.subhead {
  font-family: var(--f-head);
  font-weight: 800; font-size: 1.5rem; color: var(--ink);
  margin: 56px 0 6px;
  padding-left: 14px;
  border-left: 5px solid var(--acc, var(--amber));
}
.subhead.essay { --acc: var(--t-essay); }
.subhead.media { --acc: var(--t-media); }
.subhead.act   { --acc: var(--t-act); }
.subhead .s {
  display: block;
  font-family: var(--f-display); font-weight: 500;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 6px; padding-left: 0;
}

/* =========================================================================
   활동 — 직함 카드 + 강연/성명
   ========================================================================= */
.roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px; margin-top: 26px;
}
.role {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-top: 4px solid var(--t-act);
  border-radius: var(--radius-sm);
  padding: 26px 24px;
}
.role .rn { font-family: var(--f-head); font-weight: 800; font-size: 1.22rem; color: var(--ink); line-height: 1.35; }
.role .ro { color: var(--ink-soft); font-size: .9rem; margin-top: 10px; line-height: 1.5; }

/* 활동 연대기 — 홈 timeline 재사용, 초록 톤 */
.act-timeline { --tl: var(--t-act); margin-top: 28px; padding-left: 24px; position: relative; }
.act-timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(var(--t-act), transparent);
}
.act-timeline li { position: relative; padding: 0 0 24px 6px; }
.act-timeline li::before {
  content: ""; position: absolute; left: -24px; top: 9px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--parchment); border: 2px solid var(--t-act);
}
.act-timeline .yr { font-family: var(--f-display); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; color: var(--t-act); }
.act-timeline .ev { display: block; color: var(--ink); font-size: 1rem; line-height: 1.55; margin-top: 2px; }
.act-timeline .ev b { font-weight: 700; }

/* =========================================================================
   어록 페이지 — 밝은 변형
   ========================================================================= */
.qgroup { margin-top: 46px; }
.qgroup .qh {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--amber);
  border-bottom: 1px solid var(--cream-border);
  padding-bottom: 10px; margin-bottom: 4px;
}
.quote.light {
  border-color: var(--cream-border);
  background: var(--paper);
}
.quote.light::before { color: rgba(185,138,46,.34); }
.quote.light p { color: var(--ink); }
.quote.light cite { color: var(--green); }
.quote.light:hover { border-color: rgba(64,100,58,.5); background: #fffdf7; }

/* 상세 페이지 하단 여백 정리 */
.panel.detail { padding-bottom: 90px; }

@media (max-width: 760px) {
  .record { grid-template-columns: 1fr; gap: 3px; padding: 18px 4px; }
  .record .rs { white-space: normal; }
  .page-title { padding-top: 34px; }
}

/* =========================================================================
   히어로 (홈) — 게이먼식 가로 3구획: 흰색 / 어두운 이미지 / 인물 최상단
   ========================================================================= */
.hero-g { position: relative; overflow: hidden; }

/* 인물 — 모든 요소 맨 위 (오른쪽, 머리 최상단) */
.hero-person {
  position: absolute; top: -1.4rem; right: 4%;
  height: calc(100% + 1.4rem); width: auto; z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.5));
}

/* 1) 흰색 띠 */
.band-white {
  position: relative; z-index: 3;
  background: #fbf7ee;
  padding: 30px var(--indent) 26px;
  min-height: 172px;
}
.band-white .brand { position: relative; padding-left: 20px; }
.band-white .brand::before {          /* 로고 좌측 세로선 */
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 2px; background: var(--gold);
}
.band-white .brand .mark {
  font-family: var(--f-display);
  font-weight: 800; font-size: 13px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--amber);
}
.band-white .brand .name {
  display: block;
  font-family: var(--f-head);
  font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: .12em; color: var(--ink); line-height: 1; margin-top: 8px;
}
.band-white .brand .name .en {
  font-family: var(--f-display);
  font-weight: 700; font-size: 0.36em; letter-spacing: .1em;
  color: var(--amber); margin-left: .55em; vertical-align: middle;
}
.g-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 18px; max-width: 620px; }
.g-nav a {
  position: relative;
  font-family: var(--f-head); font-weight: 500; font-size: 17px; letter-spacing: .02em;
  color: #3a1a0b; padding: 4px 0;
  transition: color .25s var(--ease);
}
.g-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px;
  background: var(--green); transition: width .3s var(--ease);
}
.g-nav a:hover { color: var(--green); }
.g-nav a:hover::after { width: 100%; }

/* 우상단 공유 */
.g-share {
  position: absolute; top: 12px; right: 3%; z-index: 7;
  display: none; align-items: center; gap: 12px;   /* 헤더 공유는 숨김 → 푸터로 이동 */
  background: #ece3cf; padding: 8px 14px; border-radius: 4px;
}
.g-share .lbl {
  font-family: var(--f-display); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber);
}
.g-share a { display: inline-flex; }
.g-share svg { width: 18px; height: 18px; fill: #5c4a3a; transition: fill .2s var(--ease); }
.g-share a:hover svg { fill: var(--green); }

/* 2) 어두운 이미지 띠 */
.band-dark {
  position: relative; z-index: 2;
  min-height: 452px;
  display: flex; align-items: center;
  padding: 40px var(--indent);
  background: #14100b url("assets/hero-woodland.png") center center / cover no-repeat;
}
.band-dark::before {                 /* 좌측 스크림 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(97deg, rgba(12,8,6,.86) 0%, rgba(12,8,6,.6) 30%, rgba(12,8,6,.15) 52%, rgba(12,8,6,0) 68%);
}
.releases {
  position: relative; z-index: 3;
  padding-left: 22px; border-left: 3px solid var(--gold); max-width: 640px;
}
.releases .kicker {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 12px;
}
.releases h1 {
  font-family: var(--f-head);
  font-weight: 800; font-size: clamp(1.7rem, 4.4vw, 3rem);
  letter-spacing: .05em; color: #fff; line-height: 1.1;
  text-shadow: 0 2px 26px rgba(0,0,0,.6);
}
.releases .dot { color: var(--green-bright); margin: 0 .35em; }

/* --- inside 변형: 짧은 어두운 띠 + 페이지 제목 + 빵부스러기 바 --- */
.hero-g.inside .band-dark { min-height: 200px; padding-top: 32px; padding-bottom: 30px; }
.page-title-in { position: relative; z-index: 3; }
.page-title-in .kicker {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 8px;
}
.page-title-in h1 {
  font-family: var(--f-head);
  font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: .06em; color: #fff; line-height: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.crumb-bar {
  display: none;   /* 빵부스러기 바 제거 (배경 더 보이게) */
  position: relative; z-index: 4;
  background: #231813;
  padding: 13px var(--indent) 11px;
  font-family: var(--f-head);
  font-size: 13px; letter-spacing: .06em;
  color: var(--bread);
}
.crumb-bar .here {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #8a6f4f; margin-right: .5em;
}
.crumb-bar a { color: #e0d1b2; transition: color .2s var(--ease); }
.crumb-bar a:hover { color: #fff; }
.crumb-bar .sep { margin: 0 .55em; opacity: .5; }
@media (max-width: 760px) {
  .hero-g.inside .band-dark { min-height: 130px; }
  .hero-g.inside .hero-person { display: none; }   /* 짧은 상세 헤더엔 인물 생략(겹침 방지) */
}

/* =========================================================================
   SNS 최신 피드
   ========================================================================= */
.sns { padding-top: 38px; }
.sns-head {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px;
}
.sns-head .eyebrow {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber); display: flex; align-items: center; gap: 10px;
}
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-body); letter-spacing: .12em; color: #7a8c5e;
}
.live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #6fbf73; box-shadow: 0 0 0 0 rgba(111,191,115,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111,191,115,.55); }
  70% { box-shadow: 0 0 0 9px rgba(111,191,115,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,191,115,0); }
}
.sns-head h2 {
  font-family: var(--f-head);
  font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: .04em; color: var(--ink); margin-top: 8px;
}
.follow {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1877f2; color: #fff;
  font-family: var(--f-head); font-weight: 700; font-size: 15px;
  padding: 12px 22px; border-radius: 8px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.follow:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(24,119,242,.35); filter: brightness(1.05); }
.follow svg { width: 20px; height: 20px; fill: #fff; }

.sns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 16px;
}
.sns-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cream-border);
  background: #d9c8a4;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sns-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.sns-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.sns-tile:hover img { transform: scale(1.05); }
.sns-tile .ov {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 18px 16px;
  background: linear-gradient(to top, rgba(13,9,7,.9) 0%, rgba(13,9,7,.35) 45%, rgba(13,9,7,0) 70%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.sns-tile:hover .ov { opacity: 1; }
.sns-tile .cap {
  font-family: var(--f-head); font-weight: 700; font-size: .98rem;
  color: #fff; line-height: 1.35;
}
.sns-tile .meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: var(--f-display); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-bright);
}
.sns-tile .meta svg { width: 13px; height: 13px; fill: currentColor; opacity: .9; }
.sns-note {
  margin-top: 12px;
  font-size: .82rem; color: var(--ink-soft); font-style: italic;
}

/* 라이브러리 미리보기 */
.lib-preview { padding-top: 50px; }
.lib-head { margin-bottom: 18px; }
.lib-head .eyebrow {
  font-family: var(--f-display); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 8px;
}
.lib-head h2 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3rem); color: var(--ink);
}
.lib-list { border-top: 1px solid var(--cream-border); }
.lib-row {
  display: grid; grid-template-columns: 84px 92px 1fr auto;
  align-items: center; gap: 4px 20px;
  padding: 16px 6px; border-bottom: 1px dashed #b9a985;
  transition: background .2s var(--ease);
}
.lib-row:hover { background: rgba(255,255,255,.45); }
.lib-row .ld {
  font-family: var(--f-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .06em; color: var(--ink-soft);
}
.lib-row .lc {
  justify-self: start;
  font-family: var(--f-head); font-weight: 700; font-size: 12px; color: #fff;
  background: var(--c, var(--amber)); padding: 3px 13px; border-radius: 20px; letter-spacing: .04em;
}
.lib-row .lt {
  font-family: var(--f-head); font-weight: 700; font-size: 1.08rem;
  color: var(--ink); line-height: 1.4;
}
.lib-row .lm {
  font-family: var(--f-display); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber); white-space: nowrap;
}
.lib-row:hover .lm { color: var(--green); }
/* 라이브러리 미리보기 — 전체 보기 버튼 */
.lib-more { text-align: center; margin-top: 30px; }
.btn-more {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-head); font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  color: var(--cream); background: var(--ink);
  padding: 13px 32px; border-radius: 30px; border: 1px solid var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-more:hover {
  background: var(--green); border-color: var(--green);
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(64, 100, 58, .32);
}

/* =========================================================================
   열람실 (카탈로그) — 전체 자료 목록 + 필터 + 검색
   ========================================================================= */
.cat-lede {
  font-family: var(--f-head); font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--ink); max-width: 60ch; margin: 24px 0 4px; line-height: 1.6;
}
.cat-tools { margin: 26px 0 22px; }
.cat-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cat-btn {
  font-family: var(--f-head); font-weight: 500; font-size: 14px;
  color: var(--ink); background: var(--cream); border: 1px solid var(--cream-border);
  padding: 7px 16px; border-radius: 22px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cat-btn:hover { border-color: var(--ink-soft); }
.cat-btn.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.cat-search-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cat-search {
  flex: 1; min-width: 220px;
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--cream-border);
  padding: 11px 18px; border-radius: 24px; outline: none;
  transition: border-color .2s var(--ease);
}
.cat-search:focus { border-color: var(--green); }
.cat-select {
  font-family: var(--f-body); font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--cream-border);
  padding: 10px 16px; border-radius: 24px; outline: none; cursor: pointer;
}
.cat-count {
  font-family: var(--f-display); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); white-space: nowrap;
}
.cat-list { border-top: 1px solid var(--cream-border); }
.cat-row {
  display: grid; grid-template-columns: 74px 84px 1fr auto;
  align-items: center; gap: 4px 18px;
  padding: 14px 6px; border-bottom: 1px dashed #b9a985;
  transition: background .2s var(--ease);
}
.cat-row:hover { background: rgba(255, 255, 255, .5); }
.cat-row .cd {
  font-family: var(--f-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .05em; color: var(--ink-soft); white-space: nowrap;
}
.cat-row .cc {
  justify-self: start;
  font-family: var(--f-head); font-weight: 700; font-size: 11.5px; color: #fff;
  background: var(--amber); padding: 3px 12px; border-radius: 20px; white-space: nowrap;
}
.cat-row[data-type="저서"] .cc { background: var(--t-book); }
.cat-row[data-type="칼럼"] .cc { background: var(--t-essay); }
.cat-row[data-type="인터뷰"] .cc { background: var(--t-media); }
.cat-row[data-type="어록"] .cc { background: var(--t-voice); }
.cat-row[data-type="활동"] .cc { background: var(--t-act); }
.cat-row .ct {
  font-family: var(--f-head); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); line-height: 1.4;
}
.cat-row .cs { font-family: var(--f-body); font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.cat-row[hidden] { display: none; }
.cat-empty { padding: 44px 0; text-align: center; color: var(--ink-soft); font-style: italic; }
.cat-empty[hidden] { display: none; }
@media (max-width: 640px) {
  .cat-row { grid-template-columns: auto 1fr; gap: 3px 12px; }
  .cat-row .cd { grid-column: 1 / -1; }
  .cat-row .ct { grid-column: 1 / -1; }
  .cat-row .cs { grid-column: 1 / -1; white-space: normal; }
}
@media (max-width: 620px) {
  .lib-row { grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px 4px; }
  .lib-row .ld { grid-column: 1 / -1; }
  .lib-row .lt { grid-column: 1 / -1; }
  .lib-row .lm { grid-column: 1 / -1; }
}

/* =========================================================================
   세로 책갈피 내비 — 오른쪽 검정 여백에 고정 (넓은 화면 전용)
   ========================================================================= */
.floatnav {
  position: fixed; top: 50%;
  left: calc(50% + var(--maxw) / 2);   /* 셸(콘텐츠) 오른쪽 끝 = 검정 경계 */
  right: auto;
  transform: translateY(-50%); z-index: 60;
}
.floatnav-inner {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px;
  background: rgba(251, 247, 238, .97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(90, 60, 30, .18); border-left: none;
  border-radius: 0 12px 12px 0;                 /* 튀어나온 오른쪽만 둥글게 */
  box-shadow: 8px 0 30px rgba(0, 0, 0, .45);    /* 검정 쪽으로 그림자 */
}
.floatnav .fn-brand { display: none; }   /* 책갈피엔 로고 생략 */
.fn-links { display: flex; flex-direction: column; gap: 2px; }
.fn-links a {
  font-family: var(--f-head); font-weight: 600; font-size: 15px;
  color: #3a1a0b; text-align: center; white-space: nowrap;
  padding: 9px 18px; border-radius: 0 9px 9px 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.fn-links a:hover { background: rgba(64, 100, 58, .12); color: var(--green); }
.fn-links a.active { background: var(--green); color: #fff; }
/* 셸 오른쪽에 책갈피가 튀어나올 검정 여백이 부족한 좁은 화면에선 숨김 */
@media (max-width: 1359px) { .floatnav { display: none; } }

/* --- 최근 소식: 3카드 (Facebook / Instagram / YouTube) 한 줄 --- */
.sns3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sns-card {
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sns-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); }
.sns-card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden; background: #d9c8a4;
}
.sns-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sns-card:hover .thumb img { transform: scale(1.05); }
.pbadge {
  position: absolute; top: 12px; left: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.pbadge svg { width: 18px; height: 18px; fill: #fff; }
.pbadge.fb { background: #1877f2; }
.pbadge.ig { background: radial-gradient(circle at 30% 108%, #fdc468 8%, #e1306c 45%, #a333c8 90%); }
.pbadge.yt { background: #ff0000; }
.sns-card .play {
  position: absolute; inset: 0; margin: auto;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.sns-card .play::after {
  content: ""; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.sns-card .cbody { padding: 12px 16px 14px; }
.sns-card .pname {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber);
}
.sns-card .ctitle {
  font-family: var(--f-head);
  font-weight: 700; font-size: 1.06rem; color: var(--ink);
  margin-top: 6px; line-height: 1.4;
}
.sns-card .ctime { font-size: .8rem; color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 620px) {
  .sns3 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .band-white { padding-top: 26px; min-height: 148px; }
  .g-share { display: none; }
  .g-nav a { font-size: 18px; }
  .band-dark { min-height: 320px; align-items: flex-start; padding-top: 32px; }
  .band-dark::before { background: linear-gradient(97deg, rgba(12,8,6,.9) 0%, rgba(12,8,6,.72) 46%, rgba(12,8,6,.34) 100%); }
  .releases { max-width: 100%; }
  .releases .kicker { font-size: 9.5px; letter-spacing: .12em; margin-bottom: 8px; }
  .releases h1 { font-size: 1.5rem; letter-spacing: .01em; line-height: 1.28; }
  .hero-person { height: 48%; right: -6%; top: auto; bottom: 0; }  /* 하단 우측, 텍스트와 안 겹치게 축소 */
  .sns-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .sns-grid { grid-template-columns: 1fr 1fr; }
  .releases h1 { font-size: 1.28rem; }
  .releases .kicker { font-size: 8.5px; letter-spacing: .08em; }
  .hero-person { height: 44%; right: -8%; }
}