/* 색·폰트 = aicut.co.kr 브랜드 토큰
     구조 = flow.team · 여백과 마감 = toss.im */
  :root {
    --page:#FFFFFF; --tint:#F7F7FB; --surface:#FFFFFF;
    --ink:#1A1A2E; --muted:#767690; --faint:#A3A3B8; --line:#EBEBF3;
    --accent:#5C3DE8; --accent-2:#4A2FD4; --accent-soft:#EDE9FF;
    --signal:#F59E0B; --on-accent:#FFFFFF;
    --lift:0 1px 2px rgba(26,26,46,.04), 0 10px 28px -10px rgba(26,26,46,.12);
    --lift-lg:0 2px 8px rgba(26,26,46,.05), 0 36px 72px -28px rgba(92,61,232,.28);
    --sans:'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    /* DM Mono 에는 한글 글리프가 없다. 한글이 윈도우 기본 고정폭(굴림 계열)으로
       떨어지지 않도록 Noto Sans KR 을 바로 뒤에 둔다. 글리프 단위로 대체되므로
       숫자·영문은 DM Mono, 한글은 Noto Sans KR 로 렌더된다. */
    --mono:'DM Mono', 'Noto Sans KR', ui-monospace, Consolas, monospace;
    --pad:clamp(20px,4.5vw,56px); --maxw:1200px;
  }

  /* 라이트 모드로 고정한다. 다크 모드는 쓰지 않는다.
     color-scheme 을 명시해야 스크롤바·폼 컨트롤까지 라이트로 그려진다. */
  :root { color-scheme: light; }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--page); color:var(--ink); font-family:var(--sans);
         line-height:1.7; letter-spacing:-.015em; -webkit-font-smoothing:antialiased; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
  /* 제목 타이포는 flow.team 의 h2 실측값을 따른다.
     Noto Sans KR 700 / letter-spacing -0.042em (48px 기준 -2px) / line-height 1.4 */
  h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.042em; line-height:1.4; text-wrap:balance; }
  p { margin:0; }
  h1,h2,h3,p,li,q,summary { word-break:keep-all; }
  a { color:inherit; }

  .btn { display:inline-flex; align-items:center; justify-content:center;
         font:700 15.5px/1 var(--sans); letter-spacing:-.02em; padding:16px 28px;
         border-radius:13px; border:0; cursor:pointer; text-decoration:none;
         transition:transform .14s, background .16s, color .16s; }
  .btn:active { transform:scale(.98); }
  .btn:focus-visible { outline:3px solid var(--accent-soft); outline-offset:3px; }
  .btn-fill { background:var(--accent); color:var(--on-accent); }
  .btn-fill:hover { background:var(--accent-2); }
  .btn-soft { background:var(--tint); color:var(--ink); }
  .btn-soft:hover { background:var(--accent-soft); color:var(--accent); }
  .btn-sm { font-size:14px; padding:10px 18px; border-radius:10px; }
  .btn-line { background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
  .btn-line:hover { box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); }

  /* 상단 스트립 */
  .strip { display:grid; grid-template-columns:1fr 1fr; font-size:13px; color:#fff; }
  .strip div { padding:10px 16px; text-align:center; }
  .strip .a { background:linear-gradient(90deg,#4A2FD4,#5C3DE8); }
  .strip .b { background:linear-gradient(90deg,#5C3DE8,#8062F2); }
  @media (max-width:760px){ .strip{grid-template-columns:1fr;} .strip .b{display:none;} }

  /* 네비 */
  .nav { position:sticky; top:0; z-index:80;
         background:color-mix(in srgb, var(--page) 84%, transparent);
         backdrop-filter:saturate(180%) blur(16px); }
  .nav-in { max-width:var(--maxw); margin:0 auto; padding:14px var(--pad);
            display:flex; align-items:center; gap:28px; }
  /* 로고는 링크지만 밑줄이 그어지면 워드마크가 아니라 텍스트 링크로 읽힌다. */
  .logo { display:flex; align-items:center; gap:9px; font-weight:900; font-size:19px;
          letter-spacing:-.05em; text-decoration:none; }
  .logo:focus-visible { outline:3px solid var(--accent-soft); outline-offset:4px; border-radius:8px; }
  .logo .mk { width:26px; height:26px; border-radius:9px; flex:none;
              background:linear-gradient(140deg,var(--accent),#8B72F5); }
  .menu { display:flex; gap:26px; font-size:15px; font-weight:500; color:var(--muted); }
  .menu a { text-decoration:none; }
  .menu a:hover { color:var(--ink); }
  .navr { margin-left:auto; display:flex; align-items:center; gap:8px; }
  @media (max-width:1180px){ .menu{display:none;} }
  @media (max-width:560px){ .navr .h-s{display:none;} }

  /* 섹션 */
  section { padding:clamp(68px,9vw,132px) 0; }
  section.tinted { background:var(--tint); }
  .kicker { font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent);
            text-transform:uppercase; }
  .display { font-size:clamp(32px,5.2vw,58px); }
  .title { font-size:clamp(26px,3.9vw,44px); }
  .lede { font-size:clamp(15.5px,1.6vw,18.5px); color:var(--muted); line-height:1.78; margin-top:20px; max-width:40ch; }
  .center { text-align:center; }
  .center .lede { margin-inline:auto; }
  .head { margin-bottom:clamp(34px,5vw,60px); }
  .head .kicker { margin-bottom:16px; }

  .reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
  .reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

  /* 히어로 — flow식 좌우 분할 */
  .hero { padding-top:clamp(48px,6vw,84px); }
  .hero-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
               gap:clamp(30px,4vw,60px); align-items:center; }
  @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1 { margin:16px 0 0; }
  .hero-btns { display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; }
  .hero-free { margin-top:15px; font-size:13.5px; color:var(--faint); }
  .chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:30px; }
  .chip { font:500 13.5px/1 var(--sans); letter-spacing:-.02em; padding:11px 17px;
          border-radius:999px; border:0; background:var(--tint); color:var(--muted); cursor:pointer;
          transition:all .16s; }
  .chip:hover { color:var(--ink); }
  .chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
  .chip:focus-visible { outline:3px solid var(--accent-soft); outline-offset:3px; }

  .stage { perspective:1600px; }
  .tilt { transform:rotateY(-8deg) rotateX(4deg); transform-origin:0 50%;
          transition:transform .8s cubic-bezier(.2,.7,.3,1); }
  .tilt.flat { transform:none; }
  @media (max-width:980px){ .tilt{transform:none;} }
  @media (prefers-reduced-motion:reduce){ .tilt{transform:none;transition:none;} }

  .screen { background:var(--surface); border-radius:18px; box-shadow:var(--lift-lg); overflow:hidden; }
  .screen-bar { display:flex; align-items:center; gap:7px; padding:13px 17px; background:var(--tint); }
  .screen-bar i { width:9px; height:9px; border-radius:50%; background:var(--line); }
  .screen-bar span { font-family:var(--mono); font-size:12px; color:var(--faint); margin-left:8px; }
  .screen-body { padding:20px; }

  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:18px; }
  .stat { background:var(--tint); border-radius:12px; padding:14px 12px; }
  .stat b { display:block; font-family:var(--mono); font-size:21px; font-weight:500; font-variant-numeric:tabular-nums; }
  .stat span { font-size:12px; color:var(--muted); }
  .stat.hot { background:var(--accent-soft); }
  .stat.hot b { color:var(--accent); }

  table.t { width:100%; border-collapse:collapse; font-size:13.5px; }
  table.t th { text-align:left; font-family:var(--mono); font-size:10.5px; font-weight:400;
               letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:0 0 9px; }
  table.t td { padding:12px 0; border-top:1px solid var(--line); }
  table.t td:last-child { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--muted); }
  .pill { font-size:12px; font-weight:500; padding:4px 10px; border-radius:999px;
          background:var(--accent-soft); color:var(--accent); }
  .pill.w { background:color-mix(in srgb,var(--signal) 18%,transparent);
            color:color-mix(in srgb,var(--signal) 72%,var(--ink)); }

  /* 전/후 */
  .ba { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.4vw,24px); }
  @media (max-width:800px){ .ba{grid-template-columns:1fr;} }
  .box { border-radius:20px; padding:clamp(24px,3.4vw,36px); }
  .box.b1 { background:var(--tint); }
  .box.b2 { background:var(--accent-soft); }
  .box h3 { font-size:19px; font-weight:700; letter-spacing:-.03em; }
  .box.b2 h3 { color:var(--accent); }
  .box ul { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px; font-size:15.5px; }
  .box li { color:var(--muted); line-height:1.6; }
  .box.b2 li { color:var(--ink); font-weight:500; }

  /* 업종 갤러리 — flow식 3열 */
  .tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-bottom:40px; }
  .tab { font:500 14px/1 var(--sans); letter-spacing:-.02em; padding:11px 18px; border-radius:999px;
         border:0; background:var(--tint); color:var(--muted); cursor:pointer; transition:all .16s; }
  .tab[aria-pressed="true"] { background:var(--ink); color:var(--page); }
  .tab:hover[aria-pressed="false"] { color:var(--ink); }
  .tab:focus-visible { outline:3px solid var(--accent-soft); outline-offset:3px; }

  .gal { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
  @media (max-width:940px){ .gal{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .gal{grid-template-columns:1fr;} }
  .card { background:var(--surface); border-radius:18px; box-shadow:var(--lift); overflow:hidden;
          transition:transform .2s, box-shadow .2s; }
  .card:hover { transform:translateY(-4px); box-shadow:var(--lift-lg); }
  .card .vis { background:var(--tint); padding:22px; }
  .card .txt { padding:22px 24px 26px; }
  .card .tg { font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent); }
  .card h3 { font-size:17.5px; margin:9px 0 8px; font-weight:700; letter-spacing:-.035em; }
  .card p { font-size:14px; color:var(--muted); line-height:1.7; }

  .bars { display:grid; gap:10px; }
  .barrow { display:grid; grid-template-columns:64px 1fr 46px; gap:10px; align-items:center; font-size:12.5px; }
  .track { height:7px; border-radius:4px; background:var(--accent-soft); overflow:hidden; }
  .track i { display:block; height:100%; background:var(--accent); border-radius:4px; }
  .barrow .v { text-align:right; font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }

  /* 차별점 */
  .why { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px); }
  @media (max-width:900px){ .why{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:540px){ .why{grid-template-columns:1fr;} }
  .wc { background:var(--surface); border-radius:18px; padding:28px 24px; box-shadow:var(--lift); }
  .wc .n { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.08em; }
  .wc h3 { font-size:18px; margin:12px 0 10px; font-weight:700; letter-spacing:-.035em; }
  .wc p { font-size:14.5px; color:var(--muted); line-height:1.7; }

  /* 업무별 활용 — 업종보다 한 겹 더 좁혀 들어간다.
     각 항목은 나중에 개별 페이지로 갈라져 나갈 단위이기도 하다. */
  /* 업무별 — 글만 늘어놓으면 열두 가지가 한 덩어리로 읽힌다.
     그룹을 가로 띠로 세우고 그 안에 업무 카드를 세 장씩 놓아 구분한다.
     넓은 화면에서는 그룹 이름이 왼쪽에 붙고, 좁아지면 위로 올라간다. */
  .jobs { display:grid; gap:clamp(18px,2.6vw,30px); }
  .jobgrp {
    display:grid; grid-template-columns:210px minmax(0,1fr);
    gap:clamp(18px,3vw,40px); align-items:start;
    background:var(--surface); border-radius:20px;
    padding:clamp(22px,2.8vw,30px); box-shadow:var(--lift);
  }
  @media (max-width:900px){ .jobgrp{grid-template-columns:1fr; gap:18px;} }
  .jghead .ico { display:inline-grid; place-items:center; width:40px; height:40px;
                 border-radius:12px; background:var(--accent-soft); color:var(--accent); }
  .jghead .ico svg { width:21px; height:21px; }
  .jghead h3 { font-size:19px; letter-spacing:-.04em; margin:14px 0 6px; }
  .jghead p { font-size:13.5px; color:var(--muted); line-height:1.6; }

  .jobcards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  @media (max-width:1100px){ .jobcards{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:560px){ .jobcards{grid-template-columns:1fr;} }
  .jobcard {
    background:var(--tint); border-radius:15px; padding:18px 18px 20px;
    display:grid; gap:6px; align-content:start;
    transition:background .16s, transform .16s;
  }
  .jobcard:hover { background:var(--accent-soft); transform:translateY(-2px); }
  .jobcard .jico { color:var(--accent); margin-bottom:4px; }
  .jobcard .jico svg { width:22px; height:22px; display:block; }
  .jobcard b { font-size:15px; font-weight:700; letter-spacing:-.03em; }
  .jobcard .jd { font-size:13px; color:var(--muted); line-height:1.6; }


  /* 진행 프로세스 */
  .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.8vw,20px); position:relative; }
  @media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .steps{grid-template-columns:1fr;} }
  .step { background:var(--surface); border-radius:18px; padding:26px 24px 28px; box-shadow:var(--lift); }
  .step .no {
    width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent);
    font-family:var(--mono); font-size:14px; font-weight:500; margin-bottom:16px;
  }
  .step h3 { font-size:17.5px; font-weight:700; letter-spacing:-.035em; margin-bottom:9px; }
  .step p { font-size:14.5px; color:var(--muted); line-height:1.7; }

  /* FAQ */
  .faq { max-width:800px; margin:0 auto; display:grid; gap:10px; }
  .faq details {
    background:var(--surface); border-radius:16px; box-shadow:var(--lift); overflow:hidden;
  }
  .faq summary {
    list-style:none; cursor:pointer; padding:22px 26px; font-size:16.5px; font-weight:700;
    letter-spacing:-.03em; display:flex; align-items:center; gap:14px;
  }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after {
    content:"+"; margin-left:auto; flex:none; font-family:var(--mono); font-size:20px;
    font-weight:400; color:var(--accent); transition:transform .2s;
  }
  .faq details[open] summary::after { transform:rotate(45deg); }
  .faq summary:focus-visible { outline:3px solid var(--accent-soft); outline-offset:-3px; }
  .faq .a { padding:0 26px 24px; font-size:15.5px; color:var(--muted); line-height:1.78; }

  /* 후기 */
  .voices { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
  @media (max-width:900px){ .voices{grid-template-columns:1fr;} }
  .voice { background:var(--surface); border-radius:18px; padding:30px 28px; box-shadow:var(--lift);
           display:flex; flex-direction:column; gap:18px; }
  .voice q { font-size:16px; line-height:1.75; font-weight:500; quotes:none; }
  .voice q::before, .voice q::after { content:""; }
  .voice .who { display:flex; align-items:center; gap:11px; margin-top:auto; }
  .voice .av { width:38px; height:38px; border-radius:50%; background:var(--accent-soft); flex:none; }
  .voice .who b { display:block; font-size:14px; font-weight:700; }
  .voice .who span { font-size:12.5px; color:var(--faint); }

  /* 요금제 */
  .price { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.4vw,24px); }
  @media (max-width:800px){ .price{grid-template-columns:1fr;} }
  .pc { border-radius:22px; padding:clamp(28px,3.6vw,40px); background:var(--tint); }
  .pc.hi { background:var(--accent-soft); }
  .pc .st { font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent); }
  .pc .nm { font-size:27px; font-weight:700; letter-spacing:-.042em; margin:12px 0 18px; }
  .pc .amt { font-family:var(--mono); font-size:28px; font-weight:500; font-variant-numeric:tabular-nums; }
  .pc .amt small { font-size:16px; color:var(--muted); }
  .pc .note { font-size:14px; color:var(--muted); margin-top:9px; }
  .pc ul { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; font-size:15px; }
  .pc li { padding-left:25px; position:relative; }
  .pc li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }

  .incl { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; margin-top:24px; }
  @media (max-width:860px){ .incl{grid-template-columns:repeat(4,1fr);} }
  @media (max-width:520px){ .incl{grid-template-columns:repeat(2,1fr);} }
  .incl div { background:var(--tint); border-radius:13px; padding:17px 8px; text-align:center; }
  .incl b { display:block; font-family:var(--mono); font-size:14.5px; font-weight:500; color:var(--accent); }
  .incl span { font-size:11.5px; color:var(--muted); }

  .ph { display:inline-block; margin-top:24px; padding:11px 17px; border-radius:11px;
        background:color-mix(in srgb,var(--signal) 12%,transparent); font-family:var(--mono);
        font-size:12.5px; color:color-mix(in srgb,var(--signal) 66%,var(--ink)); }

  /* 고객사 */
  .clients { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
  @media (max-width:760px){ .clients{grid-template-columns:repeat(2,1fr);} }
  .clients div { background:var(--tint); border-radius:15px; padding:26px 12px; text-align:center; }
  .clients b { display:block; font-size:15px; font-weight:700; letter-spacing:-.03em; }
  .clients span { font-family:var(--mono); font-size:11px; color:var(--faint); }

  /* 우하단 위젯 */
  .dock { position:fixed; right:18px; bottom:18px; z-index:90; display:grid; gap:9px; justify-items:end; }
  .dock-cta { background:linear-gradient(150deg,var(--accent),#8062F2); color:#fff; border-radius:14px;
              padding:14px 16px; font-size:13.5px; font-weight:700; text-decoration:none;
              box-shadow:var(--lift-lg); text-align:center; line-height:1.35; }
  .dock-chat { width:50px; height:50px; border-radius:50%; background:var(--surface);
               box-shadow:var(--lift-lg); display:grid; place-items:center; font-size:20px; text-decoration:none; }
  @media (max-width:620px){ .dock-cta{display:none;} }

  /* ---------- 푸터 ----------
     사이트 본문은 화이트로 고정하고, 푸터만 블랙으로 눌러 페이지를 닫는다.
     순수 #000 은 딱딱해서 브랜드 보라 쪽으로 살짝 기운 근사 블랙을 쓴다.
     색은 전부 푸터 안에서만 쓰는 토큰으로 묶어 본문 토큰과 섞이지 않게 한다.
     보라 --accent(#5C3DE8) 는 블랙 위에서 너무 어두워 링크로 못 쓴다.
     같은 색을 밝게 올린 --f-accent 를 hover 색으로 쓴다. */
  footer {
    --f-bg:#131322;
    --f-strong:rgba(255,255,255,.94);
    --f-body:rgba(255,255,255,.58);
    --f-label:rgba(255,255,255,.74);
    --f-faint:rgba(255,255,255,.54);
    --f-line:rgba(255,255,255,.13);
    --f-accent:#B3A2FF;
    padding:64px 0 60px; background:var(--f-bg); color:var(--f-body);
  }
  /* 회사 정보 한 칸 + 링크 네 칸.
     좁아지면 회사 정보를 위로 빼서 한 줄 전체를 쓰고, 링크만 줄여 나간다. */
  .fgrid { display:grid; grid-template-columns:1.5fr repeat(4, minmax(0,1fr));
           gap:clamp(22px,3vw,44px); }
  @media (max-width:1100px){
    .fgrid { grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:40px; }
    .fbiz { grid-column:1 / -1; }
  }
  @media (max-width:700px){ .fgrid{grid-template-columns:repeat(2, minmax(0,1fr));} }
  /* 360~412px 에서도 두 열을 유지한다. 한 열로 접으면 푸터만 1100px 넘게 길어진다. */
  @media (max-width:339px){ .fgrid{grid-template-columns:1fr;} }
  .fbrand { display:flex; align-items:center; gap:9px; font-weight:900; font-size:18px;
            letter-spacing:-.05em; margin-bottom:18px; color:var(--f-strong); }
  .fbrand .mk { width:24px; height:24px; border-radius:8px; flex:none;
                background:linear-gradient(140deg,#7C5CF0,#A78BFA); }
  .fcol h4 { font-size:12.5px; font-weight:700; color:var(--f-label); margin:0 0 12px; letter-spacing:-.01em; }
  .fcol p, .fcol a { font-size:13px; color:var(--f-body); line-height:1.85; text-decoration:none; display:block; }
  .fcol a:hover { color:var(--f-accent); }
  .fcol a:focus-visible, .fbar a:focus-visible { outline:2px solid var(--f-accent); outline-offset:3px; border-radius:4px; }
  .fcol { display:block; }
  .fbiz p { font-size:13px; color:var(--f-body); line-height:1.9; }
  .fmail { margin-top:16px; display:grid; gap:2px; }
  .fmail a { color:var(--f-strong); text-decoration:none; font-weight:600; }
  .fmail a:hover { color:var(--f-accent); }
  .fmail span { color:var(--f-faint); font-size:12.5px; }
  .fbiz b { color:var(--f-strong); font-weight:600; }
  .fbar { margin-top:40px; padding-top:22px; border-top:1px solid var(--f-line);
          display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
          font-size:12px; color:var(--f-faint); }
  .fbar .links { margin-left:auto; display:flex; gap:18px; }
  .fbar a { color:inherit; text-decoration:none; }
  .fbar a:hover { color:var(--f-accent); }

  /* ---------- 랜딩 허브 카드 (페이지 분리 후 추가) ---------- */
  .hubgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
  @media (max-width:940px){ .hubgrid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .hubgrid{grid-template-columns:1fr;} }
  .hubcard {
    display:block; text-decoration:none; background:var(--surface); border-radius:18px;
    padding:28px 26px 26px; box-shadow:var(--lift);
    transition:transform .18s, box-shadow .18s;
  }
  .hubcard:hover { transform:translateY(-4px); box-shadow:var(--lift-lg); }
  .hubcard:focus-visible { outline:3px solid var(--accent-soft); outline-offset:3px; }
  .hubcard .hn { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em; }
  .hubcard h3 { font-size:19px; margin:12px 0 10px; }
  .hubcard p { font-size:14.5px; color:var(--muted); line-height:1.7; }
  .hubcard .go {
    display:inline-block; margin-top:16px; font-size:14px; font-weight:700; color:var(--accent);
  }
  .hubcard .go::after { content:" →"; }

  /* ---------- 시스템 목록 ---------- */
  /* 시스템 여덟 가지 — 사진이 위에 오는 카드 그리드.
     가로로 긴 목록 여덟 줄이면 아래로만 길어지고 서로 비교가 안 된다.
     같은 크기의 카드로 늘어놓아야 여덟 개가 한 세트로 읽힌다. */
  .syslist { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); }
  @media (max-width:1180px){ .syslist{grid-template-columns:repeat(3,minmax(0,1fr));} }
  @media (max-width:860px){ .syslist{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:520px){ .syslist{grid-template-columns:1fr;} }

  .syscard {
    display:flex; flex-direction:column;
    background:var(--surface); border-radius:18px; overflow:hidden;
    box-shadow:var(--lift); transition:transform .18s, box-shadow .18s;
  }
  .syscard:hover { transform:translateY(-4px); box-shadow:var(--lift-lg); }
  .syscard .sysbody { padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
  .syscard .sysk {
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:15px; font-weight:500; color:var(--accent);
  }
  .syscard .sysk .ico { display:inline-flex; }
  .syscard .sysk .ico svg { width:17px; height:17px; display:block; }
  .syscard h3 { font-size:17.5px; letter-spacing:-.035em; margin:10px 0 8px; }
  .syscard p { font-size:14px; color:var(--muted); line-height:1.7; }

  .stags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:16px; }
  .stags span {
    font-size:12.5px; color:var(--muted); background:var(--tint);
    padding:5px 12px; border-radius:999px;
  }

  /* ---------- 사진 ----------
     경로는 이 스타일시트(/assets/styles.css) 기준 상대경로다.
     그래서 페이지 깊이(/ 든 /pricing/ 이든)와 무관하게 동일하게 해석된다.
     출처: Unsplash License (상업적 이용 무료) — assets/img/SOURCES.md 참고 */
  :root {
    --img-hero:url("img/hero-people.jpg");   --img-robot:url("img/why-robot.jpg");
    --img-auto:url("img/sector-auto.jpg");      --img-auto2:url("img/case-auto2.jpg");
    --img-food:url("img/sector-food.jpg");      --img-food2:url("img/case-food2.jpg");
    --img-logi:url("img/sector-logi.jpg");      --img-logi2:url("img/case-logi2.jpg");
    --img-trade:url("img/sector-trade.jpg");
  }

  /* 히어로 배경 — colosseum.global 방식
     사진을 흰색으로 덮지 않는다. 사진을 그대로 깔고, 왼쪽 카피 자리에만
     브랜드 보라를 진하게 얹어 흰 글자를 받친다. 오른쪽은 사진이 살아 있다.
     z-index 를 명시해 사진(0) < 오버레이(1) < 내용(10) 순서를 못박는다. */
  .hero { position:relative; overflow:hidden; isolation:isolate; color:#fff; }
  .hero::before {
    content:""; position:absolute; inset:0; z-index:0;
    background-image:var(--img-hero); background-size:cover; background-position:center 42%;
    opacity:1; }
  .hero::after {
    content:""; position:absolute; inset:0; z-index:1;
    background:
      /* 왼쪽 카피 자리를 받치는 브랜드 보라. 오른쪽으로 갈수록 사진이 드러난다 */
      linear-gradient(100deg,
        rgba(28,16,92,.96) 0%, rgba(38,23,132,.92) 32%,
        rgba(70,44,206,.56) 50%, rgba(92,61,232,.14) 70%, rgba(92,61,232,.02) 100%),
      /* 사진 전체를 아주 살짝만 눌러 준다. 오른쪽 사진이 죽지 않는 선을 지킨다 */
      linear-gradient(180deg, rgba(16,10,48,.16) 0%, rgba(16,10,48,.02) 45%, rgba(16,10,48,.20) 100%); }
  .hero > * { position:relative; z-index:10; }

  @media (max-width:980px){
    /* 한 열로 접히면 글자가 사진 위 전체에 놓인다. 위에서 아래로 받친다. */
    .hero::after {
      background:linear-gradient(180deg,
        rgba(30,18,96,.94) 0%, rgba(45,27,146,.90) 45%, rgba(45,27,146,.82) 100%); }
  }

  /* 어두운 히어로 위의 글자와 컨트롤 */
  .hero { padding-bottom:clamp(56px,7vw,96px); }
  .hero .kicker { color:#C9BCFF; }
  .hero .display { color:#fff; text-shadow:0 2px 18px rgba(16,10,48,.30); }
  .hero .lede { color:rgba(255,255,255,.86); }
  .hero .lede b { color:#fff; }
  .hero-free { color:rgba(255,255,255,.62); }

  /* 보조 버튼은 어두운 바탕에서 유리판처럼 */
  /* 대시보드 카드는 흰 판이다. .hero 의 흰 글자색이 카드 안까지 상속되면
     표의 글씨가 흰 배경에 흰색으로 사라진다. 카드 경계에서 되돌린다. */
  .hero .screen { color:var(--ink); }

  .hero .btn-soft {
    background:rgba(255,255,255,.14); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); backdrop-filter:blur(6px); }
  .hero .btn-soft:hover { background:rgba(255,255,255,.24); color:#fff; }

  /* 칩도 같은 유리판. 선택된 칩만 흰 판에 보라 글자로 뒤집는다 */
  .hero .chip {
    background:rgba(255,255,255,.13); color:rgba(255,255,255,.86);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
  .hero .chip:hover { background:rgba(255,255,255,.22); color:#fff; }
  .hero .chip[aria-pressed="true"] {
    background:#fff; color:var(--accent-2); box-shadow:none; font-weight:700; }
  .hero .chip:focus-visible { outline:3px solid rgba(255,255,255,.7); outline-offset:3px; }


  /* 사례 카드 — 사진이 주인공. 지표는 좌하단, 업종 태그는 우하단 */
  /* 사진을 background-image 가 아니라 <img> 로 낸다.
     이미지 검색에 잡히고 alt 가 남는다. object-fit 으로 잘라 채운다. */
  .card .vis { position:relative; height:clamp(168px,17vw,206px); padding:0;
               background:var(--tint); overflow:hidden; }
  .card .vis img { width:100%; height:100%; object-fit:cover; display:block; }
  .card .vis::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(12,12,24,0) 46%, rgba(12,12,24,.20) 66%, rgba(12,12,24,.84) 100%); }
  .vkpi { position:absolute; left:17px; bottom:14px; z-index:1; line-height:1.2; }
  .vkpi b { display:block; font-family:var(--mono); font-size:24px; font-weight:500; color:#fff;
            font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .vkpi i { font-style:normal; font-size:12.5px; color:rgba(255,255,255,.8); }
  .vtag { position:absolute; right:15px; bottom:17px; z-index:1;
          font-size:11px; font-weight:500; color:#fff; letter-spacing:-.01em;
          background:rgba(255,255,255,.20); backdrop-filter:blur(8px);
          padding:5px 11px; border-radius:999px; }

  /* 전면 사진 띠 */
  .photoband { position:relative; padding:clamp(90px,13vw,190px) 0; overflow:hidden; }
  .photoband::before {
    content:""; position:absolute; inset:0; background-image:var(--img-robot);
    background-size:cover; background-position:center; }
  .photoband::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(105deg, rgba(26,26,46,.68) 0%, rgba(26,26,46,.38) 50%, rgba(92,61,232,.14) 100%); }
  .photoband .wrap { position:relative; z-index:1; }
  .photoband h2, .photoband .kicker { color:#fff; }
  .photoband .lede { color:rgba(255,255,255,.82); }
  .pbstats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; max-width:680px; }
  @media (max-width:640px){ .pbstats{grid-template-columns:1fr;} }
  .pbstat { background:rgba(255,255,255,.11); backdrop-filter:blur(8px); border-radius:16px; padding:22px 20px; }
  .pbstat b { display:block; font-size:clamp(28px,3vw,34px); font-weight:800; color:#fff;
              letter-spacing:-.05em; line-height:1.1; font-variant-numeric:tabular-nums; }
  .pbstat span { font-size:13.5px; color:rgba(255,255,255,.72); }

  /* ---------- 고객사 로고월 ----------
     로고가 있는 곳은 이미지, 아직 없는 곳은 모노그램.
     제각각인 로고가 한 벽으로 읽히도록 높이를 통일하고 기본은 회색조로 둔다. */
  .clients div { display:flex; flex-direction:column; align-items:center; gap:12px; }
  .clients .plate {
    width:100%; height:56px; border-radius:12px; background:#fff;
    display:grid; place-items:center; box-shadow:var(--lift); overflow:hidden; }
  .clients .lg {
    width:78%; height:60%;
    background-position:center; background-repeat:no-repeat; background-size:contain;
    filter:grayscale(.55) opacity(.85); transition:filter .2s; }
  .clients div:hover .lg { filter:none; }
  .clients .mono { font-size:16px; font-weight:900; letter-spacing:-.05em; color:var(--accent); }
  .clients .meta { display:grid; gap:2px; }

  .lg-doblogis  { background-image:url("logos/doblogis.png"); }
  .lg-daehan    { background-image:url("logos/daehan.png"); }
  .lg-hwashin   { background-image:url("logos/hwashin.png"); }
  .lg-seoulfood { background-image:url("logos/seoulfood.png"); }

  /* ---------- 문의 폼 ---------- */
  .formwrap { background:var(--surface); border-radius:22px; box-shadow:var(--lift-lg);
              padding:clamp(26px,4vw,44px); max-width:820px; margin:0 auto; }
  .frow { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,20px); }
  @media (max-width:640px){ .frow{grid-template-columns:1fr;} }

  .field { display:grid; gap:8px; margin-bottom:20px; border:0; padding:0; min-width:0; }
  .field label, .field legend { font-size:14px; font-weight:700; letter-spacing:-.02em; padding:0; }
  .field label b, .field legend b { color:var(--accent); margin-left:2px; }
  .field .hint { font-weight:400; font-size:12.5px; color:var(--faint); margin-left:6px; }

  .field input[type=text], .field input[type=tel], .field input[type=email],
  .field select, .field textarea {
    font:400 15px/1.5 var(--sans); letter-spacing:-.015em; color:var(--ink);
    background:var(--page); border:1px solid var(--line); border-radius:11px;
    padding:13px 15px; width:100%; transition:border-color .15s, box-shadow .15s;
  }
  .field textarea { resize:vertical; min-height:96px; }
  .field select { appearance:none; cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                     linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 20px) 22px, calc(100% - 15px) 22px;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
  .field :is(input,select,textarea):focus {
    outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .field :is(input,select,textarea)::placeholder { color:var(--faint); }
  .field :is(input,select,textarea)[aria-invalid="true"] {
    border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }

  .err { font-size:12.5px; color:#DC2626; min-height:0; }
  .err:empty { display:none; }

  .checks { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
  @media (max-width:820px){ .checks{grid-template-columns:repeat(2,1fr);} }
  .checks label {
    display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:400;
    background:var(--tint); border-radius:11px; padding:12px 14px; cursor:pointer;
    transition:background .15s, box-shadow .15s; }
  .checks label:hover { background:var(--accent-soft); }
  .checks input { accent-color:var(--accent); width:16px; height:16px; flex:none; margin:0; }
  .checks input:checked + span { color:var(--accent); font-weight:500; }
  .checks label:focus-within { box-shadow:0 0 0 3px var(--accent-soft); }

  .consent .chk { display:flex; gap:11px; align-items:flex-start; font-weight:400;
                  background:var(--tint); border-radius:12px; padding:16px 18px; cursor:pointer; }
  .consent .chk input { accent-color:var(--accent); width:17px; height:17px; flex:none; margin:2px 0 0; }
  .consent .chk > span { font-size:14px; }
  .consent .chk em { display:block; font-style:normal; font-size:12.5px; color:var(--muted);
                     line-height:1.65; margin-top:6px; }
  .consent .chk:focus-within { box-shadow:0 0 0 3px var(--accent-soft); }

  .fsubmit { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
  .fsubmit .btn { flex:1 1 200px; }
  .fnote { margin-top:16px; font-size:14px; line-height:1.7; }
  .fnote.ok { color:var(--accent); font-weight:500; }
  .fnote.bad { color:#DC2626; }
  #f-submit[disabled] { opacity:.6; cursor:progress; }

  .contactside { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px);
                 max-width:820px; margin:clamp(20px,3vw,28px) auto 0; }
  @media (max-width:640px){ .contactside{grid-template-columns:1fr;} }
  .cs { background:var(--tint); border-radius:18px; padding:24px 26px; }
  .cs h3 { font-size:16px; margin-bottom:10px; }
  .cs p, .cs ol { font-size:14px; color:var(--muted); line-height:1.75; }
  .cs a { color:var(--accent); text-decoration:none; font-weight:500; }
  .cs a:hover { text-decoration:underline; }
  .cs ol { margin:0; padding-left:20px; display:grid; gap:7px; }

  /* ---------- 페이지 헤더 (하위 페이지 공통) ----------
     랜딩은 히어로가 그 역할을 하므로 이 블록을 쓰지 않는다. */
  :root {
    --img-page-systems:url("img/page-systems.jpg");
    --img-page-industry:url("img/page-industry.jpg");
    --img-page-guide:url("img/page-guide.jpg");
    --img-page-cost:url("img/page-cost.jpg");
    --img-page-compare:url("img/page-compare.jpg");
    --img-page-period:url("img/page-period.jpg");
    --img-page-privacy:url("img/page-privacy.jpg");
    --img-page-terms:url("img/page-terms.jpg");
    --img-page-login:url("img/page-login.jpg");
    --img-page-use:url("img/page-use.jpg");
    --img-page-pricing:url("img/page-pricing.jpg");
    --img-page-process:url("img/page-process.jpg");
    --img-page-cases:url("img/page-cases.jpg");
    --img-page-contact:url("img/page-contact.jpg");
  }

  .pagehead { position:relative; overflow:hidden; isolation:isolate;
              padding:clamp(64px,9vw,116px) 0 clamp(56px,8vw,96px); }
  .pagehead::before {
    content:""; position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center; opacity:1;
    /* 흰 막을 걷어낸 만큼 사진이 밋밋해 보이지 않도록 아주 살짝 살려 준다 */
    filter:saturate(1.06) contrast(1.04); }
  .pagehead::after {
    content:""; position:absolute; inset:0; z-index:1;
    background:
      /* 사진을 넓게 덮지 않는다. 글이 실제로 놓이는 왼쪽 45% 까지만 받치고
         거기서 빠르게 걷어 낸다. 오른쪽 절반은 사진이 그대로 보인다.
         글자 대비는 아래 text-shadow 가 함께 맡는다 — 막을 두껍게 하는 것보다
         사진이 훨씬 선명하게 남는다.

         45% 지점의 .54 는 눈대중이 아니다. 헤더 사진 14장의 왼쪽 45% 구간에서
         가장 어두운 픽셀을 뽑아 흰 막을 합성하고 본문 색(--ink)과의 대비를 계산했다.
         .46 이면 3.75:1 로 AA(4.5:1) 미달, .52 부터 통과한다. 여유를 두어 .54 로 잡았다.
         사진을 바꾸면 이 계산을 다시 해야 한다. */
      linear-gradient(96deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.74) 30%,
                             rgba(255,255,255,.54) 45%, rgba(255,255,255,.12) 56%,
                             rgba(255,255,255,0) 64%),
      linear-gradient(180deg, rgba(255,255,255,0) 82%, rgba(255,255,255,.94) 100%); }

  /* 흰 막을 얇게 한 대신 글자마다 옅은 흰 후광을 둔다.
     사진이 어두운 자리에 글이 걸려도 읽힌다. */
  .pagehead h1, .pagehead .lede, .pagehead .crumb, .pagehead .kicker {
    text-shadow:0 1px 10px rgba(255,255,255,.85), 0 0 24px rgba(255,255,255,.6); }
  .pagehead > * { position:relative; z-index:10; }
  @media (max-width:820px){
    .pagehead::before { opacity:.66; }
    .pagehead::after { background:linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.82) 46%, rgba(255,255,255,.96) 82%); }
  }

  .ph-systems::before  { background-image:var(--img-page-systems); }
  .ph-industry::before { background-image:var(--img-page-industry); }
  .ph-use::before      { background-image:var(--img-page-use); }
  .ph-pricing::before  { background-image:var(--img-page-pricing); }
  .ph-process::before  { background-image:var(--img-page-process); }
  .ph-cases::before    { background-image:var(--img-page-cases); }
  .ph-contact::before  { background-image:var(--img-page-contact); }
  .ph-guide::before    { background-image:var(--img-page-guide); }
  .ph-guide-erp-cost::before       { background-image:var(--img-page-cost); }
  .ph-guide-erp-vs-custom::before  { background-image:var(--img-page-compare); }
  .ph-guide-build-period::before   { background-image:var(--img-page-period); }
  .ph-login::before    { background-image:var(--img-page-login); }
  .ph-privacy::before  { background-image:var(--img-page-privacy); }
  .ph-terms::before    { background-image:var(--img-page-terms); }

  .pagehead h1 { font-size:clamp(30px,4.6vw,50px); margin:16px 0 0; max-width:18ch; }
  .pagehead .lede { max-width:44ch; }
  .crumb { font-size:13px; color:var(--faint); }
  .crumb a { color:inherit; text-decoration:none; }
  .crumb a:hover { color:var(--accent); }
  .crumb span { margin:0 7px; }

  /* 페이지 헤더 바로 뒤 섹션은 위 여백을 줄여 붙는 느낌을 준다 */
  .pagehead + section { padding-top:clamp(44px,6vw,80px); }

  /* ---------- 가이드 (질문형 콘텐츠 페이지) ---------- */
  .guide .gbody { max-width:760px; margin:0 auto; }
  .guide .gbody > * + * { margin-top:22px; }
  .guide h2 { font-size:clamp(21px,2.6vw,27px); margin-top:52px; }
  .guide p { font-size:16.5px; line-height:1.85; color:var(--ink); }
  .guide b { font-weight:700; }
  .guide em { font-style:normal; color:var(--accent); font-weight:500; }

  /* 답변 엔진이 그대로 인용하는 자리 — 첫 문장에 결론을 둔다 */
  .guide .answer {
    background:var(--accent-soft); border-radius:16px; padding:24px 26px;
    font-size:17px; line-height:1.85; }

  .guide ul, .guide ol { padding-left:22px; display:grid; gap:12px;
                         font-size:16px; line-height:1.8; color:var(--muted); }
  .guide li b { color:var(--ink); }
  .guide ul.check { list-style:none; padding-left:0; }
  .guide ul.check li { position:relative; padding-left:28px; }
  .guide ul.check li::before {
    content:"✓"; position:absolute; left:4px; color:var(--accent); font-weight:700; }

  .tablewrap { overflow-x:auto; }
  table.cmp { width:100%; min-width:520px; border-collapse:collapse; font-size:15px;
              background:var(--surface); border-radius:14px; overflow:hidden; box-shadow:var(--lift); }
  table.cmp th { text-align:left; font-size:13px; font-weight:700; color:var(--muted);
                 padding:14px 18px; background:var(--tint); }
  table.cmp td { padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); }
  table.cmp td:first-child { color:var(--ink); font-weight:500; }
  table.cmp td.good { color:var(--accent); font-weight:700; }
  .guide .cap { font-size:13.5px; color:var(--faint); }

  .cta-inline {
    margin-top:56px; background:var(--tint); border-radius:20px; padding:28px 30px;
    display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
  .cta-inline p { font-size:16px; margin:0; flex:1 1 320px; }
  .cta-inline .btn { flex:0 0 auto; }

  /* 가이드 허브 */
  .ghub { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
  @media (max-width:940px){ .ghub{grid-template-columns:1fr;} }
  .ghcard { display:block; text-decoration:none; background:var(--surface); border-radius:18px;
            padding:28px 26px; box-shadow:var(--lift); transition:transform .18s, box-shadow .18s; }
  .ghcard:hover { transform:translateY(-4px); box-shadow:var(--lift-lg); }
  .ghcard:focus-visible { outline:3px solid var(--accent-soft); outline-offset:3px; }
  .ghcard .gq { font-family:var(--mono); font-size:15px; font-weight:500; color:var(--accent); }
  .ghcard h2 { font-size:19px; margin:12px 0 10px; line-height:1.45; }
  .ghcard p { font-size:14.5px; color:var(--muted); line-height:1.7; }
  .ghcard .go { display:inline-block; margin-top:16px; font-size:14px; font-weight:700; color:var(--accent); }
  .ghcard .go::after { content:" →"; }

  /* ---------- 모바일 메뉴 ----------
     960px 이하에서 가로 메뉴가 숨겨지므로, 그 자리를 드로어가 대신한다. */
  .burger { display:none; order:-1; width:40px; height:40px; border:0; background:transparent;
            cursor:pointer; padding:0; place-items:center; gap:5px; border-radius:10px; }
  .burger span { display:block; width:20px; height:2px; border-radius:2px; background:var(--ink);
                 transition:transform .22s, opacity .18s; }
  .burger:focus-visible { outline:3px solid var(--accent-soft); outline-offset:2px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .drawer { display:none; }
  @media (max-width:1180px) {
    .burger { display:grid; }
    .drawer[hidden] { display:none; }
    .drawer {
      display:grid; gap:2px; padding:8px var(--pad) 20px;
      border-top:1px solid var(--line); background:var(--page);
      max-height:calc(100dvh - 64px); overflow-y:auto;
    }
    .drawer a:not(.btn) {
      display:block; padding:15px 4px; font-size:16px; font-weight:500; color:var(--ink);
      text-decoration:none; border-bottom:1px solid var(--line);
    }
    .drawer a:not(.btn):hover, .drawer a[aria-current="page"] { color:var(--accent); }
    .drawer .btn { margin-top:14px; }
  }

  /* 모바일에서도 요금이 보이도록 상단 스트립을 바꿔 쓴다 */
  @media (max-width:760px) {
    .strip .a { display:none; }
    .strip .b { display:block; }
  }

  /* 좁은 폭에서 네비가 줄바꿈으로 터지지 않게 한다 */
  .logo, .navr .btn { white-space:nowrap; }
  @media (max-width:1180px) {
    .nav-in { gap:10px; padding-inline:16px; }
    .logo { font-size:17px; gap:7px; }
    .logo .mk { width:23px; height:23px; border-radius:8px; }
    .navr { gap:6px; }
    .navr .btn { font-size:13.5px; padding:10px 14px; }
  }
  @media (max-width:420px) {
    .logo { font-size:16px; }
    .navr .btn { font-size:13px; padding:9px 12px; }
    .strip div { padding:9px 12px; font-size:12px; }
  }

  /* ---------- 고객 포털 로그인 ---------- */
  .loginwrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
               gap:clamp(20px,3vw,40px); align-items:start; max-width:960px; margin:0 auto; }
  @media (max-width:860px){ .loginwrap{grid-template-columns:1fr;} }

  .logincard { background:var(--surface); border-radius:22px; box-shadow:var(--lift-lg);
               padding:clamp(28px,4vw,40px); }
  .logincard h2 { font-size:24px; }
  .logincard .lsub { font-size:14.5px; color:var(--muted); margin-top:8px; margin-bottom:28px; }
  .logincard .btn { width:100%; }

  .lrow { display:flex; align-items:center; justify-content:space-between;
          gap:12px; margin:-6px 0 22px; flex-wrap:wrap; }
  .chk.small { display:flex; align-items:center; gap:8px; font-size:13.5px;
               color:var(--muted); cursor:pointer; background:none; padding:0; }
  .chk.small input { accent-color:var(--accent); width:15px; height:15px; margin:0; }
  .llink { font-size:13.5px; color:var(--accent); text-decoration:none; font-weight:500; }
  .llink:hover { text-decoration:underline; }

  .lfoot { margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
  .lfoot p { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:16px; }
  .lfoot b { color:var(--ink); }
  .lfoot .btn { width:100%; }

  .portalside { background:var(--tint); border-radius:22px; padding:clamp(26px,3.4vw,36px); }
  .portalside h3 { font-size:19px; margin:14px 0 22px; }
  .plist { list-style:none; margin:0; padding:0; display:grid; gap:20px; }
  .plist li { display:grid; gap:5px; padding-left:20px; position:relative; }
  .plist li::before { content:"→"; position:absolute; left:0; color:var(--accent);
                      font-family:var(--mono); font-size:13px; }
  .plist b { font-size:15.5px; letter-spacing:-.02em; }
  .plist span { font-size:14px; color:var(--muted); line-height:1.7; }
  .pnote { margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
           font-size:13.5px; color:var(--faint); line-height:1.7; }

  .loginlink { font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;
               padding:10px 12px; border-radius:9px; }
  .loginlink:hover { color:var(--accent); background:var(--tint); }
  .drawer-login { color:var(--muted) !important; }

  /* ---------- 법률 문서 (개인정보처리방침 · 이용약관) ---------- */
  .legal .lgbody { max-width:780px; margin:0 auto; }
  .legal .lgbody > * + * { margin-top:18px; }
  .legal h2 { font-size:19px; margin-top:44px; }
  .legal p { font-size:15.5px; line-height:1.85; color:var(--muted); }
  .legal p b, .legal li b { color:var(--ink); font-weight:700; }
  .legal ul, .legal ol { padding-left:22px; display:grid; gap:10px;
                         font-size:15.5px; line-height:1.8; color:var(--muted); }
  .legal ul ul { margin-top:10px; }
  .legal a { color:var(--accent); text-decoration:none; }
  .legal a:hover { text-decoration:underline; }
  .legal .lgdate { font-family:var(--mono); font-size:13px; color:var(--faint); }
  .legal .lgnote { font-size:14px; color:var(--faint); }
  .legal table.cmp { min-width:0; font-size:14.5px; }
  .legal table.cmp td:first-child { white-space:nowrap; }
  .legal .lgfoot { margin-top:56px; padding-top:26px; border-top:1px solid var(--line); }
  .legal .lgfoot p { font-size:13.5px; color:var(--faint); line-height:1.9; }

  /* ---------- 아이콘 ----------
     24x24 stroke 아이콘. currentColor 로 그려 주변 색을 그대로 따른다. */
  .ico { display:inline-grid; place-items:center; flex:none; }
  .ico svg { width:22px; height:22px; display:block; }


  .wc .n { display:flex; align-items:center; gap:10px; }
  .wc .n .ico { width:38px; height:38px; border-radius:11px;
                background:var(--accent-soft); color:var(--accent); }
  .wc .n .ico svg { width:20px; height:20px; }

  .step .no { width:auto; height:auto; background:none; padding:0; margin-bottom:14px; }
  .step .no .ico { width:44px; height:44px; border-radius:13px;
                   background:var(--accent-soft); color:var(--accent); }
  .step .no .ico svg { width:22px; height:22px; }

  .crumb .here { color:var(--muted); }

  /* 후기 아바타 — 특정 인물이 아니라 그 업종의 현장을 보여준다.
     실제 담당자 사진을 동의받아 받으면 이 자리에 넣으면 된다. */
  :root {
    --img-av-auto:url("img/avatar-auto.jpg");
    --img-av-logi:url("img/avatar-logi.jpg");
    --img-av-food:url("img/avatar-food.jpg");
  }
  .voice .av { background-size:cover; background-position:center; }
  .voice .av.av-auto { background-image:var(--img-av-auto); }
  .voice .av.av-logi { background-image:var(--img-av-logi); }
  .voice .av.av-food { background-image:var(--img-av-food); }

  /* ---------- 404 ---------- */
  .nf { padding:clamp(80px,12vw,150px) 0; }
  .nfbody { max-width:620px; margin:0 auto; text-align:center; }
  .nfcode { font-family:var(--mono); font-size:clamp(64px,11vw,120px); font-weight:500;
            line-height:1; color:var(--accent-soft); letter-spacing:-.04em; }
  .nf h1 { font-size:clamp(24px,3.4vw,34px); margin-top:-10px; }
  .nf .lede { margin-inline:auto; }
  .nflinks { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:34px; }
  .nflinks a { font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;
               background:var(--tint); padding:10px 16px; border-radius:999px; transition:all .15s; }
  .nflinks a:hover { background:var(--accent-soft); color:var(--accent); }
  .nfcta { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:32px; }
  .nfnote { margin-top:28px; font-size:13.5px; color:var(--faint); }
  .nfnote a { color:var(--accent); text-decoration:none; }

  /* ==========================================================
     colosseum.global 참고 — 숫자 카드 / 근거 밴드 / 원형 화살표
     차용한 것은 "라벨 → 큰 숫자 → 한 줄 근거" 라는 정보 순서와,
     수치마다 기준을 각주로 다는 방식이다. 색과 폰트는 우리 토큰을 쓴다.
     ========================================================== */

  /* 숫자 카드 4장 — colosseum.global 카드 배치를 따른다.
     위에 제목과 설명, 아래에 작은 라벨과 아주 큰 숫자.
     가운데를 비워 두는 것이 이 배치의 핵심이다. 숫자가 바닥에 앉아야 눈이 간다. */
  .numgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,18px); }
  @media (max-width:940px){ .numgrid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:540px){ .numgrid{grid-template-columns:1fr;} }

  .numcard {
    position:relative; overflow:hidden; isolation:isolate;
    border-radius:22px; padding:30px 28px 28px;
    min-height:clamp(300px,25vw,344px);
    display:flex; flex-direction:column; color:#fff;
    background:linear-gradient(155deg,var(--accent) 0%,var(--accent-2) 100%);
  }
  /* 네 장을 같은 보라 안에서 밝기만 다르게 둔다 — 색이 네 개가 되면 산만해진다 */
  .numcard.n1 { background:linear-gradient(155deg,#7C5CF0 0%,#5C3DE8 100%); }
  .numcard.n2 { background:linear-gradient(155deg,#6A49EC 0%,#4A2FD4 100%); }
  .numcard.n3 { background:linear-gradient(155deg,#5C3DE8 0%,#3F27B8 100%); }
  .numcard.n4 { background:linear-gradient(155deg,#4A2FD4 0%,#2E1C8C 100%); }

  /* 카드마다 다른 배경 그래픽.
     평면 그라데이션만 두면 카드가 비어 보인다 — 특히 모바일에서 가운데 여백이 크다.
     원본처럼 카드별로 다른 도형을 아주 옅게 깔아 각 카드에 성격을 준다. */
  .numcard::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background-repeat:no-repeat; background-position:center bottom; background-size:100% auto;
  }
  .numcard.n1::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20460'%20preserveAspectRatio%3D'none'%3E%3Cg%20stroke%3D'rgba(255%2C255%2C255%2C.10)'%20stroke-width%3D'2'%3E%3Cpath%20d%3D'M0%20260%20H400%20M0%20320%20H400%20M0%20380%20H400%20M0%20440%20H400'%2F%3E%3Cpath%20d%3D'M80%20230%20V460%20M170%20230%20V460%20M260%20230%20V460%20M350%20230%20V460'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M0%20400%20L90%20330%20L180%20366%20L270%20286%20L400%20320'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.30)'%20stroke-width%3D'3.5'%2F%3E%3C%2Fsvg%3E"); }
  .numcard.n2::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20460'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M-20%20300%20C%2080%20240%20150%20330%20240%20268%20C%20310%20220%20360%20250%20420%20214%20L420%20470%20L-20%20470%20Z'%20fill%3D'rgba(255%2C255%2C255%2C.10)'%2F%3E%3Cpath%20d%3D'M-20%20336%20C%2090%20286%20160%20360%20250%20306%20C%20320%20264%20370%20288%20420%20258'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.22)'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E"); }
  .numcard.n3::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20460'%20preserveAspectRatio%3D'none'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C.12)'%3E%3Crect%20x%3D'40'%20y%3D'250'%20width%3D'34'%20height%3D'210'%20rx%3D'6'%2F%3E%3Crect%20x%3D'96'%20y%3D'196'%20width%3D'34'%20height%3D'264'%20rx%3D'6'%2F%3E%3Crect%20x%3D'152'%20y%3D'288'%20width%3D'34'%20height%3D'172'%20rx%3D'6'%2F%3E%3Crect%20x%3D'208'%20y%3D'150'%20width%3D'34'%20height%3D'310'%20rx%3D'6'%2F%3E%3Crect%20x%3D'264'%20y%3D'232'%20width%3D'34'%20height%3D'228'%20rx%3D'6'%2F%3E%3Crect%20x%3D'320'%20y%3D'188'%20width%3D'34'%20height%3D'272'%20rx%3D'6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
  .numcard.n4::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20400%20460'%20preserveAspectRatio%3D'none'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.14)'%20stroke-width%3D'2'%3E%3Ccircle%20cx%3D'330'%20cy%3D'352'%20r%3D'70'%2F%3E%3Ccircle%20cx%3D'330'%20cy%3D'352'%20r%3D'114'%2F%3E%3Ccircle%20cx%3D'330'%20cy%3D'352'%20r%3D'158'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

  /* 오른쪽 위의 빛나는 구 — 네 장 공통. 카드에 깊이를 준다 */
  .numcard::before {
    content:""; position:absolute; z-index:-1;
    width:118px; height:118px; right:-26px; top:-26px; border-radius:50%;
    background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.34), rgba(255,255,255,.06) 62%, transparent 72%);
  }

  /* ---- 카드끼리 줄을 맞춘다 ----
     제목이 한 줄인 카드와 두 줄인 카드가 섞이면 그 아래가 전부 어긋난다.
     제목·설명이 차지할 높이를 미리 잡아 네 장의 제목, 설명, 라벨, 숫자가
     각각 같은 높이에서 시작하게 한다. */
  .numcard h3 {
    font-size:clamp(18px,1.6vw,21px); font-weight:700; letter-spacing:-.04em;
    line-height:1.35; color:#fff; margin-bottom:12px;
    min-height:calc(1.35em * 2);
  }
  .numcard p {
    font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.84);
    min-height:calc(1.7em * 2);
  }
  @media (max-width:940px){
    /* 두 열·한 열에서는 제목이 한 줄로 떨어져 예비 높이가 낭비된다 */
    .numcard h3 { min-height:0; }
    .numcard p { min-height:calc(1.7em * 1); }
  }


  .numcard .nl {
    margin-top:auto; padding-top:26px;
    font-size:13px; font-weight:600; color:rgba(255,255,255,.80); letter-spacing:-.025em;
  }
  .numcard .nv {
    display:block; margin-top:4px;
    font-size:clamp(46px,5.6vw,68px); font-weight:800; line-height:1;
    letter-spacing:-.055em; font-variant-numeric:tabular-nums;
  }
  /* 단위(개·주·원)는 원본처럼 숫자와 비슷한 크기로 붙여 둔다.
     .46em 처럼 작게 두면 숫자만 떠 보이고 단위가 각주처럼 읽힌다. */
  .numcard .nv em {
    font-style:normal; font-size:.66em; font-weight:800;
    margin-left:1px; letter-spacing:-.04em;
  }


  /* 근거 밴드 — 각주가 붙은 수치만 여기 들어간다 */
  .proof { padding:clamp(46px,6vw,84px) 0; }
  .proofrow {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:clamp(18px,3vw,44px);
  }
  @media (max-width:820px){ .proofrow{grid-template-columns:1fr; gap:26px;} }
  .pf { padding-left:clamp(18px,2.4vw,32px); border-left:1px solid var(--line); }
  @media (max-width:820px){ .pf{padding-left:18px;} }
  .pf .pl { display:block; font-size:14.5px; font-weight:500; color:var(--muted); letter-spacing:-.025em; }
  .pf .pv {
    display:block; margin-top:10px; font-size:clamp(32px,3.8vw,44px); font-weight:800;
    letter-spacing:-.055em; line-height:1.15; color:var(--accent);
    font-variant-numeric:tabular-nums;
  }
  .pf .pn { display:block; margin-top:10px; font-size:12.5px; line-height:1.6; color:var(--faint); }

  /* 허브 카드의 원형 화살표 어포던스 */
  .hubcard .go {
    display:flex; align-items:center; gap:10px; margin-top:18px;
    font-size:14px; font-weight:700; color:var(--accent);
  }
  .hubcard .go::after {
    content:"→"; margin-left:auto; flex:none;
    width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
    font-size:15px; font-weight:400; color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--line); background:var(--page);
    transition:background .16s, color .16s, box-shadow .16s, transform .16s;
  }
  .hubcard:hover .go::after {
    background:var(--accent); color:var(--on-accent);
    box-shadow:inset 0 0 0 1px var(--accent); transform:translateX(2px);
  }

  /* 맨 위로 */
  .totop {
    position:fixed; left:18px; bottom:18px; z-index:90;
    width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
    background:var(--surface); color:var(--muted); box-shadow:var(--lift);
    display:grid; place-items:center; font-size:16px; line-height:1;
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .2s, transform .2s, visibility .2s, color .16s;
  }
  .totop.on { opacity:1; visibility:visible; transform:none; }
  .totop:hover { color:var(--accent); }
  .totop:focus-visible { outline:3px solid var(--accent-soft); outline-offset:3px; }
  @media (prefers-reduced-motion:reduce){ .totop{transition:none;} }

  /* 후기 카드 — 말한 사람을 먼저 보여주고, 아바타는 카드 위로 걸친다 */
  .voices { padding-top:30px; }
  .voice { position:relative; padding-top:42px; }
  .voice .who { margin-top:0; align-items:center; }
  .voice .av {
    position:absolute; top:-30px; left:28px;
    width:60px; height:60px; box-shadow:0 0 0 5px var(--surface), var(--lift);
  }
  .voice q { margin-top:0; }
  .voice .who > div { padding-left:0; }

  /* 상단 스트립을 클릭 가능한 프로모션 바로 (colosseum 상단 띠 참고) */
  .strip .a {
    display:flex; align-items:center; justify-content:center; gap:12px;
    text-decoration:none; color:#fff; transition:background .16s;
  }
  .strip .a:hover { background:linear-gradient(90deg,#3F27B8,#5230E0); }
  .strip .a:focus-visible { outline:3px solid rgba(255,255,255,.7); outline-offset:-3px; }
  .strip .sbtn {
    flex:none; font-size:12px; font-weight:700; letter-spacing:-.02em;
    padding:4px 12px; border-radius:999px;
    background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
  }
  @media (max-width:760px){ .strip .sbtn{display:none;} }

  /* 도크 — 누구에게 연결되는지를 밝힌다 */
  .dock-cta { display:grid; gap:2px; line-height:1.35; }
  .dock-cta b { font-size:14px; font-weight:700; letter-spacing:-.03em; }
  .dock-cta span { font-size:11.5px; color:rgba(255,255,255,.82); }
  .dock-chat svg { width:23px; height:23px; color:var(--accent); }

  /* .a 가 div 에서 a 로 바뀌어 `.strip div` 규칙이 걸리지 않는다 */
  .strip .a { padding:10px 16px; }
  /* 위 `.strip .a{display:flex}` 가 뒤에 오므로, 모바일 숨김을 여기서 다시 건다 */
  @media (max-width:760px){ .strip .a { display:none; } }

  /* 위 `.dock-cta{display:grid}` 가 뒤에 오므로, 모바일 숨김도 여기서 다시 건다 */
  @media (max-width:620px){ .dock-cta { display:none; } }

  /* 시스템 목록 좌측 열 — 비어 있던 자리에 현장 사진을 넣는다 */
  /* 카드 맨 위의 현장 사진 — <img> 로 낸다 (이미지 검색 · 대체 텍스트) */
  /* width/height 속성은 레이아웃 흔들림을 막으려고 남겨 둔다.
     다만 그 속성이 CSS 의 aspect-ratio 를 눌러 높이를 고정해 버리므로
     height:auto 로 풀어 줘야 16:10 이 실제로 적용된다. */
  .syscard .sysphoto {
    display:block; width:100%; height:auto; aspect-ratio:16/10;
    object-fit:cover; background:var(--tint);
  }

  /* 실제 로고가 아직 없는 4곳의 모노그램을 로고들과 같은 무게로 맞춘다.
     로고는 grayscale(.55) opacity(.85) 로 눌러 놓았는데 모노그램만 보라색이면
     한 벽으로 읽히지 않는다. hover 는 로고와 마찬가지로 원래 색이 돌아온다. */
  .clients .mono { color:#8C8CA6; transition:color .2s; }
  .clients div:hover .mono { color:var(--accent); }


  /* 사진이 밝은 카드에서도 지표가 읽히도록 한 겹 더 받쳐 준다 */
  .vkpi b, .vkpi i { text-shadow:0 1px 3px rgba(12,12,24,.45); }
  .vtag { text-shadow:0 1px 2px rgba(12,12,24,.35); }

  /* 로고 마크 — 파비콘과 같은 글리프를 넣는다 (src/favicon.mjs 의 GLYPH 하나가 원본).
     배경 그라데이션은 위의 .logo .mk / .fbrand .mk 가 그대로 맡는다. */
  .mk { display:grid; place-items:center; }
  .mk .mkg { width:74%; height:74%; display:block; }

  /* 자료실 하단 마무리 —— 문장 끝에 붙은 텍스트 링크는 줄바꿈으로 "무료 / 진단 신청" 처럼
     쪼개지고 눈에도 안 띈다. 문장·버튼·보조설명을 세로로 세워 하나의 덩어리로 만든다. */
  .ghend {
    margin-top:clamp(40px,5vw,64px); padding:clamp(30px,4vw,44px) 24px;
    background:var(--tint); border-radius:20px;
    display:grid; justify-items:center; gap:16px; text-align:center;
  }
  .ghend p { font-size:clamp(17px,1.9vw,20px); font-weight:700; letter-spacing:-.035em; }
  .ghend .ghnote { font-size:13.5px; color:var(--muted); }

  /* 로고 워드마크는 영문(ONSTACK)으로 쓴다.
     .logo / .fbrand 에 걸린 letter-spacing:-.05em 은 한글 기준이라
     라틴 대문자에 그대로 쓰면 글자가 서로 붙는다. 여기서 되돌린다.
     본문·제목·og:site_name 은 한글 '온스택'을 유지한다 — 국내 검색은 한글로 들어온다. */
  .logo .wm, .fbrand .wm { font-weight:800; letter-spacing:.005em; }

  /* ---------- 히어로 대시보드 ----------
     시스템마다 다른 모듈이 붙는다. 전환할 때 막대가 자라고 행이 차례로 나타난다.
     .on 은 그리기가 끝난 다음 프레임에 붙는다 — 그래야 전이가 실제로 재생된다. */
  .screen-bar .sclive {
    margin-left:auto; display:inline-flex; align-items:center; gap:6px;
    font-style:normal; font-size:11px; font-weight:500; color:var(--accent);
    background:var(--accent-soft); padding:4px 10px; border-radius:999px;
  }
  .screen-bar .sclive b { width:6px; height:6px; border-radius:50%; background:var(--accent); }
  @media (prefers-reduced-motion:no-preference){
    .screen-bar .sclive b { animation:scpulse 1.8s ease-in-out infinite; }
  }
  @keyframes scpulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }

  /* 화면이 바뀔 때 카드 높이가 튀지 않도록, 가장 높은 화면(표 4행)에 바닥을 맞춘다.
     실측 268~367px 이라 368px 로 고정했다. 이 값은 모듈을 늘리면 다시 재야 한다. */
  .screen-body { min-height:368px; }
  .scmod { margin-top:16px; }
  .sccap {
    font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--faint); margin-bottom:12px;
  }

  /* 막대 — 적재율·가동률 */
  .barrow { display:grid; grid-template-columns:88px 1fr 44px; align-items:center; gap:10px; margin-top:10px; }
  .barrow .bl { font-size:12.5px; color:var(--muted); }
  .barrow .btrack { height:8px; border-radius:999px; background:var(--tint); overflow:hidden; }
  .barrow .bfill {
    display:block; height:100%; width:0; border-radius:999px;
    background:linear-gradient(90deg,var(--accent),#8B72F5);
    transition:width .7s cubic-bezier(.2,.7,.3,1); transition-delay:var(--d,0ms);
  }
  .screen-body.on .barrow .bfill { width:var(--w); }
  .barrow .bv {
    font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
    color:var(--ink); text-align:right;
  }

  /* 단계 — 주문 흐름·선적 진행 */
  .steps4 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .steps4 li {
    position:relative; padding-top:18px; font-size:12px; color:var(--muted);
    opacity:0; transform:translateY(6px);
    transition:opacity .45s ease, transform .45s ease; transition-delay:var(--d,0ms);
  }
  .screen-body.on .steps4 li { opacity:1; transform:none; }
  .steps4 li b { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:2px; }
  .steps4 li .sdot {
    position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%;
    background:var(--line); box-shadow:0 0 0 3px var(--surface);
  }
  /* 점끼리 잇는 선. 마지막 칸은 잇지 않는다 */
  .steps4 li::before {
    content:""; position:absolute; top:5px; left:11px; right:-8px; height:1px; background:var(--line);
  }
  .steps4 li:last-child::before { display:none; }
  .steps4 li.done .sdot { background:var(--accent); }
  .steps4 li.done::before { background:var(--accent); }
  .steps4 li.now .sdot { background:var(--signal); }
  .steps4 li.now b { color:var(--accent); }

  /* 표 — 행이 차례로 나타난다 */
  .scmod table.t tbody tr {
    opacity:0; transform:translateY(6px);
    transition:opacity .45s ease, transform .45s ease; transition-delay:var(--d,0ms);
  }
  .screen-body.on .scmod table.t tbody tr { opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){
    .screen-body .barrow .bfill { width:var(--w); transition:none; }
    .screen-body .steps4 li, .screen-body .scmod table.t tbody tr { opacity:1; transform:none; transition:none; }
  }

  /* ---------- 마무리 CTA 띠 ----------
     페이지를 닫는 자리다. 회색 판 대신 현장 사진을 깔고 브랜드 보라를 덮어 마감한다.
     글이 가운데 정렬이라 히어로와 달리 좌우가 아니라 가운데를 가장 진하게 받친다. */
  :root { --img-cta:url("img/cta-band.jpg"); }
  .ctaband {
    position:relative; overflow:hidden; isolation:isolate; color:#fff;
    padding:clamp(84px,10vw,140px) 0;
  }
  .ctaband::before {
    content:""; position:absolute; inset:0; z-index:0;
    background:var(--img-cta) center 55%/cover no-repeat;
  }
  .ctaband::after {
    content:""; position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(78% 92% at 50% 52%, rgba(30,18,96,.93) 0%, rgba(45,27,146,.86) 42%, rgba(58,36,178,.62) 72%, rgba(74,47,212,.42) 100%),
      linear-gradient(180deg, rgba(16,10,48,.30) 0%, rgba(16,10,48,.06) 40%, rgba(16,10,48,.34) 100%);
  }
  .ctaband > * { position:relative; z-index:10; }
  .ctaband .display { color:#fff; text-shadow:0 2px 20px rgba(16,10,48,.35); }
  .ctaband .lede { color:rgba(255,255,255,.86); }

  /* 어두운 바탕에서는 주 버튼을 흰 판으로 뒤집어야 눈에 들어온다 */
  .ctaband .btn-fill { background:#fff; color:var(--accent-2); }
  .ctaband .btn-fill:hover { background:#F1EDFF; color:var(--accent-2); }
  .ctaband .btn-soft {
    background:rgba(255,255,255,.14); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.36); backdrop-filter:blur(6px); }
  .ctaband .btn-soft:hover { background:rgba(255,255,255,.24); color:#fff; }
  .ctaband .btn:focus-visible { outline:3px solid rgba(255,255,255,.75); outline-offset:3px; }

  /* 업무 카드에 현장 사진 —— 카드 제목이 업무명을 말하므로 사진은 장식이다.
     아이콘은 버리지 않고 사진 위에 흰 배지로 걸쳐 둔다. 사진만 있으면
     열두 장이 비슷해 보이고, 아이콘만 있으면 현장 느낌이 없다. */
  .jobcard { position:relative; padding:0 0 20px; overflow:hidden; gap:5px; }
  .jobcard .jphoto {
    display:block; width:100%; height:auto; aspect-ratio:16/10; border-radius:15px 15px 0 0;
    object-fit:cover; background:var(--line);
  }
  /* 아이콘 배지는 음수 마진으로 끌어올려 사진 아래 모서리에 걸친다.
     사진 높이가 카드 폭에 따라 달라지므로 절대 위치보다 흐름 안에서 당기는 편이 안전하다. */
  .jobcard .jico {
    position:relative; z-index:1; margin:-24px 0 2px 16px;
    display:grid; place-items:center; width:40px; height:40px; border-radius:13px;
    background:var(--surface); box-shadow:var(--lift);
  }
  .jobcard .jico svg { width:20px; height:20px; }
  .jobcard b, .jobcard .jd { padding-inline:17px; }


  /* 스팸 미끼 칸 — display:none 은 일부 봇이 걸러 내므로 화면 밖으로 밀어낸다 */
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }