/* ── 자체 폰트 (서브셋 woff2): KoPub 바탕·돋움 + 조선일보명조 */
@font-face { font-family: 'KoPub Batang'; src: url('/assets/fonts/kopub-batang-light.woff2') format('woff2'); font-weight: 300 400; font-display: swap; }
@font-face { font-family: 'KoPub Batang'; src: url('/assets/fonts/kopub-batang-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'KoPub Dotum'; src: url('/assets/fonts/kopub-dotum-light.woff2') format('woff2'); font-weight: 300 400; font-display: swap; }
@font-face { font-family: 'KoPub Dotum'; src: url('/assets/fonts/kopub-dotum-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* 본문 '고딕' 옵션 전용 — 포스타입이 고딕으로 쓰는 서체와 같다(SIL OFL 1.1).
   참여진 대부분이 포스타입에서 글을 보므로 '고딕'의 기대 인상이 여기에 맞춰져 있다.
   UI(마스트헤드·필터·리더바)는 KoPub 돋움 그대로 — 프레임은 잔서 브랜드로 고정한다. */
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/pretendard-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/pretendard-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'ChosunilboNM'; src: url('/assets/fonts/chosunilbo-nm.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* 수학용 굵은 이탤릭(U+1D468-U+1D49B) — 작품 제목에 쓰인다(콜라 님 「Sub Vinculis」).
   일반 알파벳이 아니라 별도 코드포인트라 위 폰트 7종에 한 글자도 없다(2026-08-27 확인).
   안 실으면 보는 사람 기기 폰트로 그려지고, 없는 기기에서는 두부가 된다.
   STIX Two Math(OFL)에서 이 블록만 잘라 실었다. unicode-range 덕에 실제로 쓰일 때만 받는다.
   제목이 □로 보이면 이 폰트 파일이 빠진 것이다. */
@font-face { font-family: 'MathBoldItalic'; src: url('/assets/fonts/stix-bolditalic.woff2') format('woff2');
  unicode-range: U+1D468-1D49B; font-display: swap; }

/* 쳌른웹진 :: 잔서 — 공용 스타일 (합본 시안 이식) */
:root { --ink: #16224d; --green: #3d5c50; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'MathBoldItalic', 'KoPub Batang', 'Gowun Batang', serif; color: var(--ink); min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(55% 45% at 18% 20%, rgba(255,255,255,0.55), transparent 70%),
    linear-gradient(170deg, #cfe8ea 0%, #7cc0cf 52%, #2e8fae 100%);
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAcCAYAAABlL09dAAADRElEQVR4AbSUW0gUURjHd3b2MqmbLaKRReKGl14SQ3rwklJBF8UkH0oJNaqXAhHXSwZmvZg96JaLWl72IRW6GWm1dEEh0yACS8joQcJWpVXc3LW978xs31mYZWZ3Gseo5fvmnPN9/+93vjNzWKnkP/1Eg/1+fzH4CbF9iAIDMMbnI3u8Xl8vmouBiwI7nZ6BsbdTnvHJaa/d6TL8EzB0WEKSVE5ljW7+orbVJPFLDkGsaD24YMcAiAXonQs1rd+taw4KeXVDuwley13IxQnBBcEURQ2+GH1vfT32YY2BDBsnraPjUzaSJPuZGN/4RzB0VERSdJa2QW8OLay+rDfTtH8/aPJDc8yaFwwFuM9H6XQdD8zo+IyYGS0WG6nvfrwIt0QPWl4GbxAA5622X+pbXQ+XYc5ruo57K3aHKwaSZ8DDLAwMHUSQJNXc1NwHx6XDCpgAnMh/tcVgpij6BtQQTJwZw8CQqJszme1DI29WYS5o94fGfpoWzB4QacE5xgHDznLwquut/XaOSmDRohu00TRdC3U4W8YBQyLfbndKn718Z4O5KBsxTtpcbq8MxEfAg8YBkyRZ/uT5hCWYFTGBbiVPjRMWkqTK2fIgGI4SieN4wW3D8Lrvlg1Ac0O/cVUqxY4DIwqtkQfBsMi2O9zu2W8L6GPAUrxNz8y63B4vBRX7wAPGBmt+mFe8gehfPJaWV11QpgEPGBucaFpcRrsGEht9mOaX0KVPZOrYYFdUBIGSTG5Do1IpR7U+pogN/pSStDOCSWx03J2SgGqnmDo2+KN6i0qlVm/mXHRGKDSqo1V49OYodCPCwRiGzcGnHa+tLNkqBOHLNdZVxDkc7lFgLDB5dseSTYSytOzU4diczD1od0YjOB7My1CdLD4QFxlJlLKFHDDsuIjj0ppe/aVduZlp68LzstKjunRaDYZJqjAM4/zFcsAS+OE43gmd1w/2NSVdqa/YBqEwA4jkWsPZ+IHexmRCoaiXyWTdoaIwMBIQhEIvl8syzpUV+Oe/DKVPvOpM6GzTxve0121Hc9PMo70Vp4+6QZOGtKgm1HnBSARdfVYqFRqFQp6apNlRVlyYe7PwWHYbmkMsmVAqUkHzFWn5/DcAAAD//wKRftwAAAAGSURBVAMAcItb2g90gMYAAAAASUVORK5CYII=) 11 3, auto;
}
button, a { cursor: inherit; }

/* MPA 페이지 전환: 진입 페이드 (전 브라우저 동일) */
main, footer { animation: pagein 0.45s ease both; }
@keyframes pagein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 내부 페이지 배경: 전용 배경 강블러 + 미스트 베일 (시안) */
body::before { content: ""; position: fixed; inset: -48px; z-index: -1;
  background:
    linear-gradient(rgba(203,233,233,0.5), rgba(100,181,196,0.34) 52%, rgba(16,123,158,0.42)),
    url('/assets/img/bg-main.jpg') center / cover no-repeat;  /* 베일 = 최종라인업 색감 (상단 아쿠아→하단 심해) */
  filter: blur(26px); }

#alive { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.07; mix-blend-mode: overlay;  /* 글자 아래층 — 텍스트 노이즈 방지 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.masthead { position: fixed; top: 24px; left: 28px; z-index: 6; font-size: 12px; letter-spacing: 0.14em; }
.masthead.scrolly { position: absolute; }  /* 내부 페이지: 본문과 함께 스크롤 */
.masthead a { color: inherit; text-decoration: none; }
.masthead .vol { display: block; margin-top: 5px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 10px; letter-spacing: 0.22em; opacity: 0.75; }
.backlink { position: fixed; top: 14px; right: 16px; z-index: 6; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif;
  font-weight: 400; font-size: 13px; letter-spacing: 0.2em; color: var(--ink); text-decoration: none;
  padding: 14px 18px; border: 1px solid transparent; transition: border-color 0.3s, background 0.3s; }
.backlink:hover { border-color: rgba(22,34,77,0.35); background: rgba(238,244,240,0.5); }

/* 클릭 파문 */
.clickripple { position: fixed; z-index: 40; pointer-events: none; border: 1px solid rgba(22,34,77,0.55);
  border-radius: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) scale(0.4); opacity: 0.8;
  animation: crip 0.8s ease-out forwards; }
.clickripple.r2 { animation-delay: 0.12s; opacity: 0.45; }
@keyframes crip { to { transform: translate(-50%, -50%) scale(6); opacity: 0; } }

main { position: relative; z-index: 2; min-height: 100vh; padding: 110px 26px 80px; }
footer { text-align: center; padding: 40px 20px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300;
  font-size: 9px; letter-spacing: 0.16em; opacity: 0.55; position: relative; z-index: 2; }

/* ── 인트로 (홈 전용): 틸트시프트 — 로고만 초점 */
#intro { position: fixed; inset: 0; z-index: 20; overflow: hidden; transition: opacity 1.4s ease, visibility 0s 1.4s; }
#intro.done { opacity: 0; visibility: hidden; pointer-events: none; }  /* visibility로 히트 자체 차단 */
#intro.skip { display: none; }
#intro .bg { position: absolute; inset: -4%; background: #9fd4de url('/assets/img/bg-main.jpg') center / cover no-repeat; }
@media (max-width: 700px) {
  #intro .bg { background-image: url('/assets/img/bg-main-m.jpg'); }
  body::before { background-image:
    linear-gradient(rgba(203,233,233,0.5), rgba(100,181,196,0.34) 52%, rgba(16,123,158,0.42)),
    url('/assets/img/bg-main-m.jpg'); }
}
#introAlive { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 인트로 감광 확정 (C안, 2026-07-20): 발행물 톤에 맞춰 밝기 12% 감소, 색감 무손실 */
#intro .bg { filter: brightness(0.88) saturate(1.06) contrast(1.02); }
#intro .band { position: absolute; left: 0; right: 0; pointer-events: none; backdrop-filter: blur(2.5px); }
#intro .band.t { top: 0; height: 14vh; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
#intro .band.b { bottom: 0; height: 14vh; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
#intro .mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  filter: blur(14px); opacity: 0.35; animation: logoFocus 3.6s cubic-bezier(.4,0,.2,1) 1s forwards; }
@keyframes logoFocus { to { filter: blur(0); opacity: 1; } }
#intro .mark .inner { position: relative; width: clamp(220px, 40vmin, 380px); height: clamp(220px, 40vmin, 380px); }
#intro .mark img { width: 100%; height: 100%; object-fit: contain;
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), transparent); }
#intro .im { position: absolute; top: 26px; left: 28px; color: var(--ink); font-size: 13px; letter-spacing: 0.14em;
  text-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 22px rgba(255,255,255,0.7);
  opacity: 0; animation: fadein 1.4s ease 3.6s forwards; }
#intro .im .vol { display: block; margin-top: 5px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.22em; opacity: 0.75; }
@keyframes fadein { to { opacity: 1; } }
#enter { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  background: rgba(255,255,255,0.55); border: none;
  color: var(--ink); font-family: 'KoPub Batang', 'Gowun Batang', serif; font-weight: 700;
  font-size: 15px; letter-spacing: 0.55em; text-indent: 0.55em; padding: 12px 18px;
  border-bottom: 1px solid rgba(22,34,77,0.55); opacity: 0; animation: fadein 1.4s ease 4.4s forwards; }
