@font-face {
  font-family: 'Street';
  src: url('../fonts/11street.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* 전체 폰트 통일 */
*, body, input, textarea, button, select,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Street', 'Noto Sans KR', sans-serif !important;
}

:root{
  --bg:#ffffff;
  --ink:#1a1a1a;
  --ink-soft:#8a8a8a;
  --ink-mute:#c8c8c8;
  --coral:#E7ACCF;
  --coral-deep:#c9789e;
  --line:#e8e8e8;
  --line-mute:#f2f2f2;
  --line-soft:#f0f0f0;
  --max:1400px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;max-width:100%;background:var(--bg);color:var(--ink);line-height:1.75;font-weight:400;font-size:13px;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
section{padding:120px 0}
.center{text-align:center}

/* ══ 헤더: 중앙 정렬 미니멀 ══ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  padding:32px 0 0;
  transition:.3s;
}
.nav-wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.logo{display:block;margin:0 auto}
.logo img{height:56px;width:auto;object-fit:contain;filter:brightness(0)}
.nav-links{
  display:flex;gap:48px;
  font-size:12.5px;font-weight:400;letter-spacing:.18em;
  color:var(--ink-soft);
  padding-bottom:30px;
  border-bottom:1px solid transparent;
}
.nav-links a{
  position:relative;
  padding-bottom:3px;
  transition:.25s;text-decoration:none;color:inherit;
  text-transform:uppercase;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.here{color:#E7ACCF}
.nav-links a.here::after{
  content:"";position:absolute;
  left:0;bottom:-3px;
  width:calc(100% - .18em);  /* 자간 공백 보정 → 단어 정중앙 */
  height:2.5px;background:#E7ACCF;
}

/* 서브카테고리 (works.html 등) */
.sub-tabs{
  display:flex;gap:44px;justify-content:center;
  margin-top:-8px;padding-bottom:24px;
  font-size:13px;font-weight:400;letter-spacing:.15em;
}
.sub-tabs a, .sub-tabs button{
  color:var(--ink-mute);cursor:pointer;background:none;border:none;
  padding:0;transition:.25s;text-transform:uppercase;
}
.sub-tabs a:hover, .sub-tabs button:hover{color:var(--ink)}
.sub-tabs a.on, .sub-tabs button.on{color:var(--ink)}

/* ══ 페이지 상단 여백 ══ */
main, .page-body{padding-top:164px}

/* ══ 서브페이지 타이틀 ══ */
.page-head{padding:60px 0 40px;text-align:center}
.page-head h1{font-size:42px;font-weight:400;letter-spacing:.02em}
.page-head p{margin-top:15px;font-size:13px;color:var(--ink-soft);letter-spacing:.28em;text-transform:uppercase}

/* ══ 링크 스타일 ══ */
.lnk{
  display:inline-block;
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--ink);
  padding-bottom:6px;transition:.25s;
}
.lnk:hover{color:var(--coral);border-bottom-color:var(--coral);letter-spacing:.36em}

.btn{
  display:inline-block;border:1px solid var(--ink);padding:16px 44px;
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;transition:.3s;
  background:none;cursor:pointer;color:var(--ink);
}
.btn:hover{background:var(--ink);color:var(--bg)}

/* ══ 섹션 타이틀 ══ */
.sec-eyebrow{font-size:10px;letter-spacing:.32em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:18px}
.sec-title{font-size:clamp(20px,2.4vw,32px);line-height:1.25;font-weight:400;letter-spacing:.02em;margin-bottom:20px}
.sec-desc{color:var(--ink-soft);max-width:640px;font-size:14.5px;line-height:1.85}

