/* Banpo Bytes — 개발사 소개 사이트 (Brand Book v2 토큰) */
:root{
  --ink:#17171A; --off:#F4F4F2; --surface:#FFFFFF; --dark-surface:#2B2B30;
  --ultramarine:#2743E3; --ultramarine-press:#1B2FA6; --blue-400:#5A73F0;
  --muted:#6E6E76; --muted-2:#8A8A92; --border:#E6E6E3; --border-2:#B8B8B6;
  --maxw:1160px; --pad:clamp(20px,4vw,32px); --hh:68px;
  --mono:'IBM Plex Mono','IBM Plex Sans KR',ui-monospace,monospace;
  --sans:'IBM Plex Sans KR',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--off);}
a{color:var(--ultramarine);text-decoration:none;}
::selection{background:var(--ultramarine);color:var(--off);}
:focus-visible{outline:2px solid var(--ultramarine);outline-offset:2px;}

.scroll{height:100vh;overflow-y:auto;scroll-snap-type:y proximity;scroll-behavior:smooth;background:var(--off);color:var(--ink);font-family:var(--sans);}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--pad));margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* B▪B 레터마크 */
.bb{display:inline-flex;align-items:center;gap:0.06em;font-family:var(--mono);font-weight:700;line-height:1;letter-spacing:-0.02em;}
.bb .px{display:inline-block;width:0.17em;height:0.17em;background:var(--ultramarine);}
.bb--onblue .px{background:var(--off);}

/* 등장 애니메이션 */
.js [data-reveal]{opacity:0;transform:translateY(28px);}
[data-reveal].reveal-in{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);opacity:1;transform:none;}

/* 버튼 */
.btn{font-weight:700;display:inline-block;}
.btn--sm{font-size:15px;padding:12px 22px;}
.btn--md{font-size:17px;padding:16px 30px;}
.btn--lg{font-size:18px;padding:18px 36px;}
.btn-primary{background:var(--ultramarine);color:var(--off);transition:background .25s;}
.btn-primary:hover{background:var(--ultramarine-press);color:var(--off);}
.btn-outline{border:2px solid var(--ink);color:var(--ink);transition:background .25s,color .25s;}
.btn-outline.btn--md{padding:14px 30px;}
.btn-outline:hover{background:var(--ink);color:var(--off);}
.btn-outline-light{border:2px solid var(--off);color:var(--off);transition:background .25s,color .25s;}
.btn-outline-light.btn--md{padding:14px 30px;}
.btn-outline-light:hover{background:var(--off);color:var(--ink);}

/* 헤더 — 히어로 위 투명 → 스크롤 시 솔리드 */
.site-header{position:sticky;top:0;z-index:20;background:transparent;border-bottom:2px solid transparent;transition:background .3s,border-color .3s;}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;padding-bottom:20px;}
.brand{display:flex;align-items:center;gap:14px;color:var(--off);}
.brand .bb{font-size:26px;}
.brand-name{font-size:16px;font-weight:700;}
.nav{display:flex;align-items:center;gap:clamp(16px,3vw,32px);}
.navlink{font-size:15px;font-weight:500;color:var(--off);transition:color .25s;}
.navlink:hover{color:var(--blue-400);}
.site-header.solid{background:rgba(244,244,242,0.86);backdrop-filter:blur(14px);border-bottom-color:var(--ink);}
.site-header.solid .brand{color:var(--ink);}
.site-header.solid .navlink{color:var(--ink);}
.site-header.solid .navlink:hover{color:var(--ultramarine);}

/* 히어로 — 풀블리드 배경 영상 */
.hero{position:relative;min-height:100vh;margin-top:calc(-1 * var(--hh));padding-top:var(--hh);display:flex;align-items:center;overflow:hidden;border-bottom:2px solid var(--ink);color:var(--off);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(23,23,26,0.85) 0%,rgba(23,23,26,0.62) 45%,rgba(23,23,26,0.30) 100%);}
.hero-inner{position:relative;z-index:2;padding-top:clamp(48px,8vw,80px);padding-bottom:clamp(48px,8vw,80px);}
.hero-copy{display:flex;flex-direction:column;gap:32px;max-width:640px;}
.kicker{margin:0;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:0.16em;color:var(--blue-400);}
.hero-title{margin:0;font-size:clamp(40px,5.2vw,72px);font-weight:700;line-height:1.14;letter-spacing:-0.025em;text-wrap:pretty;color:var(--off);}
.hero-title .dot{display:inline-block;width:0.14em;height:0.14em;background:var(--ultramarine);margin-left:0.12em;}
.hero-sub{margin:0;font-size:20px;line-height:1.7;color:rgba(244,244,242,0.82);max-width:540px;text-wrap:pretty;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px;}
.hero-est{position:absolute;left:var(--pad);bottom:22px;z-index:2;margin:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.18em;color:rgba(244,244,242,0.55);}

/* 섹션 공통 */
.section{scroll-snap-align:start;border-bottom:2px solid var(--ink);}
.section-inner{display:flex;flex-direction:column;}
.label{margin:0;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:0.14em;color:var(--muted);}

