/* 리즈웹 v2 — metic 디자인 시스템(종이·먹·포인트 하나, 1px 선, 큰 여백)을 리즈웹 색·글꼴로 */
:root{
  --paper:#f4f4f2; --paper2:#e9e9e6; --ink:#121214; --ink2:#4a4a50; --steel:#62626a;
  --line:#1212141f; --line2:#12121433; --pt:#FF3E3E; --pt-soft:#ff3e3e14;
  --kr:'Pretendard Variable',Pretendard,system-ui,sans-serif;
  --en:'Bricolage Grotesque',var(--kr);
  --wm:var(--kr);   /* 워드마크 rizlab. — 필기체 같은 a 말고 단순한 a (11-02) */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --hand:'Nanum Pen Script',cursive;
  --ease:cubic-bezier(.23,1,.32,1);
  --shell:clamp(1.25rem,5vw,5rem); --frame:1440px; --nav:72px;
  --r:12px; --pill:999px;
  --d1:clamp(2.75rem,6vw,6rem); --d2:clamp(2rem,4.2vw,3.75rem);
  --lead:clamp(17px,1.5vw,22px); --body:17px;
  --sec:clamp(6rem,10vw,10rem);
  --lh-d:1.3; --lh-h:1.4; --lh-b:1.75;   /* 한글 줄간격 — 큰 제목 · 작은 제목 · 본문 */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--kr);font-size:var(--body);line-height:var(--lh-b);letter-spacing:-.01em;word-break:keep-all;overflow-x:clip}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:400}
.shell{width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--shell)}
.sec{padding-block:var(--sec)}
.wm{font-family:var(--wm);font-weight:700;letter-spacing:-.04em;font-size:22px;line-height:1}
.wm b{color:var(--pt)}
.wm--xl{font-size:clamp(4rem,9vw,8rem)}
.nw{white-space:nowrap}
.d2{font-size:var(--d2);font-weight:700;line-height:var(--lh-d);letter-spacing:-.045em}
.d2 b,.hero__h b{color:var(--pt)}

/* 눈금자 — 왼쪽은 픽셀 눈금, 오른쪽은 읽은 만큼 빨간 점이 내려온다 */
.ruler{position:fixed;top:0;bottom:0;z-index:5;pointer-events:none}
/* 왼쪽 눈금자는 히어로에 붙어 있다 — 스크롤하면 히어로와 함께 올라가며 끊긴다(높이는 v2.js 가 히어로에 맞춘다) */
.ruler--l{position:absolute;bottom:auto;height:100vh}
.ruler--l{left:0;width:44px;background:repeating-linear-gradient(to bottom,var(--line2) 0 1px,transparent 1px 8px) left/8px 100% no-repeat}
.ruler--l span{position:absolute;left:0;display:flex;align-items:center;gap:4px;font:10px/1 var(--mono);color:var(--steel)}
.ruler--l span::before{content:"";width:14px;height:1px;background:var(--steel)}

