/* 볼테나(BOLTENA) 랜딩 — ERP 제품과 동일한 antd 라이트 스타일(사용자 지시 2026-07-20).
   antd 기본 팔레트만 사용: primary #1677ff(blue-6)·텍스트 rgba(0,0,0,.88)/.45·
   경계 #d9d9d9·음영 #fafafa·radius 6px. 플랫 원칙 — 그림자 없음(ERP 규약 §1).
   앰버·오렌지·차콜 금지(브랜드 분리 — 로고 가이드 v1.0 §2). 로고 SVG 만 브랜드 정본색
   (#12335F/#3D8BFF)을 쓰고, UI 액센트(--accent)는 antd primary 를 유지한다. */
:root{
  --bg:#ffffff; --bg2:#fafafa; --line:#d9d9d9; --line2:#f0f0f0;
  --accent:#1677ff; --accent-dk:#0958d9;            /* (변수명 유지 — 값만 antd primary) */
  --tx:rgba(0,0,0,.88); --tx2:rgba(0,0,0,.65);
  --light-bg:#fafafa; --light-card:#ffffff;
  --light-tx:rgba(0,0,0,.88); --light-tx2:rgba(0,0,0,.65); --light-line:#d9d9d9;
  --ok:#52c41a; --warn:#faad14;
  --gold-bg:#fffbe6; --gold-line:#ffe58f;         /* antd warning(gold-1/3) — 창립 배너 */
  --blue-bg:#e6f4ff; --blue-line:#91caff;         /* antd blue-1/3 */
}
*{box-sizing:border-box}
body{margin:0;font-family:'Apple SD Gothic Neo','Pretendard','Malgun Gothic',sans-serif;background:var(--bg);color:var(--tx);line-height:1.65;font-size:14px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* ── GNB — ERP 헤더처럼 흰 배경 + 하단 경계 ── */
header.gnb{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line2);backdrop-filter:blur(6px)}
.gnb .wrap{display:flex;align-items:center;gap:28px;height:60px}
.logo{font-weight:600;font-size:18px;letter-spacing:2.5px;color:#12335F;display:flex;align-items:center;gap:9px}
.logo svg{flex:none}
nav.menu{display:flex;gap:22px;font-size:14px;color:var(--tx2)}
.mob-only{display:none}   /* 좁은 화면 메뉴에서만 쓰는 항목 */
nav.menu a:hover{color:var(--accent)}
.gnb .cta{margin-left:auto;display:flex;gap:10px}
.btn{display:inline-block;padding:8px 18px;border-radius:6px;font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.btn-accent{background:var(--accent-dk);color:#fff}   /* blue-7 — 흰 글자 대비 AA 통과 */
.btn-accent:hover{background:#003eb3}
.btn-line{border-color:var(--line);color:var(--tx);background:#fff}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:12px 26px;font-size:16px}
#nav-toggle{display:none;background:#fff;border:1px solid var(--line);color:var(--tx);padding:6px 10px;border-radius:6px;margin-left:auto}
/* ── 히어로 — 라이트, ERP 로그인·대시보드 톤 ── */
.hero{padding:72px 0 48px;background:var(--bg)}
.hero h1{font-size:38px;line-height:1.3;margin:0 0 14px;letter-spacing:-.5px}
.hero h1 em{color:var(--accent);font-style:normal}
.hero .sub{font-size:17px;color:var(--tx2);max-width:640px;margin-bottom:28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-shot{margin-top:40px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
/* ── 스펙 바 — antd Statistic 느낌 ── */
.specbar{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--bg2)}
.specbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.spec{padding:20px 16px;border-left:1px solid var(--line2)}
.spec:first-child{border-left:none}
.spec b{display:block;font-size:20px;color:var(--accent)}
.spec span{font-size:13px;color:var(--tx2)}
/* ── 섹션 공통 ── */
section{padding:64px 0}
h2.sec{font-size:26px;margin:0 0 8px}
h2.sec::before{content:'';display:inline-block;width:4px;height:18px;background:var(--accent);border-radius:2px;margin-right:10px;vertical-align:-2px}
p.sec-sub{color:var(--tx2);margin:0 0 32px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line2);border-radius:6px;padding:22px}
.card h3{margin:0 0 8px;font-size:17px}
.card p{margin:0;color:var(--tx2);font-size:14px}
.card .tagline{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:1px}
.card a.more{color:var(--accent-dk);display:inline-block;margin-top:12px;color:var(--accent);font-size:13px}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;color:var(--tx2);vertical-align:2px}
.badge-accent{background:var(--blue-bg);border-color:var(--blue-line);color:var(--accent)}
/* ── 대체 서피스(가격표·FAQ) — antd colorFillAlter ── */
.light{background:var(--light-bg);color:var(--light-tx)}
.light h2.sec{color:var(--light-tx)}
.light p.sec-sub{color:var(--light-tx2)}
table.plans{width:100%;border-collapse:collapse;background:var(--light-card);font-size:14px}
table.plans th,table.plans td{border:1px solid var(--line2);padding:12px 10px;text-align:center;vertical-align:top}
table.plans thead th{background:var(--bg2)}
table.plans .price{font-size:19px;font-weight:800}
table.plans .reco{outline:2px solid var(--accent);outline-offset:-2px;position:relative}
table.plans .reco-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:1px 10px;border-radius:10px}
.note{font-size:12px;color:var(--light-tx2)}
.dark-note{font-size:12px;color:var(--tx2)}
/* ── 계산기 — antd Card·Segmented 톤 ── */
.calc{background:var(--light-card);border:1px solid var(--line2);border-radius:6px;padding:24px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.calc h3{margin:0 0 10px;font-size:16px}
.calc label.chk{display:flex;gap:8px;align-items:center;font-size:14px;padding:4px 0}
.calc .muted{color:var(--light-tx2);font-size:12px}
.calc .grp{margin-bottom:16px}
.calc input[type=range]{width:100%;accent-color:var(--accent)}
.calc input[type=checkbox]{accent-color:var(--accent)}
.calc .seg{display:inline-flex;background:var(--bg2);border-radius:6px;padding:2px}
.calc .seg button{border:none;background:transparent;padding:6px 14px;font-size:13px;cursor:pointer;border-radius:4px;color:var(--tx2)}
.calc .seg button.on{background:#fff;font-weight:600;color:var(--tx);border:1px solid var(--line2)}
.calc-out{border-left:1px solid var(--line2);padding-left:24px}
.calc-out .row{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}
.calc-out .total{font-size:22px;font-weight:800;border-top:2px solid var(--tx);margin-top:8px;padding-top:8px}
.calc-out .per{color:var(--light-tx2);font-size:13px}
/* ── FAQ — antd Collapse 톤 ── */
details.faq{background:var(--light-card);border:1px solid var(--line2);border-radius:6px;margin-bottom:8px;padding:0 16px}
details.faq summary{cursor:pointer;font-weight:600;padding:13px 0;font-size:14px}
details.faq p{margin:0 0 14px;font-size:14px;color:var(--light-tx2)}
/* ── 폼 — antd Input 톤 ── */
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px}
form.contact .full{grid-column:1/-1}
form.contact label{font-size:13px;color:var(--tx2);display:block;margin-bottom:4px}
form.contact input,form.contact select,form.contact textarea{width:100%;padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--tx);font-size:14px;font-family:inherit}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline:none;border-color:var(--accent)}
form.contact .agree{font-size:13px;color:var(--tx2);display:flex;gap:8px;align-items:flex-start}
/* ── 데모 씬 ── */
.scene{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:28px 0;border-top:1px solid var(--line2)}
.scene:first-of-type{border-top:none}
.scene .shot{border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--bg2);min-height:180px}
.scene h3{font-size:19px;margin:0 0 8px}
.scene h3 .num{color:var(--accent);margin-right:8px}
.scene p{color:var(--tx2);font-size:14px}
/* ── 기능 목록 ── */
ol.featlist{counter-reset:f;list-style:none;padding:0;display:grid;gap:12px}
ol.featlist li{background:#fff;border:1px solid var(--line2);border-radius:6px;padding:16px 18px}
ol.featlist b{display:block;margin-bottom:4px}
ol.featlist span{color:var(--tx2);font-size:14px}
/* ── 푸터 ── */
footer.foot{border-top:1px solid var(--line2);background:var(--bg2);padding:36px 0;font-size:12px;color:var(--tx2)}
footer.foot .links{display:flex;gap:16px;margin-bottom:10px}
/* ── 창립 배너 — antd warning Alert 톤 ── */
.founding-banner{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:6px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.founding-banner b{color:var(--tx)}
/* ── 반응형 ── */
@media (max-width:820px){
  /* 로그인은 접지 않는다 — 기존 고객이 하루에 여러 번 하는 최고빈도 동작이고, 폰에서
     버튼이 없으면 주소를 손으로 쳐야 한다. 한때 .gnb .cta 를 통째로 숨기고 메뉴를 열어도
     되살리지 않아, 모바일에는 로그인 버튼이 아예 존재하지 않았다. */
  nav.menu{display:none}
  .gnb .cta .btn-line{display:none}          /* 도입 문의만 메뉴 안으로 접는다 */
  #nav-toggle{display:block;margin-left:8px}
  .gnb.open nav.menu{display:flex;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--line2)}
  .gnb.open nav.menu .mob-only{display:block}
  .hero h1{font-size:28px}
  .specbar .wrap{grid-template-columns:repeat(2,1fr)}
  .spec{border-left:none;border-top:1px solid var(--line2)}
  .calc{grid-template-columns:1fr}
  .calc-out{border-left:none;padding-left:0;border-top:1px solid var(--line2);padding-top:16px}
  .scene{grid-template-columns:1fr}
  .plans-scroll{overflow-x:auto}
  table.plans{min-width:720px}
}

/* 실화면 캡처 — 카드 폭에 맞추고 경계만 준다(그림자 금지 규약 유지). */
.shot img { display:block; width:100%; height:auto; border-radius:6px; }

/* ── 모듈 상세 페이지 ─────────────────────────────────────────────────────── */
/* .specbar 는 홈에서 .wrap 안에 4열로 쓰던 것을 모듈 페이지에서 인라인으로도 쓴다. */
.specbar.inline{display:grid;grid-template-columns:repeat(3,1fr);border-radius:6px;margin:14px 0 6px}
.specbar.inline .spec{padding:14px 16px}
.specbar.inline .spec b{font-size:18px}

/* 무엇이 달라지나 — 제품의 모듈 소개 문구(MODULE_META.points) */
ul.pts{list-style:none;padding:0;display:grid;gap:10px}
ul.pts li{background:#fff;border:1px solid var(--line2);border-radius:6px;padding:14px 16px;font-size:14px;
  position:relative;padding-left:34px}
ul.pts li:before{content:'';position:absolute;left:16px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* 포함 화면 목록 — 그룹 제목 + 2열 카드. 화면이 28개여도 훑을 수 있어야 한다. */
h3.grp{margin:22px 0 10px;font-size:15px;color:var(--tx)}
h3.grp .cnt{display:inline-block;margin-left:6px;font-size:12px;color:var(--tx2);border:1px solid var(--line2);
  border-radius:10px;padding:0 8px;background:#fff}
ul.screens{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
ul.screens li{background:#fff;border:1px solid var(--line2);border-radius:6px;padding:12px 14px;font-size:13px}
ul.screens b{display:block;margin-bottom:3px;font-size:14px}
ul.screens span{color:var(--tx2);line-height:1.55}
@media(max-width:820px){
  ul.screens{grid-template-columns:1fr}
  .specbar.inline{grid-template-columns:1fr}
  .specbar.inline .spec{border-left:none;border-top:1px solid var(--line2)}
  .specbar.inline .spec:first-child{border-top:none}
}

/* ── 페이지 제목 계층 ────────────────────────────────────────────────────────
   모듈 페이지에 h1 이 없어 페이지 제목과 섹션 제목이 같은 h2.sec 였다. 섹션이 6~7개로
   늘면 같은 크기 파란 바가 반복돼 "어디가 페이지 제목인지"가 사라진다. h1 은 바 없이
   크게, 섹션은 지금처럼 바로 — 역할을 나눈다. */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--accent);margin:0 0 6px}
h1.page{font-size:32px;line-height:1.32;letter-spacing:-.5px;margin:0 0 10px}

/* 한글 줄바꿈 — 브라우저 기본은 음절 단위로 끊어 좁은 칼럼에서 단어가 파열된다. */
body{word-break:keep-all;overflow-wrap:anywhere}

@media(max-width:820px){
  h1.page{font-size:23px}
  /* 문의 폼이 2열로 남아 375px 에서 칸이 160px 이 된다 — 랜딩의 유일한 전환 지점이다. */
  form.contact{grid-template-columns:1fr}
  /* iOS 는 16px 미만 입력에 포커스하면 페이지를 확대하고 되돌리지 않는다. */
  form.contact input,form.contact select,form.contact textarea{font-size:16px}
  section{padding:40px 0}
}

/* ── 도입 단계 체인 ─────────────────────────────────────────────────────────
   흐름도를 이미지로 구우면 모바일에서 글자가 죽고 단계가 바뀔 때마다 거짓이 된다.
   테두리 2변만 그린 정사각형을 45도 돌려 화살표를 만든다(그림자 0, 색은 토큰만). */
ol.flow{list-style:none;margin:0;padding:0;display:flex;counter-reset:s}
ol.flow li{counter-increment:s;flex:1;min-width:0;position:relative;background:#fff;
  border:1px solid var(--line2);border-left:none;padding:14px 16px}
ol.flow li:first-child{border-left:1px solid var(--line2);border-radius:6px 0 0 6px}
ol.flow li:last-child{border-radius:0 6px 6px 0}
ol.flow li:before{content:counter(s);display:inline-block;font-size:11px;font-weight:700;color:var(--accent);margin-right:6px}
ol.flow li:after{content:'';position:absolute;right:-7px;top:50%;width:12px;height:12px;background:#fff;
  border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:translateY(-50%) rotate(45deg);z-index:1}
ol.flow li:last-child:after{display:none}
ol.flow b{display:block;font-size:14px}
ol.flow span{font-size:12px;color:var(--tx2)}
@media(max-width:820px){
  /* 줄바꿈이 생기면 화살표가 벽을 향해 흐름을 거짓말한다 — 명시적으로 세로 전환한다. */
  ol.flow{display:block}
  ol.flow li{border:1px solid var(--line2);border-radius:6px;margin-bottom:16px}
  ol.flow li:after{right:auto;left:22px;top:auto;bottom:-9px;border:none;
    border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
}

/* 폼 결과 메시지 — 접수 성공/실패는 사이트에서 가장 중요한 한 줄이다. 12px 회색 각주로
   두면 눌렀는지 아닌지 모른다. */
.form-msg{font-size:14px;color:var(--tx);border-left:3px solid var(--accent-dk);padding:10px 12px;background:var(--bg2)}
.form-msg:focus{outline:2px solid var(--accent-dk);outline-offset:2px}

/* 가격표 안의 주의 행 — 각주로 내리면 안 읽힌다. 금액 바로 아래에서 같은 무게로 말한다. */
table.plans td.warn-row{font-size:13px;color:var(--tx);background:var(--bg2);border-top:2px solid var(--accent-dk)}
table.plans td.warn-row a{color:var(--accent-dk);text-decoration:underline}

/* 접어 둔 화면 이름 — 목록이 20개를 넘으면 훑기가 안 된다. 찾는 사람만 펼친다. */
details.more-screens{margin:8px 0 18px}
details.more-screens summary{font-size:13px;color:var(--accent-dk);cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:12px;color:var(--tx2);border:1px solid var(--line);border-radius:4px;padding:3px 8px}

/* 히어로 보조 — 자격(누구를 위한 것인가)과 계약 약속(묶이지 않는다)은 접힌 FAQ 가 아니라
   첫 화면에서 답해야 하는 둘이다. */
.hero .eyebrow{font-size:13px;color:var(--accent-dk);font-weight:600;margin-bottom:10px}
.hero-note{margin-top:16px;font-size:13px;color:var(--tx2);border-left:2px solid var(--line);padding-left:12px;max-width:640px}

/* 동의 항목 상세 — 무엇을 받아 어디에 쓰는지는 링크 뒤가 아니라 동의하는 자리에 있어야 한다. */
.agree-detail{display:block;font-size:12px;color:var(--tx2);margin-top:4px;line-height:1.6}

/* 처리방침 등 긴 글 — 읽는 페이지는 폭을 줄여야 눈이 줄을 놓치지 않는다. */
.prose{max-width:760px}
.prose h2{font-size:16px;margin:28px 0 8px;color:var(--tx)}
.prose p,.prose li{font-size:14px;color:var(--tx2);line-height:1.85}
.prose ul{margin:8px 0 8px 18px}
.prose li{margin-bottom:6px}
.pending{color:var(--tx2);font-size:12px}

/* 연락 블록 — 전화가 폼보다 먼저 눈에 들어와야 한다. 숫자를 크게 두는 것이 이 고객층에서
   가장 저렴하고 확실한 개선이다(폼 12칸을 채우는 것보다 전화 한 통이 빠르다). */
.reach{text-align:center;margin:32px auto 0;max-width:560px;padding:20px;border:1px solid var(--line);border-radius:6px;background:var(--bg2)}
.reach-lead{font-size:13px;color:var(--tx2);margin-bottom:8px}
.reach-items{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;align-items:baseline}
.reach-tel{font-size:26px;font-weight:700;color:var(--tx);letter-spacing:.5px}
.reach-mail{font-size:15px;color:var(--accent-dk);text-decoration:underline}
.reach-note{font-size:12px;color:var(--tx2);margin-top:10px}
@media (max-width:820px){ .reach-tel{font-size:24px} }

/* 스킵 링크 — 평소엔 화면 밖, 탭으로 포커스되면 나타난다. 키보드 사용자가 매 페이지
   헤더 링크를 전부 지나지 않아도 되게 하는 유일한 장치다(WCAG 2.4.1). */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent-dk);color:#fff;
  padding:10px 16px;border-radius:0 0 6px 0;font-size:14px}
.skip:focus{left:0}
main:focus{outline:none}   /* 스킵 후 프로그램 포커스 — 링을 그릴 필요는 없다 */

/* 가로로 넘치는 표는 포커스를 받을 수 있어야 키보드로 밀 수 있다. 포커스가 보이지 않으면
   어디에 있는지 모르므로 링을 명시한다. */
.plans-scroll:focus-visible{outline:2px solid var(--accent-dk);outline-offset:2px}

/* 화면에는 안 보이지만 스크린리더는 읽는 텍스트 — 표에 이름을 주되 시각 디자인은 건드리지
   않는다(제목 h2 가 이미 위에 있어 눈으로는 중복이다). display:none 은 낭독도 막으므로 못 쓴다. */
.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}