/* ============================================================
   브엘 스튜디오 — bwel.kr
   v5 (2026-07-20): 참조 랜딩(브엘스튜디오 · 교회와 노회를 위한 행정
   시스템)의 디자인 시스템을 이식. 네이비 + 세이지, 1200px, Noto Sans KR.
   ※ 하단 "구 클래스 호환"은 /erp/ /vs-onweb/ /pricing/ 페이지가
      아직 옛 마크업이라 유지한다. 세 페이지를 새로 짜면 지워도 된다.
   ============================================================ */

:root{
  --navy:#1c2b4a;       /* 주색 — 제목·버튼 */
  --navy-2:#2a3a5c;     /* 주색 hover */
  --sage:#1a6a80;       /* 강조 — 로고 티얼 계열, AA 6.15 */
  --sage-link:#14556e;  /* 텍스트 링크 — 로고 주색, AA 8.22 */
  --sage-2:#2c7f92;
  --sage-bg:#eef3f5;
  /* 하위 페이지(erp·business) 전용 토큰 — 미정의 상태로 사용되던 것을 정식 정의 */
  --stone:#dfe4e8;
  --tint:#eef2f0;
  --sand:#48705f;
  --well:#48705f;
  /* 브랜드 로고 색 (bwel-logo-h.png 기준) */
  --brand:#14556e;
  --brand-lt:#3e9ca8;
  /* 금색 포인트 — 어두운 배경 전용 (흰 배경에서는 대비 미달) */
  --gold:#e0c078;
  --gold-dk:#c9a227;

  --ink:#242a33;        /* 본문 */
  --gray:#5a616e;       /* 본문 보조 */
  --mute:#6b7280;       /* 설명 — 참조는 #8a909c(3.21)였으나 본문 크기라 AA 미달 → 4.83 */
  --faint:#8e96a4;      /* 옅은 — 장식용(영문 부제·번호)에만. 정보는 --mute */
  --line:#ececf0;       /* 선 */
  --line-2:#f4f5f7;
  --bg:#f5f7f9;         /* 교차 배경 — 흰색과 구분되게 한 단계 진하게 */

  --maxw:1200px;
  --pad:24px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}
