@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Instrument+Sans:wght@560&display=swap");
/* about.pogl.com 공용 — 머리줄 · 본문 판 · 바닥글 · 글 카드 (2026-11-05, pickle.com 실측값에 맞춘 2판)
   HTML은 scripts/site-chrome.mjs가 각 페이지의 «site-chrome» 주석 사이에 넣는다. 머리·바닥을 고치려면 그 스크립트와 이 시트만.
   클래스는 모두 sc- 로 시작한다 — 페이지마다 제 CSS가 따로 있어 이름이 겹치지 않게. 굵기는 400 · 510 · 566 · 590만. */
:root{--sc-fg:#1d1d1f;--sc-fg-2:#6e6e73;--sc-fg-list:#424245;--sc-card:#f5f5f7;--sc-foot:#fafafa;--sc-link:#0066cc;--sc-hair:rgba(29,29,31,.1);
  --sc-sans:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;--sc-x:40px;--sc-w:980px}
@media(max-width:700px){:root{--sc-x:20px}}
html{background:var(--sc-foot)}


/* 본문 판: 흰색, 아래 모서리 60px — 바닥글 위에 얹힌다 */
.sc-sheet{position:relative;z-index:2;background:#fff;border-radius:0 0 60px 60px;padding-bottom:160px}
@media(max-width:700px){.sc-sheet{border-radius:0 0 36px 36px;padding-bottom:96px}}

/* 머리줄 (pickle.com 실측): 처음부터 흰 불투명 바탕, 구분선 없음, 높이 78. 로고 x=144(1280에서 내용 폭 980 + 좌우 6),
   메뉴 18px/510/-0.36px · 사이 23, [시작하기] 높이 48 · 둥글기 90 · 좌우 18 · 17px/510 검정. 가운데 «방금» 줄 (activity.js).
   바탕은 pickle처럼 반투명 흰색 + 흐림(rgba 255 .78 · blur 14.6) — 섬 · 본문이 밑으로 지나가면 흐리게 비친다 */
.sc-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14.6px);backdrop-filter:blur(14.6px);color:var(--sc-fg);font-family:var(--sc-sans)}
.sc-bar-in{position:relative;max-width:calc(var(--sc-w) + 12px + 2 * var(--sc-x));margin:0 auto;height:78px;padding:0 var(--sc-x);display:flex;align-items:center;justify-content:space-between}
/* 첫 화면(data-over): 섬 위에 겹쳐 뜨고, 섬 위에서는 완전 투명(흰 글자 · 흰 알약 · 흰 18% «방금») — 원래 첫 화면 머리줄의 투명 상태.
   섬을 지나면(.ground, index.html이 붙인다) 위의 반투명 흰 판 + 흐림 + 검정으로 0.25초에 바뀐다 */
