@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  --bg:#0a0d14;
  --bg2:#0e121c;
  --card:#121725;
  --line:rgba(255,255,255,.10);
  --text:#f7f8fb;
  --muted:#9aa3b5;
  --blue:#5b7cff;
  --cyan:#36d9ff;
  --purple:#9a6cff;
  --green:#35d39a;
  --orange:#ff9f43;
  --white:#fff;
  --light:#f6f7fb;
  --ink:#111522;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  word-break:keep-all
}

a {
  text-decoration:none;
  color:inherit
}

button,input,textarea {
  font:inherit
}

.container {
  width:min(1180px,calc(100% - 44px));
  margin:0 auto
}

.site-header {
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  right:0;
  background:rgba(10,13,20,.72);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(18px);
  transition:.25s
}

.site-header.scrolled {
  border-bottom-color:var(--line);
  background:rgba(10,13,20,.92)
}

.nav-wrap {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  line-height:1;
  text-decoration:none
}

.brand-mark {
  display:block;
  width:38px;
  height:38px;
  flex:0 0 38px;
  object-fit:contain
}

.brand-name {
  color:#fff;
  font-size:1.15rem;
  font-weight:900;
  letter-spacing:-.035em;
  white-space:nowrap
}

.desktop-nav {
  display:flex;
  gap:34px;
  margin-left:auto;
  margin-right:14px
}

.desktop-nav a {
  font-size:1.05rem;
  color:#c7ccda;
  transition:.2s
}

.desktop-nav a:hover {
  color:white
}

.header-cta {
  flex:0 0 auto
}

.menu-toggle {
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  color:white
}

.menu-toggle span {
  display:block;
  width:19px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease
}

.mobile-nav {
  display:none
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid transparent;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:.22s
}

.btn:hover {
  transform:translateY(-2px)
}

.btn-small {
  height:42px;
  padding:0 18px;
  font-size:1rem
}

.btn-lg {
  min-height:54px;
  padding:0 24px;
  font-size:1.15rem
}

.btn-primary {
  color:white;
  background:linear-gradient(135deg,#5574ff,#6c63ff);
  box-shadow:0 12px 32px rgba(91,124,255,.22)
}

.btn-ghost {
  border-color:var(--line);
  background:rgba(255,255,255,.03);
  color:white
}

.btn-light {
  background:white;
  color:#10131c
}

.hero {
  position:relative;
  overflow:hidden;
  padding:164px 0 105px;
  background: radial-gradient(circle at 65% 20%,rgba(91,124,255,.12),transparent 32%), linear-gradient(180deg,#0a0d14 0%,#0b0f18 100%)
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 80%)
}

.hero-glow {
  position:absolute;
  border-radius:999px;
  filter:blur(80px);
  opacity:.28
}

.glow-1 {
  width:370px;
  height:370px;
  background:#536fff;
  right:14%;
  top:15%
}

.glow-2 {
  width:230px;
  height:230px;
  background:#25cbe7;
  right:37%;
  bottom:5%;
  opacity:.12
}

.hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:54px;
  align-items:center
}

.eyebrow,.section-kicker {
  font-size:1rem;
  font-weight:800;
  letter-spacing:.16em;
  color:#8fa5ff;
  text-transform:uppercase
}

.pulse {
  display:inline-block;
  width:7px;
  height:7px;
  background:#44e1a7;
  border-radius:50%;
  margin-right:8px;
  box-shadow:0 0 0 5px rgba(68,225,167,.08)
}

.hero h1 {
  font-size:3.5rem;
  line-height:1.15;
  letter-spacing:-.055em;
  margin:20px 0 24px
}

.gradient-text {
  background:linear-gradient(90deg,#7c91ff,#61dcff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.hero-desc {
  font-size:1.15rem;
  color:#b0b8c9;
  line-height:1.5;
  margin:0 0 32px
}

.hero-desc strong {
  color:#e8ecf5
}

.hero-actions {
  display:flex;
  gap:12px
}

.hero-proof {
  display:flex;
  flex-wrap:wrap;
  gap:14px 23px;
  margin-top:28px;
  color:#8791a5;
  font-size:1rem
}

.hero-visual {
  position:relative;
  min-height:500px;
  display:flex;
  align-items:center
}

.dash-window {
  width:100%;
  background:#101522;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  box-shadow:0 36px 80px rgba(0,0,0,.42);
  overflow:hidden;
  transform:perspective(1100px) rotateY(-3deg) rotateX(1deg)
}

.dash-top {
  height:46px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 15px;
  gap:16px;
  font-size:.85rem;
  color:#667086
}

.dots {
  display:flex;
  gap:5px
}

.dots i,.screen-chrome i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3a4150
}

.dots i:nth-child(1),.screen-chrome i:nth-child(1) {
  background:#ff5f57
}

.dots i:nth-child(2),.screen-chrome i:nth-child(2) {
  background:#febc2e
}

.dots i:nth-child(3),.screen-chrome i:nth-child(3) {
  background:#28c840
}

.live {
  margin-left:auto;
  color:#49dba8;
  border:1px solid rgba(73,219,168,.25);
  padding:2px 7px;
  border-radius:20px
}

.dash-body {
  display:flex;
  height:400px
}

.dash-side {
  width:58px;
  border-right:1px solid var(--line);
  padding:17px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px
}

.mini-logo {
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#5b7cff;
  font-weight:800;
  font-size:.85rem;
}

