/* assets/css/style.css */
:root {
  /* Spacing */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-section-pc: 120px;
  --space-section-mo: 72px;

  /* Radius */
  --radius-1: 16px;
  --radius-2: 24px;
  --radius-pill: 999px;

  /* Typography */
  --font-h1: 64px;
  --font-h2: 44px;
  --font-h3: 28px;
  --font-body: 17px;
  --font-cap: 13px;

  /* Colors (Light Default) */
  --c-bg: #ffffff;
  --c-text: #111111;
  --c-muted: rgba(17, 17, 17, 0.72);
  --c-line: rgba(17, 17, 17, 0.1);
  --c-white: #ffffff;
  --c-black: #000000;

  /* Colors (Dark - Token definitions for usage) */
  --c-dark-bg: #0b0b0d;
  --c-dark-text: #f3f3f4;
  --c-dark-muted: rgba(243, 243, 244, 0.72);
  --c-dark-line: rgba(243, 243, 244, 0.1);

  /* Accents */
  --c-accent-1: rgba(125, 86, 255, 0.35); /* Soft Violet */
  --c-accent-2: rgba(255, 92, 168, 0.28); /* Soft Pink */
  --c-accent-3: rgba(58, 209, 255, 0.2); /* Soft Blue */

  /* Grid */
  --container-width: 1280px;
  --grid-gap: 24px; /* default gap */
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  overflow-x: hidden;
  word-break: keep-all; /* Korean text wrapping fix */
}
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
ul,
li {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* Utility */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}
@media (max-width: 768px) {
  .container {
    padding: 0 24px;
  }
}

/* Typography Classes */
h1,
.h1 {
  font-size: var(--font-h1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  word-break: keep-all;
}
h2,
.h2 {
  font-size: var(--font-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  word-break: keep-all;
}
h3,
.h3 {
  font-size: var(--font-h3);
  font-weight: 500;
  margin-bottom: var(--space-2);
  word-break: keep-all;
}
.lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--c-muted);
  max-width: 720px;
  margin-bottom: var(--space-5);
  word-break: keep-all;
}
.kicker {
  font-size: var(--font-cap);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--space-2);
  display: block;
}

@media (max-width: 768px) {
  :root {
    --font-h1: 40px;
    --font-h2: 30px;
    --font-h3: 22px;
  }
  .lead {
    font-size: 17px;
  }
}

/* Section */
.section {
  padding: var(--space-section-pc) 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .section {
    padding: var(--space-section-mo) 0;
  }
}

/* Dark Theme Section */
[data-theme="dark"] {
  background-color: var(--c-dark-bg);
  color: var(--c-dark-text);
}

/* Global Theme Override via Body Attribute (for scroll transitions) */
body[data-theme="dark"] {
  background-color: var(--c-dark-bg);
  color: var(--c-dark-text);
}
body[data-theme="dark"] .gnb {
    background: rgba(11, 11, 13, 0.8); /* Dark header */
    border-color: var(--c-dark-line);
}
body[data-theme="dark"] .gnb__link {
    color: var(--c-dark-muted);
}
body[data-theme="dark"] .gnb__link.active {
    color: var(--c-dark-text);
}
body[data-theme="dark"] .gnb__link.active::after{
    background: var(--c-dark-text);
}
body[data-theme="dark"] .gnb__logo {
    color: var(--c-text); /* Usually logo might flip color */
    color: var(--c-dark-text);
}

[data-theme="dark"] .lead {
  color: var(--c-dark-muted);
}
[data-theme="dark"] .kicker {
  color: var(--c-dark-muted);
  opacity: 0.8;
}
[data-theme="dark"] .btn--secondary {
  border-color: var(--c-dark-line);
  color: var(--c-dark-text);
}

/* GNB (Header) - Sticky Blur */
.gnb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px; /* Default height */
  z-index: 1000;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-line);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}
.gnb.scrolled {
  height: 56px;
  background: rgba(255, 255, 255, 0.9);
}
.gnb__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.gnb__logo {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.gnb__nav {
  display: flex;
  gap: 32px;
}
.gnb__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-muted);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
}
.gnb__link.active {
  color: var(--c-text);
  font-weight: 600;
}
.gnb__link.active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-text);
}
/* Mobile Nav Toggle */
.gnb__toggle {
  display: none;
  padding: 8px;
  color: var(--c-text);
  z-index: 1002;
}
@media (max-width: 1024px) {
  .gnb__nav { display: none; } 
  .gnb__toggle { display: block; }
}

/* Mobile Nav Overlay */
.gnb__mobile {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100vh;
  background: var(--c-bg);
  z-index: 1001; /* Below toggle but above gnb background if needed, actually toggle needs match */
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.gnb__mobile.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.gnb__mobile-inner {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
  overflow-y: auto;
}

.gnb__mobile-link {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-muted);
}
.gnb__mobile-link.active {
  color: var(--c-text);
  font-weight: 600;
}

