/* 작업일자 : 2026-11-06 / 작성자 : hsjung
   첫 화면 스타일. installer/web/index.html (R2 홈페이지) 에서 옮겼다. */

/* ────────────────────────────────────────────────────────────
   글꼴: 나눔스퀘어_ac
     본문 Regular(400) · 강조 Bold(700) · 제목 ExtraBold(800)

   ★ 외부 CDN 이 아니라 같은 도메인에서 받는다. 받는 분들이 보험사 지점
     PC 라 외부 CDN 이 막혀 있는 경우가 많고, 그러면 폰트가 조용히
     맑은 고딕으로 떨어진다.
   ★ font-display:swap — 폰트를 받는 동안 글자가 안 보이면 설치 안내를
     읽으러 온 사람이 빈 화면을 본다. 먼저 보여주고 나중에 바꾼다.
   ──────────────────────────────────────────────────────────── */
@font-face{font-family:'NanumSquareAc';font-weight:400;font-display:swap;
  src:url(fonts/NanumSquareAcR.woff2) format('woff2')}
@font-face{font-family:'NanumSquareAc';font-weight:700;font-display:swap;
  src:url(fonts/NanumSquareAcB.woff2) format('woff2')}
@font-face{font-family:'NanumSquareAc';font-weight:800;font-display:swap;
  src:url(fonts/NanumSquareAcEB.woff2) format('woff2')}

/* ────────────────────────────────────────────────────────────
   색: 따뜻한 오프화이트 바탕 + 남색 + 포인트 노랑.
   흰 바탕에 파랑만 쓰면 어느 SaaS 랜딩이나 똑같아 보인다.
   ──────────────────────────────────────────────────────────── */
