/* OWNERS 랜딩 — 디자인 시스템 v1.1 (pc방커뮤니티-디자인/src/_shared.css) 토큰 그대로 */
@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:url(fonts/Pretendard-Regular.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:url(fonts/Pretendard-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-weight:800;font-display:swap;src:url(fonts/Pretendard-ExtraBold.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url(fonts/BarlowCondensed-800.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(fonts/JetBrainsMono-500.woff2) format('woff2')}

:root{
  --g-950:#0A0B0D; --g-900:#0F1114; --g-850:#15181C; --g-800:#1C2025; --g-750:#252A30;
  --g-700:#2E343B; --g-600:#444B54; --g-500:#5A616A; --g-400:#8C939D; --g-300:#A8AEB7; --g-100:#F1F2F4;
  --o-600:#D9520B; --o-500:#FF6A1A; --o-400:#FF8240;
  --bg-0:var(--g-950); --bg-1:var(--g-900); --bg-2:var(--g-850); --bg-3:var(--g-800); --bg-4:var(--g-750);
  --line-1:#21252B; --line-2:var(--g-700); --line-3:var(--g-600);
  --tx-1:var(--g-100); --tx-2:var(--g-300); --tx-3:var(--g-400); --tx-off:var(--g-500);
  --acc:var(--o-500); --acc-hi:var(--o-400); --acc-lo:var(--o-600); --acc-ink:var(--g-950);
  --acc-tint:rgba(255,106,26,.12); --acc-line:rgba(255,106,26,.5);
  --ok:#34D27F; --ok-tint:rgba(52,210,127,.12); --bad:#FF5C6C; --bad-tint:rgba(255,92,108,.12);
  --f-kr:'Pretendard',-apple-system,'Malgun Gothic',sans-serif;
  --f-disp:'Barlow Condensed','Pretendard',sans-serif;
  --f-mono:'JetBrains Mono','Pretendard',monospace;
  --r-1:2px; --r-2:4px; --cut:10px;
  --hi:inset 0 1px 0 rgba(255,255,255,.045);
  --dur:140ms; --ease:cubic-bezier(.2,.7,.2,1);
  --gut:clamp(16px,4vw,32px);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg-1);color:var(--tx-1);font-family:var(--f-kr);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::selection{background:var(--acc);color:var(--acc-ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--acc);color:var(--acc-ink);padding:8px 12px;font-weight:700}
.skip:focus{left:8px}

.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:15px;height:15px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gut)}

/* 시그니처 */
.lbl{font-family:var(--f-disp);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.lbl b{color:var(--acc);font-weight:700}
.num{font-family:var(--f-disp);font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:0}
.mark{width:22px;height:22px;background:var(--acc);clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);display:grid;place-items:center;flex:none}
.mark i{width:9px;height:9px;background:var(--bg-0);display:block;transform:translate(-2px,-2px)}
.wordmark{font-family:var(--f-disp);font-weight:800;font-size:19px;letter-spacing:.12em;line-height:1}
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--acc);pointer-events:none;z-index:2}
.brk::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.brk::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-1);border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--tx-1);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{border-color:var(--line-3);background:var(--bg-4)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:800;border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);padding-right:22px}
.btn.pri:hover{background:var(--acc-hi);border-color:var(--acc-hi)}
.btn.pri:active{background:var(--acc-lo)}
.btn.ghost{background:none;border-color:transparent;color:var(--tx-2)}
.btn.ghost:hover{background:var(--bg-3);color:var(--tx-1)}
.btn.sm{height:34px;padding:0 12px;font-size:14px}
.btn.pri.sm{padding-right:16px;--cut:8px}
.btn.lg{height:56px;padding:0 28px;font-size:17px}
.btn.pri.lg{padding-right:34px;--cut:12px}
.btn.icon{width:40px;padding:0}

.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;font-size:13px;font-weight:600;border-radius:var(--r-1);background:var(--bg-4);color:var(--tx-2);white-space:nowrap;line-height:1}
.chip.acc{background:var(--acc-tint);color:var(--acc)}
.chip .d{width:5px;height:5px;background:currentColor}
.panel{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-2);box-shadow:var(--hi)}