#skip { position: absolute; top: 26px; right: 28px; background: rgba(255,255,255,0.55);
  border: none; padding: 8px 12px; color: rgba(22,34,77,0.75);
  font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-size: 12px; letter-spacing: 0.2em; }

/* ── 홈: 정물 메뉴 */
.hero-title { text-align: center; margin-top: 3vh; }
.hero-title .logo-home { display: block; margin: 0 auto; height: clamp(130px, 24vmin, 210px);
  background: radial-gradient(closest-side, rgba(255,255,255,0.62), transparent); }
.hero-title .sub { margin-top: 12px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300;
  font-size: 12px; letter-spacing: 0.5em; text-indent: 0.5em; opacity: 0.7; }
.objects { max-width: 900px; margin: clamp(36px, 8vh, 80px) auto 0; position: relative; z-index: 5; /* 어떤 오버레이보다 위 — 호버 차단 방지 */
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 2.7vw, 38px); flex-wrap: wrap; }
/* 순차 등장: 입장 시점(body.entered)부터 재생 — 인트로 밑 선재생 방지 */
body.entered .objects .obj { animation: objin 0.55s ease backwards; }
body.entered .objects .obj:nth-child(1) { animation-delay: 0.1s; }
body.entered .objects .obj:nth-child(2) { animation-delay: 0.19s; }
body.entered .objects .obj:nth-child(3) { animation-delay: 0.28s; }
body.entered .objects .obj:nth-child(4) { animation-delay: 0.37s; }
body.entered .objects .obj:nth-child(5) { animation-delay: 0.46s; }
body.entered .menu-hint { animation-delay: 0.9s; }
@keyframes objin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.menu-hint { text-align: center; margin-top: 34px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 10.5px; letter-spacing: 0.3em; text-indent: 0.3em; opacity: 0;
  animation: fadein 1s ease 0.9s forwards; color: rgba(22,34,77,0.55); }
