/* 종이 장면(hero_fx 'paper') — 새 팀 기본 페이지. 흰 종이 위 팀 색의 은은한 번짐 + 아주 옅은 그레인, 정체성(로고·이름·한 줄 소개)이 주인공.
   색은 서버가 머리 <style>로 body에 싣는 --pp-a(팀 색 · 가입 알약 · 첫 글자 타일) · --pp-on(그 위 글자, 대비 4.5:1) · --pp-b1/2(번짐 — 같은 색상의 맑은 틴트) — public/paper-hero.js 한 함수.
   body에 두는 까닭: 히어로 · 위 바(첫 글자 타일) · 가입 띠가 같은 팀 색을 쓴다. 브리지(/new 프레임 · Studio)도 body에 바로 바꾼다.
   캔버스·장면 스크립트 없음. 레이아웃(center·left·split·mark·free)·높이·서체는 app.css 규칙 그대로, 여기서는 '종이 위 잉크' 색과 기본 높이만 바꾼다.
   src/routes-society.js landingPage가 종이일 때만 싣는다(body.is-paper). */
@property --pp-a { syntax: '<color>'; inherits: true; initial-value: #17150f; }
@property --pp-on { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --pp-b1 { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0); }
@property --pp-b2 { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0); }

body.x-pub.is-paper {
  background: var(--paper);
  transition: --pp-a var(--dur-2) var(--ease-out), --pp-on var(--dur-2) var(--ease-out), --pp-b1 var(--dur-2) var(--ease-out), --pp-b2 var(--dur-2) var(--ease-out);
}
body.x-pub .shero[data-fx="paper"][data-glass-hero] { isolation: isolate; background: var(--paper); color: var(--ink); }
/* 번짐 — 위 가운데 큰 타원 · 오른쪽 위 작은 타원(같은 색상의 맑은 틴트). 아래로 갈수록 종이로 녹아 블록·바닥과 경계가 없다 */
body.x-pub .shero[data-fx="paper"][data-glass-hero]::before {
  content: ''; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% -6%, var(--pp-b1), rgba(255, 255, 255, 0) 72%),
    radial-gradient(30% 42% at 92% 4%, var(--pp-b2), rgba(255, 255, 255, 0) 72%);
}
/* 그레인 — 종이 결(2.5% 안팎). 투명도를 줄이라는 설정이면 끈다 */
body.x-pub .shero[data-fx="paper"][data-glass-hero]::after {
  content: ''; display: block; position: absolute; inset: 0; height: auto; z-index: -1; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 35%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0, #000 35%, rgba(0, 0, 0, 0) 100%); /* 아래로 갈수록 결이 사라져 바닥과 이음매가 없다 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { body.x-pub .shero[data-fx="paper"][data-glass-hero]::after { content: none; } }

/* 높이 — 기본(standard)은 넉넉한 위아래. 막 만든 팀(블록이 아직 없는 조용한 첫 화면)은 화면을 채운다(바닥 한 줄만 아래) */
body.x-pub .shero[data-fx="paper"][data-height="standard"] { padding-top: calc(var(--bar-h) + clamp(64px, 11vh, 128px)); padding-bottom: clamp(80px, 12vh, 136px); }
/* 첫 섹션 위 — 96(사진·유리 장면의 하드 엣지용)을 종이에서는 줄인다. 종이는 경계가 없어 히어로 아래 여백 위에 96이 더해지면 빈 띠로 읽힌다.
   ~ 형제 결합 — 히어로와 블록 사이에 스크립트가 끼어도 걸린다 */
body.x-pub .shero[data-fx="paper"][data-height="standard"] ~ [data-blocks] > [data-block]:first-of-type > :is(.sec, .cta-band):first-child { padding-top: var(--s-6); }
/* body를 세로 flex로 두고 히어로가 남은 높이를 차지한다 — 바닥 높이(연락처 줄·휴대폰 웹 탭 바 여백 body padding)가 무엇이든 1px도 넘치지 않는다 */
body.x-pub.is-paper:has(> .shero[data-fx="paper"][data-quiet]:not([data-height="compact"])) { display: flex; flex-direction: column; min-height: 100svh; }
body.x-pub .shero[data-fx="paper"][data-quiet]:not([data-height="compact"]) { flex: 1 0 auto; display: flex; align-items: center; padding-top: calc(var(--bar-h) + 48px); padding-bottom: 64px; }
body.x-pub .shero[data-fx="paper"][data-quiet] > .container { width: 100%; }
body.x-pub .shero[data-fx="paper"][data-quiet] ~ .intro-foot { border-top: 0; }

/* 정체성 — 로고(원본 색, 112) 또는 팀 색 첫 글자 타일(앱 아이콘처럼) */
body.x-pub .shero[data-fx="paper"] .shero-logo { width: calc(var(--logo-size, 96px) * 1.1667); height: calc(var(--logo-size, 96px) * 1.1667); margin-bottom: var(--s-3); filter: none; } /* 로고 그림 안의 투명 여백 + 제목 행간이 더해지므로 간격은 작게 — 로고가 이름에 붙어 읽힌다 */
/* '흰 타일'은 색 바탕 위에서 로고를 받치는 판 — 흰 종이 위에서는 판이 겹쳐 '타일 안의 타일'이 되므로 원본 그대로 둔다(로고 자체의 바탕·모서리가 보인다) */
body.x-pub .shero[data-fx="paper"][data-logo-style="tile"] .shero-logo { background: none; padding: 0; border-radius: 0; box-shadow: none; }
body.x-pub .shero[data-fx="paper"] .shero-mono {
  display: grid; place-items: center; flex: none; width: calc(var(--logo-size, 96px) * 1.1667); height: calc(var(--logo-size, 96px) * 1.1667); margin: 0 0 28px;
  border-radius: 27%; background: var(--pp-a); color: var(--pp-on); font: 800 calc(var(--logo-size, 96px) * .52)/1 var(--font); letter-spacing: -.03em;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 15, .06), 0 1px 2px rgba(23, 21, 15, .06), 0 14px 36px -14px rgba(23, 21, 15, .28);
}
body.x-pub .shero[data-fx="paper"] .shero-mono[hidden] { display: none; }
body.x-pub .shero[data-fx="paper"][data-layout="left"] .shero-mono, body.x-pub .shero[data-fx="paper"][data-layout="split"] .shero-mono { margin: 0; }