/* 헤더 */
.top{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.86);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line-1)}
.top::before{content:"";position:absolute;left:0;top:0;width:min(232px,40vw);height:2px;background:var(--acc)}
.top-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand-sub{font-size:12px;font-weight:600;color:var(--tx-3);letter-spacing:0;padding-left:10px;border-left:1px solid var(--line-2)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;font-size:15px;font-weight:600;color:var(--tx-2);border-radius:var(--r-1);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav a:hover{color:var(--tx-1);background:var(--bg-3)}
.menu-btn{display:none}

/* 히어로 */
.hero{position:relative;padding:72px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:640px;pointer-events:none;
  background:radial-gradient(900px 480px at 78% 0%,rgba(255,106,26,.09),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-1) 1px,transparent 1px),linear-gradient(90deg,var(--line-1) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(180deg,#000 0,transparent 520px);-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 520px)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.hero-lbl{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.live-dot{width:8px;height:8px;background:var(--ok);flex:none;animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,210,127,.55)}60%{box-shadow:0 0 0 6px rgba(52,210,127,0)}}
.hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:800;line-height:1.16;letter-spacing:-.045em}
.hero-sub{margin-top:20px;font-size:clamp(16px,1.5vw,18px);color:var(--tx-2);line-height:1.75;max-width:520px}
.hero-sub b,.feat p b,.step p b,.qa p b{color:var(--tx-1);font-weight:600}

.dl{margin-top:36px}
.dl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.dl-info{font-size:14px;color:var(--tx-3)}
.dl-note,.dl-mobile{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:14px;color:var(--tx-3);line-height:1.5}
.dl-note .ic,.dl-mobile .ic{margin-top:2px}
.dl-mobile{display:none;color:var(--tx-2)}
.dl.is-empty .dl-btn{pointer-events:none;background:var(--bg-4);border-color:var(--line-2);color:var(--tx-3)}
.dl.is-empty .chip{background:var(--bg-4);color:var(--tx-3)}

.hero-shot{border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-0);box-shadow:0 30px 80px rgba(0,0,0,.55),var(--hi)}
.hero-shot img{border-radius:var(--r-2);width:100%}

.stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);margin:72px 0 0;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-2);box-shadow:var(--hi)}
.stat{padding:24px 28px;border-left:1px solid var(--line-1)}
.stat:first-child{border-left:0}
.stat-n{display:flex;align-items:baseline;gap:6px}
.stat-n .num{font-size:clamp(34px,3.4vw,44px);line-height:1}
.stat:first-child .stat-n .num{color:var(--acc)}
.stat-n small{font-size:14px;color:var(--tx-3);font-weight:600}
.stat-l{margin-top:8px;font-size:14px;color:var(--tx-2)}

/* 섹션 공통 */
.sec{padding:112px 0}
.sec-alt{background:var(--bg-0);border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1)}
.sec h2,.cta h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.25;letter-spacing:-.04em;margin-top:14px}
.sec-sub{margin-top:14px;font-size:17px;color:var(--tx-2)}

/* 기능 */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.feat{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-2);box-shadow:var(--hi);padding:28px;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.feat:hover{border-color:var(--line-3);transform:translateY(-2px)}
.feat-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-1);background:var(--bg-3);border:1px solid var(--line-2);color:var(--tx-1)}
.feat-ic .ic{width:22px;height:22px}
.feat.brk .feat-ic{background:var(--acc-tint);border-color:var(--acc-line);color:var(--acc)}
.feat h3{margin-top:20px;font-size:19px;font-weight:800;letter-spacing:-.03em}
.feat p{margin-top:8px;font-size:15px;color:var(--tx-2);line-height:1.7}

/* 화면 */
.tabs{display:flex;gap:4px;margin-top:36px;border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;padding:12px 16px;font-size:15px;font-weight:600;color:var(--tx-3);cursor:pointer;white-space:nowrap;position:relative;flex:none}
.tab:hover{color:var(--tx-1)}
.tab.on{color:var(--tx-1)}
.tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--acc)}
.shot{margin-top:28px}
.shot-frame{border:1px solid var(--line-2);border-radius:var(--r-2);overflow:hidden;background:var(--bg-1);box-shadow:0 24px 64px rgba(0,0,0,.5)}
.shot-frame img{width:100%;transition:opacity 200ms var(--ease)}
.shot-frame img.fading{opacity:.2}
.shot figcaption{margin-top:16px;font-size:15px;color:var(--tx-2);display:flex;gap:10px}
.shot figcaption::before{content:"";width:12px;height:2px;background:var(--acc);margin-top:12px;flex:none}