.dash-side span {
  width:18px;
  height:18px;
  border-radius:5px;
  background:#202636
}

.dash-side .side-active {
  background:#5b7cff
}

.dash-main {
  flex:1;
  padding:22px 24px;
  background:linear-gradient(180deg,#0f1420,#0d111b)
}

.dash-heading {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.dash-heading small {
  display:block;
  color:#697389;
  font-size:1rem
}

.dash-heading b {
  font-size:1rem
}

.avatar {
  width:30px;
  height:30px;
  background:linear-gradient(135deg,#657cff,#44d2f7);
  border-radius:50%
}

.stat-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0
}

.stat {
  background:#151b29;
  border:1px solid rgba(255,255,255,.06);
  padding:14px;
  border-radius:11px
}

.stat small {
  display:block;
  color:#717c91;
  font-size:1rem
}

.stat strong {
  font-size:1rem
}

.stat em {
  display:block;
  color:#4ed6a3;
  font-size:1rem;
  font-style:normal
}

.chart-card {
  background:#151b29;
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  padding:13px 15px;
  height:112px
}

.chart-head {
  display:flex;
  justify-content:space-between;
  font-size:1rem
}

.chart-head span {
  color:#667086
}

.bars {
  height:66px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding-top:9px
}

.bars i {
  flex:1;
  border-radius:3px 3px 0 0;
  background:linear-gradient(#6882ff,#455be1);
  opacity:.85
}

.task-list {
  margin-top:10px
}

.task-list>div {
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:8px 2px
}

.task-list p {
  margin:0;
  flex:1
}

.task-list b,.task-list small {
  display:block;
  font-size:1rem
}

.task-list small,.task-list time {
  color:#687288;
  font-size:.85rem
}

.ok,.run {
  width:20px;
  height:20px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:#35d39a21;
  color:#47dca7;
  font-size:10px
}

.run {
  color:#6d8cff;
  background:rgba(91,124,255,.13)
}

.float-card {
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(18,23,37,.94);
  border:1px solid rgba(255,255,255,.12);
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.3)
}

.float-card>span {
  width:31px;
  height:31px;
  border-radius:9px;
  background:rgba(91,124,255,.16);
  display:grid;
  place-items:center
}

.float-card b,.float-card small {
  display:block
}

.float-card b {
  font-size:1rem
}

.float-card small {
  font-size:1rem;
  color:#778196
}

.fc1 {
  left:-100px;
  bottom:50px
}

.fc2 {
  right:80px;
  top:80px
}

.fc2>span {
  color:#43d6a1
}

.pain-strip {
  background:#0f141f;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 0
}

.pain-strip .container {
  display:flex;
  align-items:center;
  gap:38px
}

.pain-strip p {
  font-weight:700;
  font-size:1.15rem;
  white-space:nowrap
}

.pain-items {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  color:#9ca5b7;
  font-size:1.15rem
}

.pain-items i {
  color:#495265;
  font-style:normal
}

.section {
  padding:110px 0
}

.section-head {
  display:flex;
  justify-content:space-between;
  gap:70px;
  align-items:flex-end;
  margin-bottom:52px
}

.section-head>div {
  flex:1
}

.section-head>p {
  width:38%;
  margin:0;
  color:#8e98aa;
  font-size:15px;
  line-height:1.9
}

.section-head h2 {
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.045em;
  margin:10px 0 0
}

.section-head h2 span,.difference h2 span,.roi-section h2 span,.diagnosis-copy h2 span {
  color:#7891ff
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px
}

.service-card {
  position:relative;
  padding:30px;
  background:#0f141f;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  min-height:260px;
  transition:.25s
}

.service-card:hover {
  transform:translateY(-4px);
  border-color:rgba(103,127,255,.35)
}

.service-card.featured:after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:#586fff;
  filter:blur(70px);
  opacity:.12;
  right:-40px;
  top:-40px
}

.icon-box {
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(91,124,255,.12);
  border:1px solid rgba(91,124,255,.2);
  display:grid;
  place-items:center;
  color:#8ea2ff;
  font-weight:800
}

.num {
  position:absolute;
  right:28px;
  top:28px;
  color:#343c4e;
  font-size:1rem;
}

.service-card h3 {
  font-size:1.25rem;
  margin:22px 0 10px
}

.service-card p {
  color:#8d97a9;
  font-size:1.15rem;
  line-height:1.5;
  max-width:520px
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px
}

.tags span {
  font-size:1rem;
  color:#8d97aa;
  background:#171d2a;
  border:1px solid rgba(255,255,255,.06);
  padding:5px 9px;
  border-radius:20px
}

.portfolio-section {
  background:#f5f6fa;
  color:var(--ink)
}

.portfolio-section .section-kicker {
  color:#5c73e8
}

.portfolio-section .section-head>p {
  color:#666e7d
}

.case-notice {
  display:flex;
  align-items:center;
  gap:15px;
  margin:-20px 0 28px;
  padding:15px 18px;
  border:1px solid #dfe4f2;
  border-radius:13px;
  background:#eef2ff;
  color:#40495b
}

.case-notice b {
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:7px;
  background:#5b73e8;
  color:white;
  font-size:1rem
}

.case-notice span {
  font-size:1.15rem;
  line-height:1.5;
  color:#5f6879
}

.portfolio-list {
  display:flex;
  flex-direction:column;
  gap:28px
}

.project {
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:46px;
  align-items:center;
  background:white;
  border:1px solid #e3e6ee;
  border-radius:24px;
  padding:46px;
  box-shadow:0 12px 35px rgba(22,30,55,.05);
  overflow:hidden
}

.project-meta {
  display:flex;
  align-items:center;
  justify-content:space-between
}

.project-meta span {
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.13em
}

.project-meta b {
  color:#d7dbe5;
  font-size:1.75rem
}

.project h3 {
  font-size:1.75rem;
  line-height:1.5;
  letter-spacing:-.045em;
  margin:15px 0
}

.project-copy>p {
  color:#6b7280;
  font-size:1.15rem;
  line-height:1.5
}

.project ul {
  padding:0;
  margin:20px 0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}

.project li {
  font-size:1rem;
  color:#4a5261
}

.project li:before {
  content:"✓";
  margin-right:7px;
  font-weight:800
}

.result-pill {
  display:inline-block;
  margin-top:4px;
  padding:8px 12px;
  border-radius:9px;
  font-size:1rem;
  font-weight:700
}

.project-blue .project-meta span,.project-blue li:before {
  color:#5574ff
}

.project-blue .result-pill {
  background:#eef1ff;
  color:#4e69df
}

.project-purple .project-meta span,.project-purple li:before {
  color:#8a5dde
}

.project-purple .result-pill {
  background:#f4efff;
  color:#7d54c9
}

.project-green .project-meta span,.project-green li:before {
  color:#1cae77
}

.project-green .result-pill {
  background:#eafaf4;
  color:#138d61
}

.project-orange .project-meta span,.project-orange li:before {
  color:#df7f24
}

.project-orange .result-pill {
  background:#fff4e9;
  color:#c46c1c
}

.project-cyan .project-meta span,.project-cyan li:before {
  color:#1595c6
}

.project-cyan .result-pill {
  background:#e9f9ff;
  color:#117ba2
}

.project-screen {
  background:#111722;
  border-radius:15px;
  border:1px solid #dfe3eb;
  box-shadow:0 20px 45px rgba(28,37,65,.14);
  overflow:hidden;
  transform:rotate(.4deg)
}

.screen-chrome {
  height:37px;
  background:#f4f5f8;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 12px
}

.screen-chrome span {
  margin-left:8px;
  font-size:.85rem;
  color:#99a0ac
}

.screen-inner {
  height:375px;
  padding:20px;
  background:#0f1520;
  color:white
}

.fake-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px
}

