/* =========================================================
   Sean&Ivy NL — 사이트 공통 스타일
   - tailwind.css : 미리 컴파일된 유틸리티 클래스(이미 쓰인 것만 들어 있음)
   - site.css     : 기본 설정 + 모션 (새 스타일은 여기에 추가)
   ========================================================= */
:root{
  color-scheme:light;
  --ink:#0E1A2E;      /* 네이비: 본문·다크 섹션 */
  --paper:#ffffff;    /* 바탕 */
  --lime:#D6FF4D;     /* 포인트 */
  --safe-area-inset-top:env(safe-area-inset-top,0px);
}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;font-family:Pretendard,"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
img{max-width:100%}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[role="link"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== MOTION ===== */
.ln{display:block;position:relative;z-index:0}
.mq-wrap{flex:1 1 520px;min-width:0}
.mq-wrap>div:first-child{flex:none}
.mq{flex:1 1 0;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content}
.mq-set{display:flex;gap:12px;padding-right:12px}
.mq-set>div{flex:none;white-space:nowrap}
.tk{overflow:hidden;padding-top:34px;margin-bottom:-30px;pointer-events:none;user-select:none}
.tk-shift{transform:translateX(calc(var(--sy,0)*-0.12px));will-change:transform}
.tk-track{display:flex;width:max-content;font-weight:900;font-size:clamp(44px,8.5vw,116px);line-height:1;letter-spacing:-.04em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(214,255,77,.6)}
.tk-track>span{padding-right:.3em}
.sp-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lime);transform-origin:left center;transform:scaleX(var(--prog,0));pointer-events:none}
header{transition:box-shadow .3s ease}
header.hd-on{box-shadow:0 10px 30px rgba(14,26,46,.07)}
.sp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(214,255,77,.17),transparent 62%)}
.sp-card:hover::before{opacity:1}
@media (prefers-reduced-motion:reduce){
  .mq-track{flex-wrap:wrap;width:auto;row-gap:10px}
  .mq-set[aria-hidden]{display:none}
  .mq{-webkit-mask-image:none;mask-image:none}
  .tk{display:none}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes lineIn{from{opacity:0;transform:translateY(.55em);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes hlDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes tileIn{from{opacity:0;transform:translateY(26px) scale(.95);clip-path:inset(10% 10% 10% 10% round 24px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 24px)}}
  @keyframes mqMove{to{transform:translateX(-25%)}}
  @keyframes rvIn{from{opacity:0;transform:translateY(30px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
  @keyframes csIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  @keyframes popIn{0%{opacity:0;transform:scale(.94)}60%{transform:scale(1.02)}100%{opacity:1;transform:none}}
  @keyframes spinIn{from{transform:rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes barUp{from{transform:translateY(110%)}to{transform:none}}

  /* 히어로: 로딩 시 한 줄씩 등장 */
  #hero .ln{animation:lineIn .95s cubic-bezier(.2,.8,.2,1) both}
  #hero .ln:nth-child(1){animation-delay:.12s}
  #hero .ln:nth-child(2){animation-delay:.24s}
  #hero .ln:nth-child(3){animation-delay:.36s}
  #hero .hl{transform-origin:left center;animation:hlDraw .7s cubic-bezier(.7,0,.2,1) .85s backwards}
  #hero>div>div:first-child>:not(h1){animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) backwards}
  #hero>div>div:first-child>:nth-child(1){animation-delay:.04s}
  #hero>div>div:first-child>:nth-child(3){animation-delay:.52s}
  #hero>div>div:first-child>:nth-child(4){animation-delay:.64s}
  #hero>div>div:first-child>:nth-child(5){animation-delay:.76s}
  #hero .grid-cols-12>*{animation:tileIn 1s cubic-bezier(.2,.8,.2,1) backwards}
  #hero .grid-cols-12>:nth-child(1){animation-delay:.28s}
  #hero .grid-cols-12>:nth-child(2){animation-delay:.42s}
  #hero .grid-cols-12>:nth-child(3){animation-delay:.52s}
  #hero .grid-cols-12>:nth-child(4){animation-delay:.62s}
  /* 히어로 사진 패럴랙스 */
  #hero .grid-cols-12 img{transform:translateY(calc(var(--sy,0)*var(--k,.03)*1px)) scale(1.14);will-change:transform}
  #hero .grid-cols-12>:nth-child(2) img{--k:.05}
  #hero .grid-cols-12>:nth-child(3) img{--k:.02}
  /* 브랜드 마키 · 타이포 티커 */
  .mq-track{animation:mqMove 26s linear infinite}
  .mq:hover .mq-track{animation-play-state:paused}
  .tk-track{animation:mqMove 38s linear infinite}
  /* 스크롤 리빌 */
  .rv-pre{opacity:0;transform:translateY(30px);filter:blur(8px)}
  .rv-go{animation:rvIn .85s cubic-bezier(.2,.75,.2,1) var(--d,0ms) both}
  /* 카드 */
  .sp-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .25s ease,border-color .25s ease}
  .sp-card:hover{transform:translateY(-5px);border-color:rgba(214,255,77,.38)}
  .cs-in{animation:csIn .6s cubic-bezier(.2,.75,.2,1) backwards}
  .cs-in:hover{transform:translateY(-6px)}
  /* 버튼 화살표 */
  svg.lucide{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
  button:hover>svg.lucide-arrow-right{transform:translateX(4px)}
  button:hover svg.lucide-arrow-up-right{transform:translate(2px,-2px)}
  /* FAQ · 메뉴 · 알림 */
  .faq-a{animation:dropIn .38s cubic-bezier(.2,.75,.2,1) both}
  #faq button>div:last-child svg{animation:spinIn .3s ease both}
  .menu-in{animation:dropIn .3s cubic-bezier(.2,.75,.2,1) both}
  .pop{animation:popIn .4s cubic-bezier(.2,.75,.2,1) both}
  #root>div>.fixed.bottom-0{animation:barUp .7s cubic-bezier(.2,.8,.2,1) 1s backwards}
}

/* ===== DESIGN v2 (2026-10-03) ===== */
#root{overflow-x:clip}
/* 상단 메뉴: 선택된 메뉴에 밑줄 */
header .h-\[72px\]{height:76px}
nav [data-nav]{position:relative}
nav [data-nav]::after{content:"";position:absolute;left:50%;bottom:3px;width:0;height:2px;border-radius:2px;background:var(--ink);transform:translateX(-50%);transition:width .25s ease}
nav [data-nav]:hover::after{width:14px}
nav .nav-on{font-weight:700}
nav .nav-on::after{width:20px}
/* 좁은 화면: 메뉴를 헤더 아래 한 줄로 항상 노출 (옆으로 밀어서 보기) */
.subnav{display:flex;gap:2px;overflow-x:auto;padding:0 16px 8px;margin-top:-6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav::-webkit-scrollbar{display:none}
.subnav-item{flex:none;padding:8px 12px;border-radius:9999px;font-size:14px;font-weight:500;white-space:nowrap;color:rgba(14,26,46,.7)}
.subnav-item.nav-on{color:var(--ink)}
@media (min-width:768px){.subnav{padding:0 24px 8px}.subnav-item{font-size:14.5px}}
@media (max-width:1023px){html{scroll-padding-top:136px}}
@media (min-width:1024px){.subnav{display:none}}
/* 섹션 머리말: 라임 점 */
.tracking-\[0\.16em\].font-bold{display:inline-flex;align-items:center;gap:8px}
.tracking-\[0\.16em\].font-bold.opacity-40{opacity:1;color:rgba(14,26,46,.5)}
.tracking-\[0\.16em\].font-bold::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--lime);box-shadow:0 0 0 1px rgba(14,26,46,.85)}
#services .tracking-\[0\.16em\].font-bold::before{box-shadow:none}
h2{letter-spacing:-.045em}
/* 히어로: 은은한 라임 빛 */
#hero{position:relative;isolation:isolate}
#hero::before{content:"";position:absolute;z-index:-1;top:-120px;right:-160px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(214,255,77,.32),rgba(214,255,77,0) 65%);pointer-events:none}
@media (min-width:1024px){#hero h1{font-size:76px}}
/* 서비스: 격자 무늬 바탕 */
#services{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px}
/* 포트폴리오 카드 */
.cs-in{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
.cs-in:hover{border-color:rgba(14,26,46,.3)}
/* 남색 버튼: 마우스를 올리면 라임 */
button.bg-\[\#0E1A2E\]:not([data-tab]){transition:background-color .2s ease,color .2s ease}
button.bg-\[\#0E1A2E\]:not([data-tab]):hover{background-color:var(--lime);color:var(--ink)}
button.bg-\[\#0E1A2E\]:not([data-tab]):hover svg{color:var(--ink)}
/* 푸터 대형 워드마크 */
.ft-word{margin-top:56px;overflow:hidden;white-space:nowrap;font-weight:900;font-size:clamp(44px,12vw,164px);line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(214,255,77,.35)}

/* ===== 기존 seannivy.com 내용 반영 (2026-10-03) ===== */
/* 회사소개: COMPANY · E-Business Frontier 머리글 */
.ab-lead{margin-bottom:36px;padding-bottom:32px;border-bottom:1px solid rgba(14,26,46,.1)}
.ab-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:rgba(14,26,46,.5)}
.ab-title{margin-top:10px;font-size:clamp(30px,4.4vw,48px);font-weight:900;line-height:1.05;letter-spacing:-.04em}
.ab-title::after{content:"";display:block;width:56px;height:3px;margin-top:20px;background:var(--lime);box-shadow:0 0 0 1px rgba(14,26,46,.85)}
.ab-text{margin:22px 0 0;font-size:15.5px;line-height:1.9;color:rgba(14,26,46,.7)}
/* 회사소개: OUR VALUES · OUR PEOPLE 사진 카드 */
.vp-grid{display:grid;gap:20px;margin-top:64px}
@media (min-width:768px){.vp-grid{grid-template-columns:1fr 1fr}}
.vp-card{position:relative;overflow:hidden;border-radius:28px;min-height:340px;background:var(--ink);color:#fff;isolation:isolate}
.vp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vp-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,26,46,.88),rgba(14,26,46,.25) 70%)}
.vp-body{position:absolute;left:0;right:0;bottom:0;padding:28px}
@media (min-width:768px){.vp-body{padding:36px}}
.vp-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--lime)}
.vp-title{margin-top:12px;max-width:440px;font-size:clamp(24px,2.6vw,32px);font-weight:800;line-height:1.15;letter-spacing:-.03em}
/* Partners: 브랜드 카드 */
.br-grid{display:grid;gap:16px;margin-top:40px}
@media (min-width:640px){.br-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.br-grid{grid-template-columns:repeat(4,1fr)}}
.br-card{position:relative;overflow:hidden;border-radius:24px;min-height:380px;background:var(--ink);color:#fff;isolation:isolate}
.br-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.br-card:hover img{transform:scale(1.04)}
.br-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,26,46,.92) 8%,rgba(14,26,46,.15) 68%)}
.br-body{position:absolute;left:0;right:0;bottom:0;padding:24px}
.br-name{font-size:24px;font-weight:900;letter-spacing:-.03em}
.br-desc{margin:10px 0 0;font-size:13px;line-height:1.65;color:rgba(255,255,255,.75)}

/* 서비스: 사진 카드 3개 + 글 카드 4개 */
.svc-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:768px){.svc-grid-3{grid-template-columns:repeat(3,1fr)}.svc-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.svc-grid-4{grid-template-columns:repeat(4,1fr)}}
.svc-photo{display:flex;flex-direction:column}
.svc-img{aspect-ratio:4/3;overflow:hidden;background:rgba(255,255,255,.04)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.svc-photo:hover .svc-img img{transform:scale(1.04)}
.svc-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:28px}
.svc-body > button{margin-top:auto;padding-top:28px}
.svc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.svc-chips li{font-size:11.5px;padding:5px 10px;border-radius:9999px;border:1px solid rgba(214,255,77,.35);color:rgba(255,255,255,.8)}
@media (min-width:768px){.svc-body{padding:32px}}
.svc-text{display:flex;flex-direction:column;align-items:flex-start}
.svc-text > button{margin-top:auto;padding-top:32px}

/* 함께한 브랜드: 로고 (평소 회색, 마우스 올리면 원래 색) */
.mq-logo{height:36px;padding:0 18px;border-radius:9999px;border:1px solid rgba(0,0,0,.1);background:#fff;display:flex;align-items:center;gap:6px}
.mq-logo img{height:18px;width:auto;display:block;filter:grayscale(1);opacity:.65;transition:filter .25s ease,opacity .25s ease}
.mq-logo:hover img{filter:none;opacity:1}
.mq-logo-mark img{height:14px}
.mq-logo-mark span{font-size:11px;font-weight:900;letter-spacing:.1em;color:rgba(14,26,46,.65)}
.mq-logo-volvo img{height:12px}
.mq-logo-rw img{height:15px}
.mq-logo-bobux img{height:20px}
.mq-logo-bobux img{filter:grayscale(1) brightness(.55)}.mq-logo-bobux:hover img{filter:none}

/* 브랜드 로고: Partners 카드 이름, 포트폴리오 카드 태그 (흰색 로고) */
.br-card img.br-logo{position:static;inset:auto;width:auto;height:24px;max-width:100%;object-fit:contain;z-index:auto;transform:none;display:block}
.br-card img.br-logo-volvo{height:16px}
.br-name-mark{display:flex;align-items:center;gap:10px}
.br-card img.br-logo-arys{height:24px}
.cs-tag-logo{height:22px;padding:0 10px;border-radius:9999px;background:#000;display:flex;align-items:center}
.cs-tag-logo img{height:10px;width:auto;display:block}
.cs-tag-volvo img{height:7px}
.cs-tag-bobux img,.cs-tag-dlab img{height:12px}
.cs-tag-arys{gap:5px}.cs-tag-arys img{height:9px}.cs-tag-arys span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#fff}

/* ===== 모바일 최적화 (767px 이하) ===== */
.swipe-hint{display:none}
@media (max-width:767px){
  body{padding-bottom:84px}
  section .py-20{padding-top:64px;padding-bottom:64px}
  /* 입력칸 16px: iOS 확대 방지 */
  input,textarea,select{font-size:16px!important}
  /* 포트폴리오 탭: 한 줄 가로 스크롤 */
  .cs-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:0 24px 4px;width:calc(100% + 48px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-tabs::-webkit-scrollbar{display:none}
  .cs-tabs>button{flex:none}
  /* 옆으로 넘기는 카드 (포트폴리오, Partners) */
  .swipe-hint{display:flex;align-items:center;gap:6px;margin-top:20px;font-size:12px;font-weight:600;color:rgba(14,26,46,.5)}
  [data-panel]:not([hidden]),.br-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-24px;margin-right:-24px;padding:0 24px 8px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  [data-panel]::-webkit-scrollbar,.br-grid::-webkit-scrollbar{display:none}
  [data-panel]>*,.br-grid>*{flex:0 0 84%;scroll-snap-align:start}
  #cases [data-panel]{margin-top:16px}
  .br-grid{margin-top:16px}
  .br-card{min-height:360px}
  /* 서비스 카드 여백 줄이기 */
  .svc-body{padding:24px}
  .svc-text{padding:24px!important}
  .svc-text>div:nth-child(2){margin-top:16px}
  .svc-grid{gap:14px}
  /* 누르기 쉬운 크기 */
  [data-faq]{min-height:44px}
  footer a{display:inline-block;padding:6px 0}
  /* 고정 문의 버튼: 문의 영역에서는 숨김 */
  .m-cta{transition:opacity .25s ease,transform .25s ease}
  .m-cta.is-off{opacity:0;transform:translateY(100%);pointer-events:none}
}

/* ===== 문의 폼: 첨부파일, 개인정보 동의 ===== */
.cf-file{margin-top:10px;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px 6px 6px;border:1px dashed rgba(14,26,46,.25);border-radius:9999px;cursor:pointer;position:relative}
.cf-file:hover{border-color:var(--ink)}
.cf-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cf-file:focus-within{border-color:var(--ink);border-style:solid}
.cf-file-btn{flex:none;height:36px;padding:0 16px;border-radius:9999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center}
.cf-file-name{flex:1;min-width:0;font-size:13px;color:rgba(14,26,46,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-file-clear{flex:none;width:32px;height:32px;border-radius:9999px;font-size:18px;line-height:1;color:rgba(14,26,46,.6)}
.cf-file-clear:hover{background:rgba(14,26,46,.06)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-consent{margin-top:22px;padding:14px 16px;border-radius:16px;background:#F6F6F3}
.cf-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:600;cursor:pointer;line-height:1.5}
.cf-check input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:#0E1A2E}
.cf-terms{margin-top:8px;font-size:12px;color:rgba(14,26,46,.65)}
.cf-terms summary{cursor:pointer;display:inline-block;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.cf-terms ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;line-height:1.6}
.cf-terms b{display:inline-block;min-width:64px;color:var(--ink)}
button[data-submit][disabled]{opacity:.6;cursor:wait}

/* 첫 화면 사진 묶음: 사진은 두 줄뿐이라 줄도 두 개만 (빈 세 번째 줄 때문에 생기던 여백 제거) */
.hero-photos{grid-template-rows:200px 140px}
@media (min-width:768px){.hero-photos{grid-template-rows:300px 180px}}
#hero{padding-bottom:40px}
@media (min-width:768px){#hero{padding-bottom:56px}}
/* 첫 화면 제목: 위아래 글자가 겹치지 않게 줄 간격 확보 */
#hero h1{line-height:1.12}
#hero h1 .ln+.ln{margin-top:.04em}

/* 포트폴리오 더 보기/접기 (PC·태블릿) */
.cs-more-wrap{display:flex;justify-content:center;margin-top:40px}
.cs-more-wrap[hidden]{display:none}
.cs-more-count{font-size:12px;font-weight:700;padding:2px 8px;border-radius:9999px;background:var(--lime);color:var(--ink)}
.cs-more-count:empty{display:none}
.cs-more-ico{transition:transform .25s ease}
[data-more].is-open .cs-more-ico{transform:rotate(180deg)}
@media (min-width:768px){.cs-extra{display:none!important}}
@media (max-width:767px){.cs-more-wrap{display:none!important}}

/* 언어 전환 (KO | EN) */
.lang-sw{display:flex;align-items:center;height:36px;padding:3px;border:1px solid rgba(14,26,46,.15);border-radius:9999px;font-size:12px;font-weight:700;letter-spacing:.04em}
.lang-sw a{display:grid;place-items:center;min-width:36px;height:28px;padding:0 8px;border-radius:9999px;color:rgba(14,26,46,.55);text-decoration:none;transition:background-color .2s ease,color .2s ease}
.lang-sw a:hover{color:var(--ink)}
.lang-sw a[aria-current="page"]{background:var(--ink);color:#fff}

/* 모바일 상단 메뉴: 다섯 개가 옆으로 밀지 않아도 한 화면에 다 보이게 */
@media (max-width:767px){
  .subnav{justify-content:space-between;gap:0;padding:0 12px 8px;overflow:hidden}
  .subnav-item{padding:8px 5px;font-size:13.5px;letter-spacing:-.01em}
}
@media (max-width:374px){
  .subnav{padding:0 8px 8px}
  .subnav-item{padding:8px 3px;font-size:12.5px}
}
@media (max-width:374px){html[lang="en"] .subnav-item{padding:8px 2px;font-size:12px;letter-spacing:-.02em}}
/* 좁은 화면: 로고가 두 줄로 꺾이지 않게 (KO|EN 버튼 자리 확보) */
header [data-go="hero"] span{white-space:nowrap}
@media (max-width:429px){header [data-go="hero"] span+span{display:none}}