body{
  font-family:'Noto Sans KR','Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  color:var(--ink);background:#fff;font-size:1.06rem;line-height:1.72;
  word-break:keep-all;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* ---------- 상단 유틸 바 ---------- */
.s-util{background:#fff}
.s-util .in{max-width:var(--maxw);margin:0 auto;padding:11px var(--pad);display:flex;justify-content:flex-end;align-items:center;gap:20px}
.s-util a{font-size:1.06rem;color:var(--mute);letter-spacing:.01em;transition:color .15s}
.s-util a:hover{color:var(--navy)}
.s-util .em{color:var(--navy);font-weight:500}

/* ---------- 헤더 ---------- */
.s-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;
  transition:box-shadow .3s ease-out, background-color .3s ease-out, border-color .3s ease-out}
.s-head.is-stuck{background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:transparent;box-shadow:0 1px 14px rgba(28,43,74,.09)}
.s-head .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;height:80px}
.s-brand{display:flex;align-items:center;gap:12px}
.s-brand .mk{
  width:42px;height:42px;border-radius:11px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:1.05rem;font-weight:800;flex-shrink:0;letter-spacing:-.02em;
}
.s-brand .nm{font-size:1.28rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;display:block}
.s-brand .en{font-size:.82rem;color:var(--mute);letter-spacing:.14em;margin-top:3px;font-weight:500;display:block}
.s-gnb{display:flex;height:80px;gap:2px}
.s-gnb>li{position:relative;list-style:none}
.s-gnb>li>a{display:flex;align-items:center;height:80px;padding:0 18px;font-weight:500;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em;transition:color .15s}
.s-gnb>li>a:hover{color:var(--sage-link)}
.s-gnb>li::after{
  content:"";position:absolute;left:18px;right:18px;bottom:24px;height:2px;background:var(--sage);
  transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.s-gnb>li:hover::after{transform:scaleX(1)}
/* 헤더 상시 CTA — 스크롤 위치와 무관하게 문의로 연결 */
.btn-sm{padding:9px 18px;font-size:1.06rem;border-radius:8px}
.hd-cta{margin-left:18px;flex:none}
.s-ham{display:none;background:none;border:none;cursor:pointer;padding:8px}
.s-ham i{display:block;width:22px;height:1.5px;background:var(--navy);margin:5px 0;transition:transform .2s,opacity .2s}
.s-ham[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.s-ham[aria-expanded="true"] i:nth-child(2){opacity:0}
.s-ham[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* 모바일 메뉴 */
.s-mob{display:none;border-bottom:1px solid var(--line);background:#fff}
.s-mob.open{display:block}
.s-mob a{display:block;padding:14px var(--pad);font-size:1.01rem;font-weight:500;color:var(--ink);border-top:1px solid var(--line-2)}
.s-mob a:first-child{border-top:0}
.s-mob a:hover{color:var(--sage-link);background:var(--bg)}
@media(min-width:941px){.s-mob{display:none !important}}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 26px;border-radius:10px;font-weight:500;font-size:1.04rem;transition:.16s;border:0;cursor:pointer;font-family:inherit}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn-ghost{color:var(--navy);border:1px solid #d8dce3;background:transparent}
.btn-ghost:hover{border-color:var(--sage-link);color:var(--sage-link)}

/* ---------- 히어로 ---------- */
.hero{background:var(--bg);border-bottom:1px solid var(--line)}
.hero .in{max-width:var(--maxw);margin:0 auto;padding:88px var(--pad) 82px}
.hero .eyebrow{font-size:1rem;letter-spacing:.12em;color:var(--sage-link);font-weight:600;text-transform:uppercase;margin-bottom:20px}
.hero h1{font-size:clamp(2.3rem,4.8vw,3.6rem);font-weight:800;color:var(--navy);letter-spacing:-.035em;line-height:1.22}
.hero h1 .accent{color:var(--sage)}
.hero p{font-size:1.08rem;color:var(--gray);margin-top:24px;max-width:600px;line-height:1.75}
.hero-cta{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:1rem;color:var(--mute);display:flex;align-items:center;gap:8px}
.hero-note .dot{width:6px;height:6px;border-radius:50%;background:var(--sage-2);flex:none}

/* ---------- 퀵 카드 (히어로에 걸침) ---------- */
.quick{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.quick .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:-38px;position:relative;z-index:5}
.qcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 20px;text-align:center;transition:.2s}
.qcard:hover{border-color:#c9d2e0;box-shadow:0 10px 30px rgba(28,43,74,.07);transform:translateY(-3px)}
.qcard .ic{width:44px;height:44px;margin:0 auto 14px;color:var(--sage)}
.qcard .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qcard .t{font-weight:600;font-size:1.01rem;color:var(--navy)}
.qcard .d{font-size:.96rem;color:var(--mute);margin-top:5px}

/* ---------- 섹션 ---------- */
.sec{max-width:var(--maxw);margin:0 auto;padding:clamp(76px,7vw,108px) var(--pad)}
.secwrap.alt{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:46px}
.sec-head .eyebrow{font-size:1.03rem;letter-spacing:.1em;color:var(--sage-link);font-weight:600;text-transform:uppercase}
.sec-head h2{font-size:clamp(1.9rem,2.6vw,2.35rem);font-weight:800;color:var(--navy);letter-spacing:-.03em;margin-top:10px;line-height:1.28}
.sec-head .lead{font-size:1.06rem;color:var(--mute);margin-top:14px;max-width:660px;line-height:1.8}

/* ---------- 카드 그리드 ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;box-shadow:0 1px 2px rgba(28,43,74,.04),0 6px 18px rgba(28,43,74,.045);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{border-color:#c9d2e0;box-shadow:0 16px 40px rgba(28,43,74,.12);transform:translateY(-5px)}
.card .no{font-size:1.03rem;font-weight:600;color:var(--mute);letter-spacing:.08em;margin-bottom:12px}
.card .ic{width:40px;height:40px;color:var(--sage);margin-bottom:16px}
.card .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.12rem;font-weight:700;color:var(--navy);margin-bottom:9px;letter-spacing:-.02em}
.card p{font-size:1.01rem;color:var(--mute);line-height:1.8}

/* 사례 카드 — 카드 위에 실제 화면 */
.wcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(28,43,74,.04),0 6px 18px rgba(28,43,74,.045);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wcard:hover{border-color:#c9d2e0;box-shadow:0 16px 40px rgba(28,43,74,.12);transform:translateY(-5px)}
.wcard .thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line)}
.wcard .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wcard .soon{
  display:grid;place-items:center;aspect-ratio:16/10;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(135deg,#f6f8f9 0 10px,#fbfcfc 10px 20px);
  color:var(--mute);font-size:1.03rem;letter-spacing:.04em;
}
.wcard .bd{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
.wcard h3{font-size:1.2rem;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:8px}
.wcard p{font-size:1.01rem;color:var(--mute);line-height:1.8;flex:1;margin-bottom:16px}
.wcard .go{font-size:1rem;font-weight:600;color:var(--sage-link)}
.wcard .go.off{color:var(--mute);font-weight:500}

/* ---------- 2단 (텍스트 + 화면) ---------- */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.split.rev .txt{order:2}
.split .tag{display:inline-block;padding:5px 14px;border-radius:20px;background:var(--sage-bg);color:var(--sage-2);font-size:1.03rem;font-weight:600;margin-bottom:16px}
.split h3{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.36}
.split .d{color:var(--mute);margin-top:14px;font-size:1.01rem}
.split ul{list-style:none;margin-top:22px}
.split li{display:flex;gap:14px;padding:11px 0;font-size:1.04rem;border-bottom:1px solid var(--line-2)}
.split li:last-child{border-bottom:none}
.split li .k{color:var(--navy);font-weight:700;flex-shrink:0;min-width:78px}
.split li .v{color:var(--gray)}
.shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 40px rgba(28,43,74,.07)}
.shot img{display:block;width:100%;height:auto}
/* 컨셉 구조 도식 — 실제 화면의 구성 차이를 보여준다(스크린샷 아님) */
.wirebox{display:block;background:#f7f8fa;border-bottom:1px solid var(--line)}
.wire{display:block;width:100%;height:auto}
.figure{margin:28px 0 8px}
.figure figcaption{margin-top:12px;font-size:1rem;color:var(--mute);line-height:1.7}
.figure figcaption b{color:var(--navy);font-weight:600}

/* ---------- 사례 블록 (네이비) ---------- */
.case{background:var(--navy);border-radius:16px;padding:52px 44px;color:#fff}
.case .in{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.case .eyebrow{font-size:1.03rem;letter-spacing:.1em;color:#8fb3a6;font-weight:600;text-transform:uppercase}
.case h3{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-top:12px;line-height:1.4}
.case p{color:#c6d0dc;margin-top:16px;font-size:1.01rem}
.case .who{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:1rem;color:#9aa6b5}
.case .who b{display:block;color:#fff;font-size:1.01rem;margin-bottom:3px}
.cnum{display:grid;gap:12px}
.cnum div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px 20px}
.cnum .n{font-size:1.05rem;font-weight:700;color:#8fb3a6;letter-spacing:-.02em}
.cnum .l{font-size:.96rem;color:#9aa6b5;margin-top:3px}

/* ---------- 절차 ---------- */
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px}
.step .no{font-size:1.03rem;font-weight:600;color:var(--sage-link);letter-spacing:.08em}
.step h3{font-size:1.06rem;font-weight:700;color:var(--navy);margin:10px 0 8px;letter-spacing:-.02em}
.step p{font-size:1.06rem;color:var(--mute);line-height:1.8}

/* ---------- 요금 ---------- */
.pc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 26px;display:flex;flex-direction:column}
.pc.best{border-color:var(--navy);position:relative;box-shadow:0 12px 40px rgba(28,43,74,.08)}
.pc.best .rec{position:absolute;top:-11px;left:26px;background:var(--navy);color:#fff;font-size:.9rem;font-weight:500;padding:4px 13px;border-radius:20px}
.pc h3{font-size:1.1rem;font-weight:800;color:var(--navy);letter-spacing:-.025em}
.pc .sub{font-size:1rem;color:var(--mute);margin-top:7px;min-height:42px}
.pc .price{font-size:1.35rem;font-weight:800;color:var(--navy);margin:18px 0 4px;letter-spacing:-.03em}
.pc .per{font-size:1.01rem;color:var(--mute)}
.pc ul{list-style:none;margin:20px 0 0;border-top:1px solid var(--line-2);padding-top:20px;flex:1}
.pc li{display:flex;gap:10px;font-size:1.01rem;padding:7px 0;color:var(--ink)}
.pc li b{color:var(--sage-link);flex-shrink:0;font-weight:600}
.pc .go{display:block;text-align:center;margin-top:24px;padding:13px;border-radius:10px;font-weight:500;font-size:1.03rem;border:1px solid var(--line);color:var(--navy);transition:.16s}
.pc.best .go{background:var(--navy);color:#fff;border-color:var(--navy)}
.pc .go:hover{border-color:var(--sage);color:var(--sage-link)}
.pc.best .go:hover{background:var(--sage);border-color:var(--sage);color:#fff}
.pnote{margin-top:20px;font-size:1rem;color:var(--mute);line-height:1.8}

/* ---------- 비교표 ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:1.03rem;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tbl caption{text-align:left;font-size:.96rem;color:var(--mute);padding-bottom:10px}
.tbl th,.tbl td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl thead th{background:var(--navy);color:#fff;font-weight:600;font-size:1.03rem;letter-spacing:.01em;border-bottom:0}
.tbl thead th:last-child{background:var(--sage)}
/* 2열짜리 표(항목·내용)는 마지막 칸이 본문이므로 강조하지 않는다 */
.tbl.plain thead th:last-child{background:var(--navy)}
.tbl tbody th{font-weight:700;color:var(--navy);white-space:nowrap;background:var(--bg)}
.tbl tbody td{color:var(--gray)}
.tbl tbody td:last-child{background:var(--sage-bg);color:var(--sage-2);font-weight:600}
/* 설명 칸은 읽는 글이다 — 강조색을 걷어낸다 */
.tbl.plain tbody td:last-child,.tbl tbody td.desc{
  background:transparent;color:var(--gray);font-weight:400;line-height:1.7}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody .num{font-weight:700;color:var(--navy);text-align:center}
.tbl thead .num{text-align:center}
.tbl .yes{color:var(--sage-2);font-weight:700}
.tbl .no{color:var(--mute)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- FAQ ---------- */
.faq{max-width:840px}
.fq{border-bottom:1px solid var(--line)}
.fq:first-child{border-top:1px solid var(--navy)}
.fq button{
  width:100%;background:none;border:none;text-align:left;padding:20px 40px 20px 2px;cursor:pointer;
  font-size:1.02rem;font-weight:600;color:var(--navy);position:relative;font-family:inherit;letter-spacing:-.02em;
}
.fq button::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--mute);font-weight:400}
.fq.open button::after{content:"\2212";color:var(--sage)}
.fq .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.fq.open .a{max-height:480px}
.fq .a p{padding:0 0 20px 2px;color:var(--mute);font-size:1.04rem;line-height:1.85}

/* ---------- 하단 CTA ---------- */
.ctasec{background:var(--bg);border-top:1px solid var(--line)}
.ctasec .in{max-width:var(--maxw);margin:0 auto;padding:80px var(--pad);text-align:center}
.ctasec h2{font-size:clamp(1.9rem,2.6vw,2.35rem);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.36}
.ctasec p{color:var(--mute);margin-top:14px;font-size:1.04rem}
.ctasec .acts{margin-top:30px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- 푸터 ---------- */
.s-foot{background:var(--bg);border-top:1px solid var(--line)}
.s-foot .menu{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad) 36px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.s-foot .col h4{font-size:1.03rem;font-weight:600;color:var(--navy);margin-bottom:16px;letter-spacing:-.01em}
.s-foot .col a{display:block;font-size:.96rem;color:var(--mute);padding:5px 0;transition:.12s}
.s-foot .col a:hover{color:var(--sage-link)}
.s-foot .btm{border-top:1px solid var(--line)}
.s-foot .btm .in{max-width:var(--maxw);margin:0 auto;padding:28px var(--pad);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.s-foot .btm .mk{width:38px;height:38px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.04rem;font-weight:800}
.s-foot .btm .fn{font-size:1.06rem;font-weight:700;color:var(--navy)}
.s-foot .btm .info{font-size:1.06rem;color:var(--mute);line-height:1.9}
.s-foot .btm .info a{color:var(--navy);font-weight:600}
.s-foot .btm .info a:hover{text-decoration:underline}

/* ---------- 반응형 ---------- */
@media(max-width:940px){
  .s-gnb{display:none}
  .s-util a:not(.em){display:none}
  .s-ham{display:block}
  .hd-cta{display:none}   /* 모바일은 드로어 안 문의 링크 사용 */
  .hero .in{padding:56px var(--pad) 60px}
  .quick .grid{grid-template-columns:repeat(2,1fr);margin-top:24px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev .txt{order:0}
  .case{padding:38px 26px}
  .case .in{grid-template-columns:1fr;gap:30px}
  .sec{padding:60px var(--pad)}
  .s-foot .menu{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .quick .grid{grid-template-columns:1fr}
  .btn{width:100%}
  .sec-head h2{font-size:1.62rem}
}

/* ---------- 스크롤 등장 (JS가 html.rv를 켤 때만) ---------- */
html.rv .rv-i{opacity:0;transform:translateY(12px)}
html.rv .rv-i.on{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){html.rv .rv-i{opacity:1;transform:none}}

/* ============================================================
   구 클래스 호환 — /erp/ /vs-onweb/ /pricing/ 가 아직 옛 마크업이다.
   새 팔레트로만 다시 칠하고 구조는 건드리지 않는다.
   세 페이지를 새로 짜면 이 블록 전체를 삭제해도 된다.
   ============================================================ */
h1,h2,h3,.display{font-weight:800;letter-spacing:-.025em;color:var(--navy)}
p{margin-bottom:14px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.rail{position:relative}
.rail::before{display:none}
.layer{position:relative;padding:72px 0}
.layer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.layer:nth-of-type(1),.layer:nth-of-type(2){animation:none}
.layer:nth-of-type(even){background:var(--bg)}
.layer.plain{background:#fff}
.layer.mist,.layer.clay,.layer.filled{background:var(--bg)}
.layer.filled::before{background:var(--line)}
.layer.deep{background:var(--navy);color:#c6d0dc}
.layer.deep h2,.layer.deep h3{color:#fff}
.layer.deep p,.layer.deep .lead{color:#9aa6b5}
.layer.deep .eyebrow{color:#8fb3a6}
.layer.deep a{color:#8fb3a6}
.layer.deep .card,.layer.deep .plan,.layer.deep .note{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#c6d0dc}
.eyebrow{font-size:1.03rem;letter-spacing:.1em;color:var(--sage-link);font-weight:600;text-transform:uppercase;margin-bottom:8px}
.lead{font-size:1.06rem;color:var(--mute);margin-bottom:24px;max-width:620px}
.top{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:1.28rem;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.brand span{color:var(--sage)}
.nav{display:flex;gap:18px;font-size:1.06rem}
.nav a{color:var(--ink);font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--sage-link)}
.mark{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.mark .r1{opacity:.38}
.mark .r2{opacity:.66}
.mark .c{fill:var(--sage);stroke:none}
.facts{display:grid;gap:14px;margin:32px 0;border:0}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px}
.facts dt{font-size:1.03rem;letter-spacing:.08em;color:var(--sage-link);font-weight:600;margin-bottom:6px}
.facts dd{font-size:1.06rem;color:var(--ink)}
.facts b{color:var(--navy);font-weight:700}
.cards{display:grid;gap:16px;margin:28px 0}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card .site{display:block;margin-top:14px;font-size:1rem;font-weight:600;color:var(--sage-link)}
.plans{display:grid;gap:16px;margin:28px 0}
@media(min-width:820px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 26px;position:relative}
.plan.pick{border-color:var(--navy);box-shadow:0 12px 40px rgba(28,43,74,.08)}
.plan .tag{position:absolute;top:-11px;left:26px;background:var(--navy);color:#fff;font-size:.9rem;font-weight:500;padding:4px 13px;border-radius:20px}
.plan h3{font-size:1.1rem;margin-bottom:6px}
.plan .price{font-size:1.35rem;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.plan .price small{font-size:.96rem;color:var(--mute);font-weight:500}
.plan .monthly{font-size:1.03rem;color:var(--mute);margin:6px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.plan ul{list-style:none;font-size:1.01rem}
.plan li{padding:7px 0 7px 18px;position:relative;color:var(--ink)}
.plan li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;background:var(--sage)}
.note{border-left:3px solid var(--sage);background:#fff;border-radius:0 12px 12px 0;padding:18px 22px;margin:24px 0;font-size:1.04rem;color:var(--gray)}
.note b{color:var(--navy)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--navy)}
.faq summary{padding:20px 40px 20px 2px;cursor:pointer;font-weight:600;font-size:1.02rem;color:var(--navy);list-style:none;position:relative;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--mute);font-weight:400}
.faq details[open] summary::after{content:"\2212";color:var(--sage)}
.faq p{padding:0 0 20px 2px;color:var(--mute);font-size:1.04rem;line-height:1.85;margin:0}
.cta{background:var(--navy);border-radius:16px;padding:52px 44px;color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{color:#c6d0dc;margin:14px 0 26px}
.foot{background:var(--bg);border-top:1px solid var(--line);padding:40px 0;font-size:.96rem;color:var(--mute)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.foot a{color:var(--mute)}
.foot a:hover{color:var(--sage-link)}
.foot .tag{font-weight:700;color:var(--navy)}

/* 구 페이지 호환 — 빠져 있던 선택자 복구 */
a:hover{color:var(--sage-link)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{color:var(--navy);border:1px solid #d8dce3;background:transparent}
.btn.ghost:hover{border-color:var(--sage);color:var(--sage-link);background:transparent}
.hero .sub{font-size:1.08rem;color:var(--gray);margin-top:22px;max-width:560px}
.hero h1 em{font-style:normal;color:var(--sage)}
.facts div:last-child{border:1px solid var(--line)}

/* ============================================================
   스크롤 모션 v3
   수치 기준: 카드 Y60px/700ms · 좌우 X80px · 이미지 scale1.08+blur10px/900ms
              섹션 Y80px/700ms · hover -8px · 버튼 scale1.03 · easing ease-out
   전부 opacity/transform/filter 만 사용(리플로우 없음).
   ============================================================ */

html.rv [data-rv]{
  opacity:0;will-change:transform,opacity;
  /* 퇴장(되감기)용 기본 전환 — 진입보다 조금 빠르게 */
  transition:opacity .5s ease-out, transform .6s cubic-bezier(.16,.84,.28,1), filter .5s ease-out;
  transition-delay:0s;
}
html.rv [data-rv].on{opacity:1;transform:none;filter:none}

/* ── 방향별 시작 위치 ── */
html.rv [data-rv="up"]      {transform:translateY(60px)}
html.rv [data-rv="section"] {transform:translateY(80px)}
html.rv [data-rv="left"]    {transform:translateX(-80px)}
html.rv [data-rv="right"]   {transform:translateX(80px)}
html.rv [data-rv="upleft"]  {transform:translate(-46px,56px)}
html.rv [data-rv="upright"] {transform:translate(46px,56px)}
html.rv [data-rv="zoom"]    {transform:scale(1.08);filter:blur(10px)}

/* 화면 위로 지나간 요소 — 되돌아올 땐 위에서 내려온다 */
html.rv [data-rv="up"].up-out      {transform:translateY(-60px)}
html.rv [data-rv="section"].up-out {transform:translateY(-80px)}
html.rv [data-rv="upleft"].up-out  {transform:translate(-46px,-56px)}
html.rv [data-rv="upright"].up-out {transform:translate(46px,-56px)}

/* ── 전환 시간 (자료 권장치) ── */
html.rv [data-rv="up"].on,
html.rv [data-rv="upleft"].on,
html.rv [data-rv="upright"].on{
  transition:opacity .7s ease-out, transform .8s cubic-bezier(.16,.84,.28,1);
}
html.rv [data-rv="section"].on{
  transition:opacity .7s ease-out, transform .75s cubic-bezier(.16,.84,.28,1);
}
html.rv [data-rv="left"].on,
html.rv [data-rv="right"].on{
  transition:opacity .8s ease-out, transform .9s cubic-bezier(.16,.84,.28,1);
}
html.rv [data-rv="zoom"].on{
  transition:opacity .9s ease-out, transform .9s cubic-bezier(.16,.84,.28,1), filter .9s ease-out;
}

/* ── 순차 등장 간격 (눈에 보이도록 120ms) ── */
html.rv [data-rv][data-d="1"].on{transition-delay:.12s}
html.rv [data-rv][data-d="2"].on{transition-delay:.24s}
html.rv [data-rv][data-d="3"].on{transition-delay:.36s}
html.rv [data-rv][data-d="4"].on{transition-delay:.48s}
html.rv [data-rv][data-d="5"].on{transition-delay:.60s}

/* ── 섹션 제목: 라벨 → 제목 → 설명 ── */
html.rv .sec-head .eyebrow,html.rv .sec-head h2,html.rv .sec-head .lead,
html.rv .wire>*{transition:opacity .45s ease-out, transform .5s cubic-bezier(.16,.84,.28,1);transition-delay:0s}
html.rv .sec-head.up-out .eyebrow{transform:translateY(-20px)}
html.rv .sec-head.up-out h2{transform:translateY(-40px)}
html.rv .sec-head.up-out .lead{transform:translateY(-28px)}
html.rv .sec-head .eyebrow{opacity:0;transform:translateY(20px)}
html.rv .sec-head h2{opacity:0;transform:translateY(40px)}
html.rv .sec-head .lead{opacity:0;transform:translateY(28px)}
html.rv .sec-head.on .eyebrow{opacity:1;transform:none;transition:opacity .6s ease-out, transform .7s cubic-bezier(.16,.84,.28,1)}
html.rv .sec-head.on h2{opacity:1;transform:none;transition:opacity .75s ease-out .12s, transform .85s cubic-bezier(.16,.84,.28,1) .12s}
html.rv .sec-head.on .lead{opacity:1;transform:none;transition:opacity .7s ease-out .28s, transform .8s cubic-bezier(.16,.84,.28,1) .28s}

/* ── 히어로: 제목 800ms · 부제 +200ms · 버튼 +400ms ── */
html.rv .hero .in>*{opacity:0;transform:translateY(40px);filter:blur(8px);animation:bwHero .85s ease-out forwards}
html.rv .hero .in>*:nth-child(1){animation-delay:0s}
html.rv .hero .in>*:nth-child(2){animation-delay:.1s}
html.rv .hero .in>*:nth-child(3){animation-delay:.3s}
html.rv .hero .in>*:nth-child(4){animation-delay:.5s}
html.rv .hero .in>*:nth-child(5){animation-delay:.65s}
@keyframes bwHero{to{opacity:1;transform:none;filter:blur(0)}}

/* 히어로 배경 광원 — 아주 느리게 숨쉬듯 */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;right:-12%;top:-40%;
  width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;
  background:radial-gradient(circle, rgba(91,138,125,.16) 0%, rgba(91,138,125,0) 68%);
  pointer-events:none;animation:bwGlow 14s ease-in-out infinite alternate;
}
@keyframes bwGlow{from{transform:scale(1) translateY(0)}to{transform:scale(1.12) translateY(18px)}}
.hero .in{position:relative;z-index:1}

/* ── 컨셉 도식: 부품이 순서대로 놓임 ── */
html.rv .wire>*{opacity:0;transform:translateY(12px)}
html.rv .wirebox.on .wire>*{opacity:1;transform:none;transition:opacity .45s ease-out, transform .5s cubic-bezier(.16,.84,.28,1)}
html.rv .wirebox.on .wire>*:nth-child(1){transition-delay:.05s}
html.rv .wirebox.on .wire>*:nth-child(2){transition-delay:.09s}
html.rv .wirebox.on .wire>*:nth-child(3){transition-delay:.13s}
html.rv .wirebox.on .wire>*:nth-child(4){transition-delay:.17s}
html.rv .wirebox.on .wire>*:nth-child(5){transition-delay:.21s}
html.rv .wirebox.on .wire>*:nth-child(6){transition-delay:.25s}
html.rv .wirebox.on .wire>*:nth-child(7){transition-delay:.29s}
html.rv .wirebox.on .wire>*:nth-child(8){transition-delay:.33s}
html.rv .wirebox.on .wire>*:nth-child(n+9){transition-delay:.37s}

/* ── hover: 카드 8px 상승 + 그림자 심화 (250ms) ── */
.card,.wcard,.qcard,.pc{
  transition:transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out;
}
.card:hover,.wcard:hover,.qcard:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(28,43,74,.14);
  border-color:#c9d2e0;
}
.thumb{overflow:hidden}
.thumb img{transition:transform .8s cubic-bezier(.16,.84,.28,1)}
.wcard:hover .thumb img{transform:scale(1.06)}
.btn{transition:transform .25s ease-out, box-shadow .25s ease-out, background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out}
.btn-solid:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 14px 30px rgba(28,43,74,.24)}
.btn-solid:active{transform:scale(1) translateY(0)}
.btn-ghost:hover{transform:translateY(-2px)}

/* ── 패럴랙스 ── */
[data-par]{will-change:transform}

/* ── 헤더 ── */
.top{transition:box-shadow .3s ease-out, background-color .3s ease-out, border-color .3s ease-out}
.top.is-stuck{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:transparent;
  box-shadow:0 6px 28px rgba(28,43,74,.10);
}
.top .wrap{transition:height .3s cubic-bezier(.16,.84,.28,1)}
.top.is-stuck .wrap{height:80px}

/* ── 읽기 진행 ── */
.sprog{position:fixed;left:0;top:0;height:3px;width:0;z-index:100001;
  background:linear-gradient(90deg,var(--sage-link),var(--navy));
  transition:width .1s linear;pointer-events:none}

/* ── 모션 최소화 설정이면 전부 무효 ── */
@media (prefers-reduced-motion:reduce){
  html.rv [data-rv],
  html.rv .hero .in>*,
  html.rv .wire>*,
  html.rv .sec-head .eyebrow,
  html.rv .sec-head h2,
  html.rv .sec-head .lead{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important}
  .hero::before{animation:none;display:none}
  .sprog{display:none}
  .top .wrap,.top.is-stuck .wrap{height:80px}
  [data-par]{transform:none !important}
  .card:hover,.wcard:hover,.qcard:hover,.btn-solid:hover,.btn-ghost:hover{transform:none}
}

/* ============================================================
   디자인 시스템 정비
   기준: 8pt 그리드 · Radius 3종(버튼12/카드20/이미지24)
        Accent 10~15% · 섹션마다 분위기 전환 · Shadow는 레이어 표현에만
   ============================================================ */

:root{
  /* Radius — 7종으로 흩어져 있던 것을 3종으로 */
  --r-sm:8px;      /* 태그·배지 */
  --r-btn:12px;    /* 버튼·입력 */
  --r-card:20px;   /* 카드·패널 */
  --r-img:24px;    /* 이미지·큰 블록 */

  /* Spacing — 8pt 배수 */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px;

  /* Elevation — 3단계만 사용 */
  --e1:0 1px 2px rgba(28,43,74,.04), 0 6px 16px rgba(28,43,74,.05);
  --e2:0 12px 28px rgba(28,43,74,.10);
  --e3:0 24px 56px rgba(28,43,74,.16);
}

/* ── Radius 통일 ── */
.btn,.pc .go,.hd-cta{border-radius:var(--r-btn)}
.card,.wcard,.qcard,.pc,.plan,.fq,.note,.tbl{border-radius:var(--r-card)}
.thumb,.wirebox,.shot,.figure .shot,.case{border-radius:var(--r-img)}
.tag,.status,.soon,.k{border-radius:var(--r-sm)}
.wcard,.pc,.tbl{overflow:hidden}

/* ── Elevation 정리 (그림자는 층을 표현할 때만) ── */
.card,.wcard,.qcard{box-shadow:var(--e1)}
.card:hover,.wcard:hover,.qcard:hover{box-shadow:var(--e2)}
.pc.best{box-shadow:var(--e2)}
.shot{box-shadow:var(--e2)}

/* ── 섹션 리듬: 평면 단색 → 아주 옅은 수직 그라데이션 ──
   같은 회색이 계속 반복되던 것을 위아래로 미세하게 흐르게 해
   섹션 경계에서 공기가 바뀌는 느낌을 만든다. */
.secwrap.alt{
  background:linear-gradient(180deg,#fbfcfd 0%, var(--bg) 42%, var(--bg) 62%, #fbfcfd 100%);
  border-top-color:rgba(28,43,74,.06);
  border-bottom-color:rgba(28,43,74,.06);
  position:relative;
}
.layer:nth-of-type(even),
.layer.mist,.layer.clay,.layer.filled{
  background:linear-gradient(180deg,#fbfcfd 0%, var(--bg) 45%, #fbfcfd 100%);
}

/* ── 미세 질감: 단색 배경의 밋밋함 제거 ──
   노이즈를 아주 옅게(3%) 얹으면 인쇄물 같은 깊이가 생긴다. */
.secwrap.alt::before,
.layer.deep::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.secwrap.alt>*{position:relative;z-index:1}
.layer.deep{position:relative;overflow:hidden}
.layer.deep>*{position:relative;z-index:1}
.layer.deep::after{opacity:.06}

/* ── 강조 블록에 은은한 광원 (Accent 비중 확대) ── */
.case,.layer.deep{position:relative;overflow:hidden}
.case::before{
  content:"";position:absolute;left:-10%;bottom:-45%;
  width:46vw;height:46vw;max-width:640px;max-height:640px;border-radius:50%;
  background:radial-gradient(circle, rgba(143,179,166,.18) 0%, rgba(143,179,166,0) 66%);
  pointer-events:none;z-index:0;
}
.case>*{position:relative;z-index:1}

/* ── 여백 8pt 정렬 (주요 지점만) ── */
.sec{padding:clamp(72px,7vw,var(--s12)) var(--pad)}
.sec-head{margin-bottom:var(--s6)}
.card{padding:var(--s4) var(--s3)}
.qcard{padding:var(--s3) var(--s2)}
.wcard .bd{padding:var(--s3) var(--s3) var(--s4)}
.g2,.g3,.g4{gap:var(--s3)}
.case{padding:var(--s6) var(--s5)}

@media(max-width:860px){
  .g2,.g3,.g4{gap:var(--s2)}
  .case{padding:var(--s4) var(--s3)}
  .card{padding:var(--s3) var(--s3)}
}

/* 모션 최소화 시 질감·광원까지 정리 */
@media (prefers-reduced-motion:reduce){
  .case::before{display:none}
}

/* ── 로고 이미지 ───────────────────────── */
.lgh{height:38px;width:auto;display:block}
.s-brand .lgh{height:40px}
@media(max-width:760px){ .lgh{height:30px} .s-brand .lgh{height:32px} }
.mkimg{height:36px;width:auto;display:block;flex-shrink:0}
.s-foot .btm .mkimg{height:34px}

/* ── 카드 정렬 보정 ──────────────────────── */
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column}
.plan ul{flex:1 0 auto;margin:0}
.plan .foot{margin-top:auto;padding-top:16px;font-size:.96rem;color:var(--mute)}

/* ── 금색 포인트 (어두운 배경 전용) ─────────── */
.layer.deep .eyebrow,.ctasec .eyebrow{color:var(--gold)}
.ctasec .in::before{content:"";display:block;width:44px;height:2px;
  background:var(--gold);margin:0 auto 24px;border-radius:2px}
.plan .tag{background:var(--gold);color:#152238}
.pc .rec{background:var(--gold);color:#152238}
.layer.deep .lead b,.ctasec b{color:var(--gold)}

/* ── 푸터 하단 정리 ───────────────────────── */
.s-foot .btm .in{display:block;padding:30px var(--pad) 34px}
.s-foot .btm .idrow{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.s-foot .btm .fn{font-size:1.04rem;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.s-foot .btm .info{font-size:1.01rem;color:var(--mute);line-height:2.05;max-width:none}
.s-foot .btm .info span{white-space:nowrap}
.s-foot .btm .info .sep{margin:0 9px;color:var(--line-2,#dfe4e8)}
.s-foot .btm .cpr{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:1rem;color:var(--faint)}

/* ── 상단 메뉴 (하위 페이지) ─────────────── */
.top .nav a{position:relative;padding:6px 0;color:var(--ink)}
.top .nav a:hover{color:var(--sage-link)}
.top .nav a[aria-current="page"]{color:var(--sage-link);font-weight:600}
.top .nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--sage);border-radius:2px}
.s-gnb>li>a[aria-current="page"]{color:var(--sage-link);font-weight:600}
.s-gnb>li>a[aria-current="page"]+*,.s-gnb>li:has(>a[aria-current="page"])::after{transform:scaleX(1)}

@media(max-width:940px){
  .top .wrap{flex-wrap:wrap;row-gap:0;height:auto;padding-top:12px;padding-bottom:0}
  .top .brand{order:1}
  .top .hd-cta{order:2;margin-left:auto;display:inline-flex}
  .top .nav{order:3;width:100%;gap:18px;font-size:1.03rem;margin-left:0;
    overflow-x:auto;padding:10px 0 12px;scrollbar-width:none}
  .top .nav::-webkit-scrollbar{display:none}
  .top .nav a{white-space:nowrap}
  .top.is-stuck .wrap{height:auto}
}
@media(max-width:520px){
  /* 좁은 화면 — 로고를 줄이고 버튼을 우측에 붙인다 */
  .top .wrap{padding-top:10px}
  .top .brand{order:1;flex:0 1 auto;min-width:0;overflow:hidden}
  .top .hd-cta{order:2;flex:none;margin-left:auto;padding:9px 15px;font-size:.94rem;white-space:nowrap}
  .top .lgh{height:24px}
}

/* ── 데모 표시 ─────────────────────────── */
.wcard .thumb{position:relative;display:block}
.wcard .dtag{position:absolute;left:12px;top:12px;background:rgba(23,24,26,.86);color:#fff;
  font-size:.89rem;font-weight:700;letter-spacing:-.01em;padding:5px 11px;border-radius:4px}
.wcard h3 .sm{font-size:.85rem;font-weight:600;color:var(--mute);letter-spacing:0;
  border:1px solid var(--line-2,#dfe4e8);padding:2px 8px;border-radius:3px;margin-left:7px;vertical-align:middle}

/* ── 접근성 · 건너뛰기 링크 ─────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:#fff;
  padding:12px 20px;font-weight:600;font-size:1.03rem;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ── 부가세 표기 ───────────────────────── */
.price small{display:block;font-size:.98rem;font-weight:500;color:var(--mute);
  letter-spacing:0;margin-top:3px}
.per em,.plan .monthly em{font-style:normal;font-size:.95rem;color:var(--faint);letter-spacing:0}

/* ── 시장 비교표 ──────────────────────── */
.cmpwrap{overflow-x:auto;margin:26px 0 0}
@media(max-width:720px){.cmp{min-width:600px}}
.tbl.cmp thead th{background:var(--bg);color:var(--navy);font-weight:700;font-size:1rem;
  border-bottom:2px solid var(--sage)}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl.cmp tbody th .d{display:block;font-weight:400;font-size:.95rem;color:var(--mute);
  letter-spacing:0;margin-top:3px;line-height:1.55}
.tbl.cmp tbody th{width:30%;min-width:190px}
.tbl.cmp tbody tr.me{background:var(--sage-bg)}
.tbl.cmp tbody tr.me th{color:var(--navy);font-weight:800}
.tbl.cmp tbody tr.me th .d{color:var(--sage-link);font-weight:500}
.tbl.cmp tbody tr.me td{color:var(--navy);font-weight:700}
.cmpnote{background:var(--bg);border-left:3px solid var(--sage);padding:18px 22px;margin:22px 0 26px}
.cmpnote p{margin:0 0 6px;font-size:1.01rem;color:var(--gray)}
.cmpnote p:last-child{margin-bottom:0}
.cmpnote b{color:var(--navy)}
.fine{color:var(--mute);font-size:1rem;line-height:1.8;margin:14px 0 0}

/* ── 가로 넘침 차단 ──────────────────────── */
html,body{overflow-x:hidden;max-width:100%}
.wide,.wide-x,.cmpwrap{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.plan,.wcard,.card,.dm{min-width:0}
.plans,.g2,.g3,.g4,.probs,.kinds,.demos{min-width:0}

/* ── 모바일 대분류 노출 (메인) ─────────────── */
@media(max-width:940px){
  .s-head .in{flex-wrap:wrap;row-gap:0;height:auto;padding-top:12px;padding-bottom:0}
  .s-brand{order:1}
  .s-ham{order:2;margin-left:auto}
  /* 햄버거를 남기되 대분류를 바로 보이게 한다 */
  .s-head nav[aria-label="주메뉴"]{order:3;width:100%;min-width:0;max-width:100%}
  .s-gnb{display:flex;height:auto;gap:18px;margin:0;padding:10px 0 12px;list-style:none;
    overflow-x:auto;scrollbar-width:none;font-size:1.03rem;max-width:100%}
  .s-gnb::-webkit-scrollbar{display:none}
  .s-gnb>li{flex:none}
  .s-gnb>li{height:auto}
  .s-gnb>li>a{white-space:nowrap;padding:4px 0;display:block;height:auto;line-height:1.5}
  .s-head.is-stuck .in{height:auto}
}
@media(max-width:520px){
  .s-brand .lgh{height:24px}
  .s-gnb{gap:16px;font-size:1rem}
}

/* 이미지 기본 — width/height 속성이 있어도 컨테이너를 넘지 않게 */
img,svg,video,canvas{max-width:100%;height:auto}
.wcard .thumb img,.dm .pv img{height:100%}

/* ── 업체 제작 사례 ──────────────────────── */
.wref{display:grid;gap:0;background:#fff;border:1px solid var(--stone);
  border-radius:var(--r-card,14px);overflow:hidden;margin-top:22px}
@media(min-width:860px){.wref{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.wref .thumb{display:block;overflow:hidden;background:var(--tint);min-width:0}
.wref .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;transition:transform .3s ease}
.wref:hover .thumb img{transform:scale(1.02)}
.wref .bd{padding:28px 26px}
.wref .k{font-size:.9rem;letter-spacing:.1em;font-weight:700;color:var(--sage);margin-bottom:8px}
.wref h3{margin:0 0 10px;font-size:1.28rem;color:var(--ink);letter-spacing:-.02em}
.wref h3 .sm{font-size:.86rem;font-weight:600;color:var(--mute);letter-spacing:0;
  border:1px solid var(--stone);padding:2px 9px;border-radius:3px;margin-left:7px;vertical-align:middle}
.wref p{margin:0 0 16px;font-size:1.02rem;color:var(--mute);line-height:1.8}
.wref .pts{margin:0 0 18px;padding:16px 0 0;list-style:none;border-top:1px solid var(--line)}
.wref .pts li{font-size:1rem;color:var(--mute);padding:5px 0 5px 15px;position:relative}
.wref .pts li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--sage)}
.wref .go{font-weight:700;font-size:1.02rem;color:var(--sage-link)}
.wref .go:hover{text-decoration:underline}

/* ============================================================
   문의 폼 · 카카오톡 · 상시 연락 (v6 · 2026-08)
   ============================================================ */
.noticebar{background:var(--navy);color:#fff;text-align:center;
  padding:9px 16px;font-size:.94rem;font-weight:600;letter-spacing:-.01em}

.btn-kakao{background:#FEE500;border-color:#FEE500;color:#3C1E1E}
.btn-kakao:hover{background:#F2DA00;border-color:#F2DA00;color:#3C1E1E}

/* ── 문의 폼 ─────────────────────────── */
.inqform{max-width:720px;margin:0 auto;text-align:left}
.inqform .fr{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:14px}
.inqform label,.inqform .fr>label{display:block;font-size:.94rem;font-weight:700;
  color:var(--gray);text-align:left}
.inqform label.full{display:block;margin-bottom:14px}
.inqform label b{color:var(--sage);margin-left:2px}
.inqform input[type=text],.inqform select,.inqform textarea{
  width:100%;margin-top:7px;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink);
  font-weight:400}
.inqform input:focus,.inqform select:focus,.inqform textarea:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(20,85,110,.09)}
.inqform textarea{min-height:120px;resize:vertical;line-height:1.75}
.inqform .hp{position:absolute;left:-9999px;width:1px;height:1px}
.inqform .agree{display:flex;align-items:flex-start;gap:9px;font-size:.94rem;
  font-weight:400;color:var(--mute);margin:4px 0 18px;cursor:pointer;line-height:1.6}
.inqform .agree input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--navy);flex:none}
.inqform .agree span{color:var(--faint);font-size:.9rem}
.inqform .fa{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inqform .fmsg{font-size:.94rem;color:var(--mute);margin-right:auto}
.inqform .fmsg.ok{color:#2F6B52;font-weight:600}
.inqform .fmsg.err{color:#C0442E;font-weight:600}

/* ── 상시 연락 — 오른쪽 고정 ───────────── */
.quickcall{position:fixed;right:20px;top:50%;transform:translateY(-50%);
  z-index:900;display:flex;flex-direction:column;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .25s}
.quickcall.on{opacity:1;pointer-events:auto}
.quickcall a.hide{display:none}
.quickcall a{display:flex;align-items:center;gap:8px;text-decoration:none;
  background:#fff;color:var(--ink);border:1px solid var(--line2);border-radius:99px;
  padding:12px 20px;font-weight:700;font-size:.94rem;
  box-shadow:0 6px 20px rgba(35,38,43,.14)}
.quickcall .q-tel{background:var(--navy);border-color:var(--navy);color:#fff}
.quickcall .q-ka{background:#FEE500;border-color:#FEE500;color:#3C1E1E}
.quickcall .ic{font-size:1.05rem;line-height:1}

@media(max-width:640px){
  .inqform .fr{grid-template-columns:1fr;gap:12px}
  .quickcall{right:auto;left:0;top:auto;bottom:0;transform:none;
    flex-direction:row;width:100%;gap:0;
    border-top:1px solid var(--line);background:#fff}
  .quickcall a{flex:1;justify-content:center;border-radius:0;border:0;
    box-shadow:none;border-right:1px solid rgba(255,255,255,.28)}
  .quickcall a:last-child{border-right:0}
  .quickcall a{padding:11px 15px;font-size:.9rem}
  .quickcall .tx{display:none}
  .quickcall .ic{font-size:1.15rem}
}

/* 푸터 관리자 링크 — 눈에 띄지 않게, 다만 찾을 수는 있게 */
.s-foot .cpr .admlink{margin-left:14px;color:inherit;opacity:.45;text-decoration:none;
  font-size:.92em;border-bottom:1px solid transparent;padding-bottom:1px}
.s-foot .cpr .admlink:hover{opacity:.9;border-bottom-color:currentColor}

/* v1.19 — 맞춤 기능 */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.feat .fx{background:#fff;border:1px solid var(--line,#e6e9ee);border-radius:14px;
  padding:26px 24px 22px;display:flex;flex-direction:column}
.feat .fx .ic{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;
  letter-spacing:.2px;color:var(--navy,#145570);background:rgba(20,85,112,.08);
  padding:6px 12px;border-radius:99px;margin-bottom:14px}
.feat .fx h3{margin:0 0 10px;font-size:1.06rem;line-height:1.45;color:var(--ink,#1c2430)}
.feat .fx p{margin:0;font-size:.94rem;line-height:1.75;color:var(--muted,#5b6673)}
.feat .fx .who{margin-top:auto;padding-top:16px;font-size:.84rem;color:#8a94a3}
.feat + .note{margin-top:22px;font-size:.92rem;color:var(--muted,#5b6673)}
@media (max-width:900px){ .feat{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .feat{grid-template-columns:1fr;gap:14px}
  .feat .fx{padding:22px 20px 18px} }