@charset "utf-8";

@font-face{
  font-family: "PolySans Bulky";
  src: url("/assets/home/font/PolySans_Bulky/polySans_bulky.eot");
  src: url("/assets/home/font/PolySans_Bulky/polySans_bulky.eot?#iefix")format("embedded-opentype"),
       url("/assets/home/font/PolySans_Bulky/polySans_bulky.woff")format("woff"),
       url("/assets/home/font/PolySans_Bulky/polySans_bulky.woff2")format("woff2"),
       url("/assets/home/font/PolySans_Bulky/polySans_bulky.ttf")format("truetype"),
       url("/assets/home/font/PolySans_Bulky/polySans_bulky.svg#PolySans Bulky")format("svg");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family: "PolySans Slim Italic";
  src: url("/assets/home/font/PolySans_Bulky/polysans_slim_italic.eot");
  src: url("/assets/home/font/PolySans_Bulky/polysans_slim_italic.eot?#iefix")format("embedded-opentype"),
      url("/assets/home/font/PolySans_Bulky/polysans_slim_italic.woff")format("woff"),
      url("/assets/home/font/PolySans_Bulky/polysans_slim_italic.woff2")format("woff2"),
      url("/assets/home/font/PolySans_Bulky/polysans_slim_italic.ttf")format("truetype"),
      url("/assets/home/font/PolySans_Bulky/polysans_slim_italic.svg#PolySans Slim Italic")format("svg");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css); /* font-family: 'Nanum Square', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400&display=swap'); /* font-family: 'Noto Sans KR', sans-serif !important; */
@import url('https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;500;600;700&display=swap'); /* font-family: "Palanquin Dark", serif; */