/* 설치 */
.install{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.steps{list-style:none;margin-top:40px;counter-reset:s}
.step{display:flex;gap:24px;padding:24px 0;border-top:1px solid var(--line-1)}
.step:last-child{border-bottom:1px solid var(--line-1)}
.step-n{font-size:34px;line-height:1;color:var(--tx-off);min-width:44px}
.step:first-child .step-n{color:var(--acc)}
.step h3{font-size:19px;font-weight:800;letter-spacing:-.03em}
.step p{margin-top:6px;color:var(--tx-2);font-size:15px;line-height:1.7}
.req{padding:28px;position:sticky;top:96px}
.req-list{list-style:none;margin-top:16px}
.req-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-1);font-size:15px;font-weight:600}
.req-list .ic{color:var(--tx-3)}
.req-file{margin-top:24px}
.req-file.is-empty{display:none}
.req-name{margin-top:10px;font-weight:600;font-size:15px}
.req-hash{margin-top:8px;font-size:12px;color:var(--tx-3)}
.req-hash span{display:block;font-family:var(--f-disp);letter-spacing:.1em;font-weight:600}
.req-hash code{display:block;margin-top:4px;word-break:break-all;color:var(--tx-2);font-size:12px;line-height:1.5}
.req-note{margin-top:8px;font-size:14px;color:var(--tx-2)}
.req-note:empty{display:none}
.req-btn{width:100%;margin-top:24px}

/* FAQ */
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.support{display:flex;align-items:center;gap:14px;margin-top:32px;padding:16px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-2);
  transition:border-color var(--dur) var(--ease)}
.support:hover{border-color:var(--acc-line)}
.support-ic{width:40px;height:40px;display:grid;place-items:center;background:var(--acc-tint);color:var(--acc);border-radius:var(--r-1)}
.support small{display:block;font-size:13px;color:var(--tx-3)}
.support b{font-family:var(--f-disp);font-size:20px;letter-spacing:.04em}
.support-go{margin-left:auto;transform:rotate(-90deg);color:var(--tx-3)}
.faq{border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;font-size:17px;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--tx-1)}
.qa summary .ic{color:var(--tx-3);transition:transform var(--dur) var(--ease)}
.qa[open] summary .ic{transform:rotate(180deg);color:var(--acc)}
.qa p{padding:0 4px 22px;color:var(--tx-2);font-size:15px;line-height:1.75}

/* 마지막 CTA */
.cta{padding:96px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:56px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-2);
  box-shadow:var(--hi);position:relative;overflow:hidden}
.cta-in::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.cta h2{margin-top:0}
.cta p{margin-top:10px;color:var(--tx-2);font-size:17px}
.cta-act{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none}

.foot{border-top:1px solid var(--line-1);background:var(--bg-0);padding:28px 0}
.foot-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--tx-3)}
.foot-in a{color:var(--tx-2);text-decoration:underline;text-underline-offset:3px}
.foot-in a:hover{color:var(--acc)}
.foot .wordmark{font-size:16px;color:var(--tx-2)}
.foot .mark{width:18px;height:18px}
.foot-c{margin-left:auto}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
  .hero{padding-top:56px}
  .hero-in{grid-template-columns:1fr;gap:48px}
  .hero-copy{max-width:680px}
  .feats{grid-template-columns:repeat(2,1fr)}
  .install,.faq-in{grid-template-columns:1fr;gap:40px}
  .req{position:static}
}
@media (max-width:860px){
  .menu-btn{display:inline-flex;margin-left:4px}
  .top-dl{margin-left:auto}
  .brand-sub{display:none}
  .nav{position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:0;padding:8px var(--gut) 16px;background:var(--bg-0);
    border-bottom:1px solid var(--line-2);display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--line-1);border-radius:0;font-size:16px}
  .stats{grid-template-columns:repeat(2,1fr);margin-top:48px}
  .stat{padding:20px}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line-1)}
  .sec{padding:80px 0}
  .cta{padding:64px 0}
  .cta-in{flex-direction:column;align-items:flex-start;padding:36px 28px}
  .cta-act{align-items:flex-start}
}
@media (max-width:600px){
  .top-in{height:58px;gap:12px}
  .nav{top:58px}
  .wordmark{font-size:17px}
  .hero{padding-top:40px}
  .feats{grid-template-columns:1fr;margin-top:32px}
  .feat{padding:22px}
  .dl-btn{width:100%}
  .btn.lg{font-size:16px;padding:0 20px}
  .step{gap:16px}
  .step-n{font-size:28px;min-width:34px}
  .req{padding:22px}
  .qa summary{font-size:16px}
  .cta-act,.cta-act .btn{width:100%}
  .foot-in{flex-direction:column;align-items:flex-start;gap:10px}
  .foot-c{margin-left:0}
}
/* 휴대폰·태블릿(마우스 없는 기기)에서는 PC에서 받으라는 안내 */
@media (hover:none) and (pointer:coarse){
  .dl-mobile{display:flex}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}