/* The K Collective — shared stylesheet
   Design system extracted from the Hi-Fi (Black / Gold) canvas boards,
   plus a fluid root container, a hamburger nav, and true responsive
   breakpoints (tablet 768px / mobile 480px) generalized from the
   Home-HiFi-Tablet / Home-HiFi-Mobile reference designs. */

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  word-break:keep-all;
  overflow-wrap:break-word;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  background:#0a0a09;
  overflow-x:hidden;
}
html[lang="ko"] body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

/* fluid page shell replacing the design-tool's fixed 1440px canvas */
.page-shell{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  background:#0a0a09;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

img{max-width:100%}

/* ---------------------------------------------------------------- */
/* Design-system classes (shared across every page)                  */
/* ---------------------------------------------------------------- */
.gold-text{
  background:linear-gradient(120deg,#a8842f 0%,#c2a041 30%,#d4b869 50%,#c2a041 70%,#a8842f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gold-line{background:linear-gradient(90deg,transparent,#b6963c,#d4b869,#b6963c,transparent)}
.stat-num{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums}
.serif{font-family:"Playfair Display",Georgia,serif}
html[lang="ko"] .serif{font-family:"Noto Sans KR","Pretendard","Apple SD Gothic Neo",sans-serif;font-weight:700 !important;letter-spacing:0}

.hero-fade{opacity:0;animation:heroFadeIn 1.1s ease-out 0.15s forwards}
.hero-fade-2{opacity:0;animation:heroFadeIn 1.1s ease-out 0.4s forwards}
.hero-fade-3{opacity:0;animation:heroFadeIn 1.1s ease-out 0.65s forwards}
.fact-fade{opacity:0;animation:heroFadeIn .9s ease-out forwards}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.gold-btn{transition:box-shadow .25s ease, transform .25s ease, background-position .6s ease}
.gold-btn:hover{box-shadow:0 0 24px rgba(212,175,55,.35);transform:translateY(-1px);background-position:100% 50% !important}
.gold-btn-outline{transition:border-color .2s ease, color .2s ease, background-color .2s ease, transform .25s ease}
.gold-btn-outline:hover{border-color:#d4af37 !important;color:#ffe9ad !important;background:rgba(212,175,55,.06) !important;transform:translateY(-1px)}
.card-hover{transition:border-color .25s ease, transform .25s ease}
.card-hover:hover{border-color:#4a4030 !important;transform:translateY(-2px)}
.video-play-btn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; background:rgba(10,10,9,0.55); border:2px solid rgba(212,175,55,0.85); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease; z-index:2; opacity:1;}
.video-play-btn:hover{transform:translate(-50%,-50%) scale(1.08); background:rgba(10,10,9,0.78); border-color:#d4af37;}
.video-play-btn.is-hidden{opacity:0; pointer-events:none;}
#mco-popup,#surf-expo,#ukc-reception{scroll-margin-top:170px;}
.nav-link{transition:color .2s ease;cursor:pointer;text-decoration:none}
.nav-link:hover{color:#f4e2a1 !important}
.footer-link{transition:color .2s ease;cursor:pointer;text-decoration:none}
.footer-link:hover{color:#d4af37 !important}
.lang-toggle{cursor:pointer;transition:color .2s ease, opacity .2s ease;text-decoration:none}
.lang-toggle:hover{opacity:.75}
.lang-inactive{color:#d8d4c8}
.lang-inactive:hover{color:#f4e2a1 !important}
.breadcrumb-link{transition:color .2s ease;cursor:pointer}
.breadcrumb-link:hover{color:#d4b869 !important}
.project-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#d8d4c8;background:#100f0c;border:1px solid #302c22;border-radius:999px;padding:10px 18px;text-decoration:none;cursor:pointer;transition:border-color .2s ease, color .2s ease, background-color .2s ease}
.project-pill:hover{border-color:#6b6448;color:#f4e2a1;background-color:#161410}
.project-pill .pill-status{color:#8a8578;font-weight:400}
.project-pill.active{border-color:#d4af37;color:#f4e2a1;background-color:#161410;box-shadow:0 0 0 1px #d4af37 inset}
.timeline-here{position:relative}
.learn-more-link{cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.arrow-icon{display:inline-flex;align-items:center;margin-left:6px;flex-shrink:0;transition:transform .25s ease}
.learn-more-link:hover .arrow-icon{transform:translateX(5px)}

.form-field{transition:border-color .2s ease, background-color .2s ease;cursor:text}
.form-field:hover,.form-field:focus{border-color:#6b6448 !important;background-color:#161410 !important;outline:none}
input.form-field::placeholder,textarea.form-field::placeholder{color:#6f6a5c}
select.form-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M0 0l5.5 7 5.5-7z' fill='%23918c7c'/></svg>");background-repeat:no-repeat;background-position:right 14px center;}

button{font-family:inherit}
a{color:inherit}

/* ---------------------------------------------------------------- */
/* Hamburger menu (hidden on desktop)                                */
/* ---------------------------------------------------------------- */
.hamburger-btn{
  display:none;
  width:26px;height:18px;
  padding:0;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:space-between;
  flex-shrink:0;
}
.hamburger-btn span{
  display:block;width:100%;height:2px;background:#d4af37;border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
body.nav-open .hamburger-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .hamburger-btn span:nth-child(2){opacity:0}
body.nav-open .hamburger-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ================================================================ */
/* Tablet breakpoint (<=768px)                                       */
/* ================================================================ */
@media (max-width: 768px){

  /* --- gutters --- */
  [style*="px 64px;"]{padding-left:28px !important;padding-right:28px !important;}
  [style*=" 0 64px;"]{padding-left:28px !important;padding-right:28px !important;}
  [style="padding: 64px;"]{padding:40px 28px !important;}

  /* --- nav / hamburger --- */
  .site-nav{height:72px !important;}
  .nav-links-row{display:none !important;}
  .site-nav > div:nth-child(3){display:none !important;}
  .hamburger-btn{display:flex !important;}

  /* --- grids: 4/3 cols -> 2 cols --- */
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"]{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* --- full-bleed hero / image sections: shrink height --- */
  [style*="height: 820px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:560px !important;}
  [style*="height: 560px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:520px !important;}
  [style*="height: 480px; overflow: hidden; background: #0a0a09; border-top: 1px solid #262420; border-bottom: 1px solid #262420;"]{height:420px !important;}
  [style*="height: 540px; padding: 56px 64px; display: flex; gap: 56px; align-items: center;"]{height:auto !important;padding-top:48px !important;padding-bottom:48px !important;}
  [style*="height: 400px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:300px !important;}
  [style*="height: 380px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:280px !important;}
  [style*="height: 420px; display: flex; background: #0a0a09; flex-shrink: 0;"]{height:auto !important;}

  /* --- 2-column split sections stack --- */
  [style*="display: flex; gap: 40px; align-items: center;"],
  [style*="display: flex; gap: 56px; align-items: center;"],
  [style*="display: flex; gap: 64px; align-items: center;"],
  [style*="display: flex; gap: 16px;"],
  [style*="display: flex; gap: 20px;"],
  [style*="display: flex; gap: 24px;"],
  [style*="display: flex; gap: 32px;"],
  [style*="display: flex; gap: 40px;"],
  [style*="display: flex; gap: 48px; margin-top: 20px; padding-top: 28px; border-top: 1px solid #262420;"],
  [style*="display: flex; gap: 56px;"],
  [style*="display: flex; gap: 72px;"],
  [style*="height: 420px; display: flex; background: #0a0a09; flex-shrink: 0;"]{
    flex-direction:column !important;
    gap:20px !important;
  }
  [style*="height: 420px; display: flex; background: #0a0a09; flex-shrink: 0;"] > div{width:100% !important;}

  /* --- stat / fact rows wrap 2x2 --- */
  [style*="justify-content: space-between; align-items:center; background: #100f0c;"],
  [style*="height: 180px; padding: 44px 64px; display: flex; justify-content: space-between;"]{
    flex-wrap:wrap !important;
    height:auto !important;
    row-gap:24px !important;
  }
  [style*="justify-content: space-between; align-items:center; background: #100f0c;"] > div,
  [style*="height: 180px; padding: 44px 64px; display: flex; justify-content: space-between;"] > div{
    flex: 1 1 45% !important;
    padding-bottom:16px !important;
  }

  /* --- news rows wrap --- */
  [style*="justify-content: space-between; align-items: baseline;"]{flex-wrap:wrap !important; row-gap:6px !important;}

  /* --- big headline scale-down --- */
  h1.serif{font-size:34px !important; line-height:1.25 !important;}
  h2.serif{font-size:24px !important;}
}

/* ================================================================ */
/* Mobile breakpoint (<=480px)                                       */
/* ================================================================ */
@media (max-width: 480px){

  [style*="px 64px;"]{padding-left:18px !important;padding-right:18px !important;}
  [style*=" 0 64px;"]{padding-left:18px !important;padding-right:18px !important;}
  [style="padding: 64px;"]{padding:32px 18px !important;}

  .site-nav{height:64px !important;}

  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
  [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"]{
    grid-template-columns: 1fr !important;
  }

  [style*="height: 820px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:460px !important;}
  [style*="height: 560px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:560px !important;}
  [style*="height: 400px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:240px !important;}
  [style*="height: 380px; position: relative; flex-shrink: 0; overflow: hidden;"]{height:220px !important;}
  [style*="height: 480px; overflow: hidden; background: #0a0a09; border-top: 1px solid #262420; border-bottom: 1px solid #262420;"]{height:400px !important;}

  [style*="justify-content: space-between; align-items:center; background: #100f0c;"] > div,
  [style*="height: 180px; padding: 44px 64px; display: flex; justify-content: space-between;"] > div{
    flex: 1 1 100% !important;
    border-right: none !important;
  }

  h1.serif{font-size:28px !important;}
  h2.serif{font-size:21px !important;}

  [class*="card-hover"][style*="height: 240px"],
  [class*="card-hover"][style*="height: 220px"],
  [class*="card-hover"][style*="height: 250px"]{height:auto !important; min-height:180px;}
}

/* ---------------------------------------------------------------- */
/* Mobile nav drawer (JS toggles body.nav-open)                       */
/* ---------------------------------------------------------------- */
@media (max-width: 768px){
  .site-nav{position:relative;}
  .nav-drawer{
    position:fixed; top:0; right:0; height:100vh; width:78vw; max-width:320px;
    background:#0a0a09; border-left:1px solid #262420; z-index:50;
    display:flex; flex-direction:column; gap:28px; padding:96px 32px 32px;
    transform:translateX(100%); transition:transform .3s ease;
  }
  body.nav-open .nav-drawer{transform:translateX(0);}
  .nav-drawer-backdrop{
    position:fixed; inset:0; background:rgba(8,8,7,0.6); z-index:40;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  body.nav-open .nav-drawer-backdrop{opacity:1; pointer-events:auto;}
  .nav-drawer a.nav-link{font-size:18px; color:#d8d4c8;}
  .nav-drawer .lang-row{display:flex; gap:16px; font-size:14px; padding-top:16px; border-top:1px solid #262420;}
}
@media (min-width: 769px){
  .nav-drawer, .nav-drawer-backdrop{display:none;}
}