.obj { text-decoration: none; padding: 12px 4px 0; text-align: center; width: 118px; /* 라벨 길이 차로 물방울이 밀리지 않게 등폭 고정 */ transition: transform 0.45s cubic-bezier(.34,1.4,.5,1); }
.obj:hover { transform: translateY(-10px) scale(1.06); }
.obj:active { transform: translateY(-5px) scale(0.97); transition-duration: 0.15s; }
.obj:hover svg { filter: drop-shadow(0 8px 16px rgba(22,34,77,0.28)); }
.obj svg { display: block; margin: 0 auto; overflow: visible; }
.obj svg .fillable { fill: rgba(22,34,77,0); transition: fill 0.5s ease; }
.obj:hover svg .fillable { fill: rgba(22,34,77,0.17); }
.obj .lab { margin-top: 14px; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  font-size: 17px; color: var(--ink); letter-spacing: 0.06em; }
.obj .ko { display: block; margin-top: 4px; font-size: 12.5px; letter-spacing: 0.34em; text-indent: 0.34em; opacity: 0.7; white-space: nowrap; color: var(--ink); }

/* ── 목차 */
.tocwrap { max-width: 680px; margin: 0 auto; }
.tocwrap header { display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px; }
.tocwrap h1 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: clamp(28px, 5vw, 38px); }
.tocwrap .ko { font-size: 13px; letter-spacing: 0.3em; opacity: 0.65; }
.cpfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cpfilter button { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink); background: none; border: 1px solid rgba(22,34,77,0.35); border-radius: 999px;
  padding: 5px 13px; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.cpfilter button:hover { border-color: rgba(22,34,77,0.7); }