.fake-head b {
  font-size:1rem;
}

.fake-head span {
  font-size:.85rem;
  color:#55d7a8
}

.fake-kpis {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}

.fake-kpis>div {
  padding:12px;
  background:#171e2c;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px
}

.fake-kpis small,.fake-kpis b {
  display:block
}

.fake-kpis small {
  font-size:.85rem;
  color:#748094
}

.fake-kpis b {
  font-size:.85rem;
  margin-top:3px
}

.fake-table {
  margin-top:13px;
  border-radius:9px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06)
}

.tr {
  display:grid;
  grid-template-columns:1.5fr 1fr .8fr .8fr;
  gap:10px;
  padding:8px 10px;
  font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.05)
}

.tr.th {
  background:#1a2231;
  border:0;
  color:#758097
}

.badge-ok {
  color:#54d7a7
}

.academy-ui {
  background:#15111d
}

.progress-list {
  margin-top:16px
}

.progress-list p {
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
}

.progress-list i {
  display:block;
  height:7px;
  background:#26202f;
  border-radius:9px;
  overflow:hidden
}

.progress-list em {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#815adc,#b17cff);
  border-radius:9px
}

.legal-ui {
  background:#10171a
}

.legal-row {
  display:flex;
  align-items:center;
  gap:10px;
  background:#162024;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  padding:12px;
  margin-top:9px
}

.legal-row p {
  margin:0;
  flex:1
}

.legal-row b,.legal-row small {
  display:block
}

.legal-row b {
  font-size:.85rem;
}

.legal-row small {
  font-size:.85rem;
  color:#6e7e84
}

.legal-row>span {
  font-size:.85rem;
  color:#a0adb2
}

.dot {
  width:7px;
  height:7px;
  border-radius:50%
}

.dot.green {
  background:#3fd3a0
}

.dot.yellow {
  background:#ffc95b
}

.dot.blue {
  background:#67a4ff
}

.sports-ui {
  background:#17130f
}

.match-card {
  background:#211c17;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:16px
}

.match-card small {
  font-size:.85rem;
  color:#a28e7b
}

.match-card>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 8px
}

.match-card b {
  font-size:.85rem;
}

.match-card strong {
  font-size:1.25rem;
  color:#ff9d47
}

.match-card em {
  font-size:.85rem;
  color:#7f7368;
  font-style:normal
}

.league-mini {
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  padding:10px 12px;
  border-radius:8px;
  background:#211c17;
  font-size:.85rem;
}

.league-mini b {
  color:#ff9d47
}

.route-ui {
  background:linear-gradient(150deg,#0b1420,#0c1925)
}

.route-brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}

.route-brand b {
  font-size:1rem;
  letter-spacing:-.03em
}

.route-brand span {
  font-size:.85rem;
  color:#49ccef;
  border:1px solid rgba(73,204,239,.2);
  background:rgba(73,204,239,.08);
  padding:3px 7px;
  border-radius:20px
}

