:root{
    /* 브랜드 — 고정 */
    --navy:#012461;
    --navy-2:#02306f;
    --blue:#2B54B0;
    --sky:#7fb2ff;
    /* 중성색은 네이비 쪽으로 기울여 고른다 (순수 회색은 안 고른 티가 난다) */
    --ink:#0C1524;
    --paper:#ffffff;
    --mist:#F2F5FA;
    --grey:#5A6478;
    --rule:#C9D4E6;
    --line:rgba(1,36,97,.14);
    /* 개설신고 도장의 빨강 — 실제 서류에서 온 색 */
    --stamp:#B3261E;
    --sans:"IBM Plex Sans KR","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
    --mono:"IBM Plex Mono","IBM Plex Sans KR",monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  .wrap{width:min(1120px,92vw);margin:0 auto;}

  /* ───── 상단 바 ───── */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;gap:28px;
    padding:16px max(24px,4vw);
    transition:background .3s, box-shadow .3s, padding .3s;
  }
  .nav.solid{background:rgba(1,36,97,.94);box-shadow:0 6px 24px rgba(0,0,0,.25);padding-top:12px;padding-bottom:12px;}
  .nav .brand{display:flex;align-items:center;gap:10px;}
  .nav .brand img{width:34px;height:34px;}
  .nav .brand span{color:#fff;font-weight:700;font-size:17px;letter-spacing:-.4px;}
  .nav ul{list-style:none;display:flex;gap:22px;margin:0 0 0 auto;padding:0;}
  .nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:15px;font-weight:600;}
  .nav a:hover{color:#fff;}
  .nav .call{
    background:#fff;color:var(--navy);border-radius:99px;
    padding:9px 18px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  }
  @media (max-width:860px){ .nav ul{display:none;} }

  /* ───── 대문: 개원 여정 ───── */
  
  .stage{
    position:sticky;top:0;height:100vh;overflow:hidden;
    /* 🔴 perspective 를 뺐다. 2026-09-08 대표님 지시로 「빨려 들어오는」 연출을 버렸다.
       장면은 처음부터 화면을 꽉 채우고, 휠은 다음 장면으로 넘기기만 한다. */
    background-color:#04173c;
    /* 개원은 도면에서 시작한다 — 바탕을 방안지로 깐다 */
    background-image:
      linear-gradient(rgba(127,178,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(127,178,255,.07) 1px, transparent 1px),
      linear-gradient(rgba(127,178,255,.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(127,178,255,.14) 1px, transparent 1px);
    background-size:28px 28px, 28px 28px, 140px 140px, 140px 140px;
  }

  .scenes{position:absolute;inset:0;}
  /* 🔴 장면은 「언제나」 화면을 꽉 채운다. 도형이든 사진이든 똑같다.
     전에는 가운데 760px 카드였고 사진이 붙은 것만 넓혔는데, 그러면 카드에서
     전체화면으로 튀는 순간이 생긴다. 처음부터 끝까지 전체화면이어야 영상처럼 보인다. */
  .scene{
    position:absolute;left:0;top:0;width:100%;height:100%;
    will-change:transform,opacity;
  }
  .scene .shot{width:100%;height:100%;}
  .scene svg,
  .scene .shot > video,
  .scene .shot > img.poster{
    width:100%;height:100%;object-fit:cover;display:block;
    border-radius:0;box-shadow:none;
  }
  /* 아래를 어둡게 깔아 왼쪽 아래 자막이 밝은 하늘에 묻히지 않게 한다.
     blur 는 쓰지 않는다 — 매 프레임 다시 그려서 프레임을 흘린다. */
  .scene .shot::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to top, rgba(4,23,60,.86) 0%, rgba(4,23,60,.42) 26%, rgba(4,23,60,0) 56%),
      linear-gradient(to bottom, rgba(4,23,60,.70) 0%, rgba(4,23,60,0) 30%);
  }

  /* 대문 위 고정 글자 */
  .hero-copy{
    position:absolute;left:max(24px,5vw);bottom:14vh;z-index:6;
    color:#fff;pointer-events:none;
    /* 자막(.cap .item)이 전부 absolute 라 .cap 안에 흐르는 것이 없다.
       그래서 max-width 만 주면 이 상자가 「01 / 07」 딱지 너비(89px)로 쪼그라들고
       자막이 한 줄에 한 글자씩 세로로 떨어진다. 너비를 못 박아 둔다. */
    width:min(560px,86vw);
  }
  .step-no{
    display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:1.5px;
    color:var(--sky);border:1px solid rgba(127,178,255,.5);
    border-radius:99px;padding:4px 12px;margin-bottom:12px;
  }
  .cap{position:relative;}
  .cap .item{
    position:absolute;left:0;bottom:0;width:100%;
    opacity:0;will-change:opacity,transform,filter;
  }
  .cap h2{text-shadow:0 3px 24px rgba(0,0,0,.55);}
  .cap p{text-shadow:0 2px 14px rgba(0,0,0,.5);}
  .hero-title h1{text-shadow:0 4px 30px rgba(0,0,0,.5);}
  .hero-title{will-change:opacity,transform,filter;}
  .cap h2{
    margin:0;font-size:clamp(26px,4.4vw,46px);font-weight:700;
    letter-spacing:-1.2px;line-height:1.25;
  }
  .cap p{margin:10px 0 0;font-size:clamp(14px,1.6vw,17px);color:#bed4f7;line-height:1.65;}

  .hero-title{
    position:absolute;left:0;right:0;top:22vh;z-index:5;text-align:center;
    color:#fff;pointer-events:none;transition:opacity .3s;
  }
  .hero-title h1{
    margin:0;font-size:clamp(28px,5.2vw,58px);font-weight:700;letter-spacing:-1.6px;line-height:1.22;
  }
  .hero-title h1 em{font-style:normal;color:var(--sky);}
  .hero-title p{margin:14px 0 0;font-size:clamp(14px,1.8vw,19px);color:#c8daf8;}

  .scrollhint{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:7;
    color:#cfe0ff;font-size:14px;text-align:center;transition:opacity .35s;
  }
  .mouse{width:24px;height:38px;border:2px solid #cfe0ff;border-radius:13px;margin:10px auto 0;position:relative;}
  .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;
    border-radius:2px;background:#cfe0ff;animation:wheel 1.5s infinite;}
  @keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(11px)}}

  /* 오른쪽 진행 막대(.prog)는 2026-09-08 에 뺐다.
     "오른쪽에 탭 같은 것도 있잖아. 그런 거 전혀 빼고" — 대표님 */
  @media (max-width:700px){ .hero-copy{bottom:16vh;} }



  /* ── 영상처럼 살아 움직이게 ── */
  .journey{position:relative;background:var(--navy);}
  .stage{height:100vh;height:100dvh;}
  .stage-v{background-color:#1e1608;}
  /* 🔴 CSS 숨쉬기 애니메이션을 뺐다. 스크롤과 따로 놀아서 영상처럼 안 보였고,
     전체화면에서는 회전·확대가 매 프레임 다시 그리게 만들어 프레임도 먹었다.
     줌은 이제 JS 가 스크롤 위치에 맞춰 아주 천천히 준다. */
  .scene .shot{position:relative;transform-origin:50% 50%;}

  .hero-title .part{
    display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:1.6px;
    color:var(--sky);border:1px solid rgba(127,178,255,.45);
    border-radius:99px;padding:5px 14px;margin-bottom:16px;
  }
  @media (prefers-reduced-motion:reduce){
    .scene .shot{animation:none;}
  }


  /* ── 우측 하단 문의하기 ── */
  .ask{position:fixed;right:max(18px,2.4vw);bottom:max(18px,2.4vw);z-index:200;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
  .ask-menu{display:flex;flex-direction:column;gap:8px;align-items:flex-end;
    opacity:0;transform:translateY(10px) scale(.96);transform-origin:100% 100%;
    pointer-events:none;transition:opacity .22s, transform .22s;}
  .ask.open .ask-menu{opacity:1;transform:none;pointer-events:auto;}
  .ask-menu[hidden]{display:none;}
  .ask-item{display:flex;align-items:center;gap:10px;text-decoration:none;
    background:#fff;color:var(--ink);border:1px solid var(--line);
    border-radius:99px;padding:11px 18px 11px 13px;font-size:15px;font-weight:700;
    box-shadow:0 10px 30px rgba(1,36,97,.18);white-space:nowrap;transition:transform .18s;}
  .ask-item:hover{transform:translateX(-3px);}
  .ask-item i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-style:normal;font-size:15px;font-weight:700;flex:0 0 auto;}
  .ask-item small{display:block;font-size:12px;font-weight:600;color:#7a879e;margin-top:1px;}
  .i-kakao{background:#FEE500;color:#3C1E1E;}
  .i-wa{background:#25D366;color:#fff;}
  .i-wc{background:#07C160;color:#fff;}
  .i-tel{background:var(--navy);color:#fff;}
  .i-mail{background:var(--blue);color:#fff;}
  .ask-btn{display:flex;align-items:center;gap:9px;cursor:pointer;border:0;
    font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.3px;
    background:var(--navy);color:#fff;border-radius:99px;padding:15px 24px;
    box-shadow:0 14px 36px rgba(1,36,97,.4);transition:transform .18s, background .18s;}
  .ask-btn:hover{transform:translateY(-2px);}
  .ask.open .ask-btn{background:var(--blue);}
  .ask-btn .dot{width:9px;height:9px;border-radius:50%;background:#4ade80;
    box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2.2s infinite;}
  @keyframes pulse{
    70%{box-shadow:0 0 0 11px rgba(74,222,128,0);}
    100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}
  @media (max-width:640px){
    .ask-btn{padding:13px 19px;font-size:15px;}
    .ask-item{font-size:14px;padding:10px 15px 10px 11px;}
  }

  /* ── 회사 전환 탭 ── */
  .nav .tabs{display:flex;gap:6px;margin-left:auto;background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:4px;}
  .nav .tab{
    display:flex;align-items:center;gap:8px;border:0;cursor:pointer;
    background:transparent;color:rgba(255,255,255,.78);
    font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.3px;
    border-radius:99px;padding:8px 16px;transition:background .2s,color .2s;white-space:nowrap;
  }
  .nav .tab img{width:19px;height:19px;opacity:.7;transition:opacity .2s;}
  .nav .tab:hover{color:#fff;}
  .nav .tab.on{background:#fff;color:var(--navy);}
  .nav .tab.on img{opacity:1;}
  .nav .tab .mk-n{display:none;}
  .nav .tab.on .mk-w{display:none;}
  .nav .tab.on .mk-n{display:inline-block;}
  .nav ul{margin-left:0;}
  @media (max-width:1180px){ .nav ul{display:none;} }
  @media (max-width:820px){
    .nav{gap:10px;padding:12px 14px;}
    .nav .brand span{display:none;}
    .nav .tab{padding:7px 11px;font-size:13px;}
    .nav .tab img{display:none !important;}
    .nav .call{display:none;}
  }

  .page[hidden]{display:none;}
  .stage-g{background-color:#062a4d;}
  .photo-g{background:linear-gradient(160deg,#0a3a6b,#2B54B0);}

  /* ───── 일반 섹션 ───── */
  section.blk{padding:clamp(64px,9vw,120px) 0;}
  .kicker{
    font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:1.6px;
    color:var(--blue);margin:0 0 14px;
    display:flex;align-items:center;gap:10px;
  }
  .kicker::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px;}
  .dark .kicker::after{background:rgba(127,178,255,.3);}
  h2.t{
    margin:0 0 18px;font-size:clamp(24px,3.6vw,40px);font-weight:700;
    letter-spacing:-1.1px;line-height:1.3;color:var(--navy);
  }
  .lead{font-size:clamp(15px,1.8vw,19px);color:#3c4a63;margin:0 0 34px;max-width:760px;}

  .mist{background:var(--mist);}
  .dark{background:var(--navy);color:#fff;}
  .dark h2.t{color:#fff;}
  .dark .kicker{color:var(--sky);}
  .dark .lead{color:#c2d4f2;}

  /* 대표 소개 */
  .ceo{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,4vw,56px);align-items:center;}
  .ceo .photo{
    aspect-ratio:4/5;border-radius:4px;
    background:linear-gradient(160deg,var(--navy),var(--blue));
    display:flex;align-items:flex-end;padding:26px;color:#fff;
    box-shadow:0 24px 60px rgba(1,36,97,.28);
  }
  .ceo .photo div{font-size:14px;color:#cfe0ff;}
  .ceo .photo strong{display:block;font-size:26px;font-weight:700;color:#fff;letter-spacing:-.6px;}
  .quote{
    border-left:4px solid var(--blue);padding:6px 0 6px 18px;margin:22px 0;
    font-size:clamp(17px,2.2vw,23px);font-weight:700;color:var(--navy);letter-spacing:-.6px;line-height:1.5;
  }
  @media (max-width:820px){ .ceo{grid-template-columns:1fr;} .ceo .photo{aspect-ratio:16/10;} }

  /* 카드 격자 */
  .grid{display:grid;gap:18px;}
  .g5{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
  .g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
  .card{
    background:#fff;border:1px solid var(--line);border-radius:4px;
    padding:24px 22px 26px;transition:border-color .2s, box-shadow .2s;
  }
  .card:hover{border-color:var(--blue);box-shadow:0 10px 30px rgba(1,36,97,.09);}
  /* 순서가 아닌 것에 번호를 붙이지 않는다 — 분류 라벨로 */
  .card .n{
    display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;
    letter-spacing:1.4px;color:var(--blue);
    border-bottom:2px solid var(--blue);padding-bottom:5px;margin-bottom:16px;
  }
  .card h3{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.5px;}
  .card p{margin:0;font-size:15px;color:#4a5875;line-height:1.65;}
  .card ul{margin:10px 0 0;padding-left:17px;color:#4a5875;font-size:14.5px;}
  .card li{margin:4px 0;}

  /* 숫자 */
  .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
  .num{
    background:transparent;border:0;border-top:1px solid rgba(127,178,255,.35);
    border-radius:0;padding:22px 0 6px;text-align:left;
  }
  .num b{display:block;font-family:var(--mono);font-size:clamp(32px,4.8vw,48px);font-weight:500;
    color:#fff;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;}
  .num span{display:block;margin-top:10px;font-size:14.5px;color:#bed4f7;}

  /* 후기 */
  .voice{
    background:transparent;border:0;border-left:2px solid var(--blue);
    border-radius:0;padding:4px 0 4px 20px;
  }
  .voice p{margin:0 0 12px;font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.4px;line-height:1.6;}
  .voice span{font-size:14px;color:#6c7a94;}

  /* 사례 */
  .case{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
  .case .h{background:var(--navy);color:#fff;padding:18px 22px;}
  .case .h b{display:block;font-size:18px;font-weight:700;letter-spacing:-.5px;}
  .case .h span{font-size:13.5px;color:#bed4f7;}
  .case .b{padding:20px 22px;}
  .case .row{display:flex;gap:10px;margin-bottom:14px;}
  .case .tag{
    flex:0 0 auto;font-size:12px;font-weight:700;border-radius:6px;padding:3px 9px;height:fit-content;
  }
  .tag.before{background:#fdecec;color:#b3261e;}
  .tag.after{background:#e8f2ff;color:var(--blue);}
  .case .row p{margin:0;font-size:14.5px;color:#4a5875;line-height:1.62;}

  /* 문의 */
  .contact{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;}
  .info{list-style:none;margin:0;padding:0;}
  .info li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:16px;}
  .info li b{flex:0 0 92px;color:var(--sky);font-weight:700;font-size:14.5px;padding-top:2px;}
  .info a{color:#fff;text-decoration:none;font-weight:700;}
  .cta{
    display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--navy);
    border-radius:99px;padding:16px 30px;font-weight:700;font-size:18px;text-decoration:none;
    box-shadow:0 16px 40px rgba(0,0,0,.3);
  }
  @media (max-width:820px){ .contact{grid-template-columns:1fr;} }

  footer{background:#01152f;color:#8fa6c8;padding:34px 0;font-size:13.5px;}
  footer .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
  footer img{width:28px;height:28px;opacity:.85;}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s, transform .7s;}
  .reveal.in{opacity:1;transform:none;}
  /* ══════ 실제 사이트에서 더한 것 (시안에 없던 것) ══════ */

  /* ── 대문 장면: 지금은 SVG, 영상이 오면 그 자리에 video 가 들어온다 ── */

  /* 그림·영상이 붙으면 밑에 깔린 도형은 숨는다 */
  .scene.has-media .shot > svg{visibility:hidden;position:absolute;inset:0;}

  /* ── 키보드 포커스 표시를 없애지 않는다 ── */
  a:focus-visible, button:focus-visible{
    outline:3px solid var(--sky);
    outline-offset:3px;
    border-radius:4px;
  }
  .dark a:focus-visible, .nav a:focus-visible, .nav button:focus-visible{
    outline-color:#fff;
  }

  /* ── 움직임을 줄여 달라고 한 분에게는 전부 정지 ── */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .mouse::after{animation:none;}
    .ask-btn .dot{animation:none;}
    .reveal{opacity:1;transform:none;transition:none;}
    .scene .shot{animation:none;}
  }