.cpfilter button.on { background: var(--ink); color: #eef4f0; border-color: var(--ink); }
.cpfilter .cnt { opacity: 0.6; margin-left: 3px; font-size: 10.5px; }
.toc-empty { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 12.5px; opacity: 0.55;
  padding: 26px 4px; text-align: center; }
.cptag { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.06em;
  border: 1px solid rgba(22,34,77,0.3); border-radius: 999px; padding: 1px 8px; opacity: 0.75; }
.tocwrap ol { list-style: none; counter-reset: n; }
.tocwrap ol li { counter-increment: n; border-bottom: 1px solid rgba(22,34,77,0.18); }
.tocwrap ol li[hidden] { display: none; }
.tocwrap ol .row { display: flex; align-items: baseline; gap: 16px; padding: 15px 4px;
  transition: padding-left 0.35s ease, background 0.35s; }
.tocwrap ol li:hover .row { padding-left: 14px; background: rgba(61,92,80,0.06); }
.tocwrap ol .row::before { content: counter(n, decimal-leading-zero); font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 11px; opacity: 0.5; }
.tocwrap .t { font-size: 14px; font-weight: 700; flex: 1; color: inherit; text-decoration: none; }
.tocwrap .by { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 12.5px; opacity: 0.6;
  color: inherit; text-decoration: none; padding: 2px 4px; border-bottom: 1px dashed transparent;
  transition: opacity 0.3s, border-color 0.3s; }
.tocwrap .by:hover { opacity: 1; border-color: rgba(22,34,77,0.5); }
.r19 { font-size: 9px; border: 1px solid rgba(22,34,77,0.5); padding: 1px 4px; margin-left: 8px; vertical-align: 1px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; }

/* ── 작품 페이지 */
/* 박스 폭은 본문 폭 기준으로 잡는다. box-sizing:border-box라 max-width에 padding이 포함되므로
   데스크톱 좌우 padding 48px씩을 더한 값이다 → 796 - 96 = 본문 700px.
   (예전 640px은 본문이 544px밖에 안 나왔다.) 모바일은 뷰포트가 더 좁아 이 값이 걸리지 않는다. */
.workwrap { max-width: 796px; margin: 0 auto; }
.workwrap .w-genre { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 15px; opacity: 0.6; }
.workwrap h1 { font-family: 'MathBoldItalic', 'ChosunilboNM', 'KoPub Batang', serif; font-size: clamp(25px, 4.8vw, 34px); font-weight: 400; letter-spacing: 0.04em; margin: 10px 0 14px; }
.workwrap .w-meta { display: flex; align-items: center; gap: 12px; }
.workwrap .w-meta .by { font-family: 'KoPub Batang', 'Gowun Batang', serif; font-size: 14px; font-weight: 700; color: var(--ink);
  text-decoration: none; padding: 0 2px 2px; border-bottom: 1px dashed rgba(22,34,77,0.4); transition: border-color 0.3s; }
.workwrap .w-meta .by:hover { border-bottom-style: solid; border-color: var(--ink); }
.workwrap .w-rule { height: 1px; background: rgba(22,34,77,0.3); margin: 28px 0 36px; }
/* 본문 글자 크기: 뷰포트 700px 이하는 15.5px 그대로(모바일 무변경),
   700 → 1280px 구간에서 17.5px까지 선형으로 커지고 그 위론 고정.
   rem 기준이라 사용자가 브라우저 기본 글자 크기를 키우면 같이 따라간다(루트 16px 기준 계산).
   여백(--blank)이 em이라 글자가 커지면 줄 간격·엔터 여백도 같은 비율로 커진다. */
.w-body { --fs: clamp(0.969rem, 0.818rem + 0.345vw, 1.094rem); font-size: var(--fs); line-height: 2.15; }
/* 문단 아래 여백은 두지 않는다. 여백은 아래 `.w-body > *`의 margin-top이 전부 만든다.
   예전엔 여기 margin-bottom: 1.6em이 남아 있었는데, `.w-body > *`(margin-bottom: 0)보다
   선택자 우선순위가 높아 실제로는 28px가 살아 있었다. margin 상쇄가 늘 큰 쪽(--blank)을
   골라서 눈에 안 띄었을 뿐이고, --gap이 0인 자리에선 없던 여백이 튀어나온다. */
.w-body .imgframe { border: 1px dashed rgba(22,34,77,0.4); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 12.5px; opacity: 0.6; letter-spacing: 0.1em; }

/* ── 원고 조판: 작가가 누른 엔터 수(--gap)를 그대로 여백으로 옮긴다.
   엔터 1번 = 빈 줄 1줄 높이(--blank). 글자 크기 토글에 따라 줄 높이가 바뀌므로 같이 따라간다.
   여백은 전부 margin-top으로만 만든다 — margin-bottom을 섞으면 상쇄돼서 위아래 대칭이 깨진다.

   단위는 하나(--blank)뿐이다. 문단·구분선·카드가 서로 다른 단위를 쓰면
   "3엔터"가 자리마다 다른 크기가 되고, 장면을 끊는 구분선이 평범한 문단 사이보다
   좁아지는 위계 역전이 생긴다(2026-07-26 6차에서 실제로 그랬다).
   ⚠️ 전체를 촘촘하게 되돌리려면 --blank 값만 낮추면 된다 (5차 값: 1.05em / 0.98em / 1.12em). */
.w-body > * { margin-top: calc(var(--gap, 1) * var(--blank)); margin-bottom: 0; }
.w-body { --blank: 2.15em; }
.w-body.fs-s { --blank: 2em; }
.w-body.fs-l { --blank: 2.3em; }

/* 도입부 뒤에 오는 제목 블록 (작가 원고의 연출) */
.w-body .titleblock { text-align: center; display: flex; flex-direction: column; gap: 0.65em; }
.w-body .titleblock span:first-child { font-family: 'MathBoldItalic', 'ChosunilboNM', 'KoPub Batang', serif;
  font-size: 1.5em; letter-spacing: 0.06em; line-height: 1.5; }
.w-body .titleblock span + span { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 0.76em; letter-spacing: 0.12em; opacity: 0.6; }

/* 구분선 — 작가가 원고에 쓴 이모지·기호. 등록된 것은 .sep-i(SVG), 나머지는 .sep-ch(글자 폴백) */
/* 구분선 자체엔 고정 여백을 주지 않는다 — 위아래 간격은 원고의 엔터 수(--gap)가 정한다.
   작가가 구분선 위아래를 대칭으로 맞춰놨는데(4/4·3/3·2/2) 고정 여백을 얹으면 그게 깨진다. */
.w-body .sep { display: flex; justify-content: center; align-items: center; gap: 0.65em; opacity: 0.62; }
.w-body .sep-i { width: 1.94em; height: 1.94em; }
.w-body .sep-ch { font-size: 1.42em; line-height: 1.94em; letter-spacing: 0; }
.w-body .sep-i .plate { fill: rgba(255,255,255,0.55); }
.workwrap.paper.dark .sep-i .plate { fill: rgba(236,239,242,0.12); }

/* 유튜브 파사드 카드 — 클릭 전엔 유튜브로 요청이 나가지 않는다 */
/* 리더바(글자 크기·명암) 바로 아래에 붙으므로 엔터 2번만큼 띄운다.
   원고에는 없는 여백이지만, 리더바는 사이트 UI라 본문 첫 요소와 붙으면 답답하다.
   em 기준이라 글자 크기 3단계·데스크톱 확대에 그대로 따라간다. */
.w-body .bgmline { --gap: 2; margin-bottom: 0; }
/* font: inherit 필수 — button은 font-size를 상속하지 않아 브라우저 기본값(13.3px)이 걸린다.
   그러면 안쪽 em이 전부 그 값 기준이 돼서 본문이 커져도 카드만 그대로 남는다. */
.yt-go { font: inherit; display: flex; align-items: center; gap: 0.65em; width: 100%; cursor: pointer;
  padding: 0.78em 1.03em; border: 1px solid rgba(22,34,77,0.28); border-radius: 0.26em;
  background: rgba(255,255,255,0.4); color: inherit; text-align: left;
  transition: border-color 0.3s, background 0.3s; }
.yt-go:hover { border-color: rgba(22,34,77,0.55); background: rgba(255,255,255,0.7); }
.yt-go svg { width: 1.68em; height: 1.94em; flex: none; }
.yt-lab { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300;
  font-size: 0.68em; letter-spacing: 0.14em; opacity: 0.6; flex: none; }
.yt-txt { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.yt-t { font-family: 'KoPub Batang', 'Gowun Batang', serif; font-size: 0.87em;
  line-height: 1.5; opacity: 0.85; }
.yt-hint { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300;
  font-size: 0.68em; letter-spacing: 0.04em; line-height: 1.4; opacity: 0.45; }
.workwrap.paper.dark .yt-go { border-color: rgba(236,239,242,0.3); background: rgba(236,239,242,0.06); }
.workwrap.paper.dark .yt-go:hover { border-color: rgba(236,239,242,0.55); background: rgba(236,239,242,0.11); }
/* 재생 중 — 16:9 iframe으로 교체 */
.w-body .ytcard.playing, .w-body .bgmline .ytcard.playing { display: block; }
.ytcard iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 0.26em; display: block; }

/* ── 본문 복사 방지 (작품 본문에만 — 내비·게이트 입력은 정상 동작)
   PC는 드래그 선택, 모바일은 길게 눌러 뜨는 선택 메뉴를 함께 막는다.
   완벽한 보호는 아니다(개발자도구로는 읽힌다) — 우발적 복사를 막는 수준. */
.w-body, .workwrap h1, .workwrap .w-meta {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.w-body img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.w-body .ytcard, .w-body .ytcard * { pointer-events: auto; }

.w-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(22,34,77,0.2);
  display: flex; justify-content: space-between; align-items: center; }
.w-foot a { color: var(--ink); font-family: 'KoPub Batang', 'Gowun Batang', serif; text-decoration: none;
  font-size: 13.5px; letter-spacing: 0.14em; padding: 10px 6px; border-bottom: 1px solid transparent;
  transition: border-color 0.3s; }
.w-foot a:hover { border-color: rgba(22,34,77,0.5); }

/* ── 19금 게이트 */
#gate { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  background: rgba(24,38,36,0.45); backdrop-filter: blur(6px); }
#gate.on { display: flex; }
body.gated main, body.gated footer { filter: blur(10px); pointer-events: none; user-select: none; }
#gate .box { background: #eef4f0; border: 1px solid rgba(22,34,77,0.3); max-width: 400px; width: calc(100% - 48px);
  padding: 36px 32px; text-align: center; }