/* Dark Theme Mobile Menu Adaptations */
body[data-theme="dark"] .gnb__mobile {
  background: var(--c-dark-bg);
}
body[data-theme="dark"] .gnb__toggle {
  color: var(--c-dark-text);
}
body[data-theme="dark"] .gnb__mobile-link {
  color: var(--c-dark-muted);
}
body[data-theme="dark"] .gnb__mobile-link.active {
  color: var(--c-dark-text);
}


/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 15px;
  transition:
    transform 0.2s,
    background 0.2s;
  white-space: nowrap; /* Prevent text wrapping */
  flex-shrink: 0;
}
.btn:active {
  transform: scale(0.98);
}
.btn--primary {
  background: var(--c-text);
  color: var(--c-bg);
}
.btn--secondary {
  border: 1px solid var(--c-line);
  color: var(--c-text);
}
[data-theme="dark"] .btn--primary {
  background: var(--c-dark-text);
  color: var(--c-dark-bg);
}
[data-theme="dark"] .btn--secondary {
  border-color: var(--c-dark-line);
  color: var(--c-dark-text);
}

/* Card */
.card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-2);
  padding: 32px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .card {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--c-dark-line);
}

/* Badge */
.badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
[data-theme="dark"] .badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-dark-text);
}

/* Premium Placeholder */
.media--ph {
  position: relative;
  background: #f0f0f0;
  border-radius: var(--radius-2);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9; /* Default */
  display: flex;
  align-items: center;
  justify-content: center;
}
.media--ph[data-ph="hero"] {
  aspect-ratio: 21/9;
  min-height: 500px;
}
.media--ph[data-ph="product"] {
  aspect-ratio: 1/1;
}

.ph-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f7 0%, #e2e2e5 100%);
  z-index: 1;
}
[data-theme="dark"] .ph-bg {
  background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
}

.ph-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0.5;
  top: -25%;
  left: -25%;
  z-index: 2;
  filter: blur(40px);
}
[data-theme="dark"] .ph-glow {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0) 60%
  );
}

.ph-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 24px;
  word-break: keep-all;
}
.ph-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  opacity: 0.6;
  margin-bottom: 8px;
}
.ph-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.ph-sub {
  font-size: 14px;
  color: var(--c-muted);
}

[data-theme="dark"] .ph-kicker {
  color: var(--c-dark-muted);
}
[data-theme="dark"] .ph-title {
  color: var(--c-dark-text);
}
[data-theme="dark"] .ph-sub {
  color: var(--c-dark-muted);
}

/* Grid Systems */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .grid-3,
  .grid-4,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Metric Wall */
.metric-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 40px 0;
  margin: 40px 0;
}
[data-theme="dark"] .metric-wall {
  border-color: var(--c-dark-line);
}
.metric-item strong {
  display: block;
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 8px;
}
.metric-item span {
  font-size: 14px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-theme="dark"] .metric-item span {
  color: var(--c-dark-muted);
}

/* Animation Utility Info - Clean Slide (No Blur) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Body Background Transition for Dark Mode Scroll Effect */
body {
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}


/* Stagger Delays for Grid Items (JS will apply these locally) */
/* Or manual usage */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* Scale Zoom Effect for Images/Media */
.zoom-in .ph-bg {
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(1.1);
}
.zoom-in.visible .ph-bg {
  transform: scale(1);
}

/* Stagger parent helper */
/* .stagger-group .reveal { } - Removed empty rule */

/* TEAM STYLES */
.avatar-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5)}
@media(max-width:1024px){.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.avatar-item{background:transparent;border:0;padding:0;text-align:center;cursor:pointer;width: 100%;}
.avatar{width:96px;height:96px;margin:0 auto var(--space-2);border-radius:999px;overflow:hidden;border:1px solid var(--c-line);box-shadow:0 10px 30px rgba(0,0,0,.06); display:block; position:relative;}
@media(max-width:560px){.avatar{width:76px;height:76px}}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-name{display:block;font-size:15px;font-weight:600; color: var(--c-text);}
.avatar-role{display:block;font-size:12px;color:var(--c-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.team-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5)}
@media(max-width:1024px){.team-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.team-card-grid{grid-template-columns:1fr}}
.team-card__click{width:100%;text-align:left;border:1px solid var(--c-line);border-radius:var(--radius-2);background:var(--c-bg);padding:0;overflow:hidden;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.team-card__click:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08);border-color:rgba(0,0,0,.16)}
.team-card__media{aspect-ratio:4/3;overflow:hidden;position:relative;}
.team-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.team-card__body{padding:var(--space-4)}
.team-card__foot{display:flex;align-items:center;gap:10px;padding:0 var(--space-4) var(--space-4);color:var(--c-muted);font-size:13px}
.icon-dot{width:10px;height:10px;border-radius:99px;border:1px solid var(--c-line);background:transparent}
.team-card__hint{margin-left:auto}

