:root {
  --color-bg: #151F36;
  --color-bg-light: #273c59;
  --color-primary: #FFB74D;
  --color-primary-dim: #FFC980;
  --color-accent: #D7263D;
  --color-surface: #232A44;
  --color-surface-dim: #22273C;
  --color-text-main: #fff;
  --color-text-sub: #c7d1e0;
  --color-border: #273c59;
  --color-gradient1: #273c59;
  --color-gradient2: #151F36;
  --color-hover: #FFD06B;
  --color-kakao: #FFB74D;
  --sp-small: 0.7rem;
  --sp: 1rem;
  --sp-lg: 2rem;
  --sp-xl: 3.5rem;
  --radius: 18px;
  --radius-lg: 36px;
  --shadow: 0 2px 12px 0 rgba(21,31,54, 0.08), 0 1.5px 5.5px rgba(21,31,54,.13);
  --shadow-hover: 0 8px 24px 0 rgba(215,38,61,0.12), 0 4px 12px rgba(21,31,54,.16);
  --transition-main: 0.36s cubic-bezier(0.24,0.85,0.37,1);
  --max-width: 1200px;
  --modal-overlay: rgba(21,31,54,.86);
  --z-toast: 10000;
  --z-modal: 1000;
}
html {
  box-sizing: border-box;
  font-size: 17px;
  background: var(--color-bg);
  color: var(--color-text-main);
}
*, *:before, *:after { box-sizing: inherit; }
body {
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text-main);
  margin: 0; padding: 0; min-height:100vh; line-height:1.65;
}
a { color: var(--color-primary); text-decoration: none; transition: color .18s; }
a:hover { color: var(--color-accent);}
h1, h2, h3, h4, h5, h6 { font-family: 'Pretendard', 'Noto Sans KR', 'sans-serif'; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin:0 0 0.7em;}
h1 { font-size: clamp(2.2rem, 6vw, 4.2rem);}
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem);}
h3 { font-size: 1.5rem;}
h4 { font-size: 1.07rem;}
p { margin:0 0 0.7em 0; color:var(--color-text-sub);}
img { max-width:100%; border-radius: var(--radius);}
ul, ol {padding:0; margin:0; list-style:none;}
button, .btn {
  display:inline-block; font-family:'Pretendard'; font-weight:700;
  border-radius: var(--radius); padding: .88em 2em;
  border: none; background: var(--color-primary); color:var(--color-bg);
  cursor:pointer; font-size:1.05rem; box-shadow:var(--shadow);
  transition: transform .18s, box-shadow .22s, background .25s;
}
.btn-main   { background: var(--color-primary); color: var(--color-bg);}
.btn-outline{ background: transparent; color:var(--color-primary); border: 2px solid var(--color-primary);}
.btn-crimson{ background: var(--color-accent); color: #fff; }
.btn:hover, .btn:focus {
  transform: translateY(-2px) scale(1.045); box-shadow: var(--shadow-hover);
  background: var(--color-hover);
  color: var(--color-bg);
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-bg);}
.btn-crimson:hover{ background: #b51d34; color: #fff;}
.cta-btn.schedule-btn, .floating-kakao { animation: ctaGlow 1.3s infinite alternate;}
@keyframes ctaGlow {
  0% {filter: brightness(.99) drop-shadow(0 0 2px var(--color-primary));}
  100% {filter: brightness(1.19) drop-shadow(0 0 10px var(--color-primary));}
}
.section {
  margin: var(--sp-xl) auto var(--sp-xl) auto; 
  max-width:var(--max-width);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-lg) var(--sp-lg);
  position: relative;
}
.section.card-wide { max-width: 100vw; margin-left:0; margin-right:0;}
.section-head {
  margin-bottom: 1.6rem; 
  display:block; 
  position:relative;
}
.section-head .subtitle {
  color:var(--color-primary); font-size:1rem; font-weight:500; margin-left:8px;
}
.deco-bar {
  border-left: 5px solid var(--color-primary);
  padding-left: 14px;
}
.deco-gradient {
  border-image: linear-gradient(40deg, var(--color-primary) 80%, var(--color-accent) 100%);
  border-width: 0 0 0 7px;
  border-style: solid;
}
.grid-3 {display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp);}
.grid-4 {display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp);}
.card {background: var(--color-surface); box-shadow: var(--shadow);}
.card-wide {width: 100%; box-shadow: var(--shadow);}
.navbar {
  position:fixed; z-index:100; width:100%; left:0; top:0;
  transition: background .22s, box-shadow .32s;
  background: transparent; backface-visibility: hidden;
}
.navbar.scrolled { background: var(--color-bg); box-shadow: var(--shadow);}
.navbar-inner {
  max-width:var(--max-width); margin:0 auto; height:68px; display:flex;
  align-items:center; justify-content:space-between; padding:0 var(--sp-lg);
}
.logo {
  display:flex; align-items:center; font-weight:900; font-size:1.25em;
  line-height:1;
}
.logo .brand {color:var(--color-primary); margin-left: 10px; font-size:1.09em;}
.nav-menu {
  display:flex; gap:2em; align-items:center; font-weight:600;
}
.nav-menu a {
  color:var(--color-text-main); opacity:0.87; padding: 1em .1em;
  position:relative; font-size:1.07em; transition:color .18s;
}
.nav-menu a:hover, .nav-menu a:focus { color:var(--color-primary);}
.navbar .cta-btn { margin-left: 2.5em;}
/* HERO */
.hero-section {
  position:relative; min-height: 98vh; display:flex; align-items:center; 
  justify-content:center; overflow:hidden; z-index:1; padding-top: 86px;
  background: var(--color-bg);
}
.hero-bg-svg {
  pointer-events: none; user-select: none;
  position:absolute; z-index:0; inset:0;
}
.hero-content { 
  position:relative; z-index:2; display:flex; flex-direction:column; 
  align-items:flex-start; justify-content:center; 
  min-height:60vh; max-width: 600px;
  margin:0 auto; gap:1.7em;
}
.hero-title { font-size:clamp(2.4rem,6vw,4.5rem); color:#fff; font-weight:900;}
.hero-title .highlight { color: var(--color-primary);}
.hero-subtitle { font-size:clamp(1.05rem,2.5vw,1.32rem); font-weight:500; color:var(--color-text-sub);}
.hero-btns { display:flex; gap:1em;}
.hero-btns .btn { font-size:1.08em; font-weight:700; min-width:146px;}
/* Core Value & Services */
.about-corevalues .corevalue {
  background: var(--color-surface-dim); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:2.2em 1em 1.2em 1em; 
  text-align:center; margin:0 .2em;
}
.about-corevalues .corevalue:hover {box-shadow:var(--shadow-hover); transform:translateY(-3px) scale(1.04);}
.cv-icon { display:inline-block; margin-bottom:.82em;}
.brand-slogan {
  color:var(--color-accent); font-weight:700; font-size:1.18em;
}
.about-desc { color:var(--color-text-sub);}
.services-grid {display: grid; gap: var(--sp);}
.services-grid.grid-3 {grid-template-columns: repeat(3,1fr);}
.services-grid.grid-4 {grid-template-columns: repeat(4,1fr);}
.service-card {
  background:var(--color-surface-dim); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.9em 1.1em; text-align:center;
  display:flex; flex-direction:column; align-items:center; min-height:220px;
  justify-content:center; transition:box-shadow .18s, transform .32s;
  will-change:transform;
}
.service-card:hover {
  box-shadow:var(--shadow-hover); 
  transform:translateY(-7px) scale3d(1.038,1.038,1.03) rotateX(3deg) ;
  z-index:1;
}
.icon-svc svg {display:inline-block;}
/* Portfolio */
.portfolio-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(255px, 1fr)); gap:var(--sp-lg);
}
.portfolio-card {
  border-radius: var(--radius); background:var(--color-surface-dim);
  box-shadow:var(--shadow); overflow:hidden; 
  display:flex; flex-direction:column;
  position:relative; cursor:pointer; transition:box-shadow .19s, transform .16s;
  will-change:transform;
}
.portfolio-card:hover {box-shadow:var(--shadow-hover); transform:scale3d(1.036,1.036,1.02) rotateY(-1.5deg);}
.portfolio-thumb {
  position:relative; overflow:hidden; background:#191E33;
  width:100%; aspect-ratio:16/10; max-height:215px;
}
.portfolio-thumb img, .portfolio-thumb video {width:100%; height:100%; object-fit:cover;}
.portfolio-thumb video { position:absolute; top:0; left:0; opacity:0; pointer-events:none; transition:opacity .4s;}
.portfolio-card:hover .portfolio-thumb video { opacity:1;}
.portfolio-card:hover .portfolio-thumb img { opacity:0.13; }
.portfolio-info { padding:1em 1.2em; background: transparent;}
/* Clients */
.clients-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(176px,1fr)); gap:var(--sp);
  align-items:center; justify-items:center;
}
.client-logo {
  background: #fff1; color: #fff; font-weight:700;
  border-radius: var(--radius); padding:22px 10px; 
  font-size:1.18em; opacity:.76; text-align:center;
  transition:filter .22s, transform .14s, box-shadow .19s;
  filter: grayscale(100%) brightness(.6);
}
.client-logo:hover {
  filter: grayscale(0) brightness(1);
  box-shadow:0 6px 22px 0 rgba(255,183,77,0.23);
  background:#222a46;
  opacity:1; transform:scale(1.03) rotateY(-1deg);
}
/* Contact & form */
.contact-info {
  display:flex; flex-wrap:wrap; gap:var(--spXL,2em); align-items:flex-start;
}
.contact-detail {
  min-width:200px; font-size:1.01em; padding-top:0.5em;
}
.contact-detail a { color:var(--color-primary);}
.contact-form { min-width:260px; max-width:420px; width:100%; display:flex; flex-direction:column; gap:var(--sp);}
.form-group.material {
  position:relative; margin-bottom:var(--sp);
}
.form-group.material input,
.form-group.material textarea {
  background:none; border:none; border-bottom:2px solid #273c59;
  box-sizing:border-box; resize:none; font-family:inherit;
  font-size:1.02em; color:#fff; width:100%; padding:.62em 0 .22em .2em;
  outline:none; transition:.18s border-color;
}
.form-group.material label {
  position:absolute; left:.22em; top:1em; 
  font-size:1em; color:var(--color-text-sub); 
  pointer-events:none; transition:.22s all;
}
.form-group.material input:focus + label,
.form-group.material input:not(:placeholder-shown) + label,
.form-group.material textarea:focus + label,
.form-group.material textarea:not(:placeholder-shown) + label {
  top: -.9em; left:.05em; font-size:.95em; color:var(--color-primary); background:var(--color-surface);
  padding:0 .22em;
}
.form-group.material input:focus, .form-group.material textarea:focus { border-bottom:2px solid var(--color-primary);}
input,textarea { font-family:'Pretendard'; color:#fff; }
textarea { min-height:85px; }
.send-btn {margin-top:.8em;}
/* Quick Links */
.quick-links-list {display: flex; flex-wrap:wrap; gap:1.1em;}
.quick-links-list li {background: #222A44; border-radius:10px; box-shadow:var(--shadow); padding:.67em 1.4em;}
.quick-links-list a {color:var(--color-primary); font-weight:600;}
/* Modal */
.modal { 
  display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:var(--z-modal); 
  background: var(--modal-overlay); align-items:center; justify-content:center;
}
.modal.active {display:flex;}
.modal-content {
  padding:2em 2.3em; border-radius:var(--radius-lg); box-shadow:var(--shadow-hover);
  background: var(--color-surface); width:90vw; max-width:410px; position:relative;
}
.modal-close {
  position:absolute; right:1em; top:.8em; font-size:2.1em; color:#fff; background:none; border:none;
  cursor:pointer; line-height:1; z-index:2;
}
/* Toast */
.toast {
  display:none; position:fixed; left:50%; top:70px; min-width:240px; max-width:calc(100vw - 50px);
  z-index:var(--z-toast); border-radius:13px; background:#151F36ee; color:#fff2;
  color:#fff; padding:1.18em 2em; text-align:center;
  font-size:1.12em; font-weight:700; box-shadow:var(--shadow-hover); transform:translateX(-50%);
}
.toast.active {display:block;}
/* Floating Button */
.floating-kakao {
  position:fixed; right:2.2em; bottom:2.2em; z-index:1500;
  width:56px; height:56px; background:var(--color-kakao);
  border-radius: 50%; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 5px 20px 0 #ffb74dcc, 0 2.5px 8px #b18e5a44;
  transition: box-shadow .19s, transform .19s;
}
.floating-kakao:hover {box-shadow:0 7px 32px 0 #ffb74d,0 5px 15px #FFB74D78; transform:scale(1.13);}
.footer {
  background: var(--color-bg-light); color:var(--color-text-sub); padding:2.2em 0 1.2em 0; font-size:1.02em;
  border-top:1px solid #232a4488; width:100%; 
}
.footer-inner {max-width:var(--max-width); margin:0 auto; display:flex; flex-direction:column;}
.footer-info {margin-bottom:.3em; display:flex; flex-direction:column; gap:.31em;}
.footer-float-btns {position:relative;}
/* Responsive */
@media (max-width:1000px) {
  .section, .navbar-inner { padding-left:var(--sp); padding-right:var(--sp);}
}
@media (max-width:820px) {
  .grid-3 {grid-template-columns:1fr;}
  .services-grid.grid-4 {grid-template-columns:1fr 1fr;}
  .about-corevalues .corevalue {margin:.3em;}
}
@media (max-width:680px) {
  .navbar-inner {height:auto; flex-direction:column; gap:0;}
  .nav-menu {gap:1em;}
  .section {padding:var(--sp);}
  .section.card-wide {padding:var(--sp) 0;}
  .hero-title {font-size:clamp(2rem,7vw,3.3rem);line-height:1.18;}
  .container.hero-content {max-width:97vw;}
}
@media (max-width:480px) {
  h1 {font-size:2.1rem;}
  .services-grid.grid-4, .portfolio-grid, .clients-grid {grid-template-columns:1fr;}
  .container.hero-content {padding:var(--sp);}
  .footer-inner {padding:var(--sp);}
}