#gate h2 { font-size: 19px; letter-spacing: 0.12em; margin-bottom: 6px; }
/* 검수 잠금 — 19금과 구분되게 문구형 제목 */
#gate h2.draft { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300;
  font-size: 11px; letter-spacing: 0.22em; opacity: 0.55; margin-bottom: 10px; }
#gate .wt { font-size: 13.5px; opacity: 0.8; margin-bottom: 16px; }
#gate p { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 12.5px; line-height: 1.85;
  opacity: 0.75; margin-bottom: 20px; }
#gate input { width: 100%; border: 1px solid rgba(22,34,77,0.4); background: rgba(255,255,255,0.75);
  padding: 11px 12px; font-size: 15px; text-align: center; letter-spacing: 0.3em;
  font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; color: var(--ink); outline: none; }
#gate input:focus { border-color: var(--ink); }
#gate input.err { border-color: #a0574e; animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#gate .gerr { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-size: 11px; color: #a0574e; margin-top: 8px; min-height: 15px; }
#gate .grow { display: flex; gap: 10px; margin-top: 12px; }
#gate .grow a, #gate .grow button { flex: 1; padding: 12px; border: 1px solid rgba(22,34,77,0.45); background: none;
  font-family: 'KoPub Batang', 'Gowun Batang', serif; font-size: 13.5px; letter-spacing: 0.2em; text-indent: 0.2em;
  color: var(--ink); text-decoration: none; text-align: center; }