.route-search {
  display:grid;
  grid-template-columns:1fr auto 1fr auto;
  gap:8px;
  align-items:center;
  background:#121e2c;
  border:1px solid rgba(255,255,255,.07);
  padding:10px;
  border-radius:10px
}

.route-search>div {
  background:#0c1621;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  padding:8px 10px
}

.route-search small,.route-search b {
  display:block
}

.route-search small {
  font-size:.85rem;
  color:#657789
}

.route-search b {
  font-size:.85rem;
  margin-top:1px
}

.route-search i {
  font-style:normal;
  color:#547084;
  font-size:11px
}

.route-search button {
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,#2e9ce6,#49d6dd);
  color:white;
  font-size:.85rem;
  font-weight:800;
  padding:11px 10px
}

.route-options {
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:7px
}

.route-row {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  background:#111c28
}

.route-row.best {
  border-color:rgba(73,204,239,.24);
  background:linear-gradient(90deg,rgba(33,145,190,.12),#111c28)
}

.route-rank,.route-icon {
  width:31px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(73,204,239,.12);
  color:#52d6f3;
  font-size:.85rem;
  font-weight:800
}

.route-row p {
  margin:0;
  flex:1
}

.route-row b,.route-row small {
  display:block
}

.route-row b {
  font-size:.85rem;
}

.route-row small {
  font-size:.85rem;
  color:#6e8191;
  margin-top:2px
}

.route-row strong {
  font-size:.85rem;
  color:#58dda8;
  white-space:nowrap
}

.difference {
  background:#0c1018
}

.difference-box {
  border:1px solid var(--line);
  border-radius:24px;
  padding:50px;
  background:linear-gradient(135deg,rgba(91,124,255,.06),rgba(255,255,255,.015))
}

.difference h2 {
  font-size:2.5rem;
  letter-spacing:-.045em;
  margin:10px 0
}

.difference .lead {
  font-size:1.15rem;
  color:#9ba5b7
}

.difference .lead strong {
  color:white
}

.difference-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:46px
}

.difference-grid>div {
  border-top:1px solid var(--line);
  padding-top:18px
}

.difference-grid span {
  font-size:.85rem;
  color:#6f84e8
}

.difference-grid b {
  display:block;
  font-size:1.25rem;
  margin:12px 0 7px
}

.difference-grid p {
  font-size:1.15rem;
  color:#7f899c;
  margin:0
}

.section-head.compact {
  margin-bottom:36px
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px
}

.process-card {
  position:relative;
  background:#10151f;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 20px;
  min-height:220px
}

.process-card>span {
  position:absolute;
  right:16px;
  top:14px;
  color:#333c4c;
  font-size:1rem;
}

.process-icon {
  width:40px;
  height:40px;
  border-radius:10px;
  background:#171e2c;
  display:grid;
  place-items:center;
  color:#7d93ff;
  margin-bottom:20px
}

.process-card h3 {
  font-size:1.25rem;
}

.process-card p {
  font-size:1.15rem;
  color:#818b9d;
  line-height:1.5
}

.roi-section {
  padding:85px 0;
  background:linear-gradient(135deg,#10162a,#11172d);
  border-top:1px solid rgba(120,145,255,.14);
  border-bottom:1px solid rgba(120,145,255,.14)
}

.roi-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}

.roi-section h2 {
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.045em;
  margin:10px 0
}

.roi-section p {
  color:#8f99ac;
  font-size:1.15rem;
  line-height:1.5;
}

.roi-card {
  background:#0d121e;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:28px
}

.roi-card label {
  display:flex;
  justify-content:space-between;
  font-size:1.25rem;
}

.roi-card label strong {
  color:#8ea2ff
}

.roi-card input[type=range] {
  width:100%;
  margin:24px 0;
  accent-color:#6880ff
}

.roi-result {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.roi-result>div {
  background:#151b2b;
  padding:18px;
  border-radius:11px
}

.roi-result small,.roi-result b {
  display:block
}

.roi-result small {
  color:#79849a;
  font-size:1.15rem;
}

.roi-result b {
  font-size:1.25rem;
  margin-top:4px
}

.roi-card>p {
  font-size:1rem;
  margin:12px 0 0
}

.diagnosis-section {
  background:#f5f6fa;
  color:var(--ink)
}

.diagnosis-grid {
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:74px;
  align-items:start
}

.diagnosis-copy {
  padding-top:22px
}

.diagnosis-copy .section-kicker {
  color:#5c73e8
}

.diagnosis-copy h2 {
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.05em;
  margin:11px 0 20px
}

.diagnosis-copy>p {
  color:#6b7280;
  font-size:1.15rem;
  line-height:1.5;
}

.diagnosis-points {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:15px
}

.diagnosis-points>div {
  display:flex;
  gap:12px;
  align-items:flex-start
}

.diagnosis-points i {
  width:26px;
  height:26px;
  border-radius:8px;
  background:#e9edff;
  color:#5671e8;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:800;
  font-size:11px
}

.diagnosis-points b,.diagnosis-points small {
  display:block
}

.diagnosis-points b {
  font-size:1.25rem;
}

.diagnosis-points small {
  font-size:1.15rem;
  color:#8b92a0;
  margin-top:2px
}

.inquiry-form {
  background:white;
  border:1px solid #e1e5ed;
  border-radius:22px;
  padding:30px;
  box-shadow:0 16px 45px rgba(23,32,60,.07)
}

.form-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid #eaedf2;
  margin-bottom:18px
}