/* 초기화 */
html {overflow-y:scroll; min-width:1400px;}
body {margin:0;padding:0;font-size:0.75em;font-family:'Noto Sans KR', sans-serif; background:#f5f5f4; word-break: keep-all !important;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR', sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR', sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR', sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

button, button:focus, button:active { outline:none; -webkit-tap-highlight-color: transparent;}
a, a:focus, a:active { outline:none; -webkit-tap-highlight-color: transparent;}
input, input:focus, input:active { outline:none; -webkit-tap-highlight-color: transparent;}
div, div:focus, div:active{ outline:none; -webkit-tap-highlight-color: transparent;}

input[type=text],input[type=password], textarea {outline:none;}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {}

.placeholdersjs {color:#aaa !important}

:root{
  --bg:#f7f7f7;
  --bg2:#f6f6f6;
  --text:#111111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 16px 40px rgba(0,0,0,.08);
  --shadow2: 0 10px 28px rgba(0,0,0,.08);
  --radius: 14px;
  --radius2: 18px;
  --container: 1440px;
  --topnav-h: 80px;
  --focus: rgba(17,17,17,.18);
  --ease: cubic-bezier(.2,.8,.2,1);
  --yellow: #f5c400;

  --brand-1: #cd2bb2;
  --brand-2: #fa6729;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}
html,body{height:100%}
body{
  margin:0;
  font-family:
    'Noto Sans KR',
    system-ui,
    -apple-system,
    'Apple SD Gothic Neo',
    'Segoe UI',
    Roboto,
    Arial,
    'Apple Color Emoji',
    'Segoe UI Emoji';
  color:var(--text);
  background:var(--bg);
  letter-spacing: -.2px;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit}

/* container */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 25px;
}

/* header */
.top-gap{height:var(--topnav-h)}
header.site-header{
  position:fixed;
  z-index:50;
  left:0; top:0; right:0;
  height:var(--topnav-h);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.site-header.scrolled{
  border-bottom-color: var(--border);
  background: rgba(255,255,255,.92);
}
.nav-row{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:bold; font-size: 15px;;
}
.brand img{width:120px; height:auto; display:block}
.brand-mark{
  width:28px; height:28px;
  border-radius: 10px;
  background: var(--text);
  position:relative;
  overflow:hidden;
}
.brand-mark:after{
  content:"";
  position:absolute; inset:7px;
  border-radius: 7px;
  background: #fff;
  opacity:.12;
}
nav.primary{
  display:none;
  align-items:center;
  gap:22px; font-size: 17px;
  font-weight:bold;
  color: rgba(17,17,17,.92);
  margin-left: auto;
}
nav.primary a{
  position:relative;
  padding: 6px 0;
}
nav.primary a:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
  opacity:.55;
}
nav.primary a:hover:after{transform:scaleX(1)}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:50px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight:bold; font-size: 15px;;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  outline:none;
}
.btn:focus {box-shadow:0 0 0 6px var(--focus)}
.btn:hover {border-color: rgba(17,17,17,.25); box-shadow: 0 8px 18px rgba(0,0,0,.07)}
.btn:active {transform:scale(.98)}
.btn.primary {
  background: linear-gradient(20deg, var(--brand-1), var(--brand-2));
  color:#fff;
  border:0px;
}
.btn.primary:hover {border:0px; box-shadow: 0 8px 18px rgba(0,0,0,.07)}
.btn.icon{
  width:44px;
  padding:0;
}
.icon-dots{
  width:18px; height:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:3px;
}
.icon-dots span{
  width:100%;
  height:100%;
  background: currentColor;
  border-radius: 3px;
}
.mobile-menu{
  position:fixed;
  left:0; right:0;
  top:var(--topnav-h);
  background:#fff;
  border-bottom:1px solid var(--border);
  transform: translateY(-10px);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index:49;
  display:block;
}
.mobile-menu.open{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-menu .container{
  padding-top: 14px;
  padding-bottom: 18px;
  display:grid;
  gap:10px;
}
.mobile-menu a{
  padding: 12px 10px;
  border:1px solid var(--border);
  border-radius: 12px;
  font-weight:700;
  background: #fff;
}

/* hero */
.hero{
  padding-top: 0px;
  padding-bottom: 18px;
}
.hero-title-section{
  position: relative;
  height: calc(100vh - var(--topnav-h));
  overflow: hidden;
}
.hero-background{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-background::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.95) 100%);*/
  z-index: 1;
}
.hero-content-wrapper{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  padding-bottom: 80px;
}
.hero-container{
  position: relative;
  max-width: 1080px;
  width: 100%;
  padding: 0 25px;
}
.hero-content{
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  padding: 0;
}
.hero h1{
  margin: 0 0 20px;
  font-size: clamp(48px, 7vw, 57px);
  line-height: 1.3;
  letter-spacing: -32x;
  font-weight: 700;
  color: #111;
}
.hero h1 .muted{color: rgba(17,17,17,.45)}
.hero-subtitle{
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  color: rgba(17,17,17,.7);
  margin: 0 0 35px;
  font-weight: 400;
}
.hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.btn-primary-dark{
  background: #111;
  color: #fff;
  border: 0;
  padding: 0 28px;
  height: 56px;
  font-size: 16px;
  font-weight: 600;
  border-radius:999px;
  transition: all 0.2s ease;
}
.btn-primary-dark:hover{
  background: #333;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  transform: translateY(-1px);
}
.btn-secondary-light{
  background: #fff;
  color: #111;
  border: 1px solid rgba(17,17,17,.15);
  padding: 0 28px;
  height: 56px;
  font-size: 16px;
  font-weight: 600;
  border-radius:999px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-secondary-light:hover{
  border-color: rgba(17,17,17,.25);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.btn-icon{
  font-size: 20px;
  line-height: 1;
}
.hero-trusted-block{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  width: 100%;
  background: #111;
  padding: 30px 0;
}
.trusted-container{
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.trusted-content{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.trusted-text{
  display: flex;
  align-items: center;
}
.trusted-label{
  color: rgba(255,255,255,.8);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.trusted-separator{
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}
.trusted-partners{
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}
.trusted-partner-item{
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.trusted-partner-item:hover{
  opacity: 1;
}
.trusted-partner-item img{
  max-width: 150px;
  max-height: 30px;
  width: auto;
  height: auto;
  min-width: 50px;
  min-height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}
.trusted-partner-item img[src*="tourtree"]{
  height: 30px;
  width: auto;
}
.trusted-icon{
  font-size: 18px;
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
}
.hero-anim span{
  display:inline-block;
  transform: translateY(0.9ch);
  opacity: 0;
  animation: rise .62s var(--ease) forwards;
}
.hero-anim span:nth-child(1){animation-delay:.05s}
.hero-anim span:nth-child(2){animation-delay:.12s}
.hero-anim span:nth-child(3){animation-delay:.19s}
.hero-anim span:nth-child(4){animation-delay:.26s}
.hero-anim span:nth-child(5){animation-delay:.33s}
@keyframes rise{
  to{transform: translateY(0); opacity: 1}
}

/* highlights */
.highlights{
  margin-top: 150px;
  margin-bottom: 0px;
}
.hl-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  position:relative;
  padding: 0px;
  border-radius: 18px;
  background: var(--bg2);
  border: 0px solid var(--border);
}
.hl-card {
  display:flex;
  gap:14px;
  padding: 0px;
  border-radius: 14px;
  background:none;
  border: 0px solid rgba(0,0,0,.04);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.hl-card:hover{}
.hl-thumb{
  width:96px;
  height:72px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
  overflow:hidden;
  flex-shrink:0;
}
.hl-thumb img{width:100%; height:100%; object-fit:cover}
.hl-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.hl-title{
  font-size: 16px;
  line-height: 1.2;
  font-weight:bold;
  letter-spacing:-.4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.hl-sub{
  font-size: 13px;
  color: var(--muted);
  font-weight:normal;
}

/* showreel */
.showreel-container{
  position:relative;
  margin: 30px 0;
  overflow:hidden;
  height:0;
  padding-bottom:56.25%; /* 16:9 aspect ratio */
}
.showreel{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: #000;
  transition: clip-path 0.3s ease, z-index 0.3s ease;
  cursor:pointer;
  z-index:1;
}
.showreel:nth-child(1){
  clip-path:inset(0 75% 0 0);
}
.showreel:nth-child(2){
  clip-path:inset(0 50% 0 25%);
}
.showreel:nth-child(3){
  clip-path:inset(0 25% 0 50%);
}
.showreel:nth-child(4){
  clip-path:inset(0 0 0 75%);
}
/* showreel hover 효과는 JavaScript로 제어 */
.showreel.expanded{
  clip-path:inset(0 0 0 0) !important;
  z-index:10 !important;
}
.showreel video, .showreel img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:.96;
}
.showreel .overlay{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.0), rgba(0,0,0,.25));
  pointer-events:none;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color:#111;
  font-weight:900;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  letter-spacing:-.3px;
}
.play-dot{
  width:36px; height:36px;
  border-radius: 999px;
  background:#111;
  display:grid;
  place-items:center;
  color:#fff;
  font-size: 12px;
}

/* section titles */
.section{
  padding: 70px 0;
}
.section h2{
  font-size: clamp(28px, 4vw, 54px);
  margin: 0 0 12px;
  letter-spacing: -.9px;
}
.section h2 .muted{color: rgba(17,17,17,.45)}
.section .lead{
  margin: 0;
  max-width: 760px;
  color: rgba(17,17,17,.55);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  font-weight:normal;
}

/* Selected work list */
.work-list{
  margin-top: 50px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.work-item{
  border-bottom: 1px solid var(--border);
  padding: 70px 0;
  transition: background .2s var(--ease);
}
.work-item:last-child{border-bottom:0}
.work-inner{
  display:grid;
  gap:18px;
}
.work-head h3{
  margin: 0;
  font-size: clamp(26px, 3.6vw, 35px);
  letter-spacing: -.1px;
  color: rgba(17,17,17,.45);
}
.work-head p{
  margin: 15px 0 0;
  font-size: clamp(22px, 3.2vw, 35px);
  line-height: 1.5;
  letter-spacing: -.1px;
  font-weight:bold;
  max-width: 720px;
}
.work-actions{
  margin-top: 16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.work-media{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(0,0,0,.10), rgba(0,0,0,.02));
  aspect-ratio: 4 / 3;
}
.work-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.work-nav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px;
  pointer-events:none;
}
.work-nav button{
  pointer-events:auto;
  width:42px; height:42px;
  border-radius:999px;
  border:0;
  background: rgba(17,17,17,.92);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.work-item:hover .work-nav button{opacity:1; transform: translateY(0)}
.work-nav button:focus{outline:none; box-shadow:0 0 0 6px rgba(255,255,255,.22)}
.work-item:hover{background: rgba(0,0,0,.02)}
.arrow{
  width:14px; height:14px;
  border: 2px solid currentColor;
  border-left:0; border-top:0;
  transform: rotate(-45deg);
  margin-left: -2px;
}
.arrow.left{transform: rotate(135deg); margin-left:2px}

/* Services (2-column) */
.services{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.services-grid{
  display:grid;
  gap:22px;
  align-items:center;
}
.services-visual{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg2);
  padding: 22px;
  min-height: 360px;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}
.services-orbit{
  width:min(420px, 92%);
  aspect-ratio:1/1;
  position:relative;
}
.orb{
  position:absolute;
  width: 96px;
  aspect-ratio:1/1;
  border-radius: 22px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow2);
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:-.6px;
  user-select:none;
}
.orb small{
  display:block;
  font-size: 12px;
  color: rgba(17,17,17,.55);
  font-weight:800;
  margin-top: 4px;
  letter-spacing:-.2px;
}
.orb:nth-child(1){left:8%; top:12%}
.orb:nth-child(2){right:8%; top:16%}
.orb:nth-child(3){left:18%; bottom:12%}
.orb:nth-child(4){right:14%; bottom:10%}
.services-copy h3{
  margin:0 0 12px;
  font-size: clamp(26px, 3.3vw, 44px);
  letter-spacing:-.9px;
  line-height:1.05;
}
.services-copy p{
  margin:0 0 18px;
  color: rgba(17,17,17,.55);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  font-weight:700;
  max-width: 680px;
}

/* Testimonials – “wall” 느낌 */
.testimonials{
  padding: 48px 0 36px;
}
.wall{
  margin-top: 26px;
  position:relative;
  min-height: 520px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: #fff;
  overflow:hidden;
}
.quote{
  position:absolute;
  width: min(360px, 76vw);
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow2);
  background: #fff;
}
.quote p{
  margin:0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(17,17,17,.78);
  font-weight:700;
}
.quote .who{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(17,17,17,.6);
  font-weight:800;
  font-size: 13px;
}
.avatar{
  width:28px; height:28px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,.04));
  border: 1px solid rgba(0,0,0,.08);
}
.quote.q1{left: 6%; top: 12%}
.quote.q2{left: 54%; top: 10%}
.quote.q3{left: 18%; top: 52%}
.quote.q4{left: 58%; top: 56%}
.quote.q5{left: 34%; top: 30%}
.wall-badge{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 86px; height: 86px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px dashed rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  color: rgba(17,17,17,.55);
  font-weight:900;
  letter-spacing:-.6px;
  user-select:none;
}

/* About */
.about{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.about-grid{
  display:grid;
  gap:22px;
  margin-top: 22px;
  align-items:stretch;
}
.about-card{
  border: 1px solid var(--border); text-align:center;
  border-radius: 18px;
  padding: 30px 25px;
  background: #fff;
  display:flex;
  flex-direction:column;
  height:100%;
}
.about-card h4{
  margin:0 0 10px;
  font-size: 23px;
  letter-spacing:-.4px;
}
.about-card p{
  margin:0;
  color: rgba(17,17,17,.55);
  font-weight:normal; font-size:15px;
  line-height: 1.55;
  flex:1;
}

/* Blog list */
.blog-list{
  margin-top: 20px;
  border-top: 1px solid var(--border);
}
.blog-row{
  display:grid;
  gap:10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: background .2s var(--ease);
}
.blog-row:hover{background: rgba(0,0,0,.02)}
.blog-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color: rgba(17,17,17,.55);
  font-weight:800;
  font-size: 13px;
}
.blog-title{
  font-size: 22px;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.2;
}
.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 8px;
}
.tag{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight:800;
  color: rgba(17,17,17,.7);
  background:#fff;
  font-size: 12px;
}