/* 글자 — 그림자·글로 없음, 잉크 위계 */
body.x-pub .shero[data-fx="paper"] h1 { color: var(--ink); text-shadow: none; font-size: clamp(44px, 6.2vw, 84px); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; word-spacing: .08em; text-wrap: balance; }
body.x-pub .shero[data-fx="paper"][data-layout="mark"] h1 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.025em; }
body.x-pub .shero[data-fx="paper"] .tagline { color: var(--ink-2); text-shadow: none; font-size: 20px; line-height: 1.5; margin-top: 18px; max-width: 34em; margin-left: auto; margin-right: auto; }
body.x-pub .shero[data-fx="paper"]:is([data-layout="left"], [data-layout="split"]) .tagline { margin-left: 0; }
body.x-pub .shero[data-fx="paper"] .shero-kicker { color: var(--ink-3); }
body.x-pub .shero[data-fx="paper"] .eyebrow { color: var(--ink-2); border-color: var(--line-2); background: var(--paper); }
body.x-pub .shero[data-fx="paper"] .hero-social { color: var(--ink-2); font-size: var(--t-ui); } /* 13.5 → 토큰 14 */
body.x-pub .shero[data-fx="paper"] .hero-social strong { color: var(--ink); }
body.x-pub .shero[data-fx="paper"] .avatar-stack > span { border-color: var(--paper); }
body.x-pub .shero[data-fx="paper"] .avatar-stack .avatar-txt { box-shadow: inset 0 0 0 1px var(--line-2); } /* 글자 원은 종이와 거의 같은 회색 — 윤곽 한 줄로 원마다 끝을 그린다 */
body.x-pub .shero[data-fx="paper"] .chip-soft { background: var(--wash-2); color: var(--ink-2); }

/* 가입 알약 — 팀 색 채움 · 글자색은 대비로 자동(--pp-on). 소개 보기 = 흰 알약 + 얇은 윤곽 */
body.x-pub .shero[data-fx="paper"] .cta { margin-top: 40px; gap: 10px; }
body.x-pub .shero[data-fx="paper"] .cta .btn {
  height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill); font: 600 16px/1 var(--font); letter-spacing: -.01em;
  transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