.form-title b {
  font-size:1.15rem;
}

.form-title span {
  font-size:1rem;
  color:#9aa1ad
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.inquiry-form label {
  display:block;
  margin-top:14px
}

.inquiry-form label>span {
  display:block;
  font-size:1rem;
  font-weight:700;
  color:#555d6a;
  margin-bottom:7px
}

.inquiry-form label em {
  font-style:normal;
  color:#a2a8b2;
  font-weight:500
}

.inquiry-form input[type=text],.inquiry-form textarea {
  width:100%;
  border:1px solid #dfe3ea;
  background:#fafbfc;
  border-radius:10px;
  padding:12px 13px;
  outline:none;
  transition:.2s;
  font-size:1rem;
  color:#202633
}

.inquiry-form textarea {
  resize:vertical
}

.inquiry-form input:focus,.inquiry-form textarea:focus {
  border-color:#7890f5;
  background:white;
  box-shadow:0 0 0 3px rgba(91,124,255,.08)
}

.consent {
  display:flex!important;
  gap:8px;
  align-items:center
}

.consent input {
  accent-color:#5b7cff;
  width:20px;
  height:20px;
}

.consent span {
  margin:0!important;
  font-weight:500!important;
  color:#7b8290!important
}

.btn-submit {
  border:0;
  width:100%;
  height:52px;
  margin-top:18px;
  font-size:1.15rem;
}

.form-note {
  text-align:center;
  color:#a0a6b0;
  font-size:10px
}

.hp {
  position:absolute!important;
  left:-9999px!important;
  opacity:0!important
}

.closing {
  text-align:center;
  padding:95px 0;
  background:linear-gradient(135deg,#5673f2,#6d5ee8);
  position:relative;
  overflow:hidden
}

.closing:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:24px 24px;
  opacity:.35
}

.closing .container {
  position:relative
}

.closing>div>span {
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.16em;
  color:rgba(255,255,255,.65)
}

.closing h2 {
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.05em;
  margin:13px 0 28px
}

footer.site-footer {
  padding:42px 0 0;
  background:#080b11;
  border-top:1px solid var(--line)
}

.footer-grid {
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto minmax(330px,1fr);
  align-items:start;
  gap:54px;
  padding-bottom:34px
}

.footer-brand-block {
  min-width:0
}

.footer-brand {
  display:inline-flex;
  margin-bottom:11px
}

.footer-tagline {
  margin:0;
  color:#70798a;
  font-size:1rem;
  line-height:1.7
}

.footer-seo-links {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin:8px 0 0
}

.footer-seo-links a {
  font-size:1rem;
  color:#788295;
  white-space:nowrap;
  transition:.2s
}

.footer-seo-links a:hover {
  color:#fff
}

.footer-business {
  justify-self:end;
  width:100%;
  max-width:390px
}

.footer-business-title {
  margin:0 0 10px;
  color:#d4d9e3;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em
}

.footer-business dl {
  margin:0
}

.footer-business dl>div {
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  gap:14px;
  padding:4px 0;
  line-height:1.55
}

.footer-business dt,
.footer-business dd {
  margin:0;
  font-size:1rem
}

.footer-business dt {
  color:#596274
}

.footer-business dd,
.footer-business dd a {
  color:#8a94a7
}

.footer-business dd a:hover {
  color:#fff
}

.footer-bottom {
  display:flex;
  align-items:center;
  min-height:54px;
  border-top:1px solid rgba(255,255,255,.07)
}

.footer-bottom p {
  margin:0;
  color:#535c6c;
  font-size:.85rem
}

.mobile-cta {
  display:none
}

body.success-toast:after,body.invalid-toast:after {
  position:fixed;
  z-index:100;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  padding:13px 18px;
  border-radius:10px;
  color:white;
  font-size:12px;
  font-weight:700;
  box-shadow:0 12px 32px rgba(0,0,0,.25)
}

body.success-toast:after {
  content:"문의가 접수되었습니다. 확인 후 연락드리겠습니다.";
  background:#1d9e73
}

body.invalid-toast:after {
  content:"필수 항목을 확인해주세요.";
  background:#d85c5c
}

@media(max-width:1199px) {
  .container {
    width:min(100% - 48px,1060px)
  }
  .nav-wrap {
    height:76px;
    gap:18px
  }
  .desktop-nav,.header-cta {
    display:none
  }
  .menu-toggle {
    display:flex;
    margin-left:auto;
    position:relative;
    z-index:72
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity:0
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
  }
  .mobile-nav {
    display:block;
    position:fixed;
    z-index:69;
    left:0;
    right:0;
    top:76px;
    height:calc(100dvh - 76px);
    background:rgba(8,11,17,.985);
    border-top:1px solid var(--line);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
    overflow-y:auto
  }
  .site-header.menu-open .mobile-nav {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0)
  }
  .mobile-nav-inner {
    padding-top:28px;
    padding-bottom:38px;
    display:flex;
    flex-direction:column
  }
  .mobile-nav-inner>a:not(.mobile-nav-cta) {
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px 4px;
    border-bottom:1px solid var(--line);
    font-size:25px;
    font-weight:750;
    letter-spacing:-.035em
  }
  .mobile-nav-inner>a:not(.mobile-nav-cta) span {
    width:28px;
    color:#697cf0;
    font-size:.85rem;
    letter-spacing:.08em;
    font-weight:800
  }
  .mobile-nav-cta {
    margin-top:26px;
    min-height:58px;
    border-radius:13px;
    background:linear-gradient(135deg,#5574ff,#6c63ff);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:1rem;
    font-weight:800;
    box-shadow:0 16px 36px rgba(91,124,255,.22)
  }
  body.menu-open {
    overflow:hidden
  }
  .hero {
    padding-top:136px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:42px
  }
  .hero-copy {
    text-align:center;
    max-width:860px;
    margin:0 auto
  }
  .hero-desc {
    max-width:760px;
    margin-left:auto;
    margin-right:auto
  }
  .hero-actions,.hero-proof {
    justify-content:center
  }
  .hero-visual {
    max-width:820px;
    margin:6px auto 0;
    width:100%
  }
  .section-head {
    display:block
  }
  .section-head>p {
    width:auto;
    margin-top:18px;
    max-width:760px
  }
  .project {
    grid-template-columns:1fr;
    gap:34px
  }
  .project-screen {
    max-width:760px;
    width:100%;
    margin:0 auto
  }
  .difference-grid {
    grid-template-columns:1fr 1fr
  }
  .process-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .roi-grid,.diagnosis-grid {
    grid-template-columns:1fr;
    gap:42px
  }
  .diagnosis-copy {
    max-width:760px
  }
}


@media(max-width:1199px) {
  .footer-grid {
    grid-template-columns:minmax(220px,.8fr) minmax(360px,1.2fr);
    gap:30px 44px
  }
  .footer-brand-block {
    grid-column:1
  }
  .footer-business {
    grid-column:2;
    grid-row:1;
    justify-self:end
  }
  .footer-seo-links {
    grid-column:1 / -1;
    grid-row:2;
    justify-content:flex-start;
    margin:0
  }
}

@media(max-width:767px) {
  footer.site-footer {
    padding-top:34px
  }
  .project-copy>p{font-size:1rem;}
  .project li{font-size:.85rem;}
  .dash-heading small{font-size:.85rem;}
  .stat small{font-size:.85rem;}
  .float-card small{font-size:.85rem;}
  .stat em{font-size:.85rem;}
  .pain-items{font-size:1rem;}
  .service-card p{font-size:1rem;}
  .tags span{font-size:.85rem;}
  .case-notice span{font-size:1rem;}
  .footer-grid {
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:28px
  }
  .footer-brand-block,
  .footer-business,
  .footer-seo-links {
    grid-column:1;
    grid-row:auto
  }
  .footer-business {
    justify-self:start
  }
  .container {
    width:min(100% - 28px,1060px)
  }
  .nav-wrap {
    height:64px
  }
  .mobile-nav {
    top:64px;
    height:calc(100dvh - 64px)
  }
  .brand-mark {
    width:34px;
    height:34px;
    flex-basis:34px
  }
  .brand-name {font-size:1.08rem}
  .pain-strip p{font-size:1.15rem;}
  .service-card h3{font-size:1.15rem;}
  .form-title b{font-size:1rem;}
  .form-title span{font-size:.85rem;}
  .diagnosis-copy>p{font-size:1.15rem;}
  .diagnosis-points b{font-size:1.15rem;}
  .diagnosis-points small{font-size:1rem;}
  .menu-toggle {
    width:40px;
    height:40px;
    border-radius:10px
  }
  .mobile-nav-inner {
    padding-top:17px
  }
  .mobile-nav-inner>a:not(.mobile-nav-cta) {
    font-size:21px;
    padding:17px 2px
  }
  .hero {
    padding:110px 0 70px
  }

.difference-grid p{font-size:1rem;}
.btn-submit{font-size:1rem;}

  .hero h1 {
    font-size:39px
  }
  .hero-desc {
    font-size:1rem;
  }

  .hero-actions {
    flex-direction:column
  }
  .hero-actions .btn {
    width:100%
  }
  .hero-proof {
    gap:9px 15px;
    font-size:.85rem;
  }
  .hero-visual {
    min-height:auto;
    margin-top:14px
  }
  .dash-window {
    transform:none
  }
  .dash-body {
    height:310px
  }
  .dash-side {
    width:44px
  }
  .dash-main {
    padding:16px
  }
  .stat-grid {
    gap:6px
  }
  .stat {
    padding:10px
  }
  .stat strong {
    font-size:1rem;
  }
  .chart-card {
    height:88px
  }
  .bars {
    height:46px
  }
  .task-list>div {
    padding:5px 0
  }
  .fc1 {
    left:-4px;
    bottom:-28px
  }
  .fc2 {
    right:-3px;
    top:28px
  }
  .float-card {
    padding:8px 10px
  }
  .pain-strip {
    padding:20px 0
  }
  .pain-strip .container {
    display:block
  }
  .pain-strip p {
    margin:0 0 10px
  }
  .pain-items {
    gap:7px 10px
  }
  .pain-items i {
    display:none
  }
  .section {
    padding:76px 0
  }
  .section-head {
    margin-bottom:30px
  }
  .section-head h2,.difference h2,.roi-section h2,.diagnosis-copy h2 {
    font-size:1.5rem;
    line-height: 1.15;
  }
  .service-grid {
    grid-template-columns:1fr
  }
  .service-card {
    min-height:auto;
    padding:24px
  }
  .case-notice {
    display:block;
    margin-top:-10px
  }
  .case-notice b {
    display:inline-block;
    margin-bottom:8px
  }
  .case-notice span {
    display:block
  }
  .project {
    padding:24px;
    border-radius:18px;
    gap:26px
  }
  .project h3 {
    font-size:1.15rem;
  }
  .project ul {
    grid-template-columns:1fr
  }
  .screen-inner {
    height:300px;
    padding:14px
  }
  .difference-box {
    padding:28px 22px
  }
  .difference-grid {
    grid-template-columns:1fr
  }
  .process-grid {
    grid-template-columns:1fr 1fr
  }
  .process-card {
    min-height:180px
  }
  .roi-section {
    padding:65px 0
  }
  .roi-grid {
    gap:28px
  }
  .inquiry-form {
    padding:22px 18px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:28px
  }
  .footer-seo-links {
    justify-content:flex-start;
    margin:0;
    gap:10px 18px
  }
  .footer-business {
    justify-self:start;
    max-width:none
  }
  .footer-business dl>div {
    grid-template-columns:105px minmax(0,1fr)
  }
  .footer-bottom {
    min-height:50px
  }
  .closing {
    padding:72px 0 95px
  }
  .closing h2 {
    font-size:1.75rem;
  }
  .mobile-cta {
    display:block;
    position:fixed;
    z-index:68;
    left:10px;
    right:10px;
    bottom:10px
  }
  .mobile-cta a {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    height:52px;
    background:linear-gradient(135deg,#5875f4,#695de3);
    border-radius:13px;
    color:white;
    font-size:1rem;
    font-weight:800;
    box-shadow:0 14px 35px rgba(38,50,110,.35)
  }
  body.menu-open .mobile-cta {
    opacity:0;
    pointer-events:none
  }
}

@media(max-width:479px) {
  .process-grid {
    grid-template-columns:1fr
  }
  .fc2 {
    display:none
  }
  .dash-side {
    display:none
  }
  .dash-main {
    padding:14px
  }
  .stat-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .hero h1 {
    font-size:1.75rem;
  }
  .mobile-nav-inner>a:not(.mobile-nav-cta) {
    font-size:1rem;
  }
}

@media(max-width:767px) {
  .brand-mark {
    width:32px;
    height:32px;
    flex-basis:32px
  }
  .brand-name {font-size:1.03rem}
  .route-search {
    grid-template-columns:1fr auto 1fr
  }
  .route-search button {
    grid-column:1/-1;
    width:100%
  }
  .route-row b{font-size:.7rem;}
  .route-row small{font-size:.7rem;}
  .footer-tagline{font-size:.85rem;}
  .footer-seo-links a{font-size:.85rem;}
  .footer-business dt, .footer-business dd{font-size:.85rem;}
  .breadcrumbs{font-size:.85rem;}
  .difference-grid b{font-size:1.15rem;}
  .process-card h3{font-size:1.15rem;}
  .process-card p{font-size:1rem;}
  .roi-card label{font-size:1.15rem;}
  .roi-result small{font-size:1rem; line-height: 1.15;}
  .roi-result b{font-size:1.15rem;}
  .roi-card>p{font-size:.85rem;}
  .btn-lg{font-size:1rem;}
  
}

@media(max-width:479px) {
  .brand-mark {
    width:30px;
    height:30px;
    flex-basis:30px
  }
  .brand-name {font-size:1rem}
  .route-row {
    gap:7px;
    padding:8px
  }
  .route-row strong {
    font-size:.7rem;
  }
}

/* SEO detail pages / internal links */ .service-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  color:#8da2ff;
  font-size:1.15rem;
  font-weight:800
}

.service-more:hover {
  color:#fff
}

.service-more span {
  transition:.2s
}

.service-more:hover span {
  transform:translateX(3px)
}

.consent a {
  text-decoration:underline;
  text-underline-offset:2px
}


.detail-page {
  background:#0a0d14
}

.detail-hero {
  padding:145px 0 86px;
  background:radial-gradient(circle at 75% 12%,rgba(91,124,255,.16),transparent 34%),linear-gradient(180deg,#0a0d14,#0d1220)
}

.breadcrumbs {
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:28px;
  color:#747f93;
  font-size:1rem;
}

.breadcrumbs strong {
  color:#aab2c1
}

.detail-hero h1 {
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.05em;
  margin:12px 0 20px;
  max-width:850px
}

.detail-hero h1 span {
  color:#7891ff
}

.detail-hero>div>p {
  max-width:820px;
  color:#a2acbd;
  font-size:1.15rem;
  line-height:1.5;
}

.detail-actions {
  display:flex;
  gap:12px;
  margin-top:30px
}

.detail-content {
  padding:90px 0;
  background:#f6f7fa;
  color:#121726
}

.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:70px
}

.detail-block {
  padding:0 0 42px;
  margin-bottom:42px;
  border-bottom:1px solid #e3e6ed
}

.detail-block:last-child {
  margin-bottom:0
}

.detail-block h2 {
  font-size:1.25rem;
  letter-spacing:-.035em;
  margin:0 0 14px
}

.detail-block p {
  font-size:1.15rem;
  line-height:1.5;
  color:#626b79;
  margin:0
}

.detail-aside {
  position:relative
}

.aside-card {
  position:sticky;
  top:105px;
  background:#111827;
  color:white;
  border-radius:18px;
  padding:26px;
  box-shadow:0 16px 40px rgba(21,29,48,.12)
}

.aside-card>span {
  font-size:1.15rem;
  color:#8ea2ff;
  font-weight:800
}

.aside-card ul {
  padding:0;
  margin:18px 0 22px;
  list-style:none
}

.aside-card li {
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:1rem;
  color:#b6bfce
}

.aside-card li:before {
  content:'✓';
  color:#6f8cff;
  margin-right:8px
}

.aside-card a {
  font-size:1.15rem;
  color:#8ea2ff;
  font-weight:800
}

.related-services {
  padding:80px 0;
  background:#0d111a
}

.related-services h2 {
  font-size:2.5rem;
  margin:9px 0 28px
}

.related-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.related-grid a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px;
  border:1px solid var(--line);
  background:#111722;
  border-radius:14px;
  font-size:1.15rem;
  font-weight:700
}