:root{
  --bg:#faf9f5; --ink:#121a2b; --blue:#2f62d6; --yellow:#fbe68a;
  --muted:#5a6274; --line:#e7e4db; --card:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'NanumSquareAc',"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:16.5px;line-height:1.85;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word}
a{color:var(--blue)}
/* 제목은 ExtraBold. 나눔스퀘어는 굵기 차이가 커서 700 과 800 이 확실히 구분된다 */
h1,h2,h3{margin:0;letter-spacing:-.005em;line-height:1.42;font-weight:800}
p{margin:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:92px 0}
.lbl{font-size:12.5px;font-weight:700;color:var(--blue);letter-spacing:.14em;margin-bottom:12px}
.sechead{margin-bottom:38px}
.sechead h2{font-size:32px}
.sechead .sub{color:var(--muted);margin-top:12px;max-width:620px}

/* ── 상단 고정 ───────────────────────────────────────────────
   히어로가 전면 사진이라 처음에는 투명하게 얹힌다. 히어로를 지나면
   밝은 배경으로 바꾼다(.solid) — 그러지 않으면 밝은 본문 위에서
   흰 글씨가 보이지 않는다. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .25s,border-color .25s}
.nav .wrap{display:flex;align-items:center;gap:30px;height:72px;max-width:1340px;padding:0 44px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;
  text-decoration:none;color:#fff;letter-spacing:-.02em}
.brand .tw-mark{width:auto;height:24px}
.brand svg{width:28px;height:28px;display:block}
.navlinks{display:flex;gap:26px;flex:1}
.navlinks a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;font-weight:500}
.navlinks a:hover{color:#fff}
.navbtn{background:rgba(255,255,255,.12);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28);
  color:#fff;text-decoration:none;font-size:14px;font-weight:600;
  padding:10px 18px;border-radius:9px;white-space:nowrap}
.navbtn:hover{background:rgba(255,255,255,.22)}
.nav.solid{background:rgba(250,249,245,.95);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.nav.solid .brand{color:var(--ink)}
.nav.solid .navlinks a{color:var(--muted)}
.nav.solid .navlinks a:hover{color:var(--ink)}
.nav.solid .navbtn{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── 히어로 ────────────────────────────────────────────────── */
/* ★ 100vh 로 두면 첫 화면이 사진으로 꽉 차서 아래에 내용이 더 있다는 걸
     알 수 없다. 다음 섹션이 한 뼘 걸치도록 높이를 줄인다.
     min/max 는 노트북(768px)과 큰 모니터 양쪽을 막아 둔다. */
.hero{position:relative;height:66vh;min-height:570px;max-height:700px;
  overflow:hidden;background:#0d1526;color:#fff}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;display:block}
/* 사진 위 글씨가 읽혀야 한다. 왼쪽은 거의 불투명하게, 오른쪽은 사진을 살린다 */
/* 두 겹을 쓴다.
   ① 가로 — 글이 놓인 왼쪽만 덮고 빠르게 걷는다. 오른쪽은 사진을 살린다.
   ② 세로 — 맨 위 띠. 네비 흰 글씨가 밝은 사진 위에 놓이면 안 보인다. */
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(0deg,#101a2e 0%,rgba(16,26,46,.55) 9%,rgba(16,26,46,0) 20%),
  linear-gradient(180deg,rgba(9,15,30,.62) 0,rgba(9,15,30,0) 150px),
  linear-gradient(90deg,
    rgba(9,15,30,.93) 0%,rgba(9,15,30,.84) 26%,
    rgba(9,15,30,.46) 50%,rgba(13,21,38,.16) 72%,rgba(13,21,38,.04) 100%)}
.hero .inner{position:relative;height:100%;max-width:1340px;margin:0 auto;
  padding:72px 44px 0;display:grid;grid-template-columns:560px 1fr;gap:40px;align-items:center}
.hcol{display:flex;flex-direction:column;gap:20px}
.eyebrow{font-size:13.5px;font-weight:700;color:var(--yellow)}
.hero h1{font-size:44px;line-height:1.26;letter-spacing:-.01em;color:#fff}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lede{font-size:17px;line-height:1.7;color:rgba(255,255,255,.85);max-width:30em}

/* ★ align-items:stretch 로 두 버튼의 높이를 맞추고, 버튼 안에서 글자를
     가운데 놓는다. 왼쪽 버튼은 설명 줄이 붙어 두 줄이라, 이렇게 하지
     않으면 오른쪽 버튼 글자가 위로 붙어 보인다. (마지막 CTA 도 같이 쓴다) */
.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  align-items:stretch;margin-top:40px}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;border-radius:12px;font-size:15.5px;
  padding:15px 26px;line-height:1.45}
/* 1차 버튼만 가로 배치 — 왼쪽에 윈도우 마크, 오른쪽에 글 두 줄.
   마크 색은 currentColor 라 흰 버튼(히어로)에서도, 노란 버튼(마지막
   CTA)에서도 글자색을 그대로 따라간다. */
.btn.p{background:var(--ink);color:#fff;flex-direction:row;align-items:center;gap:11px}
.btn.p .winmark{flex:0 0 18px;width:18px;height:18px;display:block}
.btn.p .txt{display:flex;flex-direction:column;align-items:flex-start}
.btn.p small{display:block;font-weight:500;font-size:12px;opacity:.65;margin-top:3px}
.btn.s{background:#fff;color:var(--ink);border:1px solid #d6d2c8}

.hero .cta{justify-content:flex-start;margin-top:2px;gap:12px}
.hero .btn{border-radius:12px;padding:14px 24px}
.hero .btn.p{background:#fff;color:var(--ink)}
.hero .btn.p small{color:#5a6274;opacity:1}
.hero .btn.s{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);color:#fff}

.trust{display:flex;flex-wrap:wrap;gap:22px;font-size:13.5px;color:rgba(255,255,255,.78)}
.trust span{display:flex;align-items:center;gap:7px}
.trust svg{flex:0 0 15px}

/* 오른쪽 — 실제 화면을 흉내 낸 카드 두 장 */
.shots{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.glass{width:440px;border-radius:18px;background:rgba(255,255,255,.12);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.24);padding:20px;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6)}
.glass .top{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.75)}
.glass .top b{color:#fff;font-weight:700}
.tplbox{font-size:15px;line-height:1.7;background:rgba(9,15,30,.38);border-radius:10px;padding:13px}
.slot{background:rgba(61,107,240,.75);color:#fff;padding:1px 7px;border-radius:5px;font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap;font-size:13px}
.chip{background:var(--yellow);color:#121a2b;border-radius:999px;padding:5px 11px;font-weight:700}
.chip.more{background:transparent;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.3);font-weight:500}
.bar{display:flex;align-items:center;gap:12px;font-size:12px;color:rgba(255,255,255,.75)}
.bar .track{flex:1;height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
.bar .fill{display:block;width:47%;height:100%;background:var(--yellow)}
.bar b{color:#fff}

.kakao{width:300px;margin-right:60px;border-radius:18px;padding:14px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);color:#121a2b;
  display:flex;flex-direction:column;gap:9px}
.kakao .who{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.kakao .av{width:28px;height:28px;border-radius:10px;background:#c3cddb}
.kakao .time{margin-left:auto;font-size:11px;font-weight:500;color:#6b7488}
.kakao .mine{align-self:flex-start;background:var(--yellow);
  border-radius:4px 14px 14px 14px;padding:10px 12px;font-size:13.5px;line-height:1.6}
.kakao .reply{align-self:flex-end;background:#fff;
  border-radius:14px 4px 14px 14px;padding:9px 12px;font-size:13.5px}


/* ── 어두운 섹션: 안전장치 ─────────────────────────────────── */
/* 히어로 사진 아래끝 색에서 이어받아 번지게 한다 */
.dark{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#0d1526 0%,#121a2b 55%,#141e33 100%);color:#fff}

/* ── 오로라 ───────────────────────────────────────────────────
   큰 원 두 개를 흐리게 깔아 빛이 번지는 느낌을 만든다. 파랑은 위쪽,
   노랑(포인트색)은 아래쪽에 둬서 시선이 아래로 흐르게 한다. */
.glowwrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(46px)}
.glow.g1{width:760px;height:760px;left:-180px;top:-280px;
  background:radial-gradient(circle,rgba(47,98,214,.40) 0%,rgba(47,98,214,0) 66%)}
.glow.g2{width:640px;height:640px;right:-150px;bottom:-250px;
  background:radial-gradient(circle,rgba(251,230,138,.20) 0%,rgba(251,230,138,0) 66%)}
.glow.g3{width:420px;height:420px;left:46%;top:38%;
  background:radial-gradient(circle,rgba(110,80,220,.22) 0%,rgba(110,80,220,0) 68%)}

/* ── 3D 구체와 링 ─────────────────────────────────────────────
   한쪽에서 빛을 받는 것처럼 보이게 안쪽 그림자를 반대편에 넣는다.
   그래야 납작한 원이 아니라 구슬로 읽힌다. */
.orb{position:absolute;border-radius:50%;pointer-events:none}
.orb.o1{width:104px;height:104px;right:3%;top:6%;
  background:radial-gradient(circle at 32% 26%,#7ea4ff 0%,#2f62d6 46%,#16307a 100%);
  box-shadow:0 28px 62px -18px rgba(47,98,214,.75),
             inset -9px -12px 24px rgba(0,0,0,.45);opacity:.62}
.orb.o2{width:62px;height:62px;left:2%;bottom:11%;
  background:radial-gradient(circle at 34% 26%,#ffeeb4 0%,#f3cf5e 48%,#8d6f12 100%);
  box-shadow:0 22px 46px -16px rgba(251,230,138,.55),
             inset -7px -9px 18px rgba(0,0,0,.4);opacity:.4}
.orb.ring{width:220px;height:220px;right:26%;bottom:-96px;
  border:1px solid rgba(255,255,255,.09);box-shadow:0 0 26px rgba(47,98,214,.22);
  transform:rotate(16deg) skewY(-14deg)}

/* ── 입자 ─────────────────────────────────────────────────────
   위치·크기·속도는 스크립트가 흩뿌린다. 규칙적으로 깔면 격자가 보인다. */
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.particles i{position:absolute;border-radius:50%;background:#fbe68a;
  box-shadow:0 0 7px rgba(251,230,138,.85);animation:drift linear infinite}
@keyframes drift{
  0%{transform:translate3d(0,12px,0)}
  50%{transform:translate3d(6px,-16px,0)}
  100%{transform:translate3d(0,12px,0)}}

/* ── 밝은 섹션용 ──────────────────────────────────────────────
   어두운 쪽 값을 그대로 쓰면 얼룩처럼 보인다. 불투명도를 1/3 수준으로
   낮추고, 입자는 바탕에서 사라지지 않게 파랑으로 바꾼다. */
.fx{position:relative;overflow:hidden}
.fx .glow.g1{background:radial-gradient(circle,rgba(47,98,214,.13) 0%,rgba(47,98,214,0) 66%)}
.fx .glow.g2{background:radial-gradient(circle,rgba(243,207,94,.22) 0%,rgba(243,207,94,0) 66%)}
.fx .glow.g3{background:radial-gradient(circle,rgba(110,80,220,.09) 0%,rgba(110,80,220,0) 68%)}
.fx .orb.o1{background:radial-gradient(circle at 32% 26%,#cfdcff 0%,#9db6f0 48%,#6a84c4 100%);
  box-shadow:0 22px 46px -20px rgba(47,98,214,.35),
             inset -9px -12px 24px rgba(90,110,160,.35);opacity:.42}
.fx .orb.o2{background:radial-gradient(circle at 34% 26%,#fff4cf 0%,#f2dd9a 48%,#c0a84f 100%);
  box-shadow:0 18px 38px -18px rgba(200,170,70,.35),
             inset -7px -9px 18px rgba(150,130,70,.3);opacity:.4}
.fx .orb.ring{border-color:rgba(18,26,43,.08);box-shadow:0 0 26px rgba(47,98,214,.1)}
.fx .particles i{background:#2f62d6;box-shadow:0 0 6px rgba(47,98,214,.4)}
.fx .wrap{position:relative;z-index:1}

/* 본문은 장식 위에 */
.dark .wrap,.last .wrap{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .particles i{animation:none}
}
.dark h2{color:#fff}
.dark .lbl{color:#8aa6e8}
.dark .sub{color:#a7b0c2}
.darktop{display:flex;gap:56px;align-items:flex-end;margin-bottom:38px;flex-wrap:wrap}
.darktop h2{flex:1 1 380px;font-size:32px}
.darktop p{flex:1 1 340px;color:#a7b0c2;font-size:15.5px}
/* 히어로 글래스 카드와 같은 재질. 한 덩어리 상자보다 숨 쉴 자리가 있다 */
.guards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.guard{padding:22px 20px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.8);
  transition:background .2s,border-color .2s,transform .2s}
.guard:hover{background:rgba(255,255,255,.1);
  border-color:rgba(251,230,138,.45);transform:translateY(-2px)}
.guard .n{font-size:12px;font-weight:700;color:var(--yellow);letter-spacing:.1em;margin-bottom:12px}
.guard h3{font-size:16px;margin-bottom:8px}
.guard p{font-size:14.5px;color:#a7b0c2;line-height:1.75}

/* ── 네 단계 ───────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.scard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;
  box-shadow:0 14px 34px -28px rgba(18,26,43,.5);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.scard:hover{border-color:#c6d2e6;transform:translateY(-2px);
  box-shadow:0 20px 40px -26px rgba(18,26,43,.45)}
.scard .n{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.1em;margin-bottom:10px}
.scard h3{font-size:18px;margin-bottom:8px}
.scard p{font-size:14.5px;color:var(--muted)}

/* ── 활용 사례 탭 ──────────────────────────────────────────── */
.tabhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.tabs{display:inline-flex;background:#efece4;border-radius:9px;padding:4px;gap:2px}
.tabs button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;
  padding:8px 16px;border-radius:7px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);font-weight:700;
  box-shadow:0 1px 3px rgba(18,26,43,.12)}
table.uses{width:100%;border-collapse:separate;border-spacing:0;margin-top:26px;background:#fff;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px -28px rgba(18,26,43,.5)}
table.uses th{text-align:left;font-size:12.5px;font-weight:700;color:var(--muted);
  background:#f4f2ec;padding:13px 18px;border-bottom:1px solid var(--line)}
table.uses td{padding:15px 18px;border-bottom:1px solid #f0eee8;font-size:14.5px;vertical-align:top}
table.uses tr:last-child td{border-bottom:0}
table.uses td:first-child{font-weight:700;white-space:nowrap}
table.uses td:nth-child(2){color:var(--muted);white-space:nowrap;font-size:14px}
.usenote{font-size:13.5px;color:var(--muted);margin-top:14px}

/* ── 명단은 어디로 가나 ────────────────────────────────────── */
.privacy{max-width:820px;margin:0 auto 40px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px 30px;box-shadow:0 14px 34px -28px rgba(18,26,43,.5)}
.privacy h3{font-size:20px;margin-bottom:10px}
.privacy p{color:var(--muted);font-size:15px}

/* ── 설치 가이드 ───────────────────────────────────────────── */
/* 답변 안으로 들어왔다. 창 그림과 경고 상자의 여백만 다듬는다 */
.fa .mocks{margin:18px 0 0}
.fa .warn{margin:2px 0 0}
.fa > p:first-child{margin-bottom:0}
.warn{border:1px solid #f2c7c7;background:#fdf5f5;border-left:4px solid #d93a3a;
  border-radius:14px;padding:20px 22px;margin:24px 0}
.warn h4{margin:0 0 8px;font-size:16px;color:#b3261e;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.warn p{color:#53403f;margin:0;font-size:14.5px}
.path{display:block;background:#fff;border:1px solid #ecd7d7;border-radius:6px;
  padding:11px 13px;font-size:13.5px;color:#7a4b48;margin-top:12px;line-height:1.8}
.never{background:#d93a3a;color:#fff;font-size:11.5px;font-weight:700;border-radius:4px;padding:2px 8px}
.mocks{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0 0}
.mocktag{font-size:13.5px;color:var(--muted);margin-bottom:10px}
.mocktag b{color:var(--ink)}
.ss{border:1px solid #c9d2e0;border-radius:7px;overflow:hidden;background:#fff;
  box-shadow:0 8px 22px rgba(18,26,43,.1)}
.ss-bar{background:#1b4a9c;color:#fff;padding:8px 12px;font-size:12.5px;display:flex;justify-content:space-between}
.ss-bar span{opacity:.75}
.ss-in{padding:18px}
.ss-in h5{margin:0 0 7px;font-size:17px;font-weight:600;color:#1a1a1a}
.ss-in .d{color:#444;line-height:1.6;font-size:13px}
.ss-more{display:inline-block;margin-top:30px;color:#1b4a9c;text-decoration:underline;font-size:13px}
.ss-app{margin-top:16px;font-size:12.5px;color:#444;line-height:1.7}
.ss-app i{color:#777;font-style:normal}
.ss-btns{display:flex;gap:8px;justify-content:flex-end;padding:26px 18px 16px;background:#f3f3f3;border-top:1px solid #e3e3e3}
.ss-btn{border:1px solid #adadad;background:#e1e1e1;border-radius:3px;padding:6px 18px;font-size:13px;color:#1a1a1a}
.hot{position:relative;outline:2px solid #e02424;outline-offset:3px}
.hot::after{content:attr(data-tip);position:absolute;left:50%;transform:translateX(-50%);
  top:-27px;white-space:nowrap;background:#e02424;color:#fff;font-size:11.5px;font-weight:700;
  padding:3px 8px;border-radius:4px}
.mocknote{font-size:14px;color:var(--muted);margin-top:20px}

/* ── 요금 ──────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plans.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px;
  display:flex;flex-direction:column;box-shadow:0 14px 34px -28px rgba(18,26,43,.5)}
/* 가운데 카드만 히어로와 같은 남색. 다른 두 장보다 한 단 떠 보이게 */
.plan.dark{background:#121a2b;border-color:#121a2b;color:#fff;
  box-shadow:0 26px 54px -26px rgba(18,26,43,.6)}
.plan h3{font-size:19px;margin-bottom:6px}
.plan .who{font-size:14px;color:var(--muted);margin-bottom:22px}
.plan.dark .who{color:#a7b0c2}
.price{font-size:36px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.price.tbd{font-size:26px;color:var(--yellow)}
.pnote{font-size:13.5px;color:var(--muted);margin-top:8px}
.plan.dark .pnote{color:#a7b0c2}
.plan ul{list-style:none;margin:24px 0 0;padding:0;font-size:14.5px}
.plan li{position:relative;padding:0 0 11px 24px;color:#3a4255}
.plan.dark li{color:#c7cedb}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
.plan.dark li::before{color:var(--yellow)}
.plan .foot{margin-top:auto;padding-top:24px}
.plan .act{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:15px;
  padding:13px 20px;border-radius:12px;border:1px solid #d6d2c8;color:var(--ink)}
.plan.dark .act{border-color:#3d4a66;color:#8f98aa;cursor:default}
.pricenote{margin:26px auto 0;font-size:14px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px}
@media(max-width:980px){.plans{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* ── 인원 할인 계산기 ──────────────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.calc h2{font-size:32px;margin-bottom:16px}
.calc .sub{color:var(--muted);margin-bottom:22px}
.tierlist{display:flex;flex-direction:column}
.tier{display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:10px;font-size:15px}
.tier .pct{font-weight:700;font-size:13px;color:var(--blue)}
.tier.on{background:var(--ink);color:#fff}
.tier.on .nm{font-weight:700}
.tier.on .pct{color:var(--yellow)}
.calcbox{background:#f1eee7;border-radius:18px;padding:30px;
  box-shadow:0 14px 34px -30px rgba(18,26,43,.5)}
.calctop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.calctop .t{font-size:16px;font-weight:700}
.calctop .v{font-size:30px;font-weight:800;letter-spacing:-.005em}
.calcbox input[type=range]{width:100%;accent-color:var(--ink);margin:0}
.rows{border-top:1px solid #ded8cd;margin-top:20px;padding-top:20px;
  display:flex;flex-direction:column;gap:12px;font-size:15px}
.row{display:flex;justify-content:space-between;align-items:baseline}
.row span{color:var(--muted)}
.row b.tbdv{color:#9aa0ad;font-weight:600;font-size:14px}
.row.sum b{font-size:23px;letter-spacing:-.005em}
.calcnote{font-size:13px;color:#7a8092;margin-top:18px;display:block}
@media(max-width:980px){.calc{grid-template-columns:1fr;gap:30px}}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
.fitem{border-bottom:1px solid var(--line)}
.fq{width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-weight:700;font-size:16px;color:var(--ink)}
.fq .ic{flex:0 0 26px;height:26px;border-radius:50%;background:#efece4;color:var(--muted);
  font-size:15px;display:flex;align-items:center;justify-content:center}
.fa{display:none;padding:0 0 22px;color:var(--muted);font-size:15px;max-width:700px}
.fitem.open .fa{display:block}

/* ── 마무리 ────────────────────────────────────────────────── */
.last{position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#131c30 0%,#0f1728 100%);color:#fff}
.last h2{color:#fff;font-size:32px;margin-bottom:14px}
/* 설득 문구는 빼고 체험 기한만 한 줄 남긴다 — 위에서 할 말은 다 했다 */
.last p{color:#a7b0c2;margin:0 auto}
.last .cta{margin-top:26px}
.last .btn.s{background:transparent;color:#fff;border-color:#3d4a66}
.last .btn.p{background:var(--yellow);color:var(--ink)}
.last .btn.p small{opacity:.6}
.foot{border-top:1px solid var(--line);padding:28px 0 44px;font-size:13.5px;color:#8a8f9c}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .sp{margin-left:auto}

/* ★ 1100px 아래에서는 오른쪽 카드 두 장이 자리를 못 잡는다. 숨기고
     히어로 높이도 내용에 맞춘다 — 100vh 를 유지하면 빈 공간만 생긴다 */
@media(max-width:1100px){
  .hero{height:auto;min-height:0;padding-bottom:64px}
  .hero .inner{grid-template-columns:1fr;gap:28px;padding:118px 44px 0}
  .shots{display:none}
  .hero h1{font-size:40px}
}
@media(max-width:980px){
  .guards,.steps{grid-template-columns:repeat(2,1fr)}
  .navlinks{display:none}
  .sechead h2,.darktop h2,.privacy .left h2,.install h2,.last h2{font-size:26px}
  section{padding:62px 0}
  .mocks{grid-template-columns:1fr}
}
@media(max-width:560px){
  .guards,.steps{grid-template-columns:1fr}
  .hero .inner{padding:104px 20px 0}
  .nav .wrap{padding:0 20px;height:62px}
  .hero h1{font-size:30px}
  .hero .cta{flex-direction:column}
  .btn{flex:1 1 100%;text-align:center}
  .tabs{width:100%;overflow-x:auto}
  table.uses td:first-child,table.uses td:nth-child(2){white-space:normal}
}
.foot .biz{display:block;margin-top:8px;font-size:12px;opacity:.75;line-height:1.6}

/* 로그인 링크 (R2 홈페이지에 없던 것) */
.navlogin{color:rgba(255,255,255,.88);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.navlogin:hover{color:#fff}
.nav.solid .navlogin{color:var(--ink)}

/* 카톡 문의 떠 있는 버튼 (2026-11-14, Views/Shared/_KakaoAsk.cshtml). 카카오 브랜드 색 */
.kakao-ask{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;background:#FEE500;color:#191919;font-weight:700;font-size:15px;line-height:1;
  text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.kakao-ask svg{width:20px;height:20px;flex:none}
.kakao-ask:hover{filter:brightness(.97);text-decoration:none;color:#191919}
.kakao-ask:focus-visible{outline:3px solid #191919;outline-offset:2px}
@media (max-width:640px){.kakao-ask{right:16px;bottom:16px;padding:12px 14px}}
@media print{.kakao-ask{display:none}}
.faq-ask{margin:24px 0 0;text-align:center;color:var(--muted)}
.faq-ask a{color:var(--blue);font-weight:700}