/* Kit-scoped layout helpers — pulls in design system tokens */
/* =========================================================================
   Metacore Global Design System — Base Tokens
   Color, type, spacing, radius, shadow primitives + semantic roles.
   Font: Manrope (Google Fonts) as substitute for Meta's proprietary
   Optimistic VF. Swap @font-face below if you have the real face.
   ========================================================================= */

/* Paperlogy — display face for hero/section titles.
   Gmarket Sans Hangul paired with Montserrat Latin. OFL. */
@font-face { font-family: "Paperlogy"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/Paperlogy-600-055cc0c94ae8942783d745dbf20a4305.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/Paperlogy-700-266445877784cc1a0f374200ba5572d2.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/Paperlogy-800-d02bc25665e5ba187b915080d00ec5de.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/Paperlogy-800-d02bc25665e5ba187b915080d00ec5de.woff2") format("woff2"); }

/* NanumSquare — the system's single typeface (Korean + Latin).
   Ships four real weights: Light 300, Regular 400, Bold 700, ExtraBold 800.
   500 and 600 are mapped onto Bold so mid-weight headings stay properly set. */
@font-face { font-family: "NanumSquare"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/NanumSquare-300-6301c6097a03bf16ad8cc2990919b4b5.woff2") format("woff2"); }
@font-face { font-family: "NanumSquare"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/NanumSquare-400-444706d4b468557f1067b16eb2b4b0a3.woff2") format("woff2"); }
@font-face { font-family: "NanumSquare"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/NanumSquare-500-c1b7ae56212ce1d9e480181dc96d1641.woff2") format("woff2"); }
@font-face { font-family: "NanumSquare"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/NanumSquare-500-c1b7ae56212ce1d9e480181dc96d1641.woff2") format("woff2"); }
@font-face { font-family: "NanumSquare"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/NanumSquare-500-c1b7ae56212ce1d9e480181dc96d1641.woff2") format("woff2"); }
@font-face { font-family: "NanumSquare"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/NanumSquare-800-d9d05cdbf31cd9a6ef7ff087ecfde4b1.woff2") format("woff2"); }
@font-face { font-family: "NanumSquare"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/NanumSquare-800-d9d05cdbf31cd9a6ef7ff087ecfde4b1.woff2") format("woff2"); }

:root {
  /* ---------- BRAND / ACCENT ---------- */
  --primary:           #0064e0;  /* Cobalt — buy-now CTAs only */
  --primary-deep:      #0457cb;  /* Pressed + active links */
  --primary-soft:      #0091ff;  /* Translucent info tints */
  --on-primary:        #ffffff;
  --ink-button:        #000000;  /* Marketing primary CTA */
  --on-ink-button:     #ffffff;
  --fb-blue:           #1876f2;  /* Form-control activation */
  --meta-link:         #385898;  /* Legacy footer link */
  --oculus-purple:     #a121ce;  /* VR / category accent */

  /* ---------- SEMANTIC ---------- */
  --success:           #31a24c;
  --success-bg:        #24e400;
  --attention:         #f2a918;
  --warning:           #f7b928;
  --warning-bg:        #ffe200;
  --critical:          #e41e3f;
  --critical-strong:   #f0284a;

  /* ---------- SURFACE ---------- */
  --canvas:            #ffffff;
  --surface-soft:      #f1f4f7;
  --hairline:          #ced0d4;
  --hairline-soft:     #dee3e9;

  /* ---------- TEXT (DEEP → LIGHT) ---------- */
  --ink-deep:          #0a1317;
  --ink:               #1c1e21;
  --charcoal:          #444950;
  --slate:             #4b4c4f;
  --steel:             #5d6c7b;
  --stone:             #8595a4;
  --disabled-text:     #bcc0c4;

  /* ---------- TYPE ---------- */
  --font-display: "Paperlogy", "NanumSquare", "Apple SD Gothic Neo",
                  "Malgun Gothic", Helvetica, Arial, "Noto Sans KR",
                  system-ui, sans-serif;
  --font-body:    "NanumSquare", "Apple SD Gothic Neo", "Malgun Gothic",
                  Helvetica, Arial, "Noto Sans KR", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero:        64px;
  --fs-display:     48px;
  --fs-h1:          36px;
  --fs-h2:          28px;
  --fs-h3:          24px;
  --fs-subtitle:    18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;

  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-bold:     700; /* @kind font */

  --feat-ss: "ss01" on, "ss02" on; /* @kind font */

  /* ---------- SPACING (4px base) ---------- */
  --space-xxs:        4px;
  --space-xs:         8px;
  --space-sm:        10px;
  --space-md:        12px;
  --space-base:      16px;
  --space-lg:        20px;
  --space-xl:        24px;
  --space-xxl:       32px;
  --space-xxxl:      40px;
  --space-section-sm: 48px;
  --space-section:    64px;
  --space-section-lg: 80px;
  --space-hero:      120px;

  /* ---------- RADII ---------- */
  --radius-xs:        2px;
  --radius-sm:        4px;
  --radius-md:        6px;
  --radius-lg:        8px;
  --radius-xl:       16px;
  --radius-xxl:      24px;
  --radius-xxxl:     32px;
  --radius-feature:  40px;
  --radius-full:    100px;
  --radius-circle:  9999px;

  /* ---------- ELEVATION ---------- */
  --shadow-0: none;
  --shadow-1: rgba(0, 0, 0, 0.2) 1px 1px 0px 0px;
  --shadow-2: rgba(20, 22, 26, 0.3) 0px 1px 4px 0px;

  /* ---------- BORDERS ---------- */
  --border-hairline:      1px solid var(--hairline);
  --border-hairline-soft: 1px solid var(--hairline-soft);
  --border-ink:           2px solid var(--ink-deep);
  --border-ghost:         2px solid rgba(10, 19, 23, 0.12); /* @kind other */

  /* ---------- MOTION ---------- */
  --motion-fast:  150ms cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --motion-base:  200ms cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --motion-slow:  300ms cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
}

/* =========================================================================
   SEMANTIC TYPE ROLES — apply via class or element
   ========================================================================= */

html { font-family: var(--font-body); color: var(--ink-deep); background: var(--canvas); }
body { margin: 0; font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.16px; -webkit-font-smoothing: antialiased; }

.t-hero,
.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-display);
  font-feature-settings: var(--feat-ss);
  color: var(--ink-deep);
  margin: 0;
}

.t-hero    { font-size: var(--fs-hero);    font-weight: var(--fw-medium);  line-height: 1.16; letter-spacing: -0.02em; }
.t-display { font-size: var(--fs-display); font-weight: var(--fw-medium);  line-height: 1.17; letter-spacing: -0.02em; }
.t-h1      { font-size: var(--fs-h1);      font-weight: var(--fw-medium);  line-height: 1.28; letter-spacing: -0.01em; }
.t-h2      { font-size: var(--fs-h2);      font-weight: var(--fw-light);   line-height: 1.21; letter-spacing: -0.01em; }
.t-h3      { font-size: var(--fs-h3);      font-weight: var(--fw-medium);  line-height: 1.25; }

.t-subtitle      { font-size: var(--fs-subtitle); font-weight: var(--fw-bold);    line-height: 1.44; }
.t-subtitle-md   { font-size: var(--fs-subtitle); font-weight: var(--fw-regular); line-height: 1.44; }

.t-body          { font-size: var(--fs-body);    font-weight: var(--fw-regular); line-height: 1.5;  letter-spacing: -0.16px; }
.t-body-bold     { font-size: var(--fs-body);    font-weight: var(--fw-bold);    line-height: 1.5;  letter-spacing: -0.16px; }
.t-body-sm       { font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: 1.43; letter-spacing: -0.14px; }
.t-body-sm-bold  { font-size: var(--fs-body-sm); font-weight: var(--fw-bold);    line-height: 1.43; letter-spacing: -0.14px; }

.t-caption       { font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: 1.33; }
.t-caption-bold  { font-size: var(--fs-caption); font-weight: var(--fw-bold);    line-height: 1.33; }

.t-button        { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); line-height: 1.43; letter-spacing: -0.14px; }
.t-link          { font-size: var(--fs-body);    font-weight: var(--fw-bold); line-height: 1.5;  letter-spacing: -0.16px; color: var(--primary-deep); text-decoration: none; }

/* ---------- TEXT COLOR HELPERS ---------- */
.fg-ink-deep   { color: var(--ink-deep); }
.fg-ink        { color: var(--ink); }
.fg-charcoal   { color: var(--charcoal); }
.fg-slate      { color: var(--slate); }
.fg-steel      { color: var(--steel); }
.fg-stone      { color: var(--stone); }
.fg-disabled   { color: var(--disabled-text); }
.fg-primary    { color: var(--primary); }
.fg-canvas     { color: var(--canvas); }
.fg-critical   { color: var(--critical-strong); }
.fg-success    { color: var(--success); }

/* ---------- SURFACE HELPERS ---------- */
.bg-canvas     { background: var(--canvas); }
.bg-soft       { background: var(--surface-soft); }
.bg-ink-deep   { background: var(--ink-deep); color: var(--canvas); }
.bg-primary    { background: var(--primary); color: var(--on-primary); }


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink-deep); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* Korean line-break helper */
body, button, a, span, div, p, h1, h2, h3, h4, h5, h6 { word-break: keep-all; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.section   { padding: var(--space-section-lg) 0; }
.section-sm{ padding: var(--space-section) 0; }
.stack > * + * { margin-top: var(--space-base); }
.row { display: flex; align-items: center; gap: var(--space-base); }
.row.wrap { flex-wrap: wrap; }

/* photo placeholder common */
.photo-ph {
  background: linear-gradient(135deg, #d8e0ea 0%, #f1f4f7 60%, #e9eef3 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--steel); font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  position: relative; overflow: hidden;
}
.photo-ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.6), transparent 50%);
  pointer-events: none;
}
.photo-ph.dark {
  background: linear-gradient(135deg, #1c1e21 0%, #0a1317 60%, #0a1317 100%);
  color: rgba(255,255,255,0.5);
}
.photo-ph.warm {
  background: linear-gradient(135deg, #e9d8c5 0%, #f6efe5 60%, #e0d2bb 100%);
  color: #8a7860;
}
.photo-ph.mint {
  background: linear-gradient(135deg, #c9e6db 0%, #e7f4ee 60%, #b5dac9 100%);
  color: #4d8270;
}

.mcg-meta-row { display: flex; flex-wrap: wrap; column-gap: 26px; row-gap: 4px; }
.mcg-meta-row > span { white-space: nowrap; }

@keyframes mcgLivePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
@keyframes mcgShotDrift { 0%,100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.05) translateY(-1.2%); } }
@keyframes mcgScanY { 0% { top: -26%; } 100% { top: 100%; } }
@keyframes mcgRing {
  0%,10%   { left: 12%; top: 13%; opacity: 0; }
  16%,28%  { left: 12%; top: 13%; opacity: 1; }
  34%,46%  { left: 42%; top: 38%; opacity: 1; }
  52%,64%  { left: 72%; top: 20%; opacity: 1; }
  70%,84%  { left: 40%; top: 64%; opacity: 1; }
  90%,100% { left: 40%; top: 64%; opacity: 0; }
}
@keyframes mcgChip { 0%,40% { opacity: 0; transform: translateY(-6px); } 48%,80% { opacity: 1; transform: translateY(0); } 90%,100% { opacity: 0; transform: translateY(-6px); } }

.hero-title { font-size: 52px; }
.hero-sub   { font-size: 21px; }

@media (max-width: 1180px) { .hero-title { font-size: 48px; } .hero-sub { font-size: 21px; } }
@media (max-width: 1100px) { .hero-title { font-size: 44px; } .hero-sub { font-size: 21px; } }
@media (max-width: 1024px) { .hero-title { font-size: 40px; } .hero-sub { font-size: 20px; } }
@media (max-width: 960px)  { .hero-title { font-size: 36px; } .hero-sub { font-size: 18px; } }
@media (max-width: 880px)  { .hero-title { font-size: 32px; } .hero-sub { font-size: 16px; } }
@media (max-width: 768px)  { .hero-title { font-size: 28px; } .hero-sub { font-size: 15px; } }

@media (max-width: 880px) {
  .hero-visual { display: none !important; }
  .hero-copy { padding-right: 32px !important; }
}

/* ==========================================================================
   RESPONSIVE — desktop → tablet → mobile
   'body .x' beats page-level <style>; !important beats React inline styles.
   ========================================================================== */

/* ---- 1180 : small laptop ---- */
@media (max-width: 1180px) {
  .container { padding: 0 24px; }
  body .section-title { font-size: 42px; }
}

/* ---- 1080 : tablet landscape ---- */
@media (max-width: 1080px) {
  body .section-title { font-size: 36px; }
  body .section-sub   { font-size: 17px; }
  .services-grid { grid-template-columns: 1fr 1fr !important; }
  .ref-layout    { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ref-logos     { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-cols   { grid-template-columns: repeat(3, 1fr) !important; row-gap: 32px !important; }
  .sitemap-cols  { grid-template-columns: repeat(3, 1fr) !important; row-gap: 32px !important; }
  .about-intro   { grid-template-columns: 1fr !important; gap: 32px !important; }
  .page-hero     { height: 360px !important; }
  .page-hero-title { font-size: 48px !important; }
}

/* ---- 1000 : desktop nav no longer fits — hamburger takes over ---- */
@media (max-width: 1000px) {
  .hdr-nav { display: none !important; }
  .hdr-bar { justify-content: space-between; gap: 16px !important; }
}

/* ---- 880 : tablet portrait ---- */
@media (max-width: 880px) {
  .hero-controls { left: 32px !important; right: 32px !important; }
  [role=dialog] > div { max-height: 100vh; overflow-y: auto; }
  body .section-title { font-size: 32px; }
  body .section-head  { margin-bottom: 26px; }
  body .body-copy, body .biz-lead { font-size: 16.5px; line-height: 1.7; }
  .footer-cols  { grid-template-columns: repeat(2, 1fr) !important; }
  .sitemap-cols { grid-template-columns: repeat(2, 1fr) !important; }
  .ref-logos    { grid-template-columns: repeat(2, 1fr) !important; }
  .page-hero    { height: 300px !important; }
  .page-hero-title { font-size: 38px !important; letter-spacing: 0.02em !important; }
  .page-hero-inner { padding-top: 64px !important; }
  .sub-nav { grid-template-columns: 1fr 1fr !important; }
  .sub-nav > a { padding: 16px 10px !important; font-size: 15px !important; }
  .dir-row { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ---- 740 : large phone ---- */
@media (max-width: 740px) {
  .hero-controls { left: 20px !important; right: 20px !important; bottom: 20px !important; }
  .hero-controls > div:first-child { display: none !important; }
  .sitemap-body { padding: 24px 20px 48px !important; }
  .container { padding: 0 20px; }
  .hdr-bar { height: 64px !important; }
  .hdr-bar img { height: 28px !important; }
  body .section-title { font-size: 28px; }
  body .section-sub   { font-size: 16px; }
  body .section-label { font-size: 13px; }
  .services-grid { grid-template-columns: 1fr !important; }
  .hero-copy { padding-right: 20px !important; padding-left: 20px !important;
               padding-top: 52px !important; padding-bottom: 64px !important; }
  .page-hero { height: 250px !important; }
  .page-hero-title { font-size: 30px !important; }
  .floating-actions { right: 14px !important; bottom: 14px !important; gap: 8px !important; }
  .floating-actions > button:first-child { width: 54px !important; height: 54px !important; }
  .floating-actions > button:last-child  { width: 42px !important; height: 42px !important; }
  .mcg-meta-row { column-gap: 14px; }
  .mcg-meta-row > span { white-space: normal; }
}

/* ---- 560 : phone ---- */
@media (max-width: 560px) {
  body .section-title { font-size: 25px; }
  .footer-cols  { grid-template-columns: 1fr !important; row-gap: 26px !important; }
  .sitemap-cols { grid-template-columns: 1fr !important; }
  .ref-logos    { grid-template-columns: 1fr 1fr !important; }
  .page-hero    { height: 210px !important; }
  .page-hero-title { font-size: 26px !important; }
  .page-hero-inner { padding-top: 56px !important; }
}

/* ---- OWLens: 도입 기업 무한 슬라이드 ---- */
.mcg-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mcg-marquee-track { display: flex; width: max-content; animation: mcgMarquee 38s linear infinite; }
.mcg-marquee:hover .mcg-marquee-track { animation-play-state: paused; }
@keyframes mcgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mcg-marquee-track { animation: none; } .mcg-marquee { overflow-x: auto; } }