/* Careers */
.careers-grid{
  margin-top: 22px;
  display:grid;
  gap:50px;
  align-items:start;
}
.jobs{
  border-top: 1px solid var(--border);
}
.job{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-weight:bold;
}
.job span {font-size:23px}
.aside-yellow{
  border-radius: 18px;
  background: var(--yellow);
  padding: 28px 32px;
  border: 1px solid rgba(0,0,0,.08);
  min-height: 360px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.aside-yellow h3{
  margin:0 0 16px 0;
  font-size: 30px;
  letter-spacing:-.8px;
  line-height:1.2;
  font-weight:900;
}
.aside-yellow p{
  margin:0;
  font-weight:500;
  color: rgba(17,17,17,.75);
  line-height:1.7;
  font-size:15px;
}
.aside-yellow p strong{
  font-weight:800;
  color: rgba(17,17,17,.9);
}
.aside-yellow .btn{
  margin-top:auto;
  font-weight:700;
  padding:14px 24px;
  font-size:16px;
}

/* 전화 상담 모달 */
.consult-modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}
.consult-modal.is-open{
  opacity:1;
  visibility:visible;
}
.consult-modal-backdrop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
}
.consult-modal-content{
  position:relative;
  background:#fff;
  border-radius:20px;
  max-width:480px;
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  transform:scale(0.9);
  transition:transform 0.3s ease;
  overflow:hidden;
}
.consult-modal.is-open .consult-modal-content{
  transform:scale(1);
}
.consult-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(17,17,17,.6);
  border-radius:8px;
  transition:all 0.2s ease;
  z-index:10;
}
.consult-modal-close:hover{
  background:rgba(17,17,17,.05);
  color:rgba(17,17,17,.9);
}
.consult-modal-body{
  padding:40px 32px 32px;
  text-align:center;
}
.consult-modal-title{
  margin:0 0 8px;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.5px;
  color:#111;
}
.consult-modal-subtitle{
  margin:0 0 20px;
  font-size:18px;
  font-weight:600;
  color:var(--muted);
}
.consult-modal-desc{
  margin:0 0 32px;
  font-size:16px;
  line-height:1.6;
  color:rgba(17,17,17,.7);
}
.consult-modal-phone{
  margin-bottom:24px;
}
.consult-phone-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 32px;
  background:linear-gradient(20deg, var(--brand-1), var(--brand-2));
  color:#fff;
  border-radius:12px;
  font-size:24px;
  font-weight:700;
  text-decoration:none;
  transition:all 0.2s ease;
  box-shadow:0 4px 12px rgba(205,43,178,.3);
}
.consult-phone-link:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(205,43,178,.4);
}
.consult-phone-link:active{
  transform:translateY(0);
}
.consult-phone-link svg{
  flex-shrink:0;
}
.consult-modal-info{
  padding-top:20px;
  border-top:1px solid var(--border);
}
.consult-modal-info p{
  margin:0;
  font-size:14px;
  color:rgba(17,17,17,.5);
}

