/* ============================================================
   노회 ERP 소개 — bwel.kr/erp/
   서울강동노회 제안서 최종판(2026-10-08)과 같은 색 · 글자 · 부품.
   모든 규칙은 .nh 안에서만 작동한다 — 전역 머리글 · 바닥글은 bwel.kr 것 그대로.
   ============================================================ */
.nh{
  --nh-p:#14556E; --nh-p2:#0E3F53; --nh-t:#3E9EA6; --nh-t-strong:#2B7A82;
  --nh-tp:#E6F2F3; --nh-tp2:#F3F8F9;
  --nh-ink:#13232E; --nh-ink2:#3C4C57; --nh-mut:#66737E; --nh-line:#D5DFE4;
  --nh-pale:#BFE3E6; --nh-pale2:#DCEFF1;
  --nh-warm:#E8913A; --nh-warm-strong:#A85D18; --nh-gray:#9AA8B2;
  --nh-font:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  font-family:var(--nh-font); color:var(--nh-ink); font-size:16px; line-height:1.65;
  letter-spacing:-.01em; word-break:keep-all; overflow-wrap:break-word;
  -webkit-text-size-adjust:100%; background:#fff;
}
.nh *,.nh *::before,.nh *::after{box-sizing:border-box;}
.nh h1,.nh h2,.nh h3,.nh h4,.nh p,.nh ul,.nh ol,.nh dl,.nh dd,.nh figure{margin:0;padding:0;}
.nh ul,.nh ol{list-style:none;}
.nh img{max-width:100%;height:auto;display:block;}
.nh a{color:inherit;}
.nh :focus-visible{outline:3px solid var(--nh-t);outline-offset:3px;border-radius:4px;}
.nh br.pc{display:inline;}

.nh .nh-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.nh .nh-sec{padding:96px 0;background:#fff;}
.nh .nh-sec.alt{background:var(--nh-tp2);}
.nh .nh-sec[id]{scroll-margin-top:80px;}

/* ── 1 첫 화면 띠 ── */
.nh .nh-hero{position:relative;overflow:hidden;background:var(--nh-p);color:#fff;padding:104px 0 112px;}
.nh .nh-hero::before,.nh .nh-hero::after{content:"";position:absolute;border-radius:50%;
  border:28px solid rgba(255,255,255,.08);pointer-events:none;}
.nh .nh-hero::before{width:520px;height:520px;right:-170px;top:-250px;}
.nh .nh-hero::after{width:380px;height:380px;right:40px;bottom:-250px;border-width:22px;}
.nh .nh-hero .nh-wrap{position:relative;z-index:1;}
.nh .nh-tag{display:inline-block;padding:7px 16px;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--nh-pale2);letter-spacing:0;}
.nh .nh-eyebrow{margin-top:28px;font-size:16px;font-weight:600;color:var(--nh-pale);}
.nh .nh-hero h1{margin-top:14px;font-size:56px;font-weight:800;line-height:1.12;letter-spacing:-.03em;color:#fff;}
.nh .nh-bar{width:56px;height:5px;border-radius:3px;background:var(--nh-t);margin:30px 0 26px;}
.nh .nh-hero .desc{font-size:18px;line-height:1.7;color:var(--nh-pale2);}
.nh .nh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;}

/* ── 2 단추 ── */
.nh .nh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;
  border-radius:8px;font-size:16px;font-weight:700;text-decoration:none;letter-spacing:-.01em;
  transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;}