/* 상단 — 내려가면 양쪽이 알약으로 떠오른다 */
.nv{position:fixed;inset:0 0 auto;z-index:40;height:var(--nav);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--shell)}
.nv__brand,.nv__right{position:relative;display:flex;align-items:center;gap:2px;padding:2px;border-radius:var(--pill);border:1px solid transparent;transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.nv.is-float .nv__brand,.nv.is-float .nv__right{background:#f4f4f2e6;border-color:var(--line);box-shadow:0 6px 24px #1212140d;backdrop-filter:blur(8px)}
.nv__wm{display:flex;align-items:center;height:44px;padding:0 12px}
.nv__lens{gap:8px}
.nv__lens svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.nv__lens[aria-pressed=true]{background:var(--pt);color:#fff}
.nv__menu{width:28px;height:28px;border-radius:50%;background:var(--ink);display:grid;place-content:center;gap:3px}
.nv__menu i{display:block;width:12px;height:1.6px;background:var(--paper);transition:transform .4s var(--ease)}
.ni[aria-expanded=true] .nv__menu i:first-child{transform:translateY(2.3px) rotate(45deg)}
.ni[aria-expanded=true] .nv__menu i:last-child{transform:translateY(-2.3px) rotate(-45deg)}

/* 알약 단추 — 오른쪽 둥근 칸에 화살표 */
.pill{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 8px 0 24px;border-radius:var(--pill);font-size:.95rem;font-weight:500;line-height:1;white-space:nowrap;transition:background .4s var(--ease),transform .16s var(--ease)}
.pill:active{transform:scale(.97)}
/* 커서를 따라 번지는 빛 */
.pill__glow{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(110px circle at var(--gx,50%) var(--gy,50%),#ffffff2b,#fff0 70%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.pill:hover .pill__glow{opacity:1}
.pill__dot{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;transition:transform .35s var(--ease)}
.pill__dot svg{transition:transform .35s var(--ease)}
.pill__dot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.pill:hover .pill__dot{transform:translate(2px,-2px)}
.pill:hover .pill__dot svg{transform:rotate(45deg)}
.pill--ink{background:var(--ink);color:var(--paper)} .pill--ink .pill__dot{background:var(--pt);color:#fff}
.pill--line{border:1px solid var(--line)} .pill--line .pill__glow{background:radial-gradient(110px circle at var(--gx,50%) var(--gy,50%),#1212140f,#12121400 70%)}
.pill--line .pill__dot{background:var(--paper2)}
.pill--dark{border:1px solid #f4f4f233;color:var(--paper)} .pill--dark .pill__dot{background:var(--pt);color:#fff}

/* 1 · 히어로 */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav) + 24px) 0 64px;overflow:hidden}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:end;gap:40px}
.hero__h{font-size:var(--d1);font-weight:700;line-height:1.02;letter-spacing:-.05em;white-space:nowrap}
.hero__h span{display:inline-block}
.hero__lead{font-size:var(--lead);font-weight:300;line-height:1.55;color:var(--ink2);letter-spacing:-.025em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* metic 실측 폭 — 글자가 짧아도 상자 폭은 190 · 180 */
.hero__btns .pill{justify-content:space-between}
.hero__btns .pill--ink{width:190px}.hero__btns .pill--line{width:180px}
/* 돋보기가 쉬는 자리 — 실제 돋보기(.lp)는 이 칸의 위치를 따라간다 */
html::-webkit-scrollbar{display:none}
/* 돋보기 자리 — 메틱 실측: 유리 지름 = min(높이 50% - 183, 폭 22% - 55), 140~287px. 유리 중심은 오른쪽에서 27vw, 유리 윗변은 112px */
.hero__slot{--g:clamp(140px,min(50svh - 183px,max(40vw - 290px,218px)),287px);--w:calc(var(--g) / .554);position:absolute;top:calc(112px - var(--w) * .0886);right:calc(clamp(350px,27vw,400px) - var(--w) * .625);width:var(--w);aspect-ratio:1006/1100;pointer-events:none}

/* 3 · 소개 */
.it .d2{max-width:16em}
/* 읽는 만큼 칠해진다 — 단어마다 --on 이 0→1 */
.it__h span{color:color-mix(in srgb,var(--ink) calc(var(--on,0) * 100%),#12121433);transition:color .25s linear}
.it__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:clamp(4rem,7vw,7rem)}
.it__cols li{padding-top:22px;border-top:1px solid var(--line2)}
.it__cols h3{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:var(--lh-h);margin-bottom:14px}
.it__cols p{font-size:15px;color:var(--ink2);line-height:var(--lh-b)}

/* 4 · 하는 일 — 올린 칸만 넓어진다 */
.fan{position:relative;display:flex;gap:10px;height:clamp(380px,32vw,460px);margin-top:clamp(3rem,5vw,4rem)}
.fan li{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--paper2);cursor:pointer;transition:flex .7s var(--ease)}
.fan li::before{content:"";position:absolute;inset:0 0 30%;background:var(--img) var(--ipos,50% 50%)/cover;filter:grayscale(1) contrast(.85);opacity:.14;transition:opacity .7s var(--ease),filter .7s var(--ease)}
.fan li.is-on{flex:3.35 1 0;cursor:default}
.fan li.is-on::before{opacity:1;filter:none}
.fan li::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--paper2) 36%,#e9e9e600 72%)}
.fan em{position:absolute;z-index:1;top:18px;left:18px;font-style:normal;color:var(--steel)}
.fan b{position:absolute;z-index:1;left:18px;bottom:22px;font-size:19px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;transform-origin:0 100%;rotate:-90deg;translate:1.2em 0;transition:rotate .7s var(--ease),translate .7s var(--ease),bottom .7s var(--ease)}
.fan li.is-on b{rotate:0deg;translate:0 0;bottom:118px;font-size:22px}
.fan__in{position:absolute;z-index:1;left:18px;right:18px;bottom:22px;opacity:0;transition:opacity .35s}
.fan li.is-on .fan__in{opacity:1;transition:opacity .6s .25s}
.fan__in p{font-size:15px;color:var(--ink2);max-width:24em;margin-bottom:14px}
.fan__in>span{margin-right:18px;color:var(--ink)}
.fan__in a{font-size:14px;font-weight:600}
.fan .insp{left:var(--ix,0);top:var(--iy,0);width:var(--iw,0);height:var(--ih,0);z-index:2}
.fan.is-insp .insp{opacity:1;scale:1}

/* 검사 상자 — 올린 것 둘레에 빨간 테·모서리 점·이름과 실제 크기 */
.insp{position:absolute;border:1px solid var(--pt);border-radius:2px;opacity:0;scale:.98;transition:opacity .3s var(--ease),scale .4s var(--ease);pointer-events:none}
.insp i{position:absolute;width:5px;height:5px;background:var(--pt)}
.insp i:nth-child(1){left:-3px;top:-3px}.insp i:nth-child(2){right:-3px;top:-3px}
.insp i:nth-child(3){left:-3px;bottom:-3px}.insp i:nth-child(4){right:-3px;bottom:-3px}
.insp__tag{position:absolute;left:-1px;bottom:calc(100% + 4px);padding:2px 6px;font-size:10px;font-weight:500;color:#fff;background:var(--pt);border-radius:2px;white-space:nowrap}

/* 5 · 작업물 — 앞 카드는 살짝 작아지며 뒤로 밀린다 */
.sec__top{display:flex;align-items:end;justify-content:space-between;gap:20px}
.more{font-size:15px;font-weight:600;white-space:nowrap}
.stack{margin-top:clamp(3rem,5vw,4rem);display:flex;flex-direction:column;gap:24px}
.wc{position:sticky;top:calc(var(--nav) + var(--k) * 20px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(500px,62vh);overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--paper2);transform-origin:50% 0;will-change:transform}
.wc__info{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,36px)}
.wc__kind{color:var(--steel)}
.wc__name{font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.04em;margin-top:18px;line-height:var(--lh-h)}
.wc__desc{margin-top:14px;font-size:16px;color:var(--ink2);max-width:26em}
.wc__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:30px}
.wc__tags span{padding:5px 12px;border:1px solid var(--line2);border-radius:var(--pill);font-size:12px;color:var(--ink2)}
.wc__go{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;font-weight:600}
.wc__go i{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-style:normal;font-size:13px;transition:background .3s}
.wc:hover .wc__go i{background:var(--pt)}
.wc__shot{position:relative;margin:14px 14px 14px 0;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.wc__url{position:absolute;z-index:1;top:0;left:0;right:0;height:30px;display:flex;align-items:center;justify-content:center;background:#f4f4f2f0;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--steel)}
.wc__url::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pt);margin-right:7px}
/* 사이트 화면 — 실제 사이트 녹화 영상(움직이는 부분은 그대로 움직인다) */
.wc__shot video{position:absolute;top:30px;left:0;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:50% 0;background:#fff}

/* 6 · 문의 */
.ct{padding-top:var(--sec);padding-bottom:clamp(2.5rem,4vw,4rem)}
.ct__card{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink);color:var(--paper);padding:clamp(40px,6vw,88px) clamp(28px,5vw,72px);min-height:560px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ct__sun{position:absolute;width:min(58vw,640px);aspect-ratio:1;border-radius:50%;background:var(--pt);right:-8%;top:-34%}
.ct__card .d2{position:relative;color:var(--paper)}
.ct__card .d2 b{color:var(--pt)}
.ct__card p{position:relative;margin:26px 0 36px;font-size:var(--lead);line-height:var(--lh-b);color:#f4f4f2b3;max-width:34em}
@media (max-width:600px){.ct__card p br{display:none}}

/* 하단 */
.ft{border-top:1px solid var(--line);max-width:none;padding-top:clamp(3rem,5vw,4.5rem);padding-bottom:28px}
.ft__top,.ft__bot{max-width:calc(var(--frame) - var(--shell)*2);margin-inline:auto}
.ft__top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.ft__brand p:not(.wm){margin-top:20px;font-size:14px;color:var(--ink2)}
.ft__col{display:flex;flex-direction:column;gap:2px;font-size:14px}
.ft__col .mono{color:var(--steel);margin-bottom:14px;text-transform:uppercase}
/* 푸터 링크 — 색은 그대로, 올리면 빨간 꺾쇠가 왼쪽 위·오른쪽 아래에서 들어온다(metic .link) */
.ft__col a{position:relative;align-self:flex-start;padding:6px 0}
.ft__col a::before,.ft__col a::after{content:"";position:absolute;width:7px;height:7px;border:0 solid var(--pt);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .45s var(--ease)}
.ft__col a::before{top:-3px;left:-7px;border-width:1px 0 0 1px;transform:translate(-5px,-5px)}
.ft__col a::after{bottom:-3px;right:-7px;border-width:0 1px 1px 0;transform:translate(5px,5px)}
.ft__col a:hover::before,.ft__col a:hover::after,.ft__col a:focus-visible::before,.ft__col a:focus-visible::after{opacity:1;transform:translate(0)}
.ft__bot{display:flex;justify-content:space-between;margin-top:clamp(3rem,5vw,4.5rem);padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--steel)}

/* 나타나기 — 흐림을 걷으며 올라온다 */
.rv{opacity:0;transform:translateY(1.75rem);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1;transform:none;filter:none}

@media (max-width:900px){
  .hero__btns{flex-direction:column;align-items:flex-start}
  .ruler--l{width:28px}.ruler--l span{display:none}
  .hero{justify-content:flex-start;padding-top:calc(var(--nav) + 14px);padding-bottom:48px}
  .hero__slot{position:relative;display:block;top:auto;right:auto;margin:0 auto 5vh;width:min(66vw,300px)}
  .hero__in{grid-template-columns:1fr;gap:26px;margin-top:auto}
  .hero__h{font-size:clamp(2.25rem,10vw,3.25rem);white-space:normal}
  .it__cols{grid-template-columns:1fr 1fr;gap:34px 22px}
  .fan{flex-direction:column;height:auto}
  .fan li{flex:none;min-height:4.25rem;transition:min-height .7s var(--ease)}
  .fan li.is-on{flex:none;min-height:300px}
  .fan em{top:24px}
  .fan b,.fan li.is-on b{rotate:0deg;translate:0 0;left:62px;top:20px;bottom:auto;font-size:18px}
  .fan li.is-on b{left:18px;top:auto;bottom:104px;font-size:20px}
  .wc{grid-template-columns:1fr;min-height:0}
  .wc__shot{margin:0 12px 12px;height:56vw}
  .wc__tags{padding-top:22px}
  .ct__card{min-height:480px;justify-content:flex-end}
  .ct__sun{width:90vw;right:-30%;top:-22%}
  .ft__top{grid-template-columns:1fr 1fr}.ft__brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}}
/* 아래 칸 — 주소 · 사업자 정보 링크 */
.ft__addr{padding:6px 0;color:var(--ink2);line-height:var(--lh-h)}
.ft__legal{display:flex;gap:18px}
.ft__legal a{transition:color .25s}.ft__legal a:hover{color:var(--ink)}
/* 히어로 큰 제목 — 함렛 400, 커서가 닿은 글자만 800까지 (11-02 A400 확정) */
.hero__h{font-family:'Hahmlet',serif;letter-spacing:-.08em;line-height:1.1}
.hero__h .kc{font-weight:calc(400 + var(--k,0) * 400)}