/* ════════════════════════════════════════════════════════════════
   SEO 파워클릭 — 프리미엄 테마 v3 (풀 다크)
   전 페이지 다크 네이비 통일 · 글래스 카드 · 글로우 인터랙션
   이 사이트 자체가 제작 실력의 증명이 되도록 설계.
   basic 테마 CSS 를 상속하지 않고 처음부터 짠다.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* 팔레트 — 다크 */
  --ink:#070b18;            /* 푸터/최심부 */
  --bg:#0b1020;             /* 기본 배경 */
  --bg-soft:#0e1530;        /* 교차 섹션 */
  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.07);
  --card-bd:rgba(255,255,255,.09);
  --card-bd-h:rgba(129,140,248,.55);
  --txt:#f2f4ff;            /* 제목 */
  --txt-2:#b9c0dc;          /* 본문 */
  --mut:#8189ad;            /* 보조 */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --pri:#818cf8;
  --pri-d:#a5b4fc;          /* 다크 배경 위 링크/포인트 */
  --pri-dd:#6366f1;
  --acc:#22d3ee;
  --grad:linear-gradient(120deg,#a5b4fc 0%,#818cf8 40%,#22d3ee 100%);
  --grad-btn:linear-gradient(120deg,#6366f1,#4f46e5 60%,#4338ca);
  --tile:linear-gradient(140deg,rgba(99,102,241,.18),rgba(34,211,238,.10));
  --tile-bd:rgba(129,140,248,.28);
  --glass:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  --glass-h:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  --hi:inset 0 1px 0 rgba(255,255,255,.10);          /* 상단 유리 하이라이트 */
  --depth:0 3px 8px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.32);
  --depth-h:0 8px 18px rgba(0,0,0,.35),0 28px 60px rgba(0,0,0,.45),0 0 0 1px rgba(129,140,248,.18);
  /* 형태 */
  --max:1200px;
  --r-sm:12px; --r:18px; --r-lg:26px;
  --sh-sm:0 2px 10px rgba(0,0,0,.35);
  --sh:0 6px 16px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.45);
  --sh-pri:0 8px 32px rgba(99,102,241,.45);
  --hd-h:74px;
  /* 게시판 스킨(style.css)이 참조하는 구 변수명 별칭 — 지우지 말 것 */
  --spc-ink:var(--txt); --spc-ink2:var(--txt-2); --spc-mut:var(--mut);
  --spc-pri:var(--pri-dd); --spc-pri-d:var(--pri-d); --spc-acc:var(--acc);
  --spc-line:var(--line); --spc-bg:var(--bg); --spc-bg2:var(--bg-soft);
  --spc-max:var(--max); --spc-r:var(--r);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hd-h) + 16px); }
