:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --shadow: 0 18px 50px rgba(0,0,0,.28);

  --light:#f6f7fb;
  --lightCard:#ffffff;
  --lightText:#0b1020;
  --lightMuted:rgba(11,16,32,.68);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Pretendard", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.6;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* =========================
   NAV (all pages)
========================= */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 50;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--text);
  text-decoration:none;
  font-weight:900;
  letter-spacing: .08em;
  font-size: 13px;
}
.logo{
  height: 18px;
  width: auto;
  object-fit: contain;
  opacity: .95;
}
.brand-text{
  font-size: 12px;
  letter-spacing: .12em;
}

/* menu */
.menu{ display:flex; gap:22px; }
.menu a{
  color: var(--muted);
  text-decoration:none;
  font-size: 13px;
  white-space: nowrap;
  min-width: 64px;
  text-align:center;
  position: relative;
}
.menu a:hover{ color: var(--text); }
.menu a.is-active{ color: var(--text); }

.hamburger{
  display:none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.20);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
}

.mobile-menu{
  display:none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px 14px;
}
.mobile-menu a{
  display:block;
  padding: 10px 0;
  color: var(--text);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* hover: EN -> KO */
/* ===== NAV hover Korean text color fix ===== */
/* ===== NAV hover Korean text navy color ===== */
.menu a::after,
.mobile-menu a::after{
  content: attr(data-ko);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;

  /* 🔥 한울플래닝 호버 네이비 컬러 */
  color: #0b1020 !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;

  transition: opacity .32s ease, transform .32s ease;
}

.menu a:hover,
.mobile-menu a:hover{
  color: transparent !important;
}

.menu a:hover::after,
.mobile-menu a:hover::after{
  opacity: 1;
  transform: translate(-50%, 0);
}
.menu a:hover,
.mobile-menu a:hover{
  color: transparent;
}
.menu a:hover::after,
.mobile-menu a:hover::after{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================
   Buttons (shared)
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
}
.btn.primary{
  background: rgba(255,255,255,.94);
  color: #0b1020;
  border-color: rgba(255,255,255,.25);
}
.btn.ghost{ background: rgba(255,255,255,.06); }
.btn.full{ width:100%; cursor:pointer; }

/* =========================
   Index hub (light-ui)
========================= */
body.light-ui{
  background: var(--light);
  color: var(--lightText);
}
body.light-ui .nav{
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
body.light-ui .brand{ color: var(--lightText); }
body.light-ui .menu a{ color: rgba(11,16,32,.70); }
body.light-ui .menu a::after{ color: var(--lightText); }
body.light-ui .hamburger{
  color: var(--lightText);
  border-color: rgba(0,0,0,.12);
}
body.light-ui .mobile-menu a{
  color: var(--lightText);
  border-bottom-color: rgba(0,0,0,.08);
}
body.light-ui .footer{
  border-top: 1px solid rgba(0,0,0,.06);
  color: rgba(11,16,32,.62);
}

/* index hub layout */
.landing{ padding-top: 92px; padding-bottom: 46px; }
.hero2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}
.hero2-left{
  background: var(--lightCard);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}
.hero2-left .tag{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 900;
  color: rgba(11,16,32,.55);
}
.hero2-left h1{
  margin-top: 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.hero2-left p{
  margin-top: 12px;
  color: rgba(11,16,32,.70);
  line-height: 1.8;
}
.hero2-cta{ display:flex; gap:10px; margin-top: 18px; }

.btn2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
}
.btn2.primary{ background: #0b1020; color:#fff; border-color:#0b1020; }
.btn2.ghost{ background: rgba(11,16,32,.04); color:#0b1020; }
.btn2.primary:hover{ opacity:.92; }
.btn2.ghost:hover{ background: rgba(11,16,32,.07); }

.hero2-stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.stat{
  background: rgba(11,16,32,.04);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px;
}
.stat .n{ font-weight: 950; font-size: 18px; }
.stat .k{ margin-top: 4px; color: rgba(11,16,32,.65); font-weight: 800; font-size: 12px; letter-spacing:.06em; }

.hero2-right{
  display:grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
.hero2-card{
  background: var(--lightCard);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 18px;
}
.hc-title{ font-weight: 950; margin-bottom: 10px; color: var(--lightText); }
.hc-link{
  display:block;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--lightText);
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(11,16,32,.02);
  margin-top: 8px;
  font-weight: 850;
}
.hc-link:hover{ background: rgba(11,16,32,.05); }

.hero2-media{
  background:#000;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.hero2-media video{
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .92;
}

/* =========================
   Page hero (subpages)
========================= */
.page-hero{
  padding-top: 110px;
  padding-bottom: 54px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.page-title{
  margin: 10px 0 8px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.page-sub{
  margin: 0;
  color: rgba(255,255,255,.70);
  line-height: 1.8;
  max-width: 780px;
}
.kicker{
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.70);
}

/* sections */
.section{ padding: 72px 0; }
.section.alt{ background: rgba(255,255,255,.02); }
.section.light{ background: #f3f5f7; color: #0b1020; }
.section-head h2{ margin:0 0 8px; font-size: 30px; }
.section-head p{ margin:0; color: rgba(255,255,255,.72); line-height:1.8; }

/* overview/history (from your previous design) */
.section-top{ margin-bottom: 26px; }
.eyebrow{
  font-size: 12px;
  letter-spacing: .26em;
  font-weight: 900;
  color: rgba(11,16,32,.52);
}
.section-title{
  margin: 10px 0 10px;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.02em;
  font-weight: 900;
}
.section-lead{
  max-width: 920px;
  line-height: 1.85;
  color: rgba(11,16,32,.78);
}

.overview-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.overview-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.overview-card .badge{
  min-width: 56px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 11px;
  color: rgba(11,16,32,.85);
  background: rgba(11,16,32,.06);
  border: 1px solid rgba(11,16,32,.10);
}
.overview-card .meta .k{
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 900;
  color: rgba(11,16,32,.58);
}
.overview-card .meta .v{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 850;
  color: rgba(11,16,32,.92);
  line-height: 1.5;
}

/* timeline */
.timeline{ margin-top: 18px; position: relative; padding: 10px 0; }
.timeline::before{
  content:"";
  position:absolute;
  left: 96px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,.16);
}
.t-item{
  display: grid;
  grid-template-columns: 90px 48px 1fr;
  gap: 10px 18px;
  align-items: center;
  padding: 16px 0;
  position: relative;
}
.t-year{ font-weight: 900; color: rgba(11,16,32,.92); }
.t-dot{
  width: 14px; height: 14px;
  border-radius: 999px;
  background: #0b1020;
  border: 3px solid #ffffff;
  margin-left: 34px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.t-desc{
  background: rgba(0,0,0,0.04);
  padding: 14px 18px;
  border-radius: 12px;
  line-height: 1.7;
  color: rgba(11,16,32,.86);
}

/* services cards */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.tile{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.tile-body{ padding: 22px; }
.tile-body h3{ margin: 0 0 8px; font-weight: 900; }
.tile-body p{ margin:0; color: rgba(255,255,255,.72); line-height:1.7; }
.tile-ico{
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.tile-ico svg{ width: 24px; height: 24px; }

/* products */
.products{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.p-item{
  text-align:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
}
.p-item img{ width: 100%; max-width: 220px; height:auto; }
.p-name{ margin-top: 10px; color: rgba(255,255,255,.82); font-weight:800; }

/* contact */
.contact-grid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
}
.faq h3{ margin: 0 0 12px; }
details{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px 0;
}
details:first-of-type{ border-top: none; }
summary{ cursor:pointer; font-weight:800; color: rgba(255,255,255,.92); }
details p{ margin: 10px 0 0; color: rgba(255,255,255,.72); line-height:1.7; }

.form label{ display:block; font-weight:800; font-size: 13px; margin-bottom: 10px; }
.form input, .form select, .form textarea{
  width:100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
.form textarea{ resize: vertical; }
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-hint{ margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.65); }

.foot{ margin-top: 26px; color: rgba(255,255,255,.72); line-height: 1.8; }

/* footer */
.footer{
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
}

/* reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: .7s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }
.delay-1{ transition-delay: .08s; }
.delay-2{ transition-delay: .16s; }
.delay-3{ transition-delay: .24s; }

/* =========================
   Simpleplanet-like map page
   (directions.html uses body.sp-map)
========================= */
body.sp-map .sp-layout{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  align-items: start;
}
body.sp-map .sp-side{ display:grid; gap: 14px; }

body.sp-map .sp-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
body.sp-map .sp-card-head{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.sp-map .sp-eyebrow{
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 900;
  color: rgba(255,255,255,.62);
}
body.sp-map .sp-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
body.sp-map .sp-chip{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

body.sp-map .sp-map-wrap{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
body.sp-map .sp-map-iframe{
  width: 100%;
  height: 220px;
  border: 0;
  display:block;
}
body.sp-map .sp-map-iframe.sm{ height: 180px; }

body.sp-map .sp-map-btn{
  position:absolute;
  right: 10px;
  top: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(10,16,32,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
body.sp-map .sp-map-btn:hover{
  background: rgba(10,16,32,.72);
  border-color: rgba(255,255,255,.26);
}

body.sp-map .sp-kv{ margin-top: 12px; }
body.sp-map .sp-row{
  display:grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.sp-map .sp-row:first-child{ border-top: none; }
body.sp-map .sp-k{ color: rgba(255,255,255,.62); font-weight: 800; font-size: 13px; }
body.sp-map .sp-v{ color: rgba(255,255,255,.88); line-height: 1.6; }
body.sp-map .sp-v a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.24);
}
body.sp-map .sp-v a:hover{ border-bottom-color: rgba(255,255,255,.55); }

body.sp-map .sp-subhead{ margin-top: 14px; font-weight: 900; }
body.sp-map .sp-divider{ height: 1px; background: rgba(255,255,255,.08); margin: 14px 0; }

body.sp-map .sp-thumbs{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
body.sp-map .sp-thumb{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}
body.sp-map .sp-thumb img{
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display:block;
  filter: saturate(95%) contrast(105%) brightness(92%);
}
body.sp-map .sp-thumb span{
  display:block;
  padding: 10px 10px 11px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.86);
  border-top: 1px solid rgba(255,255,255,.08);
}
body.sp-map .sp-thumb.is-active{
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
}

body.sp-map .sp-view{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
  min-height: 620px;
}
body.sp-map .sp-view-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
body.sp-map .sp-view-title{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
body.sp-map .sp-view-sub{ font-weight: 900; color: rgba(255,255,255,.88); }

body.sp-map .sp-viewer{
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.20);
  padding: 0;
  cursor: zoom-in;
}
body.sp-map .sp-viewer img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
}

body.sp-map .sp-lb{
  width: min(1000px, calc(100% - 24px));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(10,16,32,.96);
  padding: 0;
  overflow: hidden;
}
body.sp-map .sp-lb::backdrop{
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(3px);
}
body.sp-map .sp-lb-x{
  position:absolute;
  right: 12px; top: 10px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,16,32,.55);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  cursor:pointer;
  z-index: 2;
}
body.sp-map .sp-lb-fig{ margin:0; }
body.sp-map #spLbImg{
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display:block;
  background:#000;
}
body.sp-map #spLbCap{
  padding: 12px 16px 14px;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* responsive */
@media (max-width: 980px){
  .menu{ display:none; }
  .hamburger{ display:block; }
  .grid-3{ grid-template-columns: 1fr; }
  .products{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  body.sp-map .sp-layout{ grid-template-columns: 1fr; }
  body.sp-map .sp-view{ min-height: auto; }
}
@media (max-width: 860px){
  .overview-grid{ grid-template-columns: 1fr; }
  .timeline::before{ left: 118px; }
  .t-item{ grid-template-columns: 100px 48px 1fr; }
  .t-dot{ margin-left: 38px; }
}
/* index video make it subtle */
.hero2-media{ position: relative; }
.hero2-media video{
  filter: grayscale(20%) contrast(108%) brightness(78%);
  transform: scale(1.02);
}
.media-overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(11,16,32,.55), rgba(11,16,32,.10));
}
.media-overlay2{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.10), rgba(0,0,0,.55));
}
.cap{ margin-top: 18px; }
.cap-title{
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(11,16,32,.88);
  margin-bottom: 10px;
}
.cap-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.cap-item{
  background: rgba(11,16,32,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px;
}
.cap-k{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 950;
  color: rgba(11,16,32,.55);
}
.cap-v{
  margin-top: 6px;
  font-weight: 900;
  color: rgba(11,16,32,.85);
}
@media (max-width: 520px){
  .cap-grid{ grid-template-columns: 1fr; }
}
.brand-ko{ position: relative; }
.brand-ko-text{
  margin-left: 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(11,16,32,.78);
  opacity: 0;
  transform: translateY(1px);
  transition: .18s ease;
}
body.light-ui .brand-ko:hover .brand-ko-text{
  opacity: 1;
  transform: translateY(0);
}
/* ===== HOME HERO (classic cinematic) ===== */
.hero{
  height: 100vh;
  position: relative;
  padding-top: 64px;
  overflow:hidden;
  background: #000;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0.38; /* 노골적 방지 */
  filter: grayscale(12%) contrast(110%) brightness(78%);
  transform: scale(1.03);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at top, rgba(0,0,0,.35), rgba(0,0,0,.78));
}
.hero-content{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 110px 18px 0;
}
.kicker{
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.70);
}
.title{
  margin: 14px 0 12px;
  font-size: clamp(34px, 5.0vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.title-strong{
  display:block;
  font-size: 1.06em;
}
.sub{
  max-width: 760px;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255,255,255,.78);
}
.cta{ display:flex; gap:12px; margin-top: 22px; flex-wrap: wrap; }
.scroll-hint{
  position:absolute;
  left:0; right:0;
  bottom: 22px;
  text-align:center;
  font-size: 11px;
  letter-spacing:.28em;
  color: rgba(255,255,255,.64);
}
.hero-metrics{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}
.hero-metrics .m{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 14px;
}
.hero-metrics .m-n{
  font-weight: 950;
  font-size: 18px;
}
.hero-metrics .m-k{
  margin-top: 4px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  color: rgba(255,255,255,.70);
}
@media (max-width: 860px){
  .hero-metrics{ grid-template-columns: 1fr; }
}
/* 메뉴 hover 안정판: span.en 숨기고 data-ko 표시 */
.menu a, .mobile-menu a{ position: relative; white-space: nowrap; }
.menu a .en, .mobile-menu a .en{ display:inline-block; }

.menu a::after,
.mobile-menu a::after{
  content: attr(data-ko);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 2px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
  pointer-events: none;
}

.menu a:hover .en,
.mobile-menu a:hover .en{
  opacity: 0;
}

.menu a:hover::after,
.mobile-menu a:hover::after{
  opacity: 1;
  transform: translate(-50%, 0);
}
/* 로고 텍스트: hover 시 영문 -> 한글 교체 */
.brand{ position: relative; }
.brand-text-ko{
  position:absolute;
  left: calc(18px + 10px + 8px); /* logo(height만큼 대략) + gap */
  opacity: 0;
  transform: translateY(1px);
  transition: .18s ease;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* 영문 숨기고 한글 보이기 */
.brand:hover .brand-text{ opacity: 0; }
.brand:hover .brand-text-ko{ opacity: 1; transform: translateY(0); }
/* HERO 가독성 업그레이드 */
.hero-overlay{
  /* 기존보다 살짝 더 진하고 고급스럽게 */
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0,0,0,.25), rgba(0,0,0,.78)),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.55) 100%);
}

.hero-content{
  /* 텍스트 영역이 배경에 덜 흔들리게 */
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.kicker{
  color: rgba(255,255,255,.82);
}

.title{
  color: rgba(255,255,255,.98);
  /* 큰 제목 가독성/고급감 */
  text-shadow: 0 6px 26px rgba(0,0,0,.55);
}

.sub{
  color: rgba(255,255,255,.86);
  text-shadow: 0 3px 18px rgba(0,0,0,.40);
  max-width: 720px;
}

/* 버튼도 텍스트가 선명하게 */
.cta .btn{
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
/* 메뉴 hover: 사라락(느리게) */
.menu a::after,
.mobile-menu a::after{
  transition: opacity .32s ease, transform .32s ease; /* 기존 0.18 -> 0.32 */
  transform: translate(-50%, 6px);  /* 시작 위치를 더 아래로 */
}

.menu a:hover::after,
.mobile-menu a:hover::after{
  transform: translate(-50%, 0);
}

/* 영문은 서서히 사라지게 */
.menu a .en,
.mobile-menu a .en{
  transition: opacity .32s ease, transform .32s ease;
  transform: translateY(0);
}

.menu a:hover .en,
.mobile-menu a:hover .en{
  opacity: 0;
  transform: translateY(-2px);
}

/* 로고 텍스트도 사라락 */
.brand-text,
.brand-text-ko{
  transition: opacity .32s ease, transform .32s ease;
}

.brand-text-ko{
  transform: translateY(6px); /* 처음 살짝 아래 */
}

.brand:hover .brand-text{
  opacity: 0;
  transform: translateY(-2px);
}

.brand:hover .brand-text-ko{
  opacity: 1;
  transform: translateY(0);
}
/* 텍스트 패널(아주 은은) */
.hero-content{
  padding-bottom: 24px;
}
.hero-content::before{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  top: 92px;
  bottom: -18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  filter: blur(0px);
  z-index: -1;
}
/* ===== Directions clean page ===== */
body.dir-clean .page-title{ letter-spacing: -0.02em; }
body.dir-clean .page-sub{ color: rgba(255,255,255,.78); }

.dir-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dir-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.dir-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dir-eyebrow{
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 900;
  color: rgba(255,255,255,.62);
}

.dir-title{
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.dir-maplink, .factory-link{
  font-size: 12px;
  font-weight: 900;
  text-decoration:none;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
.dir-maplink:hover, .factory-link:hover{ background: rgba(0,0,0,.42); }

.dir-map{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.dir-map iframe{
  width:100%;
  height: 260px;
  border:0;
  display:block;
}

.dir-info{ margin-top: 12px; }
.dir-info.compact{ margin-top: 10px; }

.dir-row{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.dir-row:first-child{ border-top: none; }

.dir-row .k{
  color: rgba(255,255,255,.62);
  font-weight: 900;
  font-size: 13px;
}
.dir-row .v{
  color: rgba(255,255,255,.90);
  line-height: 1.6;
}
.dir-row .v a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.24);
}
.dir-row .v a:hover{ border-bottom-color: rgba(255,255,255,.55); }

.dir-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0;
}

/* factories */
.factory-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.factory-tag{
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 950;
  color: rgba(255,255,255,.62);
}
.factory-name{
  margin-top: 6px;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.factory-photos{
  display:grid;
  gap: 10px;
}
.factory-photos.one{ grid-template-columns: 1fr; }
.factory-photos.two{ grid-template-columns: 1fr 1fr; }

.factory-photos img{
  width:100%;
  height: 180px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  filter: saturate(95%) contrast(105%) brightness(92%);
}

/* responsive */
@media (max-width: 980px){
  .dir-grid{ grid-template-columns: 1fr; }
  .factory-photos.two{ grid-template-columns: 1fr; }
  .factory-photos img{ height: 220px; }
  .dir-map iframe{ height: 240px; }
}
/* ===== Office Gallery (About page) ===== */
.office-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}

.office-item{
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}

.office-item img{
  width: 100%;
  aspect-ratio: 16/11;
  object-fit: cover;
  display:block;
  filter: saturate(95%) contrast(105%) brightness(96%);
  transform: scale(1.01);
}

.office-cap{
  padding: 10px 12px 12px;
  font-weight: 900;
  color: rgba(11,16,32,.88);
  letter-spacing: -0.01em;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.86);
}

.office-item:hover img{
  filter: saturate(105%) contrast(108%) brightness(100%);
  transform: scale(1.03);
  transition: .25s ease;
}

/* Lightbox (dialog) */
.lb{
  width: min(980px, calc(100% - 24px));
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  padding: 0;
  overflow: hidden;
}
.lb::backdrop{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}
.lb-x{
  position:absolute;
  right: 12px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  color: rgba(11,16,32,.92);
  font-size: 20px;
  cursor:pointer;
  z-index: 2;
}
.lb-fig{ margin:0; }
#lbImg{
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display:block;
  background: #111;
}
#lbCap{
  padding: 12px 16px 14px;
  color: rgba(11,16,32,.80);
  font-weight: 800;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.96);
}

/* responsive */
@media (max-width: 980px){
  .office-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Services top hero */
.service-hero{
  padding-top: 110px;
  padding-bottom: 54px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.service-head{ max-width: 820px; }
.service-eyebrow{
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 900;
  color: rgba(255,255,255,.60);
  margin-bottom: 12px;
}
.service-title{
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.service-sub{
  color: rgba(255,255,255,.75);
  line-height: 1.8;
  max-width: 780px;
}

/* Visual image cards */
.visual-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 18px;
}
.visual-card{
  margin: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.visual-card img{
  width: 100%;
  height: auto;
  display: block;
}
.visual-label{
  padding: 14px 18px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 980px){
  .visual-grid{ grid-template-columns: 1fr; }
}
/* ===== Services page tone unify ===== */
.service-hero .service-title{ color: rgba(255,255,255,.96); }
.service-hero .service-sub{ color: rgba(255,255,255,.78); }
.service-hero .service-eyebrow{ color: rgba(255,255,255,.62); }

/* ===== Full-width drag rail (no buttons) ===== */
.process-rail{
  margin-top: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.process-rail::-webkit-scrollbar{ display:none; }

.process-slide{
  scroll-snap-align: start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* 상단 설명 바 */
.process-meta{
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.process-kicker{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 900;
  color: rgba(255,255,255,.60);
}
.process-title{
  margin: 10px 0 6px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.process-sub{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}

/* ✅ 화면 꽉 차게 보이도록: 프레임 높이를 뷰포트 기반으로 */
.process-frame{
  height: min(78vh, 820px);
  background: rgba(0,0,0,.18);
  display: grid;
  place-items: center;
}
.process-frame img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 인포그래픽이 잘리지 않게 */
  display:block;
}

/* 드래그 힌트 */
.process-hint{
  margin: 10px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

/* 모바일에서 더 보기 좋게 */
@media (max-width: 860px){
  .process-frame{ height: min(66vh, 680px); }
  .process-title{ font-size: 20px; }
}
/* Services process rail: full-bleed (screen-wide) */
.service-visual .container{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.process-rail{
  padding-left: max(18px, calc((100vw - 1100px)/2));
  padding-right: max(18px, calc((100vw - 1100px)/2));
}

.process-slide{
  border-radius: 24px;
}

.process-frame{
  height: min(82vh, 920px);
}
/* 이미지 잘림 방지: 프레임 높이 고정 해제 */
.process-frame{
  height: auto !important;
  max-height: 78vh;
  background: #fff;              /* 화이트 배경 */
  display: block;
  padding: 12px;
  overflow: auto;                /* 그래도 커서 넘치면 스크롤 */
}

.process-frame img{
  width: 100%;
  height: auto !important;
  max-height: 72vh;
  object-fit: contain;
  display: block;
}
/* 서비스 페이지: 이미지 섹션만 화이트 테마 */
.service-visual{
  background: #f3f5f7;
}

.service-visual .section-head h2{
  color: #0b1020;
}

.service-visual .section-head p{
  color: rgba(11,16,32,.65);
}

/* 이미지 카드도 라이트 톤 */
.visual-card, .process-slide{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.10) !important;
}

.visual-label,
.process-meta{
  color: rgba(11,16,32,.86) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
.process-kicker{ color: rgba(11,16,32,.55) !important; }
.process-title{ color: rgba(11,16,32,.92) !important; }
.process-sub{ color: rgba(11,16,32,.70) !important; }
/* SERVICES 상단(소개) About처럼 정렬/폭/타이포 통일 */
.service-hero{
  padding-top: 110px;
  padding-bottom: 54px;
}

.service-head{
  max-width: 780px;   /* About page-sub 느낌 */
}

.service-eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.70);
}

.service-title{
  font-size: clamp(34px, 5vw, 58px); /* About page-title 수준 */
  line-height: 1.08;
}

.service-sub{
  font-size: 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
}
/* ===== Process tabs like SLFNC ===== */
.proc-tabs{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.proc-tab{
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: .25s ease;
}

.proc-tab.is-active{
  background: rgba(255,255,255,.92);
  color: #0b1020;
}

.proc-panels{ margin-top: 16px; }

.proc-panel{ display:none; }
.proc-panel.is-show{ display:block; }

/* one image only, clean & readable */
.proc-img{
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

.proc-img img{
  width: 100%;
  height: auto;
  display: block;
}

/* optional: make the image area feel "full" */
@media (min-width: 1100px){
  .proc-img img{
    max-height: 78vh;
    object-fit: contain;
  }
}
/* Services process title */
.proc-title{
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
}

/* Tabs (only two) */
.proc-tabs{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.proc-tab{
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 950;
  cursor: pointer;
  transition: .28s ease;
}

.proc-tab.is-active{
  background: rgba(255,255,255,.94);
  color: #0b1020;
}

/* Panel show/hide fix (2nd tab not visible issue) */
.proc-panels{ margin-top: 14px; }
.proc-panel{ display: none; }
.proc-panel.is-show{ display: block; }

/* Big image area */
.proc-img{
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

/* ✅ 이미지 공간 확 키우기 (짤림/안보임 방지) */
.proc-img img{
  width: 100%;
  height: min(82vh, 980px); /* 화면 꽉 차게 */
  object-fit: contain;       /* 인포그래픽 안 잘리게 */
  display: block;
  background: #fff;
}

/* service-visual section -> light background only for image area */
.service-visual{
  background: #f3f5f7;
}
.service-visual .proc-title{
  color: rgba(11,16,32,.92);
}
.service-visual .proc-tab{
  color: rgba(11,16,32,.72);
}
.service-visual .proc-tabs{
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.service-visual .proc-tab.is-active{
  background: #0b1020;
  color: #fff;
}
/* Fix: service tiles text visibility */
.tile-body h3{ color: rgba(255,255,255,.92); }
.tile-body p{ color: rgba(255,255,255,.72) !important; }
.tile{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
/* Services process title */
.proc-title{
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
}

/* Tabs (only two) */
.proc-tabs{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.proc-tab{
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 950;
  cursor: pointer;
  transition: .28s ease;
}

.proc-tab.is-active{
  background: rgba(255,255,255,.94);
  color: #0b1020;
}

/* Panel show/hide fix (2nd tab not visible issue) */
.proc-panels{ margin-top: 14px; }
.proc-panel{ display: none; }
.proc-panel.is-show{ display: block; }

/* Big image area */
.proc-img{
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

/* ✅ 이미지 공간 확 키우기 (짤림/안보임 방지) */
.proc-img img{
  width: 100%;
  height: min(82vh, 980px); /* 화면 꽉 차게 */
  object-fit: contain;       /* 인포그래픽 안 잘리게 */
  display: block;
  background: #fff;
}

/* service-visual section -> light background only for image area */
.service-visual{
  background: #f3f5f7;
}
.service-visual .proc-title{
  color: rgba(11,16,32,.92);
}
.service-visual .proc-tab{
  color: rgba(11,16,32,.72);
}
.service-visual .proc-tabs{
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.service-visual .proc-tab.is-active{
  background: #0b1020;
  color: #fff;
}
/* Fix: service tiles text visibility */
.tile-body h3{ color: rgba(255,255,255,.92); }
.tile-body p{ color: rgba(255,255,255,.72) !important; }
.tile{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
/* ===== service-visual (white section) text visibility fix ===== */
.service-visual{
  background: #f3f5f7 !important;
}

/* 제목/코멘트(설명) 색상 고정 */
.service-visual .proc-title{
  color: #0b1020 !important;
}

.service-visual .proc-comment{
  margin: 6px 0 0;
  color: rgba(11,16,32,.70) !important;
  font-size: 14px;
  line-height: 1.8;
}

/* 탭 글자색/테두리도 라이트용으로 */
.service-visual .proc-tabs{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

.service-visual .proc-tab{
  color: rgba(11,16,32,.78) !important;
}

.service-visual .proc-tab.is-active{
  background: #0b1020 !important;
  color: #ffffff !important;
}
/* ===== PRODUCTS PAGE ===== */

.products-page {
  background: #0b1220;
  color: #fff;
}

.products-hero {
  padding-top: 110px;
  padding-bottom: 70px;
  background: linear-gradient(180deg, #0b1220 0%, #0e1a2f 100%);
}

.products-eyebrow {
  font-size: 12px;
  letter-spacing: .3em;
  opacity: .6;
  margin-bottom: 10px;
}

.products-hero h1 {
  font-size: 56px;
  font-weight: 900;
  margin-bottom: 12px;
}

.products-hero p {
  opacity: .7;
}

/* section */
.products-section {
  padding: 80px 0;
}

/* category */
.product-category {
  margin-bottom: 80px;
}

.product-category h2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 30px;
  border-left: 4px solid #2f4bff;
  padding-left: 12px;
}

/* grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

/* card */
.product-card {
  background: linear-gradient(145deg, #0f1e34, #0a1526);
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.05);
  transition: .3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* 누끼 이미지 강조 */
.product-card img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
}
/* ===== PRODUCTS PAGE (navy + uniform cards + hover motion) ===== */
.products-page{
  background: #0b1220;
  color: rgba(255,255,255,.92);
}

.products-hero{
  padding-top: 110px;
  padding-bottom: 62px;
  background: radial-gradient(ellipse at top, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.products-eyebrow{
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 900;
  color: rgba(255,255,255,.60);
  margin-bottom: 10px;
}
.products-hero h1{
  margin: 0 0 10px;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 950;
  letter-spacing: -0.03em;
}
.products-hero p{ margin:0; color: rgba(255,255,255,.70); }

.products-section{ padding: 72px 0; }

.product-category{ margin-bottom: 64px; }
.cat-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 18px;
}
.cat-head h2{
  margin: 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.cat-sub{
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.62);
  letter-spacing: -0.02em;
}

/* grid */
.product-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* card */
.p-card{
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  height: 260px;               /* ✅ 통일된 카드 높이 */
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

/* ✅ 이미지 통일: 어떤 비율이든 중앙에 깔끔하게 */
.p-card img{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 누끼 이미지용 */
  padding: 22px;                /* 여백 */
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.45));
  transition: transform .35s ease, filter .35s ease;
}

/* hover motion: 오른쪽/왼쪽 끝에서 살짝 이동 */
.p-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  opacity: .65;
  pointer-events:none;
}

.product-grid .p-card:nth-child(odd):hover img{
  transform: translateX(10px) translateY(-4px) scale(1.03);
}
.product-grid .p-card:nth-child(even):hover img{
  transform: translateX(-10px) translateY(-4px) scale(1.03);
}
.p-card:hover img{
  filter: drop-shadow(0 38px 44px rgba(0,0,0,.55)) brightness(1.05) contrast(1.05);
}

/* Lightbox */
.plb{
  background: rgba(255,255,255,.98); /* ✅ 흰 배경 */
  border: 1px solid rgba(0,0,0,.10);
}
.plb::backdrop{
  background: rgba(0,0,0,.55); /* 바깥은 살짝 어둡게 */
  backdrop-filter: blur(3px);
}
#plbCap{
  color: rgba(11,16,32,.78);
  border-top: 1px solid rgba(0,0,0,.08);
}
.plb-x{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  color: rgba(11,16,32,.92);
}
.plb-fig{ margin:0; }
#plbImg{
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display:block;
  background: transparent; /* ✅ 검은 배경 제거 */
}
#plbCap{
  padding: 12px 16px 14px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* responsive */
@media (max-width: 1200px){
  .product-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .p-card{ height: 240px; }
}
/* ===== Products: category area -> WHITE background for better cutout visibility ===== */
.products-section{
  background: #f5f6f8;
  color: #0b1020;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* 제목/서브텍스트 컬러 */
.products-section .cat-head h2{
  color: #0b1020;
}
.products-section .cat-sub{
  color: rgba(11,16,32,.62);
}
.products-section .cat-head{
  border-top-color: rgba(0,0,0,.08);
}

/* 카드도 화이트 톤으로 변경 */
.products-section .p-card{
  background: linear-gradient(145deg, #ffffff, #f3f4f7);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.products-section .p-card::after{
  background: radial-gradient(circle at 30% 20%, rgba(11,16,32,.08), rgba(11,16,32,0) 55%);
  opacity: .45;
}

/* 누끼 이미지 대비 강화 */
.products-section .p-card img{
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.25)) brightness(1.06) contrast(1.05);
}
.products-section .p-card:hover img{
  filter: drop-shadow(0 34px 40px rgba(0,0,0,.30)) brightness(1.10) contrast(1.07);
}
/* ===== Contact page: light & fresh ===== */
body.contact-light{
  background: #f6f7fb;
  color: #0b1020;
}

/* nav도 밝게 */
body.contact-light .nav{
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
body.contact-light .brand{ color:#0b1020; }
body.contact-light .menu a{ color: rgba(11,16,32,.70); }
body.contact-light .menu a::after{ color:#0b1020; }
body.contact-light .hamburger{
  color:#0b1020;
  border-color: rgba(0,0,0,.12);
}
body.contact-light .mobile-menu a{
  color:#0b1020;
  border-bottom-color: rgba(0,0,0,.08);
}

/* hero */
body.contact-light .page-hero{
  background: linear-gradient(180deg, rgba(11,16,32,.03), rgba(255,255,255,0));
}
body.contact-light .kicker{ color: rgba(11,16,32,.55); }
body.contact-light .page-sub{ color: rgba(11,16,32,.70); }

/* ✅ 화이트 영역을 넓게: 섹션 alt를 라이트로 */
body.contact-light .section.alt{
  background: transparent; /* 전체 배경은 밝게 */
}
body.contact-light .contact-grid{
  margin-top: 18px;
  background: #ffffff;                 /* ✅ 큰 화이트 패널 */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* 카드들도 더 산뜻하게 */
body.contact-light .card{
  background: rgba(11,16,32,.02);
  border: 1px solid rgba(0,0,0,.06);
}

/* FAQ */
body.contact-light summary{ color: rgba(11,16,32,.92); }
body.contact-light details{
  border-top: 1px solid rgba(0,0,0,.08);
}
body.contact-light details p{
  color: rgba(11,16,32,.70);
}

/* 폼 */
body.contact-light .form label{ color: rgba(11,16,32,.85); }
body.contact-light .form input,
body.contact-light .form select,
body.contact-light .form textarea{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  color: #0b1020;
}
body.contact-light .form input::placeholder,
body.contact-light .form textarea::placeholder{
  color: rgba(11,16,32,.45);
}

/* 버튼 */
body.contact-light .btn.primary{
  background: #0b1020;
  color: #ffffff;
  border-color: #0b1020;
}
body.contact-light .btn.primary:hover{ opacity: .92; }

body.contact-light .form-hint{
  color: rgba(11,16,32,.55);
}

/* footer */
body.contact-light .footer{
  border-top: 1px solid rgba(0,0,0,.06);
  color: rgba(11,16,32,.62);
}
body.contact-light .foot{
  color: rgba(11,16,32,.65);
}
/* ===== Contact page: balanced like ABOUT(light) ===== */
body.contact-light{
  background: #f3f5f7;           /* About light 톤 */
  color: #0b1020;
}

/* nav: 과하게 하얗지 않게 */
body.contact-light .nav{
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* hero는 About light 느낌으로 */
body.contact-light .page-hero{
  background: transparent;
}
body.contact-light .kicker{ color: rgba(11,16,32,.52); }
body.contact-light .page-sub{ color: rgba(11,16,32,.72); }

/* ✅ contact-grid를 “큰 흰 박스”가 아니라, 2개의 카드가 균형 있게 보이게 */
body.contact-light .contact-grid{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-top: 18px;
}

/* 카드 = About의 overview-card 같은 질감 */
body.contact-light .card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: none;
}

/* FAQ */
body.contact-light summary{ color: rgba(11,16,32,.92); }
body.contact-light details{
  border-top: 1px solid rgba(0,0,0,.10);
}
body.contact-light details p{
  color: rgba(11,16,32,.72);
}

/* 폼 인풋도 너무 새하얗지 않게 (About 카드 안에 자연스럽게) */
body.contact-light .form input,
body.contact-light .form select,
body.contact-light .form textarea{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  color: #0b1020;
}
body.contact-light .form input::placeholder,
body.contact-light .form textarea::placeholder{
  color: rgba(11,16,32,.48);
}

/* 버튼: About 톤 유지(너무 강하지 않게) */
body.contact-light .btn.primary{
  background: #0b1020;
  color: #ffffff;
  border-color: rgba(11,16,32,.22);
}
body.contact-light .btn.primary:hover{ opacity: .93; }

body.contact-light .form-hint{ color: rgba(11,16,32,.60); }

/* footer/foot 텍스트 */
body.contact-light .foot{ color: rgba(11,16,32,.70); }
body.contact-light .footer{
  border-top: 1px solid rgba(0,0,0,.06);
  color: rgba(11,16,32,.62);
}
/* =========================
   CONTACT - About Tone Match
========================= */
body.contact-light{
  background: #f3f5f7;   /* About와 동일 */
  color: #0b1020;
}

/* nav */
body.contact-light .nav{
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* hero */
body.contact-light .page-hero{
  background: transparent;
}
body.contact-light .kicker{
  color: rgba(11,16,32,.55);
}
body.contact-light .page-sub{
  color: rgba(11,16,32,.72);
}

/* 컨텐츠 영역 */
body.contact-light .section.alt{
  background: transparent;
}

body.contact-light .contact-grid{
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* 카드 */
body.contact-light .card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
}

/* FAQ */
body.contact-light summary{
  color: #0b1020;
  font-weight: 800;
}
body.contact-light details{
  border-top: 1px solid rgba(0,0,0,.08);
}
body.contact-light details p{
  color: rgba(11,16,32,.72);
}

/* 입력폼 */
body.contact-light .form label{
  color: rgba(11,16,32,.85);
  font-weight: 700;
}
body.contact-light .form input,
body.contact-light .form select,
body.contact-light .form textarea{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  color: #0b1020;
  border-radius: 12px;
}
body.contact-light .form input:focus,
body.contact-light .form textarea:focus,
body.contact-light .form select:focus{
  outline: none;
  border-color: #0b1020;
  box-shadow: 0 0 0 3px rgba(11,16,32,.08);
}

/* 버튼 - 네이비 포인트 유지 */
body.contact-light .btn.primary{
  background: #0b1020;
  color: #ffffff;
  border-color: #0b1020;
  border-radius: 12px;
  font-weight: 900;
}
body.contact-light .btn.primary:hover{
  background: #142544;
}

/* 하단 정보 */
body.contact-light .foot{
  color: rgba(11,16,32,.70);
}

body.contact-light .footer{
  border-top: 1px solid rgba(0,0,0,.06);
  color: rgba(11,16,32,.60);
}
body.contact-light .btn.primary{
  transition: all .25s ease;
  box-shadow: 0 8px 24px rgba(11,16,32,.15);
}
body.contact-light .btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(11,16,32,.20);
}
/* =========================
   WHITE MAIN AREA (Directions + Contact)
   - keep hero/nav dark
   - make content section white like ABOUT
========================= */

/* CONTACT: section area white */
body.contact-light .section.alt{
  background: #f3f5f7 !important;
  color: #0b1020;
}

/* contact: cards already light, but ensure text */
body.contact-light .card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
body.contact-light summary{ color:#0b1020 !important; }
body.contact-light details p{ color: rgba(11,16,32,.72) !important; }
body.contact-light .foot{ color: rgba(11,16,32,.72) !important; }

/* form inputs on white */
body.contact-light .form input,
body.contact-light .form select,
body.contact-light .form textarea{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: #0b1020 !important;
}

/* DIRECTIONS: section area white */
body.dir-clean .section{
  background: #f3f5f7 !important;
  color: #0b1020;
}

/* directions: cards on white */
body.dir-clean .dir-card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.08) !important;
}

/* directions: headings/text */
body.dir-clean .dir-eyebrow{ color: rgba(11,16,32,.55) !important; }
body.dir-clean .dir-title{ color: rgba(11,16,32,.92) !important; }
body.dir-clean .dir-row .k{ color: rgba(11,16,32,.60) !important; }
body.dir-clean .dir-row .v{ color: rgba(11,16,32,.88) !important; }
body.dir-clean .dir-row .v a{
  color: rgba(11,16,32,.92) !important;
  border-bottom-color: rgba(11,16,32,.22) !important;
}

/* directions: map button tone on white */
body.dir-clean .dir-maplink,
body.dir-clean .factory-link{
  background: rgba(11,16,32,.06) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: rgba(11,16,32,.92) !important;
}
body.dir-clean .dir-maplink:hover,
body.dir-clean .factory-link:hover{
  background: rgba(11,16,32,.10) !important;
}

/* directions: divider */
body.dir-clean .dir-divider{
  background: rgba(0,0,0,.08) !important;
}

/* directions: photos on white still pop */
body.dir-clean .factory-photos img{
  border: 1px solid rgba(0,0,0,.10) !important;
  filter: saturate(98%) contrast(105%) brightness(98%) !important;
}
/* ===== Home auto-collapse hero ===== */
.hero{
  transition: height .75s ease, padding-top .75s ease;
}

.hero.hero-collapse{
  height: 52vh;           /* 반절 정도로 축소 */
  padding-top: 64px;
}

/* 아래 reveal 섹션: 처음엔 숨김 */
.home-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  padding: 56px 0 76px;
  background: #f3f5f7;     /* About 느낌 화이트 영역 */
  color: #0b1020;
}

.home-reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* layout */
.reveal-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}

.reveal-eyebrow{
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 900;
  color: rgba(11,16,32,.55);
}

.reveal-title{
  margin: 10px 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 950;
  letter-spacing: -0.02em;
}

.reveal-sub{
  margin: 0;
  color: rgba(11,16,32,.72);
  line-height: 1.85;
}

/* points */
.reveal-points{
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.pt{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px 14px;
}
.pt-k{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 950;
  color: rgba(11,16,32,.55);
}
.pt-v{
  margin-top: 6px;
  font-weight: 900;
  color: rgba(11,16,32,.90);
}

/* diagram */
.reveal-diagram{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.diag{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(11,16,32,.03);
  border: 1px solid rgba(0,0,0,.06);
}

.node{
  padding: 10px 12px;
  border-radius: 999px;
  background: #0b1020;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
}

.arrow{
  color: rgba(11,16,32,.45);
  font-weight: 900;
}

.diag-cards{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dcard{
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(11,16,32,.04);
  border: 1px solid rgba(0,0,0,.06);
}
.dtag{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 950;
  color: rgba(11,16,32,.55);
}
.dval{
  margin-top: 6px;
  font-weight: 950;
  color: rgba(11,16,32,.90);
}

/* responsive */
@media (max-width: 980px){
  .hero.hero-collapse{ height: 58vh; }
  .reveal-grid{ grid-template-columns: 1fr; }
}
/* ===== SERVICES: keep process section inside container (not full bleed) ===== */
.service-visual{
  background: #f3f5f7 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 컨테이너 폭/정렬 강제 */
.service-visual .container{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* 제목/탭/이미지 박스도 컨테이너 안에서만 */
.service-visual .proc-title{
  width: 100%;
  margin: 0 0 12px;
}

.service-visual .proc-tabs,
.service-visual .proc-panels,
.service-visual .proc-img{
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* 이미지 카드가 너무 커 보이면 높이 약간 줄이기(선택) */
.service-visual .proc-img img{
  height: min(74vh, 880px);
}

/* 모바일에서 자연스럽게 */
@media (max-width: 980px){
  .service-visual .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .service-visual .proc-img img{
    height: auto;
    max-height: 72vh;
  }
}
/* ===== SERVICES PROCESS FULL WIDTH FIX ===== */

.service-visual .container{
  max-width: 1400px !important;   /* 기존 1100 → 1400 */
}

.proc-img{
  width: 100%;
  padding: 0;                     /* 패딩 제거 */
  background: #fff;
}

.proc-img img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 이미지가 더 크게 보이도록 */
.proc-img img{
  max-height: none;               /* 제한 해제 */
}

/* 제목 영역 정리 */
.proc-title{
  margin-bottom: 16px;
}

/* 탭 간격 정리 */
.proc-tabs{
  margin-bottom: 18px;
}
/* Services process 이미지 크게(글씨 선명) */
.service-visual .container{
  max-width: 1400px !important;
}

.proc-img img{
  height: min(82vh, 980px);
  width: 100%;
  object-fit: contain;
}
/* 이미지 클릭 가능하게 */
.proc-zoom{
  border:0;
  padding:0;
  background:transparent;
  cursor: zoom-in;
  width:100%;
}
.proc-zoom img{
  width:100%;
  display:block;
}

/* 라이트박스 */
.proc-lb{
  width: min(1100px, calc(100% - 40px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(10,16,32,.96);
  padding:0;
  overflow:hidden;
}
.proc-lb::backdrop{
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
}

.proc-lb-fig{ margin:0; }

#procLbImg{
  width:100%;
  max-height:80vh;
  object-fit:contain;
  display:block;
  background:#fff;   /* 흰 배경 (누끼 검은배경 방지) */
}

#procLbCap{
  padding:14px 18px;
  color:#fff;
  font-weight:900;
  border-top:1px solid rgba(255,255,255,.1);
}

.proc-lb-x{
  position:absolute;
  right:12px;
  top:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.4);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
html{ scroll-behavior: smooth; }
/* ===== Home diagram (Korean friendly) ===== */
.home-diagram{
  background: #f3f5f7;
  color: #0b1020;
  padding: 70px 0 80px;
}

.diag-head{ max-width: 820px; }
.diag-eyebrow{
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 900;
  color: rgba(11,16,32,.55);
}
.diag-title{
  margin: 10px 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 950;
  letter-spacing: -0.02em;
}
.diag-sub{
  margin: 0;
  color: rgba(11,16,32,.72);
  line-height: 1.8;
}

/* flow */
.flow{
  margin-top: 22px;
  display:flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.flow-step{
  flex: 1 1 160px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px;
}
.flow-no{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 950;
  background: rgba(11,16,32,.06);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(11,16,32,.80);
}
.flow-t{
  margin-top: 10px;
  font-weight: 950;
  font-size: 16px;
}
.flow-d{
  margin-top: 6px;
  color: rgba(11,16,32,.70);
  font-weight: 700;
  line-height: 1.6;
  font-size: 13px;
}
.flow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(11,16,32,.35);
  font-weight: 950;
  padding: 0 2px;
}

/* sites */
.site-cards{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.site-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px;
}
.site-tag{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 950;
  color: rgba(11,16,32,.55);
}
.site-name{
  margin-top: 8px;
  font-weight: 950;
  font-size: 16px;
}
.site-desc{
  margin-top: 6px;
  color: rgba(11,16,32,.70);
  font-weight: 700;
  font-size: 13px;
}

/* responsive */
@media (max-width: 980px){
  .site-cards{ grid-template-columns: 1fr; }
  .flow-arrow{ display:none; }
}
/* ===== Header scale up (logo/brand/menu) ===== */
.nav-inner{
  padding: 18px 18px;   /* 위아래 여백 살짝 증가 */
}

.logo{
  height: 36px !important; /* 기존 18px -> 2배 */
}

.brand-text{
  font-size: 18px !important;
  letter-spacing: .14em !important;
}

.brand-text-ko{
  font-size: 18px !important;
}

.menu{
  gap: 30px !important;
}

.menu a{
  font-size: 15px !important;     /* 기존 13px -> 확대 */
  min-width: 88px !important;     /* 한글 호버 겹침 방지 */
}
/* ===== Unify page hero styles across tabs ===== */

/* Services hero -> page-hero와 동일하게 */
.service-hero{
  padding-top: 110px !important;
  padding-bottom: 54px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
}

.service-eyebrow{
  font-size: 12px !important;
  letter-spacing: .22em !important;
  color: rgba(255,255,255,.70) !important;
}

.service-title{
  margin: 10px 0 8px !important;
  font-size: clamp(34px, 5vw, 58px) !important; /* page-title과 동일 */
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

.service-sub{
  margin: 0 !important;
  max-width: 780px !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,.70) !important;
}

/* Products hero -> page-hero 느낌으로 통일 */
.products-hero{
  padding-top: 110px !important;
  padding-bottom: 54px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
}

.products-eyebrow{
  font-size: 12px !important;
  letter-spacing: .22em !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.70) !important;
}

.products-hero h1{
  margin: 10px 0 8px !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

.products-hero p{
  margin: 0 !important;
  max-width: 780px !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,.70) !important;
}
/* Products: photo area white background */
.products-section{
  background: #f3f5f7;
  color: #0b1020;
  padding: 72px 0;
}

/* category title colors on white */
.products-section .cat-head{
  border-top-color: rgba(0,0,0,.08);
}
.products-section .cat-head h2{
  color: #0b1020;
}
.products-section .cat-sub{
  color: rgba(11,16,32,.62);
}

/* cards on white */
.products-section .p-card{
  background: linear-gradient(145deg, #ffffff, #f3f4f7);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.products-section .p-card::after{
  opacity: .35;
}
.products-section .p-card img{
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.25)) brightness(1.06) contrast(1.05);
}
/* ===== NAV balance tune ===== */

/* 1) 로고/브랜드 크기 다운 (밸런스) */
.logo{
  height: 26px !important;      /* 너무 크면 24px도 OK */
}
.brand-text{
  font-size: 14px !important;
  letter-spacing: .10em !important;
}

/* 2) 메뉴 한글(hover) 폰트 키우기 */
.menu a::after,
.mobile-menu a::after{
  font-size: 14px !important;   /* 기존보다 키움 */
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* 3) 브랜드 hover 한글을 중앙쪽으로 + 자간 넓게 */
.brand{
  position: relative !important;
}

/* brand-text-ko를 “브랜드 영역 중앙”으로 띄우기 */
.brand-text-ko{
  position: absolute !important;
  left: 40% !important;                 /* ✅ 로고에서 떨어져 중앙쪽 */
  top: 50% !important;
  transform: translate(-50%, -50%) translateY(4px) !important;
  opacity: 0 !important;
  transition: opacity .35s ease, transform .35s ease !important;

  font-size: 16px !important;
  font-weight: 900 !important;

  /* ✅ '한 울 플 래 닝' 느낌 */
  letter-spacing: .40em !important;     /* 자간 넓게 */
  white-space: nowrap !important;
}

/* hover 시 영문 숨기고 한글 보여주기 */
.brand:hover .brand-text{
  opacity: 0 !important;
  transform: translateY(-2px) !important;
  transition: opacity .35s ease, transform .35s ease !important;
}

.brand:hover .brand-text-ko{
  opacity: 1 !important;
  transform: translate(-50%, -50%) translateY(0) !important;
}

/* 4) 로고와 한글이 겹치지 않게 최소 폭 확보 */
.brand{
  min-width: 220px;  /* 좁으면 한글이 너무 붙어 보임 */
}

/* 반응형: 작은 화면에서는 과한 자간 줄이기 */
@media (max-width: 980px){
  .brand-text-ko{
    letter-spacing: .38em !important;
    left: 62% !important;
  }
}
/* ===== Fix: Brand text hidden on About/Contact ===== */

/* 기본 상태: 영문은 항상 보이게 */
.brand .brand-text{
  opacity: 1 !important;
  transform: none !important;
  display: inline-block !important;
}
/* ===== About slider ===== */
.about-switch{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.about-switch-controls{
  display:flex;
  gap: 10px;
}

.as-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
}

.about-carousel{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  /* ✅ 높이 고정: 내용 단차로 아래가 흔들리지 않게 */
  min-height: 640px;          /* 필요 시 700까지 올려도 됨 */
  background: rgba(255,255,255,.0);

/* Office teaser */
.office-teaser{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background: rgba(11,16,32,.04);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px 16px;
}

.office-teaser-title{
  font-weight: 950;
  color: rgba(11,16,32,.92);
  margin-top: 6px;
}

.office-teaser-sub{
  margin-top: 6px;
  color: rgba(11,16,32,.70);
  font-weight: 700;
  font-size: 13px;
}

.office-teaser-btn{
  text-decoration:none;
  font-weight: 950;
  padding: 12px 14px;
  border-radius: 999px;
  background: #0b1020;
  color: #fff;
}

@media (max-width: 980px){
  .about-switch{ flex-direction: column; }
  .office-teaser{ flex-direction: column; align-items:flex-start; }
}
/* ===== About slider (swipe) stable override ===== */
.about-carousel{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 640px;
}

.about-track{
  display: flex;
  width: 200%;
  transition: transform .55s cubic-bezier(.22,.8,.22,1);
  will-change: transform;
}

.about-slide{
  flex: 0 0 50%;
}

#aboutCarousel.dragging{
  cursor: grabbing;
}
/* About: 슬라이더 위쪽 여백 줄이기 */
#aboutSlider.section.light{
  padding-top: 48px;
  padding-bottom: 38px;
}

/* About: 슬라이더 컨트롤/제목 영역 간격 줄이기 */
.about-switch{
  margin-bottom: 10px;
}

/* Office gallery 섹션을 위로 당기기 */
#office.section.light{
  padding-top: 40px;
}
#office .section-top{
  margin-bottom: 14px;
}
/* About slider title clipping fix */
#aboutSlider .about-switch{
  padding-top: 6px;      /* 위로 너무 붙는거 방지 */
}

#aboutSlider .about-switch-left{
  padding-left: 2px;     /* 왼쪽 잘림 방지 */
}

#aboutSlider .section-title{
  line-height: 1.15;     /* 글자 위아래 여유 */
}

#aboutSlider{
  overflow: visible;     /* 혹시 부모가 잘라먹는 경우 방지 */
}
/* Reduce duplicate headline feeling */
#aboutSlider .about-switch-left .section-title{
  font-size: 22px;              /* 크게 보이는 상단 제목을 축소 */
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  color: rgba(11,16,32,.88);
}

#aboutSlider .about-switch-left .section-lead{
  font-size: 13px;              /* 안내문도 작게 */
  color: rgba(11,16,32,.62);
  max-width: 520px;
}
/* Reduce empty space above Office Gallery */
.about-carousel{
  min-height: 560px;  /* 640 -> 560 (필요시 600) */
}
/* About slider title (Korean) */
.about-main-title{
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(11,16,32,.90);
}

/* Remove repeated eyebrow spacing inside slider */
#aboutSlider .section-top{
  margin-bottom: 14px;
}

/* Minimal slider controls */
.about-switch-controls .as-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 900;
  box-shadow: none;
}
.about-switch-controls .as-btn:hover{
  background: rgba(255,255,255,1);
}

/* Left quick jump buttons */
.about-sidejump{
  margin: 10px 0 14px;
  display: flex;
  gap: 10px;
}
.jump-btn{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,16,32,.88);
  background: rgba(11,16,32,.04);
  border: 1px solid rgba(0,0,0,.08);
}
.jump-btn:hover{
  background: rgba(11,16,32,.07);
}
/* ===== About layout: left nav + centered content ===== */
#aboutSlider .about-layout{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: start;
}

/* left nav */
.about-sidenav{
  position: sticky;
  top: 92px; /* nav 아래로 */
  display: grid;
  gap: 10px;
  padding-top: 6px;
}

/* modern minimal buttons */
.about-sidenav .jump-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,16,32,.82);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  transition: .2s ease;
}

.about-sidenav .jump-btn:hover{
  background: rgba(11,16,32,.06);
}

.about-sidenav .jump-btn.is-active{
  background: #0b1020;
  color: #fff;
  border-color: #0b1020;
}

/* main topbar: title left, controls right */
.about-topbar{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.about-main-title{
  margin: 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(11,16,32,.90);
}

/* controls on top-right, minimal */
.about-switch-controls{
  display:flex;
  gap: 8px;
}

.about-switch-controls .as-btn{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: .2s ease;
}
.about-switch-controls .as-btn:hover{
  background: #fff;
  transform: translateY(-1px);
}

/* carousel centered */
.about-main .about-carousel{
  border-radius: 18px;
}

/* responsive */
@media (max-width: 980px){
  #aboutSlider .about-layout{
    grid-template-columns: 1fr;
  }
  .about-sidenav{
    position: relative;
    top: 0;
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 0;
  }
  .about-topbar{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* About swipe slider smoother */
.about-carousel{ overflow:hidden; border-radius:18px; }
.about-track{
  transition: transform .75s cubic-bezier(.22,.8,.22,1) !important;
  will-change: transform;
}
#aboutCarousel.dragging{ cursor: grabbing; }
/* ===== Sub Tabs (page internal) ===== */
.subtabs{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 8px;
}

.subtab{
  border: 0;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 950;
  letter-spacing: -0.01em;
  background: transparent;
  color: rgba(255,255,255,.78);
  transition: .22s ease;
}

.subtab.is-active{
  background: rgba(255,255,255,.92);
  color: #0b1020;
}

.subpanel{ display:none; }
.subpanel.is-show{ display:block; }

/* 탭 아래 컨텐츠 영역 간격 */
.subcontent{
  margin-top: 16px;
}

/* 라이트 섹션에서 탭 컬러 반전 */
.section.light .subtabs{
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.10);
}
.section.light .subtab{
  color: rgba(11,16,32,.72);
}
.section.light .subtab.is-active{
  background: #0b1020;
  color: #fff;
}
/* Services 탭 섹션 제목이 왼쪽으로 튀어나오는 문제 방지 */
.service-visual .container{
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.proc-title{
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left;
}
/* Services process lightbox bigger */
.proc-lb{
  width: min(1400px, calc(100% - 24px)) !important;
}
#procLbImg{
  max-height: 88vh !important;
}
#procLbImg{
  width: 100% !important;
}

/* ===== NAV SIMPLE MODE (no mega submenu) ===== */
.mega-drop{display:none !important;}
.menu.mega{display:flex !important; align-items:center !important;}
/* if mega markup remains, treat .mega-top like normal link */
.menu.mega .mega-top{color: var(--muted) !important; text-decoration:none !important; font-size:13px !important;}
.menu.mega .mega-top:hover{color: transparent !important;}
.menu.mega .mega-top::after{content: attr(data-ko); position:absolute; left:50%; top:0; transform:translate(-50%,2px); opacity:0; transition:opacity .18s ease, transform .18s ease; white-space:nowrap; pointer-events:none; color: var(--text); font-size:13px;}
.menu.mega .mega-top:hover::after{opacity:1; transform:translate(-50%,0);}
/* span.en/ko 방식이 남아있으면, en만 보이게 */
.menu.mega .mega-top .ko{display:none !important;}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.65) 40%,
    rgba(0,0,0,0.85) 100%
  );
}
.hero {
  height: 100vh;
  transition: height 0.8s ease;
}

.hero-collapse {
  height: 70vh;
}