/* ══ 수치 ══ */
.stats{padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat b{display:block;font-size:28px;font-weight:400;color:var(--ink);letter-spacing:.02em;margin-bottom:8px}
.stat b small{font-size:14px;color:var(--coral)}
.stat span{font-size:9.5px;color:var(--ink-soft);letter-spacing:.28em;text-transform:uppercase}

/* ══ 분야 리스트 (fields) ══ */
.fields-list{border-top:1px solid var(--line)}
.field-row{
  display:grid;grid-template-columns:60px 1fr 1.4fr;gap:44px;
  padding:44px 0;border-bottom:1px solid var(--line);align-items:start;
  transition:.3s;
}
.field-row:hover{padding-left:20px}
.field-row i{font-style:normal;font-size:10.5px;color:var(--coral);letter-spacing:.2em;padding-top:6px}
.field-row h3{font-size:16px;font-weight:400;line-height:1.4}
.field-row h3 small{display:block;font-size:10px;letter-spacing:.32em;color:var(--ink-mute);margin-bottom:8px;text-transform:uppercase}
.field-row p{color:var(--ink-soft);font-size:12.5px}

/* ══ 타임라인 (process) ══ */
.timeline{max-width:720px;margin:60px auto 0;position:relative}
.timeline::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:1px;background:var(--line)}
.t-step{display:grid;grid-template-columns:44px 1fr;gap:24px;padding:22px 0;position:relative}
.t-step i{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;color:var(--ink);background:var(--bg);position:relative;z-index:1;font-weight:400}
.t-step h4{font-size:14px;font-weight:400;margin-bottom:6px}
.t-step p{color:var(--ink-soft);font-size:12.5px}
.lead-time{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lt{padding:40px 20px;text-align:center;border-left:1px solid var(--line)}
.lt:first-child{border-left:none}
.lt b{display:block;font-size:18px;font-weight:400;color:var(--ink)}
.lt span{font-size:10.5px;color:var(--ink-soft);letter-spacing:.25em;text-transform:uppercase}

/* ══ 포트폴리오 - THE SALT 스타일 대형 그리드 ══ */
.works-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:0 8px;
}
.work{display:block;overflow:hidden;background:var(--line-soft)}
.work.hide{display:none}
.work-img{
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-mute);font-size:11px;letter-spacing:.3em;
  transition:.4s;overflow:hidden;
}
.work-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.work:hover .work-img img{transform:scale(1.03)}
.work-caption{padding:16px 8px 32px;text-align:center;display:none}
.work-caption h4{font-size:14px;font-weight:400}
.work-caption .spec{font-size:10.5px;letter-spacing:.2em;color:var(--ink-soft);margin-top:4px;text-transform:uppercase}

/* ══ About ══ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;max-width:1160px;margin:0 auto;padding:0 40px}
.about-grid .txt p{color:var(--ink-soft);margin-bottom:14px;font-size:13px;line-height:1.9}
.about-grid .txt p strong{color:var(--ink);font-weight:600}
.tools{margin-top:40px;border-top:1px solid var(--line)}
.tools li{list-style:none;display:flex;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
.tools li b{font-weight:400}
.tools li span{color:var(--ink-soft);font-size:11.5px;letter-spacing:.14em}
.history li{list-style:none;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.history li b{color:var(--ink);font-weight:400}
.badge-list{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.badge{border:1px solid var(--line);padding:8px 16px;font-size:10.5px;color:var(--ink-soft);letter-spacing:.06em;background:var(--bg)}

/* ══ Contact ══ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;max-width:1160px;margin:0 auto;padding:0 40px}
.c-info li{list-style:none;margin-bottom:22px;font-size:13px}
.c-info li b{display:block;font-size:10px;letter-spacing:.32em;color:var(--ink-soft);margin-bottom:6px;font-weight:400;text-transform:uppercase}
.c-info li small{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.map-link{display:inline-block;margin-top:6px;font-size:11.5px;letter-spacing:.14em;color:var(--coral);border-bottom:1px solid rgba(233,75,92,.4)}
.c-note{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.form{display:grid;gap:0}
.form input,.form textarea{width:100%;background:none;border:none;border-bottom:1px solid var(--line);color:var(--ink);padding:16px 2px;font-size:14px;letter-spacing:.02em}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-mute)}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--ink)}
.form textarea{min-height:100px;resize:vertical}
.form .btn{margin-top:36px;justify-self:start}

/* ══ 푸터 ══ */
footer{border-top:1px solid var(--line);padding:50px 0;font-size:10.5px;color:var(--ink-soft);letter-spacing:.04em;text-align:center}
footer .f-logo{font-size:12px;letter-spacing:.2em;color:var(--ink);margin-bottom:14px;font-weight:400;text-transform:uppercase}
footer p{margin-bottom:6px;line-height:2}

/* ══ 모바일 ══ */
@media(max-width:920px){
  section{padding:80px 0}
  header{padding:20px 0 0}
  .logo img{height:44px}
  .nav-links{gap:28px;font-size:12px;padding-bottom:14px}
  main,.page-body{padding-top:170px}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:44px 20px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:50px}
  .field-row{grid-template-columns:1fr;gap:12px}
  .field-row:hover{padding-left:0}
  .works-grid{grid-template-columns:1fr;gap:4px}
  .lead-time{grid-template-columns:1fr}
  .lt{border-left:none;border-top:1px solid var(--line)}
  .lt:first-child{border-top:none}
  .sub-tabs{gap:20px;font-size:11px}
}