#gate .grow .primary { background: var(--ink); color: #eef4f0; }
#gate .gnote { margin-top: 16px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 10.5px; opacity: 0.5; }

/* ── Comments */
.guestwrap h1 { text-align: center; font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(26px, 5vw, 36px); margin-bottom: 8px; }
.guestwrap .hint { text-align: center; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 11px; opacity: 0.6;
  margin-bottom: 54px; letter-spacing: 0.1em; }  /* 블록1↔2 (+24px 확정) */
.pond { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 38px; }
.floatname { position: relative; background: none; border: none; padding: 6px 2px;
  font-family: 'KoPub Batang', 'Gowun Batang', serif; font-size: 15.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; opacity: 0.8; transition: opacity 0.3s, transform 0.4s cubic-bezier(.34,1.4,.5,1); }
.floatname:hover, .floatname.sel { opacity: 1; transform: translateY(-8px); }
.floatname::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 34px; height: 8px;
  transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(22,34,77,0.3); opacity: 0; transition: opacity 0.4s; }
.floatname:hover::after, .floatname.sel::after { opacity: 1; }
#guestCard { max-width: 540px; margin: 42px auto 0; /* 블록2↔3 (+24px 확정) */ background: rgba(238,244,240,0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(22,34,77,0.2); padding: 24px 26px; opacity: 0; transform: translateY(8px); transition: opacity 0.6s, transform 0.6s; }
#guestCard.show { opacity: 1; transform: none; }
#guestCard b { display: block; margin-bottom: 8px; font-size: 15px; }
#guestCard > p { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 13.5px; line-height: 1.8; }
#gcWorks { margin-top: 18px; border-top: 1px solid rgba(22,34,77,0.2); padding-top: 14px; text-align: left; }
#gcWorks .wlab { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
#gcWorks ul { list-style: none; }
#gcWorks .gw-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 4px; font-size: 13.5px; width: 100%;
  color: inherit; text-decoration: none; transition: background 0.3s, padding-left 0.3s; }
#gcWorks .gw-row:hover { background: rgba(61,92,80,0.07); padding-left: 10px; }
#gcWorks .gw-t { font-weight: 700; flex: 1; }
#gcWorks .gw-g { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 11px; opacity: 0.55; }


