/* =========================================================
   MOTMOT GROUP — shared styles
   Design handoff is desktop-first (1280+). Inline styles from
   the handoff are preserved on each element; this file holds
   only the shared reset, keyframes, image-slot styling, small
   transitions, and a pragmatic mobile fallback layer.
   ========================================================= */

body {
  margin: 0;
  background: #14120E;
  color: #ECE5D8;
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
* { box-sizing: border-box; }

/* photo slots (replace the prototype's drag zones) */
img.dc-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* hero slider keyframes (from handoff) */
@keyframes heroCycle {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  24%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes heroZoom {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.045); }
  100% { transform: scale(1.045); }
}

/* subtle transitions for the hover/focus shim */
a, button { transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
input, select, textarea { transition: border-color .2s ease, background-color .2s ease; }
select option { background: #14120E; color: #ECE5D8; }

/* =========================================================
   MOBILE FALLBACK (handoff is desktop-only; this keeps phones
   usable — stacks grids, trims padding, scales hero type).
   ========================================================= */
@media (max-width: 860px) {
  /* stack every multi-column grid */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:440px 1fr"] { grid-template-columns: 1fr !important; }

  /* group-structure rows: number + text, drop the arrow */
  [style*="grid-template-columns:80px 260px 1fr 48px"] {
    grid-template-columns: 40px 1fr !important;
    gap: 6px 16px !important;
  }
  [style*="grid-template-columns:80px 260px 1fr 48px"] > span:last-child { display: none; }

  /* trim the large desktop paddings */
  [style*="padding:136px 96px 118px"],
  [style*="padding:130px 96px 110px"],
  [style*="padding:110px 96px"],
  [style*="padding:0 96px 130px"],
  [style*="padding:118px 96px"],
  [style*="padding:100px 96px"],
  [style*="padding:96px 96px 64px"],
  [style*="padding:0 96px 120px"] { padding-left: 22px !important; padding-right: 22px !important; }

  [style*="padding:72px"] { padding: 44px 26px !important; }
  [style*="padding:52px 56px"] { padding: 34px 24px !important; }
  [style*="padding:56px 48px"] { padding: 40px 26px !important; }
  [style*="padding:34px 64px"] { padding: 26px 24px !important; }
  [style*="padding:70px 64px 38px"] { padding: 54px 24px 34px !important; }

  /* contact: info + form gap and side padding */
  [style*="padding:0 96px 120px"] { padding-bottom: 80px !important; }

  /* hero + banners: shorter, hide the side index & breadcrumbs clutter */
  [style*="height:840px"] { height: 74vh !important; min-height: 500px !important; }
  [style*="height:440px"], [style*="height:400px"] { height: 300px !important; }
  [style*="height:340px"] { height: 260px !important; }
  [style*="right:52px"][style*="translateY(-50%)"] { display: none !important; }

  /* type down-scale */
  [style*="font-size:54px"] { font-size: 33px !important; }
  [style*="font-size:46px"] { font-size: 30px !important; }
  [style*="font-size:44px"] { font-size: 30px !important; }
  [style*="font-size:42px"] { font-size: 29px !important; }
  [style*="font-size:36px"] { font-size: 25px !important; }
  [style*="font-size:34px"] { font-size: 24px !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  [style*="font-size:30px"] { font-size: 23px !important; }

  /* nav becomes: logo + CTA on row 1, scrollable menu on row 2 */
  [style*="height:80px"][style*="backdrop-filter:blur(10px)"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: 10px 0 !important;
  }
  [style*="gap:clamp(14px,2.2vw,34px)"] {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 18px !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
}