@media (max-width: 768px){
  .consult-modal-content{
    max-width:90%;
    border-radius:16px;
  }
  .consult-modal-body{
    padding:32px 24px 24px;
  }
  .consult-modal-title{
    font-size:24px;
  }
  .consult-modal-subtitle{
    font-size:16px;
  }
  .consult-modal-desc{
    font-size:15px;
  }
  .consult-phone-link{
    font-size:20px;
    padding:14px 24px;
  }
}

/* FAQ */
.faq{
  border-top:1px solid var(--border);
}
.faq-grid{
  margin-top: 18px;
  display:grid;
  gap:10px;
}
.faq-item{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.faq-q{
  width:100%;
  background:transparent;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
  cursor:pointer;
  font-weight:bold;
  font-size: 21px;
  text-align:left;
}
.chev{
  width:10px; height:10px;
  border: 2px solid currentColor;
  border-left:0; border-top:0;
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
  opacity:.7;
  flex-shrink:0;
}
.faq-item.open .chev{transform: rotate(225deg)}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition: max-height .25s var(--ease);
  color: rgba(17,17,17,.62);
  font-weight:750;
  line-height:1.6;
  padding-right: 22px;
}
.faq-item.open .faq-a {max-height: 260px; font-size: 15px; font-weight: normal; line-height: normal; margin-top:10px;}
.faq-a p{margin: 0 0 10px}
.faq-a p:last-child{margin:0}

