/* =========================================================
   아인버츠 — 읽고, 풀고, 지킵니다 (대표님 디자인, 2026-10-07)
   글꼴은 /fonts/pretendard.css(사이트 안에 둔 Pretendard, SIL OFL)
   흩어진 카톡 말풍선이 획이 되어 이름을 만들고,
   ‘아’의 ㅇ 안으로 들어가면 두 서비스의 문과 잠긴 세 번째 문이 있다.
   ========================================================= */
:root{
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --paper:#f4f2ed;--paper2:#ebe8e1;--ink:#111316;--ink2:#3b4047;--mute:#7b8189;--line:rgba(17,19,22,.1);
  --red:#e1432a;
  --night:#0c0f12;--night2:#151a1f;--nline:rgba(236,234,228,.12);--ntext:#eceae4;--nmute:rgba(236,234,228,.62);
  --sai:#bf4f6a;--sai-d:#9a3852;--sai-bg:#f8eeeb;--sai-soft:#f1dbd6;--sai-lt:#ec9cb0;
  --puli:#2e6a48;--puli-d:#1f4d34;--puli-bg:#ecf0e6;--puli-soft:#d6e2d0;--puli-lt:#95c9a2;--thread:#c8473a;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block}
::selection{background:rgba(225,67,42,.2)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--mute)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.h2{font-size:clamp(34px,4.6vw,60px);line-height:1.1;letter-spacing:-.045em;font-weight:700}
.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--ink2)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}

/* 등장 */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}
[data-rv="2"]{transition-delay:.08s}[data-rv="3"]{transition-delay:.16s}[data-rv="4"]{transition-delay:.24s}

/* ---------- 내비 ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:80;pointer-events:none}
.nav{pointer-events:auto;position:relative;margin:0 auto;max-width:100%;height:58px;padding:0 max(24px,calc((100vw - 1120px)/2 + 32px));display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--ink);transition:max-width .6s var(--ease),margin .6s var(--ease),height .6s var(--ease),padding .6s var(--ease),border-radius .6s var(--ease),background-color .4s,box-shadow .4s,color .4s}
header.scrolled .nav{max-width:min(1100px,calc(100vw - 24px));margin-top:12px;height:52px;padding:0 9px 0 20px;border-radius:18px;background:rgba(246,244,239,.74);-webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px);box-shadow:0 0 0 1px rgba(17,19,22,.06),0 14px 34px -22px rgba(17,19,22,.4)}
header.dk .nav{color:var(--ntext)}
header.dk.scrolled .nav{background:rgba(22,26,31,.62);box-shadow:0 0 0 1px rgba(236,234,228,.08),0 14px 34px -22px rgba(0,0,0,.7)}
.brand{display:flex;align-items:center;gap:10px;height:40px}
.brand .sym{width:22px;height:22px;flex:none}
.brand .word{display:block;height:15px;opacity:0;transform:translateX(-8px);transition:opacity .6s,transform .6s var(--ease)}
.brand .word svg{height:100%;width:auto}
header.named .brand .word{opacity:1;transform:none}
.navlinks{display:flex;align-items:center;gap:26px;font-size:13.5px}
.navlinks a{opacity:.72;transition:opacity .2s}
.navlinks a:hover{opacity:1}
.navlinks .cta{opacity:1;padding:7px 15px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:13px;transition:background .3s,color .3s}
header.dk .navlinks .cta{background:var(--ntext);color:var(--night)}

/* ---------- 1. 이름이 모이는 무대 ---------- */
#intro{position:relative;height:620vh;background:var(--paper)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#f7f5f1 0%,var(--paper) 55%,#ece9e2 100%)}
#pieces{position:absolute;inset:0;transform-origin:0 0}
.pc{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:14px;font-weight:500;line-height:1;color:#2a2e34;border:0 solid var(--ink);background:#fff;border-radius:17px 17px 17px 5px;box-shadow:0 10px 24px -16px rgba(17,19,22,.35),0 0 0 1px rgba(17,19,22,.05)}
.pc .tx{display:block;padding:10px 15px 11px}
.pc.me{background:#f6e27c;border-radius:17px 17px 5px 17px}
.hero-copy{position:absolute;z-index:3;left:max(32px,calc((100vw - 1120px)/2 + 32px));bottom:clamp(40px,9vh,100px);max-width:600px}
.hero-copy h1{font-size:clamp(42px,5.8vw,80px);line-height:1.06;letter-spacing:-.05em;font-weight:700;margin:16px 0 20px}
.hero-copy p{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--ink2);max-width:440px}
.cue{position:absolute;z-index:3;right:max(32px,calc((100vw - 1120px)/2 + 32px));bottom:clamp(40px,9vh,100px);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;font-weight:500;color:var(--mute);letter-spacing:.02em}
.cue i{position:relative;width:1px;height:56px;background:rgba(17,19,22,.14);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:100%}}
.wm-cap{position:absolute;z-index:3;left:0;right:0;top:0;text-align:center;opacity:0;pointer-events:none;padding:0 24px}
.wm-cap b{display:block;font-size:clamp(20px,2.1vw,28px);font-weight:700;letter-spacing:-.035em}
.wm-cap span{display:block;margin-top:8px;font-size:clamp(13.5px,1.1vw,15.5px);color:var(--mute)}

