/* 큐브로이드 Build 공식 브랜드 시안 */
:root {
  --bg: #f7f9fc; --panel: #fff; --line: #e0e8f2; --soft: #edf2f8;
  --accent: #1859bd; --accent-soft: #e8f1ff; --canvas: #eaf1fa;
  --shadow: 0 2px 8px rgba(23, 54, 97, .07); --studio: #e8f1fd; --hero-end: #edf4ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141923; --panel: #1b2433; --line: #334157; --soft: #253247;
    --accent: #7eb6ff; --accent-ink: #102344; --accent-soft: #243c61; --canvas: #263349;
    --studio: #273952; --hero-end: #202e46; --shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
}
.nav { background: var(--panel); }
.nav .logo { min-height: 44px; flex: 0 1 144px; min-width: 0; }
.brand-lockup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.brand-wordmark { display: block; width: 131px; max-width: 100%; }
.brand-wordmark img { display: block; width: 100%; height: auto; }
.brand-lockup small { margin: 0; font-size: 10px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.brand-symbol.big { width: 84px; height: auto; }
.appbox .brand-stacked { width: 104px; height: auto; }
.lang button { min-width: 44px; min-height: 44px; padding: 4px 8px; }
.lang button::after { content: none; }
.btn.primary { box-shadow: 0 2px 8px rgba(24, 89, 189, .18); }
.btn.yellow { box-shadow: none; }
.btn:focus-visible, .nav a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.seg button.on { color: var(--accent-ink); }

.build-home .hero {
  background: linear-gradient(110deg, var(--panel), var(--hero-end));
  border-bottom: 1px solid var(--line);
}
.build-home .hero .wrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(20px, 4vw, 48px);
  padding-block: 24px;
}
.build-home .hero h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; }
.build-home .hero h1 .hl {
  background: linear-gradient(transparent 76%, var(--yellow) 76%, var(--yellow) 94%, transparent 94%);
  padding: 0;
}
.build-home .eyebrow { font-size: 13px; }
.build-home .hero .ctas { gap: 8px; }
.build-home .hero .trust { margin-top: 14px; gap: 6px; }
.build-home .hero .trust .chip { font-size: 12px; }
.build-home .stage3d {
  height: clamp(260px, 28vw, 330px);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 40%, var(--panel), var(--studio));
  box-shadow: none;
}
.build-home section#models { padding-top: 24px; }
.build-home .filters { gap: 6px; }
.build-home .filters button { border-width: 1px; min-height: 44px; padding: 7px 13px; }
.build-home .filters button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.build-home a.model { border-radius: 16px; box-shadow: none; }
.build-home a.model:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.build-home a.model:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.build-home a.model .pic { border-bottom: 1px solid var(--line); }
.build-home a.model .kind { position: static; font-size: 11px; margin-bottom: 5px; }
.build-home a.model .b { min-width: 0; }
.build-home a.model h3 { line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width: 940px) {
  .nav .links { display: none; }
  .nav .logo { margin-inline-end: auto; }
}
@media (max-width: 760px) {
  .build-home .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 16px; }
  .build-home .hero p.lead { font-size: 15px; margin-bottom: 12px; }
  .build-home .stage3d { height: clamp(185px, 54vw, 320px); aspect-ratio: auto; }
  .build-home .hero .btn { padding: 8px 14px; min-height: 44px; font-size: 14px; }
}
@media (max-width: 600px) {
  .build-home a.model .pic { border-bottom: 0; border-inline-end: 1px solid var(--line); }
  .build-home a.model .b { padding-inline-start: 10px; }
  .build-home .sec-head { gap: 8px; }
  .build-home .sec-lead { font-size: 15px; }
  .build-home section#models { padding-top: 16px; }
}
@media (max-width: 480px) {
  .nav .wrap { gap: 8px; }
  .nav .brand-wordmark { width: 111px; }
  .nav .shop { width: 44px; min-height: 44px; padding: 0; }
  .brand-lockup small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .build-home a.model, .build-home a.model:hover { transition: none; transform: none; }
}
@media print {
  .pcover .plogo { display: block; height: 8mm; width: auto; margin-bottom: 3mm; }
}


/* 3D가 준비되기 전에도 사진과 무대 배경을 자연스럽게 연결한다. */
@media (prefers-color-scheme: light) {
  .build-home .stage3d > img { mix-blend-mode: multiply; }
}