/* Footer */
footer{
  padding: 70px 0 50px;
  background: #f7f7f7;
}
.footer-grid{
  display:grid;
  gap:30px;
  grid-template-columns: 1fr;
}
.footer-cols{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
  max-width: 500px;
}
.footer-grid .footer-desc{
  color:rgba(17,17,17,.55);
  font-size: 14px; max-width: 100%;
}
.footer-grid .footer-desc .desc-1{color:#000; padding-bottom: 0px; display:block; font-weight:bold;}
.footer-grid .footer-desc .desc-2{color:#000; font-size: 13px; line-height: 1.5; font-weight:normal}

.footer-desc {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-desc-info {
  display:flex; margin-top:35px;
  flex-direction:column;
  gap:10px;
}
.footer-desc-info .desc-1 {color:#000; font-size: 15px; display:block; line-height:1.5}
.footer-desc-info .desc-1 svg {vertical-align:middle; margin-top:-2px !important}
.footer-desc-info .desc-2 {color:rgba(17,17,17,.55); font-size: 13px; line-height: 1.5; font-weight:normal}
.footer-desc-info .desc-2 svg {vertical-align:middle; margin-top:-2px}

.foot-title{
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .0.5em;
  text-transform: uppercase; text-decoration: underline;
  color: rgba(17,17,17,.55);
  margin: 0 0 10px;
}
.foot-links a {
  display:inline-block;
  padding: 6px 0;
  font-weight:normal; font-size: 15px;
  color:#000;
}
.foot-links a:hover{color: rgba(17,17,17,.55)}
.partner-logos{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
  margin-top:15px;
}
.partner-logo-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 25px;
  background:#fff;
  border-radius:8px;
  transition:opacity 0.2s ease;
}
.partner-logo-item:hover{
  opacity:0.7;
}
.partner-logo-item img{
  max-width:100%;
  max-height:50px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.foot-bottom{
  margin-top: 30px;
  display:flex;
  align-items:top;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color: rgba(17,17,17,.55);
  font-weight:bold;
  font-size: 13px;
}

.foot-bottom .witive_link { text-align: right;}
.foot-bottom .witive_link a{ color:#000;}
.foot-bottom .witive_link span.name {}
.foot-bottom .witive_link span.pro-des { font-weight: normal; display: inline-block; width: 100%; font-size: 12px; padding:5px 0 0 0;}

/* responsive */
@media (min-width: 760px){
  nav.primary{display:flex}
  .mobile-menu{display:none !important}
  .btn.icon{display:none !important}
  .hl-grid{grid-template-columns: repeat(2, 1fr)}
  .work-inner{grid-template-columns: 1.1fr .9fr; align-items:stretch}
  .services-grid{grid-template-columns: 1fr 1fr}
  .about-grid{grid-template-columns: 1fr 1fr 1fr}
  .blog-row{grid-template-columns: 1fr}
  .careers-grid{grid-template-columns: 1fr 1fr}
  .faq-grid{grid-template-columns: 1fr 1fr; gap:30px 50px}
  .footer-grid{grid-template-columns: 1fr 1fr}
  .footer-cols{grid-template-columns: repeat(3, 1fr); max-width: 500px;}
  .partner-logos{grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1024px){
  .hl-grid{grid-template-columns: repeat(4, 1fr)}
  .quote{width: 360px}
  .wall{min-height: 560px}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .hero-anim span{animation:none; opacity:1; transform:none}
  .work-nav button{transition:none}
}