body.x-pub .shero[data-fx="paper"] .cta .btn:not(.btn-ghost) { background: var(--pp-a); color: var(--pp-on); box-shadow: inset 0 0 0 1px rgba(23, 21, 15, .08), 0 1px 2px rgba(23, 21, 15, .08); }
body.x-pub .shero[data-fx="paper"] .cta .btn.btn-ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) and (pointer: fine) {
  body.x-pub .shero[data-fx="paper"] .cta .btn:not(.btn-ghost):hover { background: color-mix(in srgb, var(--pp-a) 90%, #000); }
  body.x-pub .shero[data-fx="paper"] .cta .btn.btn-ghost:hover { background: var(--wash-1); }
}
body.x-pub .shero[data-fx="paper"] .cta .btn:active { scale: .98; }
body.x-pub .shero[data-fx="paper"] :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 위 바 — 종이 위에서는 보통 공개 바와 같은 잉크 문법(잉크 글자 · 잉크 실루엣 로고 · 잉크 알약) */
body.x-pub.is-paper .pub-bar-hero .intro-ident, body.x-pub.is-paper .pub-bar-hero .intro-nav a { color: var(--ink); }
body.x-pub.is-paper .pub-bar-hero .intro-nav a:not(.on) { color: var(--ink-2); }
body.x-pub.is-paper .pub-bar-hero .intro-logo:not(.intro-logo-txt) { filter: none; } /* 원본·타일 로고는 원본 색 — 바탕이 있는 로고가 검은 네모가 되지 않게 */
body.x-pub.is-paper .pub-bar-hero .intro-logo:not(.intro-logo-txt):not([data-style]) { filter: brightness(0); } /* 흰(투명 실루엣) 로고는 하위 페이지 바와 같은 잉크 — 페이지를 오가도 바 로고 색이 그대로. 큰 히어로 로고만 원본 색 */
body.x-pub.is-paper .pub-bar-hero .intro-logo[data-style="tile"] { background: none; padding: 0; box-shadow: none; }
body.x-pub.is-paper .pub-bar-hero .intro-logo.intro-logo-txt { background: var(--pp-a); color: var(--pp-on); } /* 히어로 첫 글자 타일과 같은 팀 색 */
body.x-pub.is-paper .pub-bar-hero .intro-top-link { color: var(--ink-2); }
body.x-pub.is-paper .pub-bar-hero .intro-top-acts .btn { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  body.x-pub.is-paper .pub-bar-hero .intro-nav a:hover, body.x-pub.is-paper .pub-bar-hero .intro-top-link:hover { color: var(--ink); text-decoration: none; } /* 종이 위 바는 하위 페이지 바와 같은 hover(잉크) — 사진 · 유리 바의 밑줄 hover는 쓰지 않는다 */
  body.x-pub.is-paper .pub-bar-hero .intro-top-acts .btn:hover { background: var(--ink-hover); }
}
body.x-pub.is-paper .pub-bar-hero .intro-top-acts .chip { background: var(--wash-2); color: var(--ink-2); }
/* 가입은 한 번 — 위 바는 히어로와 함께 스크롤로 지나가므로(고정 아님) 히어로에 가입 알약이 있으면 바의 같은 단추는 그리지 않는다(로그인 글자 링크는 남긴다) */
body.x-pub.is-paper:has(.shero[data-fx="paper"] .cta [data-cta-join]) .pub-bar-hero .intro-top-acts .btn[data-cta-join] { display: none; }
body.x-pub.is-paper:has(.shero[data-fx="paper"] .cta [data-cta-join]) .pub-bar-hero .intro-top-link:has(+ .btn[data-cta-join]) { margin-right: calc(var(--s-2) * -1); } /* 남은 로그인 링크의 안쪽 여백만큼 — 글자 끝이 하위 페이지 알약 끝선(여백 선)에 */
/* 아래 가입 띠의 단추도 히어로 알약과 같은 팀 색 */
body.x-pub.is-paper .cta-band .btn:not(.btn-ghost):not(.btn-danger):not(.share-btn) { background: var(--pp-a); color: var(--pp-on); }
@media (hover: hover) and (pointer: fine) { body.x-pub.is-paper .cta-band .btn:not(.btn-ghost):not(.btn-danger):not(.share-btn):not(:disabled):hover { background: color-mix(in srgb, var(--pp-a) 90%, #000); } }
body.x-pub.is-paper .pub-bar-hero :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.x-pub.is-paper .pub-bar-hero > :is(.pub-word, .pub-slash) { color: var(--ink); }

@media (max-width: 699px) {
  body.x-pub .shero[data-fx="paper"][data-height="standard"] { padding-top: calc(var(--bar-h) + 56px); padding-bottom: 72px; }
  body.x-pub .shero[data-fx="paper"][data-height="standard"] ~ [data-blocks] > [data-block]:first-of-type > :is(.sec, .cta-band):first-child { padding-top: 0; } /* 히어로 아래 72가 곧 간격 */
  body.x-pub .shero[data-fx="paper"][data-glass-hero] { min-height: 0; }
  body.x-pub .shero[data-fx="paper"][data-quiet]:not([data-height="compact"]) { padding-top: calc(var(--bar-h) + 32px); padding-bottom: 48px; }
  body.x-pub .shero[data-fx="paper"] .shero-logo, body.x-pub .shero[data-fx="paper"] .shero-mono { width: 88px; height: 88px; margin-bottom: 24px; }
  body.x-pub .shero[data-fx="paper"] .shero-logo { margin-bottom: var(--s-3); } /* 그림 로고는 투명 여백이 있어 데스크톱과 같은 12 — 첫 글자 타일만 24 */
  body.x-pub .shero[data-fx="paper"] .shero-mono { font-size: 44px; }
  body.x-pub .shero[data-fx="paper"] h1 { font-size: clamp(36px, 10.4vw, 52px); letter-spacing: -.04em; }
  body.x-pub .shero[data-fx="paper"] .tagline { font-size: 17px; margin-top: 14px; }
  body.x-pub .shero[data-fx="paper"] .cta { margin-top: 32px; }
  body.x-pub .shero[data-fx="paper"] .cta .btn { height: 52px; padding: 0 26px; font-size: 16px; }
  body.x-pub .shero[data-fx="paper"][data-glass-hero]::before {
    background:
      radial-gradient(90% 46% at 50% -4%, var(--pp-b1), rgba(255, 255, 255, 0) 74%),
      radial-gradient(52% 30% at 100% 6%, var(--pp-b2), rgba(255, 255, 255, 0) 72%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.x-pub.is-paper, body.x-pub .shero[data-fx="paper"] .cta .btn { transition: none; }
}