/* ㅇ 안쪽 세계 */
#inner{position:absolute;inset:0;z-index:4;background:var(--night);color:var(--ntext);clip-path:circle(0px at 50% 50%);-webkit-clip-path:circle(0px at 50% 50%)}
#inner .glow{position:absolute;left:0;top:0;width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,160,.13),rgba(255,200,160,.05) 50%,transparent);pointer-events:none}
#inner .grain{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:3px 3px;pointer-events:none}
.eye{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(225,67,42,.14),0 0 26px rgba(225,67,42,.65)}
.inner-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:84px 24px 48px;opacity:0}
.inner-body .eyebrow{color:var(--nmute)}
.inner-body h2{margin:16px 0 14px}
.inner-body>p{color:var(--nmute);font-size:clamp(15px,1.3vw,18px)}
.doors{display:flex;justify-content:center;gap:clamp(16px,4.2vw,64px);margin-top:clamp(30px,6.5vh,72px)}
.door{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;width:clamp(150px,16.5vw,232px);opacity:0;color:var(--ntext)}
.door .ring{position:relative;width:100%;aspect-ratio:1;border-radius:50%;border:clamp(10px,1.15vw,16px) solid var(--c);display:grid;place-items:center;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s}
.door .ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 62%,var(--g),transparent 72%)}
.door .ring svg{position:relative;width:62%;height:62%;overflow:visible}
.door:hover .ring{transform:scale(1.045);box-shadow:0 0 0 10px rgba(255,255,255,.03),0 30px 60px -30px var(--g)}
.door.sai{--c:var(--sai-lt);--g:rgba(236,156,176,.34)}
.door.puli{--c:var(--puli-lt);--g:rgba(149,201,162,.3)}
.door.lock{--c:rgba(236,234,228,.22);--g:rgba(236,234,228,.06)}
.door.lock .ring{border-style:dashed}
.door .dl{display:flex;flex-direction:column;align-items:center;gap:3px}
.door .dl b{font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:-.03em}
.door .dl small{font-size:clamp(12px,.95vw,13.5px);color:var(--nmute)}
.door .dl em{margin-top:8px;font-style:normal;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--nline);color:var(--ntext);transition:background .3s,border-color .3s}
.door:hover .dl em{background:rgba(236,234,228,.1);border-color:rgba(236,234,228,.28)}
.door.lock .dl em{color:var(--nmute)}