/* 01 우리 앱 + 02 브랜드 의미 */
.s-apps .section-inner{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);gap:48px;}
.app-list{display:flex;flex-direction:column;}
.app-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:22px 0;border-bottom:1px solid var(--border);transition:padding-left .25s;}
.app-row:hover{padding-left:8px;}
.app-left{display:flex;align-items:center;gap:20px;}
.app-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.app-icon--dark{background:var(--ink);}
.app-icon--blue{background:var(--ultramarine);}
.app-icon .bb{font-size:19px;color:var(--off);}
.app-meta{display:flex;flex-direction:column;gap:4px;}
.app-title{margin:0;font-size:19px;font-weight:700;}
.app-desc{margin:0;font-size:15px;color:var(--muted);}
.badge{font-family:var(--mono);font-size:13px;font-weight:700;padding:6px 12px;}
.badge--active{color:var(--ultramarine);border:1px solid var(--ultramarine);}
.badge--wip{color:var(--muted);border:1px solid var(--border-2);}
.meaning-h{margin:0;font-size:clamp(25px,5.5vw,44px);font-weight:700;line-height:1.45;max-width:920px;text-wrap:pretty;}
.meaning-h .em{color:var(--ultramarine);}
.meaning-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,4vw,48px);}
.meaning-item{padding-top:26px;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--ink);}
.meaning-item--blue{border-top-color:var(--ultramarine);}
.mi-title{margin:0;font-family:var(--mono);font-size:26px;font-weight:700;}
.mi-body{margin:0;font-size:18px;line-height:1.7;color:var(--ink);}

/* 다크 배너 */
.s-banner{scroll-snap-align:start;min-height:100vh;background:var(--ink);border-bottom:2px solid var(--ink);display:flex;align-items:center;}
.s-banner .section-inner{padding-top:clamp(48px,8vw,80px);padding-bottom:clamp(48px,8vw,80px);gap:32px;}
.s-banner .bb{font-size:clamp(48px,12vw,64px);color:var(--off);}
.banner-h{margin:0;font-family:var(--mono);font-size:clamp(38px,10vw,84px);font-weight:700;line-height:1.15;letter-spacing:-0.02em;color:var(--off);}
.banner-sub{margin:0;font-size:19px;font-weight:500;letter-spacing:0.16em;color:var(--muted-2);}

/* 03 일하는 방식 */
.s-values .section-inner{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px);gap:56px;}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(20px,3vw,32px);}
.work-card{background:var(--surface);border-top:3px solid var(--ink);border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px;display:flex;flex-direction:column;gap:14px;transition:transform .3s,box-shadow .3s;}
.work-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(23,23,26,0.10);}
.wc-num{margin:0;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ultramarine);}
.wc-title{margin:0;font-size:23px;font-weight:700;}
.wc-body{margin:0;font-size:16px;line-height:1.7;color:var(--muted);text-wrap:pretty;}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,32px);align-items:stretch;}
.team-photo{overflow:hidden;}
.team-photo img{width:100%;height:clamp(260px,55vw,420px);object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.team-photo:hover img{transform:scale(1.04);}
.team-box{background:var(--ultramarine);padding:44px;display:flex;flex-direction:column;justify-content:space-between;}
.tb-label{margin:0;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:0.14em;color:var(--off);}
.tb-quote{margin:0;font-size:25px;font-weight:700;line-height:1.55;color:var(--off);text-wrap:pretty;}

/* 04 성장 — 픽셀 오피스 (다크) */
.s-grow{background:var(--ink);border-bottom:2px solid var(--ink);color:var(--off);}
.s-grow .section-inner{padding-top:clamp(56px,8vw,100px);padding-bottom:clamp(56px,8vw,100px);gap:20px;align-items:center;text-align:center;}
.s-grow .label{color:var(--muted-2);}
.grow-h{margin:0;font-size:clamp(28px,6vw,52px);font-weight:700;line-height:1.22;letter-spacing:-0.02em;color:var(--off);text-wrap:pretty;}
.grow-sub{margin:0;font-size:clamp(16px,2.4vw,19px);line-height:1.7;color:rgba(244,244,242,0.72);max-width:520px;text-wrap:pretty;}
.office-scene{width:100%;max-width:680px;margin:clamp(20px,4vw,36px) auto 0;}
#office-canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;}
.grow-status{margin:8px 0 0;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:0.06em;color:var(--muted-2);}
.grow-status strong{color:var(--blue-400);font-weight:700;}

/* 05 연락 */
.s-contact{scroll-snap-align:start;min-height:70vh;display:flex;align-items:center;}
.s-contact .section-inner{padding-top:clamp(56px,8vw,100px);padding-bottom:clamp(56px,8vw,100px);gap:36px;}
.contact-h{margin:0;font-size:clamp(29px,6.5vw,54px);font-weight:700;line-height:1.3;text-wrap:pretty;}

/* 푸터 */
.site-footer{border-top:2px solid var(--ink);}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:28px;padding-bottom:28px;}
.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-brand .bb{font-size:20px;color:var(--ink);}
.fb-name{font-size:14px;font-weight:700;}
.copyright{margin:0;font-family:var(--mono);font-size:13px;color:var(--muted);}

@media (max-width:560px){ .nav .navlink{display:none;} }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;}
  *{scroll-behavior:auto !important;}
  .hero-video{display:none;}
  .hero{background:var(--ink) url('/images/hero-poster.jpg') center/cover;}
}