.nh .nh-btn:hover{transform:translateY(-1px);}
.nh .nh-btn.solid{background:#fff;color:var(--nh-p);}
.nh .nh-btn.solid:hover{box-shadow:0 6px 18px rgba(0,0,0,.18);}
.nh .nh-btn.ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff;}
.nh .nh-btn.ghost:hover{background:rgba(255,255,255,.1);}
.nh .nh-btn.primary{background:var(--nh-p);color:#fff;}
.nh .nh-btn.primary:hover{background:var(--nh-p2);}
.nh .nh-btn.line{border:1.5px solid var(--nh-p);color:var(--nh-p);background:#fff;}
.nh .nh-btn.line:hover{background:var(--nh-tp);}
.nh .nh-btn .ar{font-weight:400;}

/* ── 3 핵심 수치 ── */
.nh .nh-kpi{background:var(--nh-tp2);border-bottom:1px solid var(--nh-line);padding:40px 0 30px;}
.nh .nh-kpi dl{display:grid;grid-template-columns:repeat(4,1fr);}
.nh .nh-kpi .k{padding:0 26px;border-left:1px solid var(--nh-line);}
.nh .nh-kpi .k:first-child{border-left:0;padding-left:0;}
.nh .nh-kpi dt{font-size:14px;font-weight:700;color:var(--nh-mut);}
.nh .nh-kpi .num{margin-top:8px;font-size:40px;font-weight:800;line-height:1.2;color:var(--nh-p);letter-spacing:-.02em;}
.nh .nh-kpi .num small{font-size:18px;font-weight:700;margin-left:2px;letter-spacing:0;}
.nh .nh-kpi .sub{margin-top:6px;font-size:14px;color:var(--nh-ink2);line-height:1.5;}
.nh .nh-kpi .when{margin-top:22px;font-size:13px;color:var(--nh-mut);}

/* ── 4 구획 제목 ── */
.nh .nh-head{margin-bottom:40px;}
.nh .nh-head h2{display:flex;align-items:center;gap:14px;font-size:30px;font-weight:800;line-height:1.25;
  letter-spacing:-.03em;color:var(--nh-p2);}
.nh .nh-no{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:32px;
  padding:0 10px;border-radius:4px;background:var(--nh-t-strong);color:#fff;font-size:15px;font-weight:700;letter-spacing:0;}
.nh .nh-head .lead{margin-top:14px;font-size:16px;color:var(--nh-ink2);}

/* ── 문제 → 해결 ── */
.nh .nh-pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px;}
.nh .nh-pair{border:1px solid var(--nh-line);border-radius:8px;background:#fff;padding:24px 26px;}
.nh .nh-pair .now{font-size:15px;color:var(--nh-mut);line-height:1.6;}
.nh .nh-pair .now b,.nh .nh-pair .fix b{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:4px;}
.nh .nh-pair .now b{color:var(--nh-mut);}
.nh .nh-pair .fix{margin-top:16px;padding-top:16px;border-top:1px dashed var(--nh-line);font-size:17px;font-weight:700;
  color:var(--nh-ink);line-height:1.55;}
.nh .nh-pair .fix b{color:var(--nh-t-strong);}

/* ── 5 기능 카드 ── */
.nh .nh-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px;}
.nh .nh-card{border:1px solid var(--nh-line);border-radius:8px;background:#fff;padding:24px 26px 22px;display:flex;flex-direction:column;}
.nh .nh-card .t{display:flex;align-items:center;gap:14px;}
.nh .nh-card .t img{width:44px;height:44px;flex:none;}
.nh .nh-card h3{font-size:20px;font-weight:700;line-height:1.35;color:var(--nh-p2);letter-spacing:-.02em;}
.nh .nh-card .d{margin-top:14px;font-size:16px;line-height:1.7;color:var(--nh-ink2);}
.nh .nh-card .o{margin-top:auto;padding-top:14px;}
.nh .nh-card .o span{display:block;padding-top:12px;border-top:1px dashed var(--nh-line);font-size:14px;font-weight:700;
  color:var(--nh-t-strong);line-height:1.5;}

/* 더 보기 · 자주 묻는 질문 — 펼침 */
.nh .nh-more{margin-top:24px;border:1px solid var(--nh-line);border-radius:8px;background:#fff;}
.nh .nh-more>summary{cursor:pointer;list-style:none;padding:18px 56px 18px 24px;font-size:16px;font-weight:700;color:var(--nh-p);position:relative;}
.nh .nh-more>summary::-webkit-details-marker{display:none;}
.nh .nh-more>summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--nh-p);border-bottom:2px solid var(--nh-p);transform:rotate(45deg);transition:transform .2s;}
.nh .nh-more[open]>summary::after{transform:rotate(-135deg);margin-top:-2px;}
.nh .nh-more>.in{padding:0 24px 24px;}

/* ── 10 표 ── */
.nh .nh-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;}
.nh .nh-table th,.nh .nh-table td{border:1px solid var(--nh-line);padding:12px 16px;text-align:left;vertical-align:top;}
.nh .nh-table thead th{background:var(--nh-p);color:#fff;font-weight:700;border-color:var(--nh-p);}
.nh .nh-table tbody th{background:var(--nh-tp2);font-weight:700;color:var(--nh-p2);white-space:nowrap;width:1%;}

/* ── 11 화면 그림 ── */
.nh .nh-shots{display:grid;gap:36px;}
.nh .nh-shot img{border:1px solid var(--nh-line);border-radius:6px;box-shadow:0 2px 8px rgba(14,63,83,.12);background:#fff;width:100%;}
.nh .nh-shot figcaption{margin-top:12px;font-size:14px;color:var(--nh-mut);line-height:1.5;}
.nh .nh-shot figcaption b{color:var(--nh-ink);font-weight:700;}
.nh .nh-shots .row{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px;align-items:start;}
.nh .nh-shot.phone img{border:3px solid #2A333A;border-radius:18px;}
.nh .nh-demo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:40px;padding:22px 26px;
  border-radius:8px;background:#fff;border:1px solid var(--nh-line);}
.nh .nh-demo p{flex:1 1 320px;font-size:16px;color:var(--nh-ink2);}
.nh .nh-demo p b{color:var(--nh-p2);}

/* ── 6 안전 칸 ── */
.nh .nh-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px;}
.nh .nh-tile{background:var(--nh-tp2);border-radius:8px;padding:24px 24px 22px;}
.nh .nh-sec.alt .nh-tile{background:#fff;border:1px solid var(--nh-line);}
.nh .nh-tile .t{display:flex;align-items:center;gap:12px;}
.nh .nh-tile .t img{width:28px;height:28px;flex:none;}
.nh .nh-tile h3{font-size:18px;font-weight:700;color:var(--nh-p2);letter-spacing:-.02em;}
.nh .nh-tile .d{margin-top:12px;font-size:15px;line-height:1.75;color:var(--nh-ink2);}

/* 공개 서비스 */
.nh .nh-svc .nh-tile .t img{width:40px;height:40px;}

/* ── 12 안내 상자 ── */
.nh .nh-note{margin-top:24px;padding:18px 22px;border-left:4px solid var(--nh-t);background:var(--nh-tp2);border-radius:0 6px 6px 0;
  font-size:16px;color:var(--nh-ink2);line-height:1.65;}
.nh .nh-sec.alt .nh-note{background:#fff;}
.nh .nh-note b{color:var(--nh-p2);}

/* ── 7 가격 카드 ── */
.nh .nh-tiers{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px;align-items:stretch;}
.nh .nh-tier{border:1px solid var(--nh-line);border-radius:8px;background:#fff;padding:28px 26px 26px;display:flex;flex-direction:column;}
.nh .nh-tier h3{font-size:20px;font-weight:800;color:var(--nh-p2);letter-spacing:-.02em;}
.nh .nh-tier dl{margin-top:18px;}
.nh .nh-tier .r{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;}
.nh .nh-tier dt{font-size:14px;color:var(--nh-mut);font-weight:600;}
.nh .nh-tier dd{font-size:34px;font-weight:800;color:var(--nh-p);letter-spacing:-.02em;line-height:1.2;white-space:nowrap;}
.nh .nh-tier dd small{font-size:16px;font-weight:700;margin-left:1px;letter-spacing:0;}
.nh .nh-tier dd.ask{font-size:20px;}
.nh .nh-tier .sum{margin-top:auto;padding-top:18px;}
.nh .nh-tier .sum>div{padding-top:16px;border-top:1px dashed var(--nh-line);}
.nh .nh-tier .sum .l{font-size:14px;color:var(--nh-mut);font-weight:600;}
.nh .nh-tier .sum .v{margin-top:4px;font-size:26px;font-weight:800;color:var(--nh-ink);letter-spacing:-.02em;}
.nh .nh-tier .sum .n{margin-top:4px;font-size:14px;color:var(--nh-mut);}
.nh .nh-tier.on{background:var(--nh-p);border-color:var(--nh-p);color:#fff;}
.nh .nh-tier.on h3,.nh .nh-tier.on dd,.nh .nh-tier.on .sum .v{color:#fff;}
.nh .nh-tier.on dt,.nh .nh-tier.on .sum .l,.nh .nh-tier.on .sum .n{color:var(--nh-pale);}
.nh .nh-tier.on .sum>div{border-top-color:rgba(255,255,255,.35);}
.nh .nh-cap{margin-top:16px;font-size:14px;color:var(--nh-mut);line-height:1.6;}

/* ── 8 포함 · 별도 ── */
.nh .nh-incs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.nh .nh-inc{background:var(--nh-tp2);border-top:4px solid var(--nh-t);border-radius:0 0 8px 8px;padding:22px 24px 24px;}
.nh .nh-sec.alt .nh-inc{background:#fff;}
.nh .nh-inc.x{border-top-color:var(--nh-gray);}
.nh .nh-inc h3{font-size:17px;font-weight:700;color:var(--nh-p2);}
.nh .nh-inc ul{margin-top:12px;}
.nh .nh-inc li{position:relative;padding-left:14px;font-size:15px;line-height:1.85;color:var(--nh-ink2);}
.nh .nh-inc li::before{content:"";position:absolute;left:0;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--nh-t);}
.nh .nh-inc.x li::before{background:var(--nh-gray);}

/* ── 9 도입 절차 ── */
.nh .nh-steps{position:relative;}
.nh .nh-steps .hd,.nh .nh-step{display:grid;grid-template-columns:220px minmax(0,1fr) 240px;gap:24px;}
.nh .nh-steps .hd{padding:0 0 12px 64px;font-size:14px;font-weight:700;color:var(--nh-mut);border-bottom:1px solid var(--nh-line);}
.nh .nh-steps ol{position:relative;}
.nh .nh-steps ol::before{content:"";position:absolute;left:19px;top:34px;bottom:34px;width:2px;background:var(--nh-t);opacity:.45;}
.nh .nh-step{position:relative;padding:22px 0 22px 64px;border-bottom:1px solid var(--nh-line);}
.nh .nh-step .c{position:absolute;left:0;top:20px;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--nh-t-strong);
  color:var(--nh-t-strong);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;}
.nh .nh-step.last .c{background:var(--nh-p);border-color:var(--nh-p);color:#fff;}
.nh .nh-step h3{font-size:18px;font-weight:800;color:var(--nh-p2);line-height:1.35;}
.nh .nh-step .when{margin-top:2px;font-size:14px;font-weight:700;color:var(--nh-t-strong);}
.nh .nh-step .what,.nh .nh-step .prep{font-size:15px;line-height:1.75;color:var(--nh-ink2);}
.nh .nh-step .prep{color:var(--nh-mut);}
.nh .nh-step .k{display:none;}

/* 자주 묻는 질문 */
.nh .nh-faq{display:grid;gap:10px;}
.nh .nh-faq .nh-more{margin-top:0;}
.nh .nh-faq .nh-more>summary{color:var(--nh-p2);font-size:17px;}
.nh .nh-faq .nh-more>.in{font-size:16px;line-height:1.75;color:var(--nh-ink2);}

/* ── 13 문의 띠 ── */
.nh .nh-contact{background:var(--nh-tp2);border-top:4px solid var(--nh-t);padding:56px 0;}
.nh .nh-contact .box{display:grid;grid-template-columns:auto 1fr auto;gap:28px 48px;align-items:center;}
.nh .nh-contact .logo img{width:190px;height:auto;}
.nh .nh-contact dl{display:grid;grid-template-columns:repeat(2,auto);gap:16px 44px;justify-content:start;}
.nh .nh-contact dt{font-size:13px;color:var(--nh-mut);font-weight:600;}
.nh .nh-contact dd{margin-top:4px;font-size:17px;font-weight:700;color:var(--nh-p2);white-space:nowrap;}
.nh .nh-contact dd a{text-decoration:none;}
.nh .nh-contact dd a:hover{text-decoration:underline;text-underline-offset:3px;}
.nh .nh-contact .acts{display:flex;flex-direction:column;gap:10px;min-width:220px;}
.nh .nh-contact h2{font-size:24px;font-weight:800;color:var(--nh-p2);letter-spacing:-.03em;margin-bottom:16px;}
.nh .nh-contact .sub{margin:-6px 0 24px;font-size:15px;line-height:1.6;color:var(--nh-ink2);}

/* ── 반응형 ── */
@media (max-width:1000px){
  .nh .nh-contact .box{grid-template-columns:1fr;}
  .nh .nh-contact .acts{flex-direction:row;flex-wrap:wrap;}
}
@media (max-width:860px){
  .nh .nh-grid3{grid-template-columns:repeat(2,1fr);}
  .nh .nh-tiers{grid-template-columns:1fr;}
  .nh .nh-incs{grid-template-columns:1fr;}
  .nh .nh-kpi dl{grid-template-columns:repeat(2,1fr);row-gap:26px;}
  .nh .nh-kpi .k:nth-child(3){border-left:0;padding-left:0;}
  .nh .nh-shots .row{grid-template-columns:minmax(0,1fr) 220px;}
  .nh .nh-steps .hd{display:none;}
  .nh .nh-step{grid-template-columns:1fr;gap:8px;}
  .nh .nh-step .k{display:inline;font-weight:700;color:var(--nh-mut);margin-right:6px;}
}
@media (max-width:720px){
  .nh br.pc{display:none;}
  .nh .nh-wrap{padding:0 16px;}
  .nh .nh-sec{padding:64px 0;}
  .nh .nh-hero{padding:72px 0 80px;}
  .nh .nh-hero h1{font-size:34px;}
  .nh .nh-hero .desc{font-size:16px;}
  .nh .nh-hero::before{width:340px;height:340px;right:-160px;top:-170px;border-width:20px;}
  .nh .nh-hero::after{width:240px;height:240px;right:-60px;bottom:-170px;border-width:16px;}
  .nh .nh-head{margin-bottom:28px;}
  .nh .nh-head h2{font-size:24px;}
  .nh .nh-shots .row{grid-template-columns:1fr;}
  .nh .nh-shot.phone{max-width:280px;}
  .nh .nh-contact dl{grid-template-columns:1fr;}
  .nh .nh-cta .nh-btn{flex:1 1 200px;}
}
@media (max-width:640px){
  .nh .nh-grid2,.nh .nh-grid3,.nh .nh-pairs{grid-template-columns:1fr;}
  .nh .nh-kpi .num{font-size:34px;}
  .nh .nh-tier dd{font-size:30px;}
  .nh .nh-table th,.nh .nh-table td{padding:10px 12px;font-size:14px;}
  .nh .nh-table tbody th{white-space:normal;width:auto;}
}
@media (prefers-reduced-motion:reduce){ .nh *{transition:none !important;} }