/* ---------- 2. 두 서비스 ---------- */
#products{position:relative;z-index:5;margin-top:-40vh;border-radius:36px 36px 0 0;background:var(--sai-bg);box-shadow:0 -40px 80px -40px rgba(0,0,0,.55)}
.pwrap{position:relative;height:380vh}
.pstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;border-radius:36px 36px 0 0}
#pline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#pTrack{fill:none;stroke:rgba(191,79,106,.14);stroke-width:2;stroke-linecap:round}
#pPath{fill:none;stroke:var(--sai);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pp{position:absolute;inset:0;display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:40px;max-width:1120px;margin:0 auto;padding:84px 32px 36px;pointer-events:none}
.pp.on{pointer-events:auto}
.pp-text{max-width:500px}
.pnum{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.pnum span{font-family:var(--mono);font-size:12px;padding:4px 9px;border-radius:999px;background:var(--pc);color:#fff;letter-spacing:.02em}
.pp h2{margin:18px 0 18px}
.pp .lead{max-width:460px}
.feat{list-style:none;margin:26px 0 24px;border-top:1px solid var(--line)}
.feat li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.feat b{flex:none;width:118px;font-weight:600}
.feat span{color:var(--ink2)}
.price{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--ink2)}
.price b{color:var(--ink);font-weight:700}
.price s{color:var(--mute);margin:0 2px 0 4px}
.price em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--pc);margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--pcs)}
.acts{display:flex;align-items:center;gap:18px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-size:15px;font-weight:600;color:#fff;background:var(--pc);transition:transform .3s var(--ease),background .3s,box-shadow .3s;box-shadow:0 14px 30px -18px var(--pc)}
.btn:hover{transform:translateY(-2px);background:var(--pcd)}
.btn svg{width:15px;height:15px}
.pnote{margin-top:16px;font-size:12.5px;color:var(--mute)}
.pp.sai{--pc:var(--sai);--pcd:var(--sai-d);--pcs:var(--sai-soft)}
.pp.puli{--pc:var(--puli);--pcd:var(--puli-d);--pcs:var(--puli-soft)}
.pp-vis{position:relative;height:100%;display:grid;place-items:center}
.phone-fit{width:300px;height:620px;transform:scale(var(--ps,1));transform-origin:50% 50%}
.phone{position:relative;width:300px;height:620px;border-radius:52px;background:#101215;padding:11px;box-shadow:0 60px 100px -50px rgba(40,20,20,.6),0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 1.5px rgba(255,255,255,.09);will-change:transform}
.phone::before{content:"";position:absolute;top:22px;left:50%;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#000;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;font-size:12px;line-height:1.45;letter-spacing:-.02em;color:var(--ink)}
.sb{display:flex;justify-content:space-between;align-items:center;height:50px;padding:0 26px 0 30px;font-size:13px;font-weight:600}
.sb i{width:46px;height:11px;background:linear-gradient(90deg,currentColor 0 15px,transparent 15px 19px,currentColor 19px 31px,transparent 31px 35px,currentColor 35px);opacity:.85;border-radius:3px;-webkit-mask:linear-gradient(#000,#000);}
.ah{display:flex;align-items:center;gap:7px;padding:6px 20px 12px;font-size:15px;font-weight:700}
.ah .am{width:18px;height:18px}
.ah em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px}
.sc{padding:0 14px}
.sc-t{padding:2px 6px 12px}
.sc-t small{display:block;font-size:10.5px;color:var(--mute);margin-bottom:4px}
.sc-t strong{display:block;font-size:19px;line-height:1.28;letter-spacing:-.04em}
.card{border-radius:20px;background:#fff;padding:13px 14px;margin-bottom:9px;box-shadow:0 8px 20px -16px rgba(60,30,30,.35)}
.card>small{display:block;font-size:10px;font-weight:600;color:var(--mute);margin-bottom:6px}
.scr-sai{background:#fbf4f2}
.scr-sai .ah em{background:var(--sai-soft);color:var(--sai-d)}
.tcard{display:flex;align-items:center;gap:14px}
.tcard svg{width:70px;height:70px;flex:none;transform:rotate(-90deg)}
.tcard .tn{font-size:30px;font-weight:700;letter-spacing:-.05em;line-height:1}
.tcard .tn sup{font-size:15px;vertical-align:top;margin-left:1px}
.tcard .tl{display:block;font-size:10.5px;color:var(--mute);margin-top:5px}
.chart svg{width:100%;height:62px;overflow:visible}
.chart .wk{display:flex;justify-content:space-between;font-size:8.5px;color:var(--mute);margin-top:5px}
.qcard p{font-size:13.5px;font-weight:600;line-height:1.42;letter-spacing:-.035em}
.qcard p mark{background:linear-gradient(transparent 60%,rgba(191,79,106,.2) 60%);color:inherit}
.qcard span{display:block;margin-top:6px;font-size:10px;color:var(--mute)}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:2px 2px 0}
.chips span{font-size:10px;font-weight:600;padding:5px 9px;border-radius:999px;background:#fff;color:var(--ink2)}
.scr-puli{background:#f3f5ee}
.scr-puli .ah em{background:var(--puli-soft);color:var(--puli-d)}
.mcard{background:linear-gradient(160deg,#2f6b49,#1f4a33);color:#f1efe4;box-shadow:0 18px 30px -20px rgba(20,60,40,.7)}
.mcard>small{color:rgba(241,239,228,.7)}
.mcard .q{font-size:13px;font-weight:600;line-height:1.42;padding-left:9px;border-left:2px solid var(--thread);margin-bottom:10px}
.bb{border-radius:14px;padding:8px 10px;font-size:11px;line-height:1.45;margin-top:7px}
.bb small{display:block;font-size:9px;font-weight:700;margin-bottom:2px;opacity:.75}
.bb.ai{background:#f6f3e6;color:#1f2a22;margin-right:24px}
.bb.re{background:#cfe5c0;color:#1f3a28;margin-left:30px}
.rcard{display:flex;align-items:center;gap:12px}
.rcard svg{width:48px;height:48px;flex:none;transform:rotate(-90deg)}
.rcard b{display:block;font-size:12.5px;letter-spacing:-.03em}
.rcard span{font-size:10px;color:var(--mute)}
.snote{font-size:9.5px;color:var(--mute);padding:4px 6px}

/* ---------- 3. 바로 써 보기 ---------- */
#shop{position:relative;z-index:5;background:var(--paper);padding:140px 0 130px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px}
.sec-head .lead{max-width:380px}
.sec-head .h2{margin-top:16px}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.scard{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:440px;padding:38px 38px 34px;border-radius:30px;background:var(--bg);transition:opacity .9s var(--ease),transform .6s var(--ease),box-shadow .6s}
.scard:hover{transform:translateY(-4px);box-shadow:0 40px 70px -46px rgba(17,19,22,.45)}
.scard.sai{--bg:var(--sai-bg);--pc:var(--sai);--pcd:var(--sai-d);--pcs:var(--sai-soft)}
.scard.puli{--bg:var(--puli-bg);--pc:var(--puli);--pcd:var(--puli-d);--pcs:var(--puli-soft)}
.scard .deco{position:absolute;right:-64px;top:-84px;width:230px;height:230px;opacity:.9;transition:transform 1.2s var(--ease)}
.scard:hover .deco{transform:rotate(24deg)}
.scard .tag{font-size:13px;font-weight:600;color:var(--pc)}
.scard h3{font-size:clamp(40px,4vw,54px);letter-spacing:-.05em;line-height:1;margin:14px 0 16px}
.scard>p{max-width:330px;color:var(--ink2);font-size:15.5px}
.rows{margin-top:auto;padding-top:28px}
.rows div{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.rows div span{color:var(--ink2)}
.rows div b{font-weight:700}
.rows div s{color:var(--mute);font-size:13px;margin-right:6px;font-weight:400}
.rows em{font-style:normal;font-size:11px;font-weight:700;color:var(--pc);background:var(--pcs);padding:2px 7px;border-radius:999px;margin-right:8px}
.scard .btn{align-self:flex-start;margin-top:18px}
.scard .fine{margin-top:14px;font-size:12px;color:var(--mute)}
.shop-foot{margin-top:26px;font-size:14px;color:var(--mute);text-align:center}

/* ---------- 4. 원칙 ---------- */
#belief{position:relative;z-index:5;background:var(--paper)}
.bwrap{position:relative;height:250vh}
.bstage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.manifesto{font-size:clamp(28px,3.7vw,52px);line-height:1.36;font-weight:700;letter-spacing:-.04em;max-width:1010px}
.manifesto .w{color:rgba(17,19,22,.13);transition:color .35s}
.manifesto .w.on{color:var(--ink)}
.manifesto .w.on.r{color:var(--red)}
.manifesto br+.w{margin-left:0}
.bstage .eyebrow{margin-bottom:28px}
.principles{padding:40px 0 150px}
.pr-head{margin-bottom:40px}
.pr-head .h2{margin-top:14px;font-size:clamp(28px,3.2vw,42px)}
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pr{padding:28px 24px 30px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(17,19,22,.05)}
.pr .n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.pr svg{width:30px;height:30px;margin:22px 0 18px;color:var(--ink)}
.pr b{display:block;font-size:19px;letter-spacing:-.035em;margin-bottom:8px}
.pr p{font-size:14.5px;color:var(--ink2);line-height:1.6}

/* ---------- 5. 비전: 세 번째 문 ---------- */
#vision{position:relative;z-index:5;background:var(--night);color:var(--ntext)}
.v-head{padding:150px 0 30px}
.v-head .eyebrow{color:var(--nmute)}
.v-head .h2{margin:18px 0 22px}
.v-head .lead{color:var(--nmute);max-width:620px}
.vwrap{position:relative;height:360vh}
.vstage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.vgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;width:100%}
.steps{position:relative;padding-left:26px}
.steps ol{list-style:none}
.steps::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--nline);border-radius:2px}
.steps .bar{position:absolute;left:0;top:6px;width:2px;height:0;background:var(--red);border-radius:2px}
.steps li{padding:18px 0;opacity:.28;transition:opacity .5s}
.steps li.on{opacity:1}
.steps li small{font-family:var(--mono);font-size:12px;color:var(--nmute);letter-spacing:.04em}
.steps li b{display:block;font-size:clamp(22px,2.3vw,30px);letter-spacing:-.04em;line-height:1.25;margin:6px 0 8px}
.steps li p{font-size:15px;color:var(--nmute);max-width:420px}
.dial{position:relative;width:min(520px,42vw,74svh);aspect-ratio:1;margin:0 auto}
.dial svg{width:100%;height:100%;overflow:visible}
.dial .tk{stroke:rgba(236,234,228,.28);stroke-width:1.4}
.dial .tk.l{stroke:rgba(236,234,228,.6);stroke-width:2}
.dial .lb{fill:rgba(236,234,228,.75);font-size:13px;font-weight:600;letter-spacing:.06em;font-family:var(--font)}
.dial .ds{fill:none;stroke:rgba(236,234,228,.22);stroke-width:2;stroke-dasharray:2 9}
.dial .mr{fill:none;stroke:var(--ntext);stroke-width:40}
.dial .ptr{fill:var(--red)}
.dial .cd{fill:var(--red)}
.dstate{position:absolute;left:0;right:0;bottom:-46px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--nmute)}
.dstate b{color:var(--ntext);font-weight:600}
.v-foot{padding:40px 0 150px}
.v-note{display:flex;gap:18px;align-items:flex-start;max-width:760px;padding:26px 28px;border-radius:24px;background:var(--night2);box-shadow:0 0 0 1px var(--nline)}
.v-note svg{width:22px;height:22px;flex:none;margin-top:3px;color:var(--red)}
.v-note p{font-size:15.5px;color:var(--nmute)}
.v-note p b{color:var(--ntext);font-weight:600}

/* ---------- 6. 회사 ---------- */
#company{position:relative;z-index:5;background:var(--paper);padding:150px 0 120px}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.co-mark{width:min(440px,100%);margin:26px 0 30px}
.co-mark svg{width:100%;height:auto}
.co-grid .lead{max-width:440px}
.co-list{border-top:1px solid var(--line)}
.co-list div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.co-list div[hidden]{display:none}
.co-list dt{color:var(--mute);font-size:14px;padding-top:1px}
.co-list dd a{border-bottom:1px solid rgba(17,19,22,.25);transition:border-color .2s}
.co-list dd a:hover{border-color:var(--ink)}
.co-list dd small{display:block;color:var(--mute);font-size:13px;margin-top:2px}

/* ---------- 바닥글 ---------- */
footer{position:relative;z-index:5;background:var(--paper2);padding:70px 0 40px;overflow:hidden}
.f-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.f-links{display:flex;gap:26px;font-size:14px;color:var(--ink2)}
.f-links a:hover{color:var(--ink)}
.f-biz{margin-top:34px;font-size:12.5px;color:var(--mute);line-height:1.9}
.f-biz span+span::before{content:"·";margin:0 8px;color:rgba(17,19,22,.25)}
.f-copy{margin-top:8px;font-size:12.5px;color:var(--mute)}
.f-big{margin:60px auto -2.2vw;width:calc(100% - 40px);max-width:1400px;opacity:.9}
.f-big svg{width:100%;height:auto}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .pr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  #products{margin-top:-30vh}
  .pwrap{height:auto}
  .pstage{position:relative;height:auto;overflow:visible}
  #pline{display:none}
  .pp{position:relative;inset:auto;grid-template-columns:1fr;gap:34px;padding:90px 24px 70px;pointer-events:auto}
  .pp+.pp{background:var(--puli-bg)}
  .pp.puli{border-radius:36px 36px 0 0}
  .pp-text{max-width:none}
  .pp-vis{height:auto;padding:10px 0}
  .phone-fit{width:258px;height:534px;margin:0 auto;transform:none}
  .phone{transform:scale(.86)!important;transform-origin:0 0}
  .vgrid{grid-template-columns:1fr;gap:10px}
  .vstage{align-items:flex-start;padding-top:86px}
  .dial{width:min(300px,64vw,38svh);order:-1}
  .steps{min-height:250px;margin-top:34px}
  .steps li{position:absolute;left:26px;right:0;top:0;padding:4px 0;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s var(--ease)}
  .steps li.on{opacity:1;transform:none}
  .steps::before,.steps .bar{display:none}
  .dstate{bottom:-34px}
  .co-grid{grid-template-columns:1fr;gap:40px}
  .shop-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  .navlinks a:not(.cta){display:none}
  .brand .word{height:13px}
  .hero-copy{left:22px;right:22px;bottom:clamp(34px,7vh,60px)}
  .hero-copy h1{font-size:clamp(36px,10.5vw,46px);margin:12px 0 14px}
  .hero-copy p{font-size:15px;max-width:330px}
  .cue{display:none}
  .pc{font-size:12.5px;border-radius:15px 15px 15px 4px}
  .pc.me{border-radius:15px 15px 4px 15px}
  .pc .tx{padding:8px 12px 9px}
  .doors{gap:12px;margin-top:34px}
  .door{width:calc((100vw - 48px - 24px)/3);gap:12px}
  .door .ring{border-width:8px}
  .door .dl em{display:none}
  .door .dl small{font-size:11px;line-height:1.35}
  .feat b{width:96px}
  .feat li{font-size:14px}
  #shop{padding:110px 0 90px}
  .scard{min-height:0;padding:30px 24px 28px;border-radius:26px}
  .scard .deco{width:170px;height:170px;right:-62px;top:-88px}
  .pr-grid{grid-template-columns:1fr}
  .v-head{padding:120px 0 10px}
  .co-list div{grid-template-columns:84px 1fr}
  #company{padding:110px 0 90px}
  .f-links{flex-wrap:wrap;gap:14px 22px}
}

/* ---------- 동작 줄이기 ---------- */
.rm #intro{height:auto}
.rm .stage{position:relative;height:100svh}
.rm .cue{display:none}
.rm #inner{position:relative;inset:auto;clip-path:none!important;-webkit-clip-path:none!important;min-height:100svh}
.rm .inner-body{position:relative;opacity:1;min-height:100svh}
.rm .door{opacity:1}
.rm .eye{display:none}
.rm #products{margin-top:0}
.rm .pwrap{height:auto}
.rm .pstage{position:relative;height:auto;overflow:visible}
.rm #pline{display:none}
.rm .pp{position:relative;inset:auto;pointer-events:auto;min-height:100svh}
.rm .pp+.pp{background:var(--puli-bg)}
.rm .bwrap{height:auto}
.rm .bstage{position:relative;height:auto;padding:140px 0 40px}
.rm .manifesto .w{color:var(--ink)}
.rm .vwrap{height:auto}
.rm .vstage{position:relative;height:auto;padding:40px 0}
.rm .steps li{opacity:1;position:relative;left:auto;transform:none}
.rm [data-rv]{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media print{
  header,#pline,.cue{display:none}
  #intro,.pwrap,.bwrap,.vwrap{height:auto}
  .stage,.pstage,.bstage,.vstage{position:relative;height:auto}
}

/* ---------- 정리(2026-10-07): 인라인 style 대신 클래스 · 404 ---------- */
.f-brand{color:var(--ink)}
.f-brand .word{opacity:1;transform:none}
.co-mark-tx{display:block;font-size:clamp(56px,7vw,92px);font-weight:700;letter-spacing:-.06em;line-height:1}
.co-list dd small a{border-bottom:1px solid rgba(17,19,22,.25)}
.nf{min-height:100svh;display:flex;align-items:center}
.nf .h2{margin:16px 0 18px}
.nf a{border-bottom:1px solid rgba(17,19,22,.3)}

/* ---------- 스크립트가 꺼진 브라우저: 움직임 없이 내용이 차례로 보이게 ---------- */
html:not(.js) .brand .word{opacity:1;transform:none;height:auto;font-size:15px;font-weight:700;line-height:1}
html:not(.js) #intro{height:auto}
html:not(.js) .stage{position:relative;height:auto;overflow:visible}
html:not(.js) .hero-copy{position:relative;left:auto;bottom:auto;max-width:1120px;margin:0 auto;padding:150px 32px 100px}
html:not(.js) .cue,html:not(.js) .wm-cap,html:not(.js) .eye,html:not(.js) .dial,html:not(.js) .steps .bar{display:none}
html:not(.js) #inner{position:relative;inset:auto;clip-path:none;-webkit-clip-path:none;min-height:100svh}
html:not(.js) .inner-body{position:relative;opacity:1;min-height:100svh}
html:not(.js) .door{opacity:1}
html:not(.js) #products{margin-top:0}
html:not(.js) .pwrap{height:auto}
html:not(.js) .pstage{position:relative;height:auto;overflow:visible}
html:not(.js) #pline{display:none}
html:not(.js) .pp{position:relative;inset:auto;pointer-events:auto;min-height:100svh}
html:not(.js) .pp+.pp{background:var(--puli-bg)}
html:not(.js) .bwrap{height:auto}
html:not(.js) .bstage{position:relative;height:auto;padding:140px 0 40px}
html:not(.js) .manifesto{color:var(--ink)}
html:not(.js) .vwrap{height:auto}
html:not(.js) .vstage{position:relative;height:auto;padding:40px 0}
html:not(.js) .vgrid{grid-template-columns:1fr}
html:not(.js) .steps li{opacity:1;position:relative;left:auto;transform:none}

.f-biz span{display:inline-block} /* 전화번호·사업자번호가 줄 중간에서 끊기지 않게 */