@media (prefers-reduced-motion: reduce) {
  /* 큰 모션(블러 리빌·이동)만 제거하고 은은한 페이드는 유지 — '냅다 점프' 방지 */
  @keyframes rmfade { from { opacity: 0; } to { opacity: 1; } }
  #intro .mark { animation: rmfade 1s ease 0.3s both; filter: none; }
  #intro .im { animation: rmfade 0.9s ease 1.4s both; }
  #enter { animation: rmfade 0.9s ease 2s both; }
  body.entered .objects .obj { animation: rmfade 0.6s ease both !important; transform: none !important; }
  main, footer { animation: rmfade 0.6s ease both; transform: none; }
}

/* ── 작품 뷰어: 세로 스크롤 / 슬라이드 (표현 옵션 연동) */
.viewer-scroll { display: flex; flex-direction: column; gap: 14px; }
.vframe { border: 1px dashed rgba(22,34,77,0.4); aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 12.5px;
  opacity: 0.65; letter-spacing: 0.1em; background: rgba(238,244,240,0.35); }
.viewer-slide .stage { position: relative; aspect-ratio: 3 / 4; touch-action: pan-y; }
.viewer-slide .vframe { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.viewer-slide .vframe.cur { opacity: 1; pointer-events: auto; }
.snav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 62px; background: rgba(238,244,240,0.75); border: 1px solid rgba(22,34,77,0.3);
  color: var(--ink); font-size: 18px; font-family: 'KoPub Batang', 'Gowun Batang', serif;
  transition: background 0.3s, border-color 0.3s; }
.snav:hover { background: rgba(238,244,240,0.95); border-color: rgba(22,34,77,0.6); }
.snav:disabled { opacity: 0.3; }
.snav.prev { left: -10px; }
.snav.next { right: -10px; }
.scount { text-align: center; margin-top: 14px; font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 11.5px; letter-spacing: 0.3em; text-indent: 0.3em; opacity: 0.65; }

