/* ===== 페이퍼로지 (Paperlogy) — OFL, 상업/웹 사용 가능. jsDelivr CDN ===== */
@font-face{font-family:"Paperlogy";font-weight:300;font-style:normal;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy@main/Paperlogy-3Light.woff2") format("woff2");}
@font-face{font-family:"Paperlogy";font-weight:400;font-style:normal;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy@main/Paperlogy-4Regular.woff2") format("woff2");}
@font-face{font-family:"Paperlogy";font-weight:700;font-style:normal;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy@main/Paperlogy-7Bold.woff2") format("woff2");}
@font-face{font-family:"Paperlogy";font-weight:900;font-style:normal;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy@main/Paperlogy-9Black.woff2") format("woff2");}

:root{
  --ink:#0E0F13;          /* 먹빛 바탕 */
  --ink-raised:#16181F;   /* 카드·표면 */
  --ink-line:rgba(236,233,225,0.12);
  --paper:#ECE9E1;        /* 따뜻한 오프화이트 글자 */
  --muted:#8A8D97;        /* 보조 텍스트 */
  --sheen-a:#7C5CFF;      /* 까마귀 깃털 광택 - 보라 */
  --sheen-b:#37D0C4;      /* 까마귀 깃털 광택 - 청록 */
  --grad:linear-gradient(105deg,var(--sheen-a),var(--sheen-b));
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
/* Lenis 스무스 스크롤 필수 설정 */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--ink);color:var(--paper);
  font-family:"Paperlogy",system-ui,sans-serif;
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:"Paperlogy",sans-serif}
.eyebrow{
  font-family:"Paperlogy",sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
a{color:inherit;text-decoration:none}

/* ---------- NAV (투명, 영상 위에 얹힘) ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid transparent;transition:transform .45s ease,background .3s,border-color .3s,backdrop-filter .3s;
}
.site-nav.nav-hidden{transform:translateY(-100%)}
.site-nav.scrolled{background:rgba(14,15,19,.45);backdrop-filter:blur(10px)}
/* 서브페이지는 뒤에 영상이 없으니 헤더 배경을 은은히 (더 투명) */
body.sub .site-nav{background:rgba(14,15,19,.55);backdrop-filter:blur(10px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:24px;width:auto;display:block}
.brand-text{font-weight:300;color:#fff;font-size:11px;line-height:1.4;letter-spacing:.06em}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:300;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.nav-links a{transition:color .2s;position:relative}
.nav-links a:hover{color:var(--paper)}
.nav-links a.active{color:var(--paper)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--grad)}
@media(max-width:640px){
  .nav-links{gap:15px;font-size:12px}
  .brand img{height:20px}
  .nav-in{height:60px}
}

/* ---------- 스티키 스택 (대문: 앞 화면 고정 + 다음 화면이 덮으며 등장) ---------- */
.stack{position:relative}
.panel{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}

/* ---------- FULL-SCREEN HERO (대문 영상) ---------- */
.hero{display:flex;align-items:center}
.hero-media{position:absolute;inset:0;z-index:0;background:#090A0E;overflow:hidden}
/* 지금은 가짜 영상(모션). 나중에 아래 .hero-media 내용을
   <video autoplay muted loop playsinline poster="..."> ... </video> 로 교체하면 실제 영상 */
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;mix-blend-mode:screen;will-change:transform}
.hero-media .b1{width:44vw;height:44vw;background:var(--sheen-a);left:0%;top:6%;animation:float1 13s ease-in-out infinite alternate}
.hero-media .b2{width:52vw;height:52vw;background:var(--sheen-b);right:-4%;bottom:-12%;animation:float2 16s ease-in-out infinite alternate}
.hero-media .b3{width:34vw;height:34vw;background:#4f7bff;left:38%;top:-12%;animation:float3 19s ease-in-out infinite alternate}
@keyframes float1{to{transform:translate(30%,22%) scale(1.25)}}
@keyframes float2{to{transform:translate(-24%,-18%) scale(1.15)}}
@keyframes float3{to{transform:translate(16%,30%) scale(.85)}}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,10,14,.55) 0%,rgba(9,10,14,.12) 32%,rgba(9,10,14,.15) 58%,rgba(9,10,14,.9) 100%)}
.hero-content{position:relative;z-index:2;width:100%}
.hero .eyebrow{color:rgba(236,233,225,.82);margin-bottom:18px}
.hero-title{
  font-family:"Paperlogy",sans-serif;font-weight:900;
  font-size:clamp(40px,7vw,84px);line-height:1.02;letter-spacing:-.02em;margin-bottom:22px;
}
.hero-title .kr{font-family:"Paperlogy";font-weight:700}
.hero-sub{font-size:clamp(15px,1.8vw,19px);color:rgba(236,233,225,.92);max-width:52ch;line-height:1.55}
.hero-sub .thin{color:rgba(236,233,225,.62)}
.hero-hint{position:absolute;z-index:2;right:22px;bottom:20px;
  font-family:"Paperlogy",sans-serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(236,233,225,.7)}

/* 스크롤 큐 (Featured works + 마우스 아이콘, 통통 튐) */
.scroll-cue{position:absolute;z-index:3;left:0;right:0;bottom:30px;
  display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;
  animation:cueBounce 1.7s ease-in-out infinite}
.scroll-cue-label{font-family:"Paperlogy",sans-serif;font-size:12px;font-weight:300;letter-spacing:.22em;text-transform:uppercase}
.scroll-mouse{width:24px;height:38px;border:1.6px solid rgba(255,255,255,.85);border-radius:14px;position:relative}
.scroll-mouse .wheel{position:absolute;left:50%;top:7px;width:3px;height:7px;background:#fff;border-radius:2px;transform:translateX(-50%);animation:cueWheel 1.7s ease-in-out infinite}
@keyframes cueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes cueWheel{0%{opacity:0;top:7px}30%{opacity:1}60%{opacity:1;top:17px}100%{opacity:0;top:17px}}

/* ---------- PAGE HERO (서브페이지 상단 제목 — 영문·흰색·가운데) ---------- */
.page-hero{padding:calc(70px + clamp(56px,11vh,110px)) 0 clamp(28px,6vh,52px);text-align:center}
.page-hero h1{font-family:"Paperlogy",sans-serif;font-weight:900;font-size:34px;letter-spacing:.02em;line-height:1.1;color:var(--paper);text-transform:uppercase}
/* Work: 제목+탭 통째로 상단 고정(제목 위치는 스토리와 동일), 탭↔콘텐츠 간격 넓게 */
body.work-page .page-hero{position:sticky;top:0;z-index:30;background:var(--ink);padding-bottom:64px}
body.work-page .section{padding-top:0}

/* ---------- SECTION SHELL ---------- */
.section{padding:clamp(56px,9vh,104px) 0}
.section.bd{border-top:1px solid var(--ink-line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.sec-head h2{font-family:"Paperlogy",sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.01em}
.sec-head h2 .kr{font-family:"Paperlogy"}
.more-link{font-family:"Paperlogy",sans-serif;font-size:13.5px;color:var(--muted);transition:color .2s}
.more-link:hover{color:var(--sheen-b)}

/* ---------- WORK (4열 varied 매스너리) ---------- */
.work-grid{column-count:4;column-gap:24px}
.work-card{break-inside:avoid;margin:0 0 42px;display:block;transition:transform .25s ease}
.work-card:hover{transform:translateY(-6px)}
.work-thumb{aspect-ratio:4/5;background:linear-gradient(135deg,#1b1e27,#101219);border-radius:10px;
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.work-thumb img{width:100%;height:100%;object-fit:cover}
.work-thumb .ph{font-family:"Paperlogy",sans-serif;font-size:12px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.work-meta{padding:16px 6px 0;text-align:center}
.work-meta .tag{font-family:"Paperlogy",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sheen-a)}
.work-meta h3{font-size:17px;font-weight:700;margin:9px 0 6px}
.work-meta p{font-size:14px;color:var(--muted);line-height:1.6}
@media(max-width:1000px){.work-grid{column-count:3}}
@media(max-width:700px){.work-grid{column-count:2}}
@media(max-width:460px){.work-grid{column-count:1}}

/* ---------- FEATURED (대문 대표작 — 풀폭 영상, 패널로 스택) ---------- */
.feat-card{display:block;background:#090A0E}
.feat-media{position:absolute;inset:0;overflow:hidden}
/* 나중에 .feat-media 안을 <video autoplay muted loop playsinline>...</video> 로 교체하면 실제 영상 */
.feat-media video,.feat-media img{width:100%;height:100%;object-fit:cover;display:block}
.feat-media .b1{width:40vw;aspect-ratio:1;background:var(--sheen-a);left:-4%;top:-18%;animation:float1 13s ease-in-out infinite alternate}
.feat-media .b2{width:48vw;aspect-ratio:1;background:var(--sheen-b);right:-8%;bottom:-30%;animation:float2 16s ease-in-out infinite alternate}
.feat-media .b3{width:32vw;aspect-ratio:1;background:#4f7bff;left:42%;top:-26%;animation:float3 19s ease-in-out infinite alternate}
.feat-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,10,14,.8) 0%,rgba(9,10,14,.4) 42%,rgba(9,10,14,.12) 100%),
             linear-gradient(0deg,rgba(9,10,14,.55) 0%,transparent 40%)}
.feat-body{position:absolute;z-index:2;left:max(24px,calc(50vw - var(--maxw)/2 + 24px));
  top:50%;transform:translateY(-50%);right:24px;color:#fff}
.feat-body .tag{font-family:"Paperlogy",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.feat-body h3{font-family:"Paperlogy",sans-serif;font-weight:700;font-size:clamp(26px,4vw,52px);letter-spacing:-.01em;margin:12px 0 10px;color:#fff}
.feat-body p{font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.82);max-width:46ch;margin-bottom:18px}
.feat-more{display:inline-flex;align-items:center;gap:8px;font-family:"Paperlogy",sans-serif;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:gap .25s ease}
.feat-card:nth-of-type(2) .feat-media{filter:hue-rotate(65deg)}
.feat-card:nth-of-type(3) .feat-media{filter:hue-rotate(-55deg)}
.feat-card:hover .feat-more{gap:14px}
.feat-hint{position:absolute;z-index:2;right:20px;top:18px;font-family:"Paperlogy",sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---------- WORK 필터 탭 ---------- */
.work-tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:34px 0 0}
.work-tab{font-family:"Paperlogy",sans-serif;font-size:14px;font-weight:300;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);
  background:transparent;border:1.5px solid var(--ink-line);border-radius:999px;padding:9px 20px;cursor:pointer;transition:all .2s}
.work-tab:hover{color:var(--paper);border-color:rgba(236,233,225,.3)}
.work-tab.active{color:var(--paper);border:1.5px solid transparent;
  background:linear-gradient(var(--ink),var(--ink)) padding-box, var(--grad) border-box}
.work-card[hidden]{display:none}

/* ---------- STORY ---------- */
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
.story-lead{font-family:"Paperlogy",sans-serif;font-weight:400;font-size:clamp(20px,2.6vw,30px);line-height:1.35;letter-spacing:-.01em}
.story-lead .kr{font-family:"Paperlogy";font-weight:300}
.story-body p{color:var(--muted);font-size:15.5px;margin-bottom:16px;max-width:56ch}
.story-body p b{color:var(--paper);font-weight:500}
@media(max-width:820px){.story-grid{grid-template-columns:1fr;gap:26px}}

/* ---------- NOTICE ---------- */
.notice-list{border-top:1px solid var(--ink-line)}
.notice-row{display:grid;grid-template-columns:130px 1fr auto;gap:20px;align-items:baseline;
  padding:22px 4px;border-bottom:1px solid var(--ink-line);transition:padding-left .25s}
.notice-row:hover{padding-left:14px}
.notice-row .date{font-family:"Paperlogy",sans-serif;font-size:13px;color:var(--muted)}
.notice-row .t{font-size:16px}
.notice-row .cat{font-family:"Paperlogy",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sheen-a)}
@media(max-width:640px){
  .notice-row{grid-template-columns:1fr auto;gap:6px}
  .notice-row .date{grid-column:1/-1;order:-1}
}

/* ---------- ORDER FORM ---------- */
.order-wrap{background:var(--ink-raised);border:1px solid var(--ink-line);border-radius:20px;padding:clamp(26px,4vw,46px)}
#orderForm{display:flex;flex-direction:column}
#orderForm .btn{align-self:flex-end}
.order-intro{color:var(--muted);font-size:15px;margin-bottom:30px;max-width:58ch}
.field{margin-bottom:22px}
.field label{display:block;font-size:13.5px;margin-bottom:8px;color:var(--paper)}
.field label .req{color:var(--sheen-a);margin-left:4px}
.field input,.field textarea{
  width:100%;background:var(--ink);border:1px solid var(--ink-line);border-radius:10px;
  color:var(--paper);font-family:inherit;font-size:15px;padding:13px 14px;transition:border-color .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sheen-a)}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:600px){.grid2{grid-template-columns:1fr;gap:0}}
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
  font-family:"Paperlogy",sans-serif;font-weight:500;font-size:15px;letter-spacing:.02em;
  padding:15px 26px;border-radius:11px;background:var(--grad);color:#0b0c10;transition:transform .2s,filter .2s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.order-note{margin-top:16px;font-size:12.5px;color:var(--muted)}
.order-status{margin-top:14px;font-size:14px;min-height:1.2em}
.order-status.ok{color:var(--sheen-a);font-size:13.5px}
.order-status.err{color:#ff9b8a}

/* ---------- FOOTER ---------- */
footer{padding:64px 0;border-top:1px solid var(--ink-line);color:var(--muted);font-size:13px;background:var(--ink)}
.foot-in{display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px;align-items:start;text-align:left}
.foot-col{line-height:1.9}
.foot-col a{color:var(--muted)}
.foot-col a:hover{color:var(--sheen-b)}
.foot-copy{color:var(--muted)}
@media(max-width:760px){.foot-in{grid-template-columns:1fr;gap:22px;text-align:center}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .blob{animation:none}
  .scroll-cue{animation:none}
  .scroll-mouse .wheel{animation:none}
}