body{
  margin:0; background:var(--bg); color:var(--txt-2);
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.75; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:var(--pri-d); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ color:var(--txt); line-height:1.3; margin:0 0 .5em; letter-spacing:-.02em; }
::selection{ background:rgba(99,102,241,.4); color:#fff; }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2a3357; border-radius:8px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:#3b4677; }
.in{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.in.narrow{ max-width:860px; }

.spc-skip{ position:absolute; left:-9999px; }
.spc-skip:focus{ left:8px; top:8px; z-index:999; background:#fff; color:#0b1020; padding:8px 14px; border-radius:8px; }

/* 스크롤 리빌 — 기본은 항상 보임. JS가 화면 밖 요소에만 .pre 를 붙여 숨겼다가
   스크롤 진입 시 떼어낸다. JS 미실행/봇/구형 환경에서도 콘텐츠가 사라지지 않는다. */
.rv{ transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1); }
.rv.pre{ opacity:0; transform:translateY(26px); }
@media (prefers-reduced-motion:reduce){
  .rv{ transition:none; }
  .rv.pre{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ── 헤더 : 다크 글래스 ─────────────────────────────────────── */
.spc-hd{
  position:sticky; top:0; z-index:100;
  background:rgba(11,16,32,.7);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
.spc-hd.scrolled{ background:rgba(7,11,24,.94); }
.spc-hd-in{ max-width:var(--max); margin:0 auto; padding:0 24px; height:var(--hd-h);
  display:flex; align-items:center; gap:20px; }

.spc-logo{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.spc-logo:hover{ text-decoration:none; }
.spc-logo img{ display:block; height:44px; width:auto; }

.spc-gnb{ margin-left:auto; }
.spc-gnb>ul{ display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.spc-gnb>ul>li{ position:relative; }
.spc-gnb>ul>li>a{ display:flex; align-items:center; gap:4px; padding:10px 14px; border-radius:10px;
  color:#e6e9f6; font-weight:600; font-size:15px; white-space:nowrap; }
.spc-gnb>ul>li>a:hover{ background:rgba(255,255,255,.09); color:#fff; text-decoration:none; }
.spc-gnb>ul>li>a i{ font-style:normal; font-size:9px; color:#8b93b8; transition:transform .2s; }
.spc-gnb>ul>li.has:hover>a i{ transform:rotate(180deg); color:var(--acc); }
.spc-dd{ position:absolute; top:100%; left:50%; transform:translate(-50%,-6px); min-width:222px; padding-top:10px;
  opacity:0; visibility:hidden; transition:.18s; }
.spc-gnb>ul>li.has:hover .spc-dd,
.spc-gnb>ul>li.has:focus-within .spc-dd{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.spc-dd ul{ list-style:none; margin:0; padding:8px; background:rgba(14,20,44,.98);
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.55); backdrop-filter:blur(12px); }
.spc-dd a{ display:block; padding:10px 14px; border-radius:9px; color:#cdd3ea; font-size:14.5px; font-weight:600; }
.spc-dd a:hover{ background:rgba(99,102,241,.25); color:#fff; text-decoration:none; }

.spc-hd-cta{ flex:0 0 auto; padding:11px 20px; border-radius:999px;
  background:var(--grad-btn); color:#fff !important; font-weight:800; font-size:14.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 16px rgba(79,70,229,.4); transition:transform .2s,box-shadow .2s; }
.spc-hd-cta:hover{ transform:translateY(-1px); box-shadow:var(--sh-pri); text-decoration:none; }

.spc-burger{ display:none; width:44px; height:40px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); border-radius:10px; cursor:pointer; padding:11px 11px;
  flex-direction:column; justify-content:space-between; }
.spc-burger span{ display:block; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.spc-burger.on span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.spc-burger.on span:nth-child(2){ opacity:0; }
.spc-burger.on span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── 버튼 ───────────────────────────────────────────────────── */
.spc-btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px;
  background:var(--grad-btn); color:#fff !important; font-weight:800; font-size:16px;
  border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -8px 16px rgba(0,0,0,.18),0 4px 18px rgba(79,70,229,.4); cursor:pointer;
  transition:transform .22s,box-shadow .22s; }
.spc-btn:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 32px rgba(99,102,241,.5); text-decoration:none; }
.spc-btn.ghost{ background:transparent; color:#c7d2fe !important;
  box-shadow:inset 0 0 0 2px rgba(129,140,248,.5); }
.spc-btn.ghost:hover{ box-shadow:inset 0 0 0 2px #a5b4fc; background:rgba(99,102,241,.12); }
.spc-btn.light{ background:#fff; color:#3730a3 !important; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.spc-btn.ghost.light{ background:transparent; color:#fff !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); }
.spc-btn.ghost.light:hover{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 2px #fff; }

/* ── 히어로 ─────────────────────────────────────────────────── */
.spc-hero{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(1200px 600px at 12% -10%,#26307a 0%,transparent 55%),
             radial-gradient(900px 520px at 95% 15%,#0e4a5e 0%,transparent 55%),
             linear-gradient(180deg,#0b1020 0%,#0d1330 60%,#0b1020 100%);
  margin-top:calc(var(--hd-h) * -1); padding:calc(var(--hd-h) + 92px) 0 120px;
}
.spc-hero::before{ /* 그리드 라인 */
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(75% 70% at 50% 30%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 70% at 50% 30%,#000 30%,transparent 100%);
}
.spc-hero::after{ /* 글로우 오브 */
  content:''; position:absolute; width:640px; height:640px; border-radius:50%;
  right:-160px; top:-120px; pointer-events:none;
  background:radial-gradient(circle,rgba(99,102,241,.32) 0%,rgba(34,211,238,.12) 45%,transparent 70%);
  filter:blur(10px); animation:orb 12s ease-in-out infinite alternate;
}
@keyframes orb{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-50px,40px) scale(1.12);} }
@media (prefers-reduced-motion:reduce){ .spc-hero::after{ animation:none; } }

.spc-hero .in{ position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:56px; align-items:center; }

.spc-hero .eyebrow{ display:inline-flex; align-items:center; gap:9px; margin:0 0 22px;
  padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:700; color:#c3c9ec;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px); }
.spc-hero .eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 12px var(--acc); }

.spc-hero h1{ font-size:clamp(34px,4.6vw,58px); font-weight:900; letter-spacing:-.035em;
  line-height:1.18; margin:0 0 22px; color:#fff; }
.spc-hero h1 span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.spc-hero .sub{ font-size:clamp(16.5px,1.8vw,19.5px); color:#aeb5d6; margin:0 0 36px; line-height:1.8; }
.spc-hero .btns{ display:flex; gap:14px; flex-wrap:wrap; }
.spc-hero .hero-note{ margin:28px 0 0; display:flex; gap:18px; flex-wrap:wrap; }
.spc-hero .hero-note span{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:#8b93b8; font-weight:600; }
.spc-hero .hero-note span::before{ content:'✓'; color:var(--acc); font-weight:900; }

/* 히어로 목업 패널 (장식 요소 — 실측 수치 아님) */
.spc-hero-visual{ position:relative; }
.spc-mock{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(10px); transform:rotate(1.2deg);
}
.spc-mock-bar{ display:flex; gap:7px; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.09); align-items:center; }
.spc-mock-bar i{ width:11px; height:11px; border-radius:50%; }
.spc-mock-bar i:nth-child(1){ background:#f87171; } .spc-mock-bar i:nth-child(2){ background:#fbbf24; } .spc-mock-bar i:nth-child(3){ background:#34d399; }
.spc-mock-bar b{ margin-left:auto; font-size:12px; color:#8b93b8; font-weight:600; letter-spacing:.03em; }
.spc-mock-body{ padding:24px 22px 22px; display:grid; gap:16px; }
.spc-mock-row{ display:grid; grid-template-columns:128px 1fr; gap:14px; align-items:center; }
.spc-mock-row b{ font-size:12.5px; color:#c3c9ec; font-weight:700; }
.spc-mock-track{ height:10px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; position:relative; }
.spc-mock-fill{ position:absolute; top:0; bottom:0; left:0; border-radius:99px; transform-origin:left;
  background:var(--grad); animation:fill 1.6s cubic-bezier(.22,.61,.36,1) both; }
.spc-mock-row:nth-of-type(1) .spc-mock-fill{ width:86%; animation-delay:.25s; }
.spc-mock-row:nth-of-type(2) .spc-mock-fill{ width:72%; animation-delay:.45s; background:linear-gradient(120deg,#22d3ee,#38bdf8); }
.spc-mock-row:nth-of-type(3) .spc-mock-fill{ width:91%; animation-delay:.65s; }
@keyframes fill{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.spc-mock-chips{ display:flex; gap:8px; flex-wrap:wrap; padding-top:8px; }
.spc-mock-chips span{ font-size:11.5px; font-weight:700; color:#aeb5d6; padding:6px 12px;
  border-radius:99px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.spc-mock-glow{ position:absolute; left:-30%; right:-30%; bottom:-55%; height:200px; pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%,rgba(99,102,241,.5),transparent 70%); filter:blur(24px); }
.spc-float{ position:absolute; z-index:2; padding:13px 17px; border-radius:15px; font-size:13px; font-weight:800; color:#fff;
  background:rgba(14,20,44,.92); border:1px solid rgba(255,255,255,.15);
  box-shadow:0 16px 40px rgba(0,0,0,.45); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:9px; animation:float 5.5s ease-in-out infinite; }
.spc-float em{ font-style:normal; font-size:17px; }
.spc-float.f1{ top:-22px; left:-26px; animation-delay:0s; }
.spc-float.f2{ bottom:-18px; right:-14px; animation-delay:2.6s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@media (prefers-reduced-motion:reduce){ .spc-float,.spc-mock-fill{ animation:none; } }

/* ── 기준 배지 : 히어로에 겹치는 글래스 카드 ────────────────── */
.spc-badges{ position:relative; z-index:2; margin-top:-58px; padding:0; background:transparent; }
.spc-badges .in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.spc-badges .in>div{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  padding:22px 22px 20px; box-shadow:var(--hi),0 18px 44px rgba(0,0,0,.5);
  position:relative; overflow:hidden; transition:transform .25s,border-color .25s;
}
.spc-badges .in>div::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.spc-badges .in>div:hover{ transform:translateY(-4px); border-color:rgba(129,140,248,.45); }
.spc-badges b{ display:block; color:#fff; font-size:16.5px; font-weight:800; margin-bottom:4px; letter-spacing:-.01em; }
.spc-badges span{ font-size:13.8px; color:#9aa2c4; line-height:1.55; display:block; }

/* ── 섹션 공통 ──────────────────────────────────────────────── */
.spc-sec{ position:relative; padding:104px 0; }
.spc-sec.alt{
  background:radial-gradient(800px 400px at 85% 0%,rgba(99,102,241,.07),transparent 60%),
             var(--bg-soft);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.spc-sh{ margin-bottom:52px; max-width:660px; }
.spc-sh .kicker{ display:inline-block; margin:0 0 12px; font-size:13px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.spc-sh h2{ font-size:clamp(26px,3.2vw,38px); font-weight:900; margin:0 0 12px; letter-spacing:-.03em; color:#fff; }
.spc-sh p{ margin:0; color:var(--mut); font-size:17px; }
.spc-more-line{ margin:36px 0 0; }
.spc-more-line a{ font-weight:800; font-size:15.5px; color:#a5b4fc; }
.spc-note-line{ margin:28px 0 0; font-size:14.5px; color:var(--mut); }

/* ── 서비스 카드 ────────────────────────────────────────────── */
.spc-svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px; }
.spc-svc-card{
  position:relative; display:block; padding:30px 26px 26px;
  background:var(--glass); border:1px solid var(--card-bd); border-radius:var(--r);
  box-shadow:var(--hi),var(--depth);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s,background .28s;
  overflow:hidden;
}
.spc-svc-card::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px 210px at 20% -10%,rgba(99,102,241,.22),transparent 65%); }
.spc-svc-card:hover{ transform:translateY(-6px); border-color:var(--card-bd-h);
  background:var(--glass-h); box-shadow:var(--hi),var(--depth-h); text-decoration:none; }
.spc-svc-card:hover::before{ opacity:1; }
.spc-svc-card .ic{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; font-size:24px; border-radius:15px; margin-bottom:18px;
  background:var(--tile); border:1px solid var(--tile-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(0,0,0,.35);
}
.spc-svc-card b{ position:relative; display:block; color:#fff; font-size:18.5px; font-weight:800; margin-bottom:8px; letter-spacing:-.02em; }
.spc-svc-card .ld{ position:relative; display:block; color:var(--mut); font-size:14.8px; line-height:1.6; min-height:47px; }
.spc-svc-card .more{ position:relative; display:inline-flex; align-items:center; gap:5px; margin-top:16px;
  color:#a5b4fc; font-weight:800; font-size:14px; transition:gap .22s; }
.spc-svc-card:hover .more{ gap:10px; color:#c7d2fe; }

.spc-svc-mini{ display:flex; flex-wrap:wrap; gap:10px; }
.spc-svc-mini a{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--glass); color:var(--txt-2); font-weight:700; font-size:14.5px;
  box-shadow:var(--hi),0 4px 12px rgba(0,0,0,.28); transition:.2s; }
.spc-svc-mini a:hover{ border-color:var(--card-bd-h); color:#fff; text-decoration:none;
  background:var(--glass-h); box-shadow:var(--hi),0 8px 24px rgba(99,102,241,.3); transform:translateY(-2px); }

/* ── 왜 우리인가 ────────────────────────────────────────────── */
.spc-why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.spc-why>div{
  position:relative; padding:26px 26px 24px;
  background:var(--glass); border:1px solid var(--card-bd); border-radius:var(--r);
  box-shadow:var(--hi),var(--depth);
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;
}
.spc-why>div:hover{ transform:translateY(-4px); border-color:var(--card-bd-h); background:var(--glass-h); box-shadow:var(--hi),var(--depth-h); }
.spc-why>div::before{ content:''; position:absolute; left:0; top:22px; bottom:22px; width:3.5px;
  border-radius:0 4px 4px 0; background:var(--grad); }
.spc-why b{ display:block; color:#fff; font-size:17.5px; font-weight:800; margin-bottom:8px; letter-spacing:-.015em; }
.spc-why p{ margin:0; font-size:15px; color:var(--txt-2); line-height:1.7; }

/* ── 진행 과정 ──────────────────────────────────────────────── */
.spc-flow{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; }
.spc-flow li{
  position:relative; padding:28px 22px 24px;
  background:var(--glass); border:1px solid var(--card-bd); border-radius:var(--r);
  box-shadow:var(--hi),var(--depth);
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;
}
.spc-flow li:hover{ transform:translateY(-4px); border-color:var(--card-bd-h); background:var(--glass-h); box-shadow:var(--hi),var(--depth-h); }
.spc-flow .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; margin-bottom:16px;
  background:var(--grad-btn); color:#fff; font-weight:900; font-size:15.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(79,70,229,.5);
}
.spc-flow b{ display:block; color:#fff; font-size:16.5px; font-weight:800; margin-bottom:7px; letter-spacing:-.015em; }
.spc-flow p{ margin:0; font-size:13.8px; color:var(--mut); line-height:1.65; }

/* ── 다루는 업종 ────────────────────────────────────────────── */
.spc-inds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; }
.spc-inds>div{ padding:22px 24px; background:var(--glass); border:1px solid var(--card-bd);
  border-radius:var(--r-sm); box-shadow:var(--hi),var(--depth);
  transition:transform .22s,border-color .22s,background .22s,box-shadow .22s; }
.spc-inds>div:hover{ transform:translateY(-3px); border-color:var(--card-bd-h); background:var(--glass-h); box-shadow:var(--hi),var(--depth-h); }
.spc-inds b{ display:block; color:#fff; font-size:16.5px; font-weight:800; margin-bottom:5px; }
.spc-inds span{ font-size:14.2px; color:var(--mut); line-height:1.6; }

/* ── 매거진 ─────────────────────────────────────────────────── */
.spc-posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.spc-posts a{ display:block; padding:24px; background:var(--glass); border:1px solid var(--card-bd);
  border-radius:var(--r); box-shadow:var(--hi),var(--depth);
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s; }
.spc-posts a:hover{ transform:translateY(-4px); border-color:var(--card-bd-h); background:var(--glass-h); box-shadow:var(--hi),var(--depth-h); text-decoration:none; }
.spc-posts .ca{ display:inline-block; padding:4px 12px; border-radius:999px;
  background:rgba(99,102,241,.2); color:#c7d2fe; font-size:12.5px; font-weight:800; margin-bottom:12px; }
.spc-posts b{ display:block; color:#fff; font-size:17px; line-height:1.5; font-weight:800; letter-spacing:-.015em; }
.spc-posts .dt{ display:block; margin-top:12px; font-size:13px; color:var(--mut); }
.spc-empty{ padding:46px 30px; background:var(--glass); border:1.5px dashed var(--line-2);
  border-radius:var(--r); box-shadow:var(--hi); text-align:center; color:var(--mut); }
.spc-empty p{ margin:0 0 6px; }

/* ── FAQ ────────────────────────────────────────────────────── */
.spc-faq details{ background:var(--glass); border:1px solid var(--card-bd); border-radius:var(--r-sm);
  margin-bottom:12px; overflow:hidden; box-shadow:var(--hi),0 6px 18px rgba(0,0,0,.28);
  transition:border-color .2s,background .2s,box-shadow .2s; }
.spc-faq details:hover{ border-color:var(--card-bd-h); }
.spc-faq details[open]{ border-color:var(--card-bd-h); background:var(--glass-h); box-shadow:var(--hi),var(--depth-h); }
.spc-faq summary{ cursor:pointer; padding:20px 24px; font-weight:800; color:#fff;
  font-size:16.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
  letter-spacing:-.015em; }
.spc-faq summary::-webkit-details-marker{ display:none; }
.spc-faq summary::after{
  content:'+'; flex:0 0 30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background:rgba(99,102,241,.2); color:#c7d2fe; font-weight:900; font-size:17px;
  transition:transform .25s,background .25s,color .25s;
}
.spc-faq details[open] summary::after{ transform:rotate(45deg); background:var(--pri-dd); color:#fff; }
.spc-faq details>p{ margin:0; padding:0 24px 22px; color:var(--txt-2); font-size:15.4px; line-height:1.8; }

/* ── CTA 밴드 ───────────────────────────────────────────────── */
.spc-cta{
  position:relative; overflow:hidden; padding:96px 0; color:#fff;
  background:radial-gradient(900px 420px at 18% 0%,#3730a3 0%,transparent 60%),
             radial-gradient(700px 420px at 92% 100%,#155e75 0%,transparent 55%),
             linear-gradient(140deg,#171e45,#0b1020);
  border-top:1px solid var(--line);
}
.spc-cta::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 90% at 50% 50%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 90% at 50% 50%,#000 30%,transparent 100%); }
.spc-cta .in{ position:relative; text-align:center; max-width:780px; }
.spc-cta h2{ color:#fff; font-size:clamp(26px,3.4vw,40px); font-weight:900; margin:0 0 16px; letter-spacing:-.03em; }
.spc-cta p{ margin:0 0 34px; color:#aeb5d6; font-size:17.5px; line-height:1.8; }
.spc-cta .btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ── 일반 페이지 ────────────────────────────────────────────── */
.spc-page{ max-width:860px; margin:0 auto; padding:52px 24px 96px; }
.spc-crumb{ font-size:13.5px; color:var(--mut); margin-bottom:28px; display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.spc-crumb a{ color:var(--mut); padding:2px 5px; border-radius:6px; }
.spc-crumb a:hover{ color:#c7d2fe; background:rgba(99,102,241,.14); text-decoration:none; }
.spc-crumb span{ margin:0 4px; color:#3a4368; }
.spc-ph{ padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:34px; }
.spc-ph-ico{ display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; font-size:27px; border-radius:16px; margin-bottom:16px;
  background:var(--tile); border:1px solid var(--tile-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px rgba(0,0,0,.35); }
.spc-ph h1{ font-size:clamp(28px,4vw,40px); font-weight:900; margin:0 0 10px; letter-spacing:-.03em; color:#fff; }
.spc-ph-lead{ margin:0; color:var(--mut); font-size:17.5px; }
.spc-intro{ position:relative; font-size:17px; color:var(--txt-2);
  background:var(--glass); border:1px solid var(--card-bd); border-radius:var(--r-sm);
  box-shadow:var(--hi),0 8px 24px rgba(0,0,0,.28);
  padding:20px 24px 20px 28px; margin:0 0 36px; line-height:1.8; }
.spc-intro::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:3.5px;
  border-radius:0 4px 4px 0; background:var(--grad); }
.spc-intro strong,.spc-page strong{ color:#fff; }
.spc-page h2{ position:relative; font-size:22px; font-weight:800; margin:2.2em 0 .6em; padding-left:16px;
  letter-spacing:-.02em; color:#fff; }
.spc-page h2::before{ content:''; position:absolute; left:0; top:.28em; bottom:.28em; width:4px;
  border-radius:4px; background:var(--grad); }
.spc-page p{ margin:0 0 1.15em; }
.spc-check{ list-style:none; margin:0 0 1.6em; padding:6px 0 0; }
.spc-check li{ position:relative; padding:10px 0 10px 34px; border-bottom:1px solid var(--line); font-size:15.6px; }
.spc-check li::before{
  content:'✓'; position:absolute; left:0; top:9px; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:7px;
  background:var(--tile); color:#c7d2fe; font-weight:900; font-size:12.5px;
  border:1px solid var(--tile-bd); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.3);
}
.spc-cta-box{ position:relative; margin:44px 0; padding:32px 28px; text-align:center;
  background:linear-gradient(var(--bg-soft),var(--bg-soft)) padding-box, var(--grad) border-box;
  border:1.5px solid transparent; border-radius:var(--r);
  box-shadow:var(--hi),0 16px 44px rgba(0,0,0,.4); }
.spc-cta-box p{ margin:0 0 18px; font-size:16px; }
.spc-steps{ list-style:none; margin:0; padding:0; position:relative; }
.spc-steps::before{ content:''; position:absolute; left:19px; top:16px; bottom:16px; width:2px;
  background:linear-gradient(180deg,rgba(129,140,248,.5),rgba(34,211,238,.35)); }
.spc-steps li{ position:relative; display:flex; gap:20px; padding:20px 0; }
.spc-steps .n{ position:relative; z-index:1; flex:0 0 40px; height:40px; border-radius:13px;
  background:var(--grad-btn); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15.5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(79,70,229,.45); }
.spc-steps b{ display:block; color:#fff; font-size:17.5px; font-weight:800; margin-bottom:5px; letter-spacing:-.015em; }
.spc-steps p{ margin:0; color:var(--txt-2); font-size:15.4px; line-height:1.75; }
.spc-mail a{ font-size:20px; font-weight:800; color:#a5b4fc; }

/* ── 그누보드 시스템 페이지 보호 시트 ───────────────────────
   basic 스킨(로그인·검색 등)은 어두운 글자를 쓰므로 밝은 패널을 깔아준다 */
#mb_login,#register,#register_form,#mb_confirm,#find_info,#new_wrap,#current_connect,#faq_wrap,#sch_wrap,#bo_w{
  background:#fff; border-radius:var(--r); padding:32px 28px; max-width:820px;
  margin:48px auto 72px; color:#334155;
}

/* ── 푸터 ───────────────────────────────────────────────────── */
.spc-ft{ position:relative; background:var(--ink); color:#8189ad; padding:72px 0 30px; overflow:hidden;
  border-top:1px solid var(--line); }
.spc-ft::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:1px; background:var(--grad); opacity:.55; }
.spc-ft-in{ max-width:var(--max); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; }
.spc-ft-logo{ display:inline-block; font-size:20px; font-weight:900; color:#fff !important; margin-bottom:14px; letter-spacing:-.02em; }
.spc-ft-logo span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.spc-ft-brand p{ margin:0 0 16px; font-size:14.4px; line-height:1.75; }
.spc-ft-brand address{ font-style:normal; font-size:14px; }
.spc-ft-brand a{ color:#a5b4fc; }
.spc-ft-col h2{ color:#fff; font-size:14.5px; font-weight:800; margin:0 0 15px; letter-spacing:.03em; }
.spc-ft-col ul{ list-style:none; margin:0; padding:0; }
.spc-ft-col li{ margin-bottom:10px; }
.spc-ft-col a{ color:#8189ad; font-size:14.3px; transition:color .15s; }
.spc-ft-col a:hover{ color:#fff; text-decoration:none; }
.spc-ft-note{ max-width:var(--max); margin:44px auto 0; padding:22px 24px 0; border-top:1px solid rgba(255,255,255,.08);
  font-size:13.2px; line-height:1.8; color:#5d6683; }
.spc-ft-note strong{ color:#aeb5d6; }
.spc-ft-bot{ max-width:var(--max); margin:16px auto 0; padding:0 24px;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.spc-ft-bot ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.spc-ft-bot a{ color:#8189ad; font-size:13.4px; }
.spc-ft-bot a:hover{ color:#fff; }
.spc-ft-bot p{ margin:0; font-size:13px; color:#5d6683; }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width:1060px){
  .spc-hero .in{ grid-template-columns:1fr; gap:60px; }
  .spc-hero-visual{ max-width:560px; }
  .spc-badges .in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spc-ft-in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .spc-burger{ display:flex; }
  .spc-hd-cta{ display:none; }
  .spc-gnb{ position:absolute; top:var(--hd-h); left:0; right:0;
    background:rgba(7,11,24,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 24px 50px rgba(0,0,0,.5); display:none; max-height:calc(100vh - var(--hd-h)); overflow:auto; }
  .spc-gnb.open{ display:block; }
  .spc-gnb>ul{ flex-direction:column; padding:12px; gap:0; }
  .spc-gnb>ul>li>a{ padding:14px; font-size:16px; }
  .spc-logo img{ height:38px; }
  .spc-dd{ position:static; opacity:1; visibility:visible; transform:none; padding:0 0 10px 14px; }
  .spc-dd ul{ border:0; box-shadow:none; padding:0; background:transparent; backdrop-filter:none; }
  .spc-hero{ padding:calc(var(--hd-h) + 60px) 0 96px; }
  .spc-sec{ padding:72px 0; }
  .spc-cta{ padding:72px 0; }
  .spc-float{ display:none; }
}
@media (max-width:560px){
  body{ font-size:15.8px; }
  .spc-ft-in{ grid-template-columns:1fr; gap:30px; }
  .spc-badges .in{ grid-template-columns:1fr; gap:12px; }
  .spc-badges{ margin-top:-40px; }
  .spc-ft-bot{ justify-content:flex-start; }
  .spc-hero .btns .spc-btn{ width:100%; justify-content:center; }
  .spc-mock{ transform:none; }
}

/* ── 텔레그램 상담 ─────────────────────────────────────
   상담 창구는 텔레그램 단일화(이메일 미노출). 외부 앱으로 나가는 링크라
   버튼에 아이콘을 붙여 클릭 전에 어디로 가는지 알 수 있게 한다. */
a[href^="https://t.me/"]::before{
  content:""; display:inline-block; width:1em; height:1em; margin-right:.42em;
  vertical-align:-.12em; background-color:currentColor;
  -webkit-mask:var(--tg-ic) center/contain no-repeat; mask:var(--tg-ic) center/contain no-repeat; }
:root{ --tg-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.9 4.3 18.9 19c-.2 1-.8 1.2-1.6.8l-4.5-3.3-2.2 2.1c-.2.2-.5.5-.9.5l.3-4.6 8.3-7.5c.4-.3-.1-.5-.6-.2L7.4 13.2 2.9 11.8c-1-.3-1-1 .2-1.5l17.4-6.7c.8-.3 1.5.2 1.4 1.2z'/></svg>"); }
.spc-btn-tg{ background:linear-gradient(135deg,#2aabee,#229ed9) !important; box-shadow:0 10px 26px rgba(34,158,217,.32) !important; }
.spc-btn-tg:hover{ filter:brightness(1.06); }
.spc-ft-brand address .spc-tg{ font-style:normal; font-weight:700; }

/* ── 회사소개 대표 프로필(다크) ───────────────────────── */
.spc-bio{ margin:22px 0 26px; padding:24px 26px; border-radius:18px;
  background:var(--glass); border:1px solid var(--card-bd); box-shadow:var(--hi),var(--depth); }
.spc-bio-hd{ display:flex; align-items:center; gap:16px; }
.spc-bio-hd .ava{ flex:0 0 64px; width:64px; height:64px; border-radius:50%; padding:12px;
  background:linear-gradient(140deg,rgba(99,102,241,.30),rgba(34,211,238,.16));
  border:1px solid var(--card-bd-h); }
.spc-bio-hd b{ display:block; color:#fff; font-size:19px; font-weight:900; letter-spacing:-.02em; }
.spc-bio-hd .role{ display:block; margin-top:4px; font-size:14px; font-weight:700; color:#a5b4fc; }
.spc-bio-pts{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; }
.spc-bio-pts li{ margin:0; font-size:13.4px; font-weight:700; color:var(--txt-2);
  background:rgba(255,255,255,.06); border:1px solid var(--line-2); border-radius:999px; padding:6px 13px; }
.spc-bio-pts li::before{ content:"✓"; margin-right:6px; color:#22d3ee; font-weight:900; }
.spc-bio-legal{ font-size:14.5px; color:var(--mut); border-top:1px dashed var(--line-2); padding-top:16px; }
@media (max-width:560px){ .spc-bio{ padding:20px 18px; } .spc-bio-hd{ gap:13px; } }