/* ══ 모바일 햄버거 메뉴 ══ */
.nav-toggle{display:none}
.mobile-menu,.menu-backdrop{display:none}

/* ══ 모바일 (920px 이하) ══ */
@media(max-width:920px){
  header{padding:14px 0 0}
  .nav-wrap{gap:0}
  .logo img{height:38px}
  .nav-links{display:none}
  header{padding-bottom:14px;border-bottom:1px solid var(--line)}

  /* 햄버거 버튼 */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    position:absolute;right:18px;top:50%;transform:translateY(-50%);
    width:40px;height:40px;padding:9px 8px;
    background:none;border:none;cursor:pointer;z-index:120;
  }
  .nav-toggle span{
    display:block;height:1.5px;width:100%;background:var(--ink);
    border-radius:2px;transition:.3s cubic-bezier(.4,0,.2,1);
  }
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* 슬라이드 메뉴 패널 */
  .mobile-menu{
    display:block;
    position:fixed;top:0;right:0;bottom:0;
    width:min(74vw,300px);
    background:#fff;z-index:115;
    padding:96px 0 40px;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    box-shadow:-8px 0 40px rgba(0,0,0,.06);
    overflow-y:auto;
    visibility:hidden;
    transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s .38s;
  }
  body.menu-open .mobile-menu{transform:translateX(0);visibility:visible;transition:transform .38s cubic-bezier(.4,0,.2,1)}
  .mobile-menu nav{display:flex;flex-direction:column}
  .mobile-menu a{
    padding:17px 32px;
    font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line-mute);
    transition:.2s;
  }
  .mobile-menu a:first-child{border-top:1px solid var(--line-mute)}
  .mobile-menu a.here{color:#E7ACCF}
  .mobile-menu a:active{background:var(--line-mute);color:var(--ink)}

  /* 뒷배경 */
  .menu-backdrop{
    display:block;position:fixed;inset:0;z-index:110;
    background:rgba(26,26,26,.35);
    opacity:0;pointer-events:none;transition:opacity .35s;
  }
  body.menu-open .menu-backdrop{opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}

  /* 헤더가 낮아진 만큼 본문 상단 여백 조정 */
  main,.page-body{padding-top:96px !important}
}

/* ══ 모바일 가로 잘림 방지 ══ */
@media(max-width:920px){
  .wrap,.about-grid,.contact-grid{padding-left:20px;padding-right:20px}
  section{padding:64px 0}

  /* 긴 줄은 잘리지 말고 아래로 흐르게 */
  body{word-break:keep-all;overflow-wrap:anywhere}

  /* About - 장비 목록: 좌우 대치 → 넘치면 줄바꿈 */
  .tools li{flex-wrap:wrap;gap:2px 12px;padding:12px 0}
  .tools li span{flex:0 0 auto}

  /* About - 연혁 */
  .history li{grid-template-columns:52px 1fr;gap:12px}

  /* Contact - 정보/폼 */
  .c-info li{font-size:13px}
  .c-info li small{line-height:1.7}
  .map-link{margin-left:0;display:inline-block}

  /* 표/그리드가 화면 밖으로 못 나가게 */
  .stats .wrap,.about-grid,.contact-grid,.lead-time,.tools,.history,.form{max-width:100%;min-width:0}
  .about-grid>*,.contact-grid>*,.stats .wrap>*{min-width:0}

  footer{padding:40px 0}
}

@media(max-width:420px){
  .wrap,.about-grid,.contact-grid{padding-left:16px;padding-right:16px}
}

/* ══ 카카오 채널 문의 플로팅 버튼 ══ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kakao-fab{
  position:fixed;right:26px;bottom:26px;z-index:150;
  width:58px;height:58px;border-radius:50%;
  background:#FEE500;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.kakao-fab svg{width:30px;height:30px;fill:#3C1E1E;display:block}
.kakao-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 26px rgba(0,0,0,.24)}
.kakao-fab:active{transform:scale(.96)}

@media(max-width:920px){
  .kakao-fab{right:16px;bottom:16px;width:52px;height:52px}
  .kakao-fab svg{width:27px;height:27px}
}

/* 메뉴 열렸을 땐 버튼 숨김 */
body.menu-open .kakao-fab{opacity:0;pointer-events:none;transition:opacity .2s}