.related-grid a:hover {
  border-color:rgba(120,145,255,.4);
  transform:translateY(-2px)
}

.detail-cta {
  text-align:center;
  padding:85px 0;
  background:linear-gradient(135deg,#5673f2,#6d5ee8)
}

.detail-cta h2 {
  font-size:2.5rem;
  line-height:1.15;
  margin:0 0 12px
}

.detail-cta p {
  color:rgba(255,255,255,.75);
  font-size:13px;
  margin:0 0 25px
}

.policy-page {
  padding:145px 0 90px;
  background:#f6f7fa;
  color:#141924;
  min-height:75vh
}

.policy-wrap {
  max-width:820px
}

.policy-wrap h1 {
  font-size:2.5rem;
  letter-spacing:-.04em;
  margin:10px 0
}

.policy-date {
  color:#8b93a1;
  font-size:1rem;
  margin-bottom:45px
}

.policy-wrap section {
  padding:26px 0;
  border-top:1px solid #e1e4ea
}

.policy-wrap section h2 {
  font-size:1.15rem;
}

.policy-wrap section p {
  font-size:1rem;
  line-height:1.5;
  color:#626a78
}

.policy-wrap section a {
  color:#556fe1;
  text-decoration:underline
}

.notfound {
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center
}

.notfound span {
  font-size:90px;
  font-weight:800;
  color:#586fff
}

.notfound h1 {
  font-size:32px
}

.notfound p {
  color:#8993a5;
  margin-bottom:25px
}
br.pc{display:block;}
br.mobile{display:none;}

@media(max-width:1199px) {
  .detail-grid {
    grid-template-columns:1fr
  }
  .aside-card {
    position:static
  }
  .detail-hero h1 {
    font-size:43px
  }
  
  br.pc{display:none;}
  br.mobile{display:block;}
}

@media(max-width:767px) {
  .detail-hero {
    padding:115px 0 65px
  }
  .detail-hero h1 {
    font-size:1.75rem;
  }
  .detail-hero>div>p {
    font-size:1rem;
  }
  .detail-actions {
    flex-direction:column
  }

  .detail-actions .btn {
    width:100%
  }
  .detail-content {
    padding:65px 0
  }
  .detail-block h2 {
    font-size:1.15rem;
  }
  .related-grid {
    grid-template-columns:1fr
  }
  .detail-cta h2 {
    font-size:1.75rem;
    line-height: 1.15;
    letter-spacing: -.05em;
    margin: 13px 0 28px;
  }
  .policy-page {
    padding-top:115px
  }
  .policy-wrap h1 {
    font-size:1.5rem;
  }
  .related-services h2{font-size:1.75rem; line-height: 1.15;}
  .footer-bottom p{font-size:.7rem;}
  .detail-block p{font-size:1rem;}
}

/* 카카오톡 플로팅 상담 버튼 */
.kakao-float {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 65px;
  height: 65px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

.kakao-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kakao-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}


/* 모바일 */
@media (max-width: 767px) {
  .kakao-float {
    width: 50px;
    height: 50px;
    right: 15px;

    /* 하단 프로젝트 상담 버튼 위에 배치 */
    bottom: 80px;
  }

  .eyebrow, .section-kicker{font-size:.85rem;}
}
/* SEO: portfolio discovery link */
.portfolio-all-link{display:flex;justify-content:center;margin-top:34px}

/* SEO: service FAQ content */
.seo-faq{padding:80px 0;background:#0a0d14}
.seo-faq h2{font-size:2.5rem;line-height:1.15;letter-spacing:-.045em;margin:9px 0 28px}
.seo-faq-list{display:grid;gap:12px;max-width:980px}
.seo-faq-list details{border:1px solid var(--line);background:#111722;border-radius:14px;padding:0 22px}
.seo-faq-list summary{cursor:pointer;list-style:none;font-size:1.12rem;font-weight:800;padding:20px 32px 20px 0;position:relative;line-height:1.45}
.seo-faq-list summary::-webkit-details-marker{display:none}
.seo-faq-list summary::after{content:'+';position:absolute;right:0;top:17px;color:#8da2ff;font-size:1.5rem}
.seo-faq-list details[open] summary::after{content:'−'}
.seo-faq-list p{margin:0;padding:0 0 20px;color:#9aa6ba;font-size:1rem;line-height:1.75;max-width:820px}
@media (max-width:700px){.seo-faq{padding:64px 0}.seo-faq h2{font-size:1.75rem}.seo-faq-list details{padding:0 18px}.seo-faq-list summary{font-size:1rem}.seo-faq-list p{font-size:.95rem;line-height:1.65}}