.modal{position:fixed;inset:0;display:none;z-index:9999}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(8px)}
.modal__panel{position:relative;width:min(720px,calc(100% - 32px));margin:8vh auto 0;border-radius:var(--radius-2);background:var(--c-bg);border:1px solid var(--c-line);box-shadow:0 30px 80px rgba(0,0,0,.25);padding:var(--space-5);opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease}
.modal.is-open .modal__panel{opacity:1;transform:translateY(0)}
.modal__close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;border:1px solid var(--c-line);background:transparent;cursor:pointer;font-size:22px; color:var(--c-text); display:flex; align-items:center; justify-content:center;}
.modal__head .kicker { color: var(--c-accent); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.modal__head h3 { font-size: 24px; font-weight: 700; margin-bottom: 4px; color: var(--c-text); }
.modal__head .muted { color: var(--c-muted); }
.modal__body .list { margin-top: 24px; padding-left: 20px; list-style-type: disc; color: var(--c-text); line-height: 1.6; }
.modal__foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line); text-align: right; }

@media (prefers-reduced-motion: reduce){
  .team-card__click,.modal__panel{transition:none}
  .team-card__click:hover{transform:none}
}

/* VISION PAGE STYLES (Apple-like) */
.v-section{padding:110px 0;background:#fff}
.v-section--alt{background:#f5f5f7}
@media(max-width:768px){.v-section{padding:64px 0}}
.v-wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}
.v-grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
@media(max-width:1024px){.v-grid-2{grid-template-columns:1fr;gap:28px}}
.v-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,0,0,.55);margin:0 0 10px}
.v-h1{font-size:58px;line-height:1.05;margin:0 0 14px;color:#111;word-break:keep-all;}
.v-h2{font-size:42px;line-height:1.1;margin:0 0 12px;color:#111;word-break:keep-all;}
.v-lead{font-size:19px;line-height:1.55;margin:0 0 18px;color:rgba(0,0,0,.78);word-break:keep-all;}
@media(max-width:768px){.v-h1{font-size:42px}.v-h2{font-size:32px}.v-lead{font-size:17px}}
.v-caption{font-size:12.5px;color:rgba(0,0,0,.55);margin-top:10px}
.v-divider{height:1px;background:rgba(0,0,0,.08);margin:28px 0}

.v-disclosures{margin-top:18px}
.v-disc{border-top:1px solid rgba(0,0,0,.08);padding:14px 0}
.v-disc:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.v-disc__sum{cursor:pointer;list-style:none;font-weight:600;color:#111}
.v-disc__sum::-webkit-details-marker{display:none}
.v-list{margin:12px 0 0;padding-left:18px;color:rgba(0,0,0,.75);line-height:1.7;font-size:15.5px}

.v-svg{background:transparent;border:1px solid rgba(0,0,0,.06);border-radius:24px;padding:18px}
.v-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 44px;margin-top:26px}
@media(max-width:768px){.v-metrics{grid-template-columns:1fr}}
.v-metric__value{display:flex;align-items:baseline;gap:8px}
.v-num{font-size:44px;line-height:1;color:#111;font-weight:650;letter-spacing:-.02em}
.v-sub{font-size:14px;color:rgba(0,0,0,.6)}
.v-metric__label{margin-top:8px;color:rgba(0,0,0,.62);font-size:13px}

.v-compare{margin:0;padding-left:18px;color:rgba(0,0,0,.72);line-height:1.75}
.v-chip{display:inline-block;border:1px solid rgba(0,0,0,.10);border-radius:999px;padding:6px 10px;font-size:12.5px;color:rgba(0,0,0,.70);background:#fff}
.v-caption-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px}
.v-pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.v-pill{display:inline-block;border:1px solid rgba(0,0,0,.10);border-radius:999px;padding:8px 12px;font-size:13px;background:#fff;color:#111}

.v-orbit{margin-top:10px;border:1px solid rgba(0,0,0,.06);border-radius:24px;background:#fff;padding:18px}

.v-timeline{margin-top:18px;border:1px solid rgba(0,0,0,.06);border-radius:24px;background:#fff;padding:18px}
.v-roadtext{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:18px}
@media(max-width:1024px){.v-roadtext{grid-template-columns:1fr}}
.v-roaditem{border-top:1px solid rgba(0,0,0,.08);padding-top:12px}
.v-roadyear{font-weight:650;color:#111}
.v-roadlines{margin-top:6px;color:rgba(0,0,0,.72);font-size:14.5px;line-height:1.6}

.v-cta{text-align:left}
.v-btnrow{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){
  .js-reveal{transform:none!important;opacity:1!important;transition:none!important}
}