/* ── 표현 옵션(대시보드 style 필드) 적용 클래스 */
.w-body.font-gothic { font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
.w-body.align-center { text-align: center; }

/* 작가 지정 글자색 — 밝은 모드에서만.
   어둠 모드는 기존 규칙(#eceff2)을 그대로 두어 가독성을 지킨다(가독 > 연출).
   선택자를 .paper:not(.dark) .w-body.has-ink 로 잡아야 386~392줄 기본색보다 우선한다. */
.workwrap.paper:not(.dark) .w-body.has-ink { color: var(--author-ink); }

/* ── 원고 인라인 강조 (**굵게** / *기울임*)
   한글 폰트엔 이탤릭 자족이 없어 브라우저 합성 기울임으로 표시된다. */
.w-body strong { font-weight: 700; }
.w-body em { font-style: italic; }

/* 회색 강조 — 사이드카에 "emStyle": "dim" 을 준 작품에서 `*한 겹*`이 이걸로 바뀐다.
   본문보다 흐리되 읽히긴 해야 해서 밝은 모드 4.74:1, 어둠 모드 6.56:1로 잡았다
   (본문은 각각 14.08:1 / 14.53:1). 모드마다 값을 따로 주지 않으면
   어둠 모드에서 배경에 묻힌다. */
/* 기본값은 회색. 사이드카에 "emColor"를 주면 build.mjs가 --em-ink / --em-ink-dark를
   작품별로 꽂는다. 어둠 모드 값을 따로 두는 이유: 밝은 배경용 색을 그대로 쓰면 묻힌다. */
.w-body .dim { color: var(--em-ink, #6b7280); }
.workwrap.paper.dark .w-body .dim { color: var(--em-ink-dark, #9aa3ad); }

/* ── 모바일: 고정 요소 겹침 방지 */
@media (max-width: 700px) {
  .masthead { position: absolute; }  /* 스크롤 시 함께 올라가 본문과 안 겹침 */
  .backlink { background: rgba(238,244,240,0.75); backdrop-filter: blur(6px);
    border-color: rgba(22,34,77,0.25); padding: 10px 14px; }
  footer { font-size: 8.5px; letter-spacing: 0.12em; }  /* 카피라이트 축소 */
  .objects { max-width: 220px; margin-top: calc(clamp(36px, 8vh, 80px) + 32px); }  /* 한 줄 2개 → 2-2-1 유지, 위 내용과 분리 */
  .obj { width: 96px; }                                  /* 정물 아이콘 축소 */
  .obj svg { width: 54px; height: 62px; }
  .obj .lab { font-size: 15px; margin-top: 10px; }
  .obj .ko { font-size: 11px; }
  .hero-title .sub { font-size: 10px; letter-spacing: 0.34em; text-indent: 0.34em; }  /* 로고 아래 부제 축소 */
}

/* ── 리더 바 (글 작품): 글자 크기 3단계 + 종이 카드 시안 토글 */
/* 리더바: 폭이 모자라도 버튼 안에서 글자가 세로로 쪼개지면 안 된다(밝게→밝/게).
   항목마다 nowrap + 축소 금지로 막고, 그래도 안 들어가면 줄 단위로 넘긴다(flex-wrap). */
.reader-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin: 2px 0 20px; }
.reader-bar .rlab { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 10px;
  letter-spacing: 0.14em; opacity: 0.55; margin-right: 2px; white-space: nowrap; flex: none; }
.reader-bar button { font-family: 'KoPub Batang', serif; color: var(--ink); background: none;
  border: 1px solid rgba(22,34,77,0.3); border-radius: 999px; padding: 3px 10px; line-height: 1.4;
  white-space: nowrap; flex: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s; }
.reader-bar button.on { background: var(--ink); color: #eef4f0; border-color: var(--ink); }
.reader-bar .fs-s-btn { font-size: 11px; }
.reader-bar .fs-m-btn { font-size: 13px; }
.reader-bar .fs-l-btn { font-size: 15px; }
.reader-bar .paper-btn { font-family: 'KoPub Dotum', 'Noto Sans KR', sans-serif; font-size: 10.5px; letter-spacing: 0.08em; margin-left: 10px; }

/* 모바일: 리더바는 본문 읽기를 방해하지 않게 한 단계 작게.
   좁은 기기(360px 갤럭시 등)에서도 한 줄에 들어가야 한다 — 두 줄로 접히면 본문이 더 밀린다. */
@media (max-width: 700px) {
  .reader-bar { gap: 3px; margin-bottom: 16px; }
  .reader-bar .rlab { font-size: 8.5px; letter-spacing: 0.02em; margin-right: 1px; }
  .reader-bar button { padding: 2px 7px; }
  .reader-bar .fs-s-btn { font-size: 9.5px; }
  .reader-bar .fs-m-btn { font-size: 11px; }
  .reader-bar .fs-l-btn { font-size: 12.5px; }
  .reader-bar .paper-btn { font-size: 9px; letter-spacing: 0.02em; margin-left: 4px; }
}
/* 글자 크기 3단계는 반응형 기준값(--fs)의 배율로 잡는다.
   예전엔 13.5px·17.5px 고정이었는데, 데스크톱에서 기준값이 17.5px까지 커지자
   '큰 글씨'가 기본과 같은 값이 돼 행간만 달라졌다. 배율은 모바일 기준 비율 그대로(13.5/15.5, 17.5/15.5). */
.w-body.fs-s { font-size: calc(var(--fs) * 0.871); line-height: 2.0; }
.w-body.fs-l { font-size: calc(var(--fs) * 1.129); line-height: 2.3; }

/* 종이 카드 (정식, 글 본문): 밝은 종이=검정 글씨 / 어두운 종이=흰 글씨 */
.workwrap.paper { background: rgba(252,253,251,0.95); border-radius: 5px;
  padding: clamp(24px, 4.5vw, 46px) clamp(20px, 4.5vw, 48px);
  box-shadow: 0 12px 44px rgba(14,48,68,0.14), 0 2px 8px rgba(14,48,68,0.08);
  transition: background 0.4s ease, color 0.4s ease; }
.workwrap.paper h1, .workwrap.paper .w-body { color: #222b33; }
.workwrap.paper.dark { background: rgba(24,30,38,0.96); }
.workwrap.paper.dark h1, .workwrap.paper.dark .w-body { color: #eceff2; }
.workwrap.paper.dark .w-genre, .workwrap.paper.dark .w-meta .by, .workwrap.paper.dark .rlab { color: #cfd6dc; }
.workwrap.paper.dark .w-meta .by { border-bottom-color: rgba(236,239,242,0.4); }
.workwrap.paper.dark .cptag { border-color: rgba(236,239,242,0.35); color: #cfd6dc; }
.workwrap.paper.dark .r19 { border-color: rgba(236,239,242,0.5); color: #eceff2; }
.workwrap.paper.dark .w-rule { background: rgba(236,239,242,0.25); }
.workwrap.paper.dark .w-foot { border-top-color: rgba(236,239,242,0.2); }
.workwrap.paper.dark .w-foot a { color: #eceff2; }
.workwrap.paper.dark .reader-bar button { border-color: rgba(236,239,242,0.4); color: #eceff2; }
.workwrap.paper.dark .reader-bar button.on { background: #eceff2; color: #1d242c; border-color: #eceff2; }