.sc-bar{transition:background-color .25s,-webkit-backdrop-filter .25s,backdrop-filter .25s,color .25s}
.sc-bar[data-over]{position:fixed;left:0;right:0;top:0}
.sc-bar[data-over]:not(.ground){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff}
.sc-bar[data-over]:not(.ground) nav a:not(.sc-dl),.sc-bar[data-over]:not(.ground) nav a[aria-current=page]{color:#fff}
.sc-bar[data-over]:not(.ground) nav a:not(.sc-dl):hover{color:rgba(255,255,255,.75)}
.sc-bar[data-over]:not(.ground) .sc-dl{background:#fff;color:#000}
.sc-bar[data-over]:not(.ground) .sc-bar-in > .live{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sc-bar[data-over]:not(.ground) .sc-bar-in > .live:hover{background:rgba(255,255,255,.26)}
.sc-bar[data-over]:not(.ground) .live-when{color:rgba(255,255,255,.66)}
.sc-bar[data-over]:not(.ground) .live-face{background:rgba(255,255,255,.22)}
.sc-bar nav a:not(.sc-dl),.sc-dl,.sc-bar-in > .live{transition:color .25s,background-color .25s,opacity .2s,width .45s cubic-bezier(.2,.8,.2,1),visibility .45s}
/* 로고: pickle 로고(글자 22px · 그림 35px)와 메뉴 18px의 비율대로 — 글자 24px · 그림 34×26 */
.sc-brand{display:inline-flex;align-items:center;gap:10px;color:inherit;font-family:"Instrument Sans",Geist,var(--sc-sans);font-size:24px;font-weight:560;letter-spacing:-.6px;line-height:1}
.sc-brand svg{width:34px;height:26px;display:block}
.sc-bar nav{display:flex;align-items:center;gap:23px}
.sc-bar nav a:not(.sc-dl){font-size:18px;font-weight:510;letter-spacing:-.36px;line-height:1.3;color:var(--sc-fg);transition:color .2s}
.sc-bar nav a:not(.sc-dl):hover{color:var(--sc-fg-2)}
.sc-dl{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 18px;border-radius:90px;background:#000;color:#fff;font-size:17px;font-weight:510;letter-spacing:-.34px;white-space:nowrap;transition:opacity .2s}
.sc-dl:hover{opacity:.86}
@media(max-width:700px){.sc-bar-in{height:68px}.sc-brand{font-size:20px;gap:8px}.sc-brand svg{width:28px;height:21px}.sc-bar nav{gap:18px}.sc-bar nav a:not(.sc-dl){font-size:16px;letter-spacing:-.32px}.sc-dl{height:40px;padding:0 15px;font-size:15px}}

/* 본문 판 위의 큰 알약 (바닥 [시작하기]) */
.sc-pill{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 18px;border-radius:90px;background:var(--sc-fg);color:#fff!important;font-family:var(--sc-sans);font-size:17px;font-weight:510;letter-spacing:-.34px;white-space:nowrap;transition:opacity .2s}
.sc-pill:hover{opacity:.86}

/* 글 카드 (블로그 목록 · 첫 화면): 2열 478 · 사이 24, 표지 높이 299 · 둥글기 20 · 바탕 #f5f5f7, 그림이 칸을 채운다 */
.sc-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 24px}
.sc-post{display:block;color:var(--sc-fg)}
.sc-post .ph{height:299px;border-radius:20px;overflow:hidden;background:var(--sc-card)}
.sc-post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* 폰 화면을 찍은 표지(UI 2.0)는 자르지 않고 바탕 위 가운데 */
.sc-post .ph.fit{display:grid;place-items:center}
.sc-post .ph.fit img{width:auto;height:100%;object-fit:contain}
.sc-post:hover .ph img{transform:scale(1.02)}
.sc-post h3{margin-top:20px;font-size:26px;font-weight:566;letter-spacing:-.26px;line-height:33.8px}
.sc-post p{margin-top:10px;font-size:17px;line-height:24.65px;color:var(--sc-fg-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-byline{display:flex;align-items:center;margin-top:14px;font-size:15px;line-height:1.4;color:var(--sc-fg)}
.sc-byline i{width:1px;height:13px;margin:0 12px;background:var(--sc-hair)}
@media(max-width:700px){.sc-posts{grid-template-columns:1fr;gap:48px}.sc-post .ph{height:auto;aspect-ratio:478/299;border-radius:16px}.sc-post h3{margin-top:16px;font-size:22px;line-height:29px}.sc-post p{font-size:16px;line-height:23px}.sc-byline{font-size:14px}}

/* 바닥: 흰 본문 판이 첫 화면 섬의 보라 물빛(world.js water #9b8ee6 — 화면에선 #8073ad) 위에 얹히고, 맨 아래 가장자리에 같은 섬 엔진으로 구운
   복셀 땅 띠(foot-land.webp, scripts/foot-bake.html)가 걸친다 — 맨 위 섬과 맨 아래가 짝. 큰 문장 44/590/61.6 + [시작하기], 로고 · © ↔ 링크 두 열 14/21 */
.sc-foot{position:relative;margin-top:-60px;padding-top:60px;overflow:hidden;background:linear-gradient(180deg,#f6f5fb 0%,#e3dff2 22%,#c4bce5 48%,#a397d2 74%,#8073ad 100%);font-family:var(--sc-sans);color:var(--sc-fg);font-size:14px;line-height:21px}
.sc-end{position:relative;z-index:1;text-align:center;padding:116px var(--sc-x) 0}
.sc-end p{font-size:44px;font-weight:590;letter-spacing:-.88px;line-height:61.6px;color:#000}
.sc-end .sc-pill{margin-top:28px;background:#000}
.sc-foot-in{position:relative;z-index:1;max-width:calc(var(--sc-w) + 2 * var(--sc-x));margin:0 auto;padding:8px var(--sc-x) 240px}
.sc-cols{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.sc-cols .sc-brand{color:#000}
.sc-copy{margin-top:10px;color:#000}
.sc-links{display:flex;gap:32px}
.sc-links ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.sc-links a{color:#000}
.sc-links a:hover{text-decoration:underline}
.sc-base{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:28px}
.sc-biz{font-size:12px;line-height:18px;color:rgba(29,24,52,.62)}
.sc-biz .sep{font-style:normal;margin:0 6px;opacity:.5}
.sc-biz .nw{font-style:normal;white-space:nowrap}
.sc-langs{display:flex;flex:none;align-items:center}
.sc-langs button,.sc-langs a{font:inherit;font-size:12px;background:none;border:0;cursor:pointer;padding:2px 0;color:rgba(29,24,52,.62)}
.sc-langs > * + *::before{content:"·";margin:0 8px;color:rgba(29,24,52,.4)}
.sc-langs button:hover,.sc-langs a:hover{color:var(--sc-fg)}
.sc-langs [aria-current=true]{color:var(--sc-fg)}
/* 맨 아래 복셀 땅: foot-land.js가 움직이는 캔버스(.sc-land-cv)로 그린다. WebGL이 없거나 움직임 줄이기면 정지 그림(.sc-land)이 옆으로 이어 붙어 끝까지 찬다 */
.sc-land{position:absolute;left:0;right:0;bottom:0;height:190px;background:url(/foot-land.webp) center bottom/auto 100% repeat-x;pointer-events:none}
.sc-land-cv{position:absolute;left:0;bottom:0;width:100%;height:280px;display:block;pointer-events:none}
.sc-land-live .sc-land{display:none}
@media(max-width:700px){
  .sc-foot{margin-top:-36px;padding-top:36px}
  .sc-end{padding-top:52px}
  .sc-end p{font-size:28px;line-height:39.2px;letter-spacing:-.56px}
  .sc-end .sc-pill{margin-top:20px;height:44px}
  .sc-foot-in{padding:40px var(--sc-x) 160px}
  .sc-cols{flex-direction:column;gap:24px}
  .sc-links{gap:40px}
  .sc-links a{white-space:nowrap}
  .sc-base{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
  .sc-land{height:130px}
  .sc-land-cv{height:180px}
}

/* «방금» 줄 (activity.js) — 머리줄 가운데 알약. 좁은 화면에선 머리줄 바로 아래 */
.sc-bar-in > .live{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;max-width:min(480px,calc(100% - 520px));height:34px;border-radius:999px;background:#f5f5f7;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s,width .45s cubic-bezier(.2,.8,.2,1),background .2s}
.sc-bar-in > .live.ready{opacity:1;visibility:visible}
.sc-bar-in > .live:hover{background:#ececf0}
.sc-bar .live-row{position:absolute;top:0;left:50%;height:100%;width:max-content;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;color:inherit;font-size:14px;line-height:1;white-space:nowrap;transform:translate(-50%,100%);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
.sc-bar .live-row.has-face{padding-left:6px}
.sc-bar .live-row.on{transform:translate(-50%,0);opacity:1}
.sc-bar .live-row.out{transform:translate(-50%,-100%);opacity:0}
.sc-bar .live.calm .live-row{transform:translate(-50%,0)}
.sc-bar .live-face{flex:none;width:22px;height:22px;border-radius:50%;overflow:hidden;background:rgba(29,29,31,.08)}
.sc-bar .live-face img{width:100%;height:100%;object-fit:cover;display:block}
.sc-bar .live-face.is-dot{width:8px;height:8px;background:#3ddc84;animation:sc-live-pulse 1.8s ease-out infinite}
@keyframes sc-live-pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%,100%{box-shadow:0 0 0 6px rgba(61,220,132,0)}}
.sc-bar .live-when{flex:none;color:var(--sc-fg-2)}
.sc-bar .live-text{min-width:0;display:flex}
.sc-bar .live-text > span{flex:none;white-space:pre}
.sc-bar .live-text > .live-title{flex:0 1 auto;min-width:2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 좁은 화면: «방금» 알약은 흰 머리줄 안의 둘째 줄 가운데 — 어떤 선 · 경계에도 걸치지 않게 */
@media(max-width:900px){.sc-bar-in{display:grid;grid-template-columns:1fr auto;align-items:center;height:auto;min-height:68px}.sc-bar-in > .sc-brand,.sc-bar-in > nav{height:68px}.sc-bar-in > nav{grid-column:2}.sc-bar-in > .live{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;grid-row:2;justify-self:center;max-width:100%;height:30px;margin:2px 0 14px}.sc-bar .live-row{font-size:13px;padding:0 12px}.sc-bar .live-row.has-face{padding-left:5px}.sc-bar .live-face{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.sc-bar .live-face.is-dot{animation:none}}

/* 같은 HTML이 ko · en · ja를 다 들고 있다 — 고르는 건 html[lang] (블로그는 한국어뿐) */
.sc-bar [data-l="en"],.sc-bar [data-l="ja"],.sc-foot [data-l="en"],.sc-foot [data-l="ja"]{display:none!important}
html[lang="en"] .sc-bar [data-l="ko"],html[lang="en"] .sc-foot [data-l="ko"],html[lang="ja"] .sc-bar [data-l="ko"],html[lang="ja"] .sc-foot [data-l="ko"]{display:none!important}
html[lang="en"] .sc-bar [data-l="en"],html[lang="en"] .sc-foot [data-l="en"],html[lang="ja"] .sc-bar [data-l="ja"],html[lang="ja"] .sc-foot [data-l="ja"]{display:revert!important}

/* ── 글자 크기 한 벌 (2026-11-05, pickle 실측 기준) — 회사 사이트의 모든 페이지 · 모든 칸이 이것만 쓴다 ───────────
   큰 제목 60 · 절 제목 44 · 한 문장 30 · 카드 제목 26 · 작은 제목 22 · 이끄는 글 20 · 본문 17 · 보조 15 · 작은 글 13 (폰은 같은 비율로) */
:root{--t-display:60px;--t-h2:44px;--t-quote:30px;--t-h3:26px;--t-h4:22px;--t-lead:20px;--t-body:17px;--t-sub:15px;--t-small:13px}
@media(max-width:700px){:root{--t-display:36px;--t-h2:28px;--t-quote:22px;--t-h3:22px;--t-h4:19px;--t-lead:17px;--t-body:16px;--t-sub:15px;--t-small:13px}}
body{font-size:var(--t-body)}
.a-copy h1,.top h1{font-size:var(--t-display)}
.h2,.nums h2,.head-row h2,.press h2,.contact h2,.head h1{font-size:var(--t-h2)}
.statement p,.a-key .said{font-size:var(--t-quote)}
.sc-post h3,.prod h3,.contact .mail,.prose h2,.more h2,.a-more h2{font-size:var(--t-h3)}
.spot h3,.line h4{font-size:var(--t-h4)}
.a-copy .sub,.h2sub,.contact p,.top p,.head p,.faq summary{font-size:var(--t-lead)}
.k3 .kl,.clips b,.prod p,.faq p,.ask-copy p,.fld,.bar-in,.head-row a,.prose,.sc-post p,.send button,.cta,.prose .tldr,.more b{font-size:var(--t-body)}
.k3 .ks,.asof,.nums .asof,.clips time,.clips .src,.contact .note,.head-row .note,.statement .backed,.chip,.prompt .said,.prompt .lbl,.prod li,.spot dd,.spot .sd,.spots .aside,.line p,.mission,.msg,.pk,legend,form label,.ask-copy .note,.sc-byline,.tabs button,.sc-links a,.sc-copy,.prose figcaption,.rail,.cat,.meta,.sc-mail,.sc-bar .live-row,.prose .tldr b,.who b,.share{font-size:var(--t-sub)}
.sc-biz,.sc-langs button,.sc-langs a,.priv,.spot dt,.line i,.rail dt,.tags span{font-size:var(--t-small)}
/* 섬 입력칸 · 예시 칩도 본문 체계에 */
.bar-in{height:56px}
.chip{height:36px;padding:0 16px}
@media(max-width:700px){.bar-in{height:50px}.chip{height:34px;padding:0 14px}
  /* 폰에서만 한 단씩 작게 (Leo 11-05) — 첫 화면 문단 · 회사 문의 메일 */
  .statement p{font-size:20px;line-height:29px}.contact .mail{font-size:18px;line-height:26px}}
/* 폰 바닥은 한 단씩 작게 (Leo 11-05 «푸터가 특히») — 문장 24 · 알약 40/14 · 로고 17 · © 13 · 링크 13 · 사업자 정보 · 언어 12, 여백도 비율대로 */
@media(max-width:700px){
  .sc-end{padding:40px var(--sc-x) 24px}
  .sc-end p{font-size:24px;line-height:34px;letter-spacing:-.48px}
  .sc-end .sc-pill{margin-top:18px;height:40px;padding:0 16px;font-size:14px}
  .sc-foot-in{padding:20px var(--sc-x) 140px}
  .sc-cols{gap:20px}
  .sc-cols .sc-brand{font-size:17px;gap:7px}
  .sc-cols .sc-brand svg{width:24px;height:18px}
  .sc-copy{margin-top:8px;font-size:13px;line-height:19px}
  .sc-links ul{gap:4px}
  .sc-links a{font-size:13px;line-height:19px}
  .sc-base{margin-top:22px;gap:10px}
  .sc-biz,.sc-langs button,.sc-langs a{font-size:12px;line-height:18px}
}