/* 메인 화면 리뉴얼 — 히어로 아래 전 구간.
   히어로 배너 · 플로팅 배너 · 최상단 프로모션 · GNB 는 건드리지 않는다.
   모든 규칙은 .mcx 아래로 가둔다 (.sec/.card/.in 같은 이름이 전역으로 나가면 헤더·푸터와 부딪힌다).
   되돌리려면 Index.cshtml 의 링크 한 줄과 이 파일만 걷으면 된다. */
.mcx{--font:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --ink:#191f2b; --body:#61697c; --muted:#8a92a3; --line:#e8ecf3;
  --tintA:#eef4fb; --tintB:#f5f6f8; --blue:#2563ff; --tint:rgba(37,99,255,.16);}
.mcx{background:#fff;color:var(--body);font-family:var(--font);}
.mcx *{box-sizing:border-box;}
.mcx input, .mcx button, .mcx select, .mcx textarea{font-family:inherit;}
.mcx .in{width:min(1296px,calc(100% - 48px));margin:0 auto;}
.mcx .sec{padding-block:clamp(84px,13vh,170px);}
.mcx .mid{text-align:center;}
/* 절 제목은 한 값이다. 46/48/49 로 갈려 있던 것을 50px 로 모았다.
   KPI 절의 문장(clamp 최대 58)만 예외다. 제목이 아니라 문장 세 줄이라
   같은 자로 재면 안 된다. 크기를 맞춰도 존재감이 안 맞는다. */
.mcx h2.t{margin:0;font-size:clamp(28px,3.6vw,50px);font-weight:600;line-height:1.3;letter-spacing:-.2px;color:var(--ink);word-break:keep-all;text-wrap:balance;}
.mcx p.st{margin:18px auto 0;max-width:62ch;font-size:clamp(16px,1.35vw,20px);font-weight:500;line-height:1.55;color:var(--body);word-break:keep-all;}
.mcx p.st em, .mcx p.sst em{font-style:normal;font-weight:inherit;color:var(--ink);}
.mcx p.sst{margin:14px auto 0;max-width:58ch;font-size:15px;font-weight:500;color:var(--body);line-height:1.6;word-break:keep-all;}
.mcx .lab{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.01em;}
.mcx .pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:600;font-size:15px;padding:14px 26px;text-decoration:none;transition:.2s;}
.mcx .pill.solid{background:#111;color:#fff;}
.mcx .pill.solid:hover{background:#000;}
.mcx .pill.line{background:#fff;border:1.5px solid var(--ink);color:var(--ink);padding:15px 18px 15px 28px;gap:14px;
  box-shadow:0 10px 26px -14px rgba(16,24,48,.4);}
.mcx .pill.line:hover{background:var(--ink);color:#fff;box-shadow:0 16px 34px -14px rgba(16,24,48,.5);transform:translateY(-2px);}
.mcx .pill.line svg{width:15px;height:15px;}
.mcx .pill.line .cir{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;transition:transform .2s;}
.mcx .pill.line:hover .cir{transform:translateX(3px);}
.mcx .pill.white{background:#fff;color:#111;}
.mcx .pill svg{width:15px;height:15px;}
.mcx .pill:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.mcx .btnrow{display:flex;gap:10px;justify-content:center;margin-top:40px;flex-wrap:wrap;}
.mcx .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:20px;margin-top:56px;text-align:left;}
.mcx .nums > div{position:relative;border-radius:28px;padding:34px 32px 30px;display:grid;align-content:space-between;gap:26px;overflow:hidden;min-height:196px;}
.mcx .nums b{font-size:clamp(42px,5vw,76px);font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:.96;position:relative;z-index:1;}
.mcx .nums b small{font-size:.36em;font-weight:600;margin-left:4px;letter-spacing:-.02em;}
.mcx .nums span{font-size:15px;line-height:1.5;position:relative;z-index:1;word-break:keep-all;}
.mcx .nums .n1{grid-column:span 2;grid-row:span 2;background:var(--blue);color:#fff;min-height:auto;align-content:end;}
.mcx .nums .n1 b{font-size:clamp(64px,9vw,136px);}
.mcx .nums .n1 b small{color:rgba(255,255,255,.8);}
.mcx .nums .n1 span{color:rgba(255,255,255,.8);font-size:16px;}
.mcx .nums .n2{grid-column:span 2;background:#16295c;color:#fff;}
.mcx .nums .n2 b small{color:#8fb0ff;}
.mcx .nums .n2 span{color:#9fb0d4;}
.mcx .nums .n3{grid-column:span 2;background:var(--tintB);color:var(--ink);}
.mcx .nums .n3 b small{color:var(--blue);}
.mcx .nums .n3 span{color:var(--muted);}
.mcx .nums .n4{grid-column:span 2;background:var(--tintB);color:var(--ink);}
.mcx .nums .n4 b small{color:var(--blue);}
.mcx .nums .n4 span{color:var(--muted);}
.mcx .nums .ob{position:absolute;border-radius:50%;pointer-events:none;}
.mcx .nums .n1 .ob{width:62%;aspect-ratio:1;right:-12%;top:-16%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.5),rgba(255,255,255,.06) 58%,transparent 70%);}
.mcx .nums .n1 .ob2{position:absolute;right:8%;bottom:-18%;width:46%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.28);}
.mcx .nums .n2 .ob{width:54%;aspect-ratio:1;right:-14%;bottom:-30%;background:radial-gradient(circle at 40% 40%,rgba(120,160,255,.42),transparent 64%);}
.mcx .nums .n3 .ob{width:44%;aspect-ratio:1;right:-8%;top:-24%;background:radial-gradient(circle at 50% 60%,rgba(37,99,255,.16),transparent 66%);}
.mcx .nums .n4 .ob{width:40%;aspect-ratio:1;right:-6%;bottom:-26%;background:radial-gradient(circle at 50% 40%,rgba(22,41,92,.12),transparent 66%);}
.mcx .media{position:relative;border-radius:28px;overflow:hidden;min-height:clamp(380px,46vw,640px);display:grid;
  place-items:center;text-align:center;isolation:isolate;
  background:
    radial-gradient(58% 70% at 74% 16%, #2a5cd8 0%, rgba(42,92,216,0) 58%),
    radial-gradient(52% 62% at 18% 88%, #12a6bd 0%, rgba(18,166,189,0) 56%),
    radial-gradient(72% 72% at 50% 50%, #0c1430 0%, #05070f 100%);}
.mcx .media::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");}
.mcx .media::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);
  background-size:76px 76px;-webkit-mask-image:radial-gradient(64% 60% at 50% 46%,#000,transparent 78%);
          mask-image:radial-gradient(64% 60% at 50% 46%,#000,transparent 78%);}
.mcx .media .cap{padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);max-width:820px;}
.mcx .media h2{margin:0;font-size:clamp(32px,4.4vw,62px);font-weight:600;line-height:1.28;color:#fff;letter-spacing:-.6px;word-break:keep-all;text-wrap:balance;}
.mcx .media p{margin:24px auto 0;max-width:56ch;font-size:clamp(15px,1.3vw,18px);font-weight:500;line-height:1.7;color:rgba(255,255,255,.62);word-break:keep-all;}
.mcx .media p .s{display:block;}
.mcx .media p .s + .s{margin-top:6px;}
.mcx .media p em{font-style:normal;font-weight:inherit;color:#fff;}
.mcx .pcbr{display:inline;}
.mcx .marq{overflow:hidden;margin-top:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.mcx .marq ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;width:max-content;animation:slide 46s linear infinite;}
.mcx .marq:hover ul{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mcx .marq li{flex:none;width:218px;border:1px solid var(--line);border-radius:28px;background:#fff;padding:26px 18px 20px;display:grid;justify-items:center;gap:14px;}
.mcx .marq li .lg{height:46px;width:100%;display:grid;place-items:center;}
/* naver/google 은 SVG 라 고유 크기가 없다. height:auto 면 사라지므로 높이를 주고,
   좁은 칸에서 max-width 로 줄어들 때는 object-fit 이 비율을 지킨다. */
.mcx .marq li img{width:auto;height:var(--lh,30px);max-width:100%;display:block;object-fit:contain;}
.mcx .marq li b{font-size:13px;font-weight:600;color:var(--body);text-align:center;word-break:keep-all;}
.mcx .marq li.of b{color:var(--blue);}
.mcx .l-naver img{--lh:23px}
.mcx .l-google img{--lh:29px}
.mcx .l-kakao img{--lh:30px}
.mcx .l-gmarket img{--lh:18px}
.mcx .l-eleven img{--lh:35px}
.mcx .l-meta img{--lh:24px}
.mcx .l-coupang img{--lh:25px}
.mcx .l-toss img{--lh:30px}
.mcx .l-daangn img{--lh:38px}
.mcx .sols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:56px;text-align:left;}
.mcx .card{border-radius:28px;padding:38px 36px 32px;display:grid;gap:14px;align-content:start;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s;}
.mcx .card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -26px rgba(16,24,48,.28);}
.mcx .card:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.mcx .card .ico{width:44px;height:44px;color:var(--blue);}
.mcx .card .ico svg{width:100%;height:100%;display:block;}
.mcx .card h3{margin:0;font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.mcx .card h3 em{font-style:normal;font-size:12px;font-weight:600;color:var(--blue);background:rgba(37,99,255,.1);border-radius:999px;padding:6px 11px;}
.mcx .card p{margin:0;font-size:15px;line-height:1.7;color:var(--body);word-break:keep-all;}
/* 글자는 잉크다. 아래 버튼 체계 주석이 '자세히 보기' 를 보조 행동으로
   못 박아 두었는데(주 행동만 #111) 글자만 #111 을 쓰고 있었다.
   같은 링크 안에서 화살표(.go i)는 이미 var(--ink) 라, 한 부품이
   두 가지 검정을 쓰던 셈이다. */
.mcx .card .go{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:12px;}
.mcx .card .go i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;transition:transform .22s;flex:none;}
.mcx .card .go i svg{width:14px;height:14px;}
.mcx .card:hover .go i{transform:translateX(4px);}
.mcx .card.sm{grid-column:span 3;min-height:0;align-self:stretch;}
.mcx .card.sm:nth-of-type(1){background:var(--tintA);}
.mcx .card.sm:nth-of-type(2){background:var(--tintB);}
.mcx .card.sm:nth-of-type(3){background:var(--tintB);}
.mcx .card.sm:nth-of-type(4){background:var(--tintB);}
.mcx .card.wide{grid-column:span 6;background:var(--tintA);grid-template-columns:auto 1fr;align-items:center;column-gap:26px;}
.mcx .card.wide .ico{grid-row:1/4;}
.mcx .card.wide h3, .mcx .card.wide p, .mcx .card.wide .go{grid-column:2;}
.mcx .card.wide p{max-width:74ch;}
.mcx .why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px;text-align:left;}
.mcx .why > div{position:relative;border-radius:28px;padding:38px 34px 34px;min-height:340px;display:grid;align-content:start;gap:12px;overflow:hidden;isolation:isolate;}
.mcx .why .en{font-size:14px;font-weight:600;letter-spacing:.04em;opacity:.78;}
/* bundle.css 의 전역 h1~h6{color:#0e1838} 이 카드 색을 무시한다.
   컬러 카드 안에서는 카드가 정한 색을 물려받아야 한다. */
.mcx .why h3{margin:2px 0 6px;font-size:clamp(30px,3.2vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:inherit;}
.mcx .why p{margin:0;font-size:15px;line-height:1.75;word-break:keep-all;opacity:.88;}
.mcx .why .ob{position:absolute;z-index:-1;border-radius:50%;}
.mcx .why > div:nth-child(1){background:var(--blue);color:#fff;}
.mcx .why > div:nth-child(1) .ob{width:78%;aspect-ratio:1;right:-22%;bottom:-30%;background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.45),rgba(255,255,255,.05) 60%,transparent 72%);}
.mcx .why > div:nth-child(2){background:#16295c;color:#fff;}
.mcx .why > div:nth-child(2) .ob{width:70%;aspect-ratio:1;right:-18%;top:-24%;background:radial-gradient(circle at 50% 50%,rgba(93,139,255,.5),transparent 64%);}
.mcx .why > div:nth-child(3){background:#12a6bd;color:#04252a;}
.mcx .why > div:nth-child(3) .ob{width:74%;aspect-ratio:1;left:-20%;bottom:-28%;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.5),transparent 62%);}
.mcx .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:52px;border-bottom:1px solid var(--line);}
.mcx .tabs button{border:0;background:transparent;padding:6px 10px 20px;cursor:pointer;display:grid;justify-items:center;gap:12px;
  font:600 16px/1.3 var(--font);color:#8a92a3;position:relative;transition:color .2s;}
.mcx .tabs button .tico{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--tintB);color:var(--muted);transition:.22s;}
.mcx .tabs button .tico svg{width:24px;height:24px;}
.mcx .tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--blue);transform:scaleX(0);transition:transform .25s;}
.mcx .tabs button:hover{color:var(--body);}
.mcx .tabs button:hover .tico{background:var(--line);}
.mcx .tabs button[aria-selected="true"]{color:var(--ink);}
.mcx .tabs button[aria-selected="true"] .tico{background:var(--blue);color:#fff;}
.mcx .tabs button[aria-selected="true"]::after{transform:scaleX(1);}
.mcx .tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-4px;}
.mcx .pn[hidden]{display:none!important;}
.mcx .pn{margin-top:40px;border-radius:28px;background:var(--tintA);padding:clamp(34px,4vw,60px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;text-align:left;}
.mcx .pn .bd{display:inline-block;font-size:13px;font-weight:600;color:var(--blue);background:rgba(37,99,255,.1);border-radius:999px;padding:7px 13px;}
.mcx .pn h3{margin:18px 0 0;font-size:clamp(24px,2.6vw,36px);font-weight:600;color:var(--ink);letter-spacing:-.4px;word-break:keep-all;}
.mcx .pn p{margin:14px 0 0;font-size:16px;line-height:1.7;color:var(--body);word-break:keep-all;}
.mcx .pn .fig{display:grid;gap:14px;}
.mcx .pn .fig .h{font-size:13px;font-weight:600;color:var(--muted);display:flex;gap:8px;align-items:center;}
.mcx .pn .fig .h em{font-style:normal;font-size:12px;color:var(--blue);background:rgba(37,99,255,.1);border-radius:14px;padding:3px 6px;}
.mcx .pn .fig .rows{display:grid;gap:10px;}
.mcx .pn .fig .r{background:#fff;border-radius:28px;padding:20px 26px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.mcx .pn .fig .r span{font-size:14px;color:var(--body);}
.mcx .pn .fig .r b{font-size:clamp(28px,3vw,42px);font-weight:700;color:var(--ink);letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1;}
.mcx .pn .fig .r:last-of-type{background:var(--blue);}
.mcx .pn .fig .r:last-of-type span{color:rgba(255,255,255,.8);}
.mcx .pn .fig .r:last-of-type b{color:#fff;}
.mcx .svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;text-align:left;
  background:var(--tintB);border-radius:28px;overflow:hidden;}
.mcx .svc div{padding:clamp(30px,3.2vw,42px) clamp(24px,2.6vw,36px);display:grid;gap:12px;align-content:start;border-left:1px solid var(--line);}
.mcx .svc div:first-child{border-left:0;}
.mcx .svc .ico{width:34px;height:34px;color:var(--blue);}
.mcx .svc .ico svg{width:100%;height:100%;display:block;}
.mcx .svc h3{margin:0;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.3px;}
.mcx .svc p{margin:0;font-size:15px;line-height:1.7;color:var(--body);word-break:keep-all;}
.mcx .svc p span{display:block;margin-top:10px;font-size:13px;color:var(--muted);}
.mcx .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(48px,6vh,80px);text-align:left;}
.mcx .strip a{position:relative;border-radius:28px;padding:34px 32px 30px;min-height:172px;display:grid;align-content:start;gap:10px;text-decoration:none;transition:transform .25s,box-shadow .25s;}
.mcx .strip a:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(16,24,48,.34);}
.mcx .strip a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.mcx .strip .k{font-size:13px;font-weight:600;opacity:.82;}
.mcx .strip b{font-size:20px;font-weight:600;line-height:1.45;letter-spacing:-.3px;word-break:keep-all;}
.mcx .strip .c1{background:#191f2b;color:#fff;}
.mcx .strip .c1 .k{color:#a9b1c0;}
.mcx .strip .c2{background:#4a5262;color:#fff;}
.mcx .strip .c2 .k{color:#c6ccd8;}
.mcx .strip .c3{background:#fff;border:1px solid var(--line);color:var(--ink);}
.mcx .strip .c3 .k{color:var(--muted);}
.mcx .strip .ar{position:absolute;right:28px;top:30px;width:18px;height:18px;opacity:.8;}
.mcx .boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px;text-align:left;}
.mcx .boards > div{border-radius:28px;background:var(--tintB);padding:36px 34px 28px;}
.mcx .boards h3{margin:0 0 8px;font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.3px;}
.mcx .boards ul{list-style:none;margin:0;padding:0;}
.mcx .boards li{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid #e2e6ee;font-size:15px;color:var(--ink);}
.mcx .boards li:first-child{border-top:0;}
.mcx .boards li b{font-weight:400;word-break:keep-all;}
.mcx .boards li time{color:var(--muted);font-size:13px;white-space:nowrap;}
.mcx .contact{position:relative;overflow:hidden;background:#0a0d14;padding-block:clamp(120px,20vh,250px);isolation:isolate;text-align:center;}
.mcx .contact::before{content:"";position:absolute;inset:-20%;z-index:-2;
  background:
    radial-gradient(52% 58% at 18% 72%, #16c8e0 0%, rgba(22,200,224,0) 62%),
    radial-gradient(48% 52% at 44% 46%, #2563ff 0%, rgba(37,99,255,0) 64%),
    radial-gradient(46% 56% at 78% 26%, #8b3ce8 0%, rgba(139,60,232,0) 62%),
    radial-gradient(40% 44% at 92% 84%, #4a20a8 0%, rgba(74,32,168,0) 66%),
    #0a0d14;
  filter:saturate(1.08);}
.mcx .contact::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");}
.mcx .contact .lab{color:rgba(255,255,255,.8);}
.mcx .contact h2{margin:14px 0 0;font-size:clamp(28px,3.6vw,50px);font-weight:600;color:#fff;letter-spacing:-.3px;word-break:keep-all;}
/* ── 네 단계 — 진행 레일 ─────────────────────────────────────
   이 넷은 순서대로 일어난다. 그런데 세로로 네 줄 쌓아 두니 순서가
   보이지 않고 FAQ 목록처럼 읽혔다(게다가 오른쪽 화살표가 눌릴 것처럼
   보였는데 눌리는 곳이 아니었다 — 그 단추는 걷었다).
   가로 한 줄에 놓고 위로 선을 그어 진행 방향 자체를 보이게 한다.
   솔트룩스가 사업 소개 아래 깔아 둔 진행 레일과 같은 결. */
.mcx .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:clamp(40px,6vh,68px);text-align:left;}
.mcx .step{position:relative;display:block;padding:30px clamp(16px,2vw,30px) 4px 0;}
.mcx .step + .step{padding-left:clamp(16px,2vw,30px);}
/* 레일 — 칸마다 한 조각씩, 서로 맞닿아 한 줄이 된다 */
.mcx .step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--line);transition:background .22s;}
/* 각 단계의 시작점 */
.mcx .step::after{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;
  border-radius:50%;background:#c8cfdb;transition:background .22s,transform .22s;}
.mcx .step:hover::before{background:var(--ink);}
.mcx .step:hover::after{background:var(--ink);transform:scale(1.25);}
.mcx .step .no{display:block;margin-bottom:14px;font-size:13px;font-weight:700;
  color:var(--muted);letter-spacing:.08em;font-variant-numeric:tabular-nums;transition:color .22s;}
.mcx .step:hover .no{color:var(--ink);}
.mcx .step h3{margin:0;font-size:clamp(17px,1.4vw,20px);font-weight:600;color:var(--ink);
  letter-spacing:-.3px;line-height:1.45;word-break:keep-all;}
.mcx .step p{margin:10px 0 0;font-size:14px;line-height:1.75;color:var(--body);word-break:keep-all;}
.mcx .step .k{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.mcx .step .k span{font-size:12px;font-weight:600;color:var(--body);border:1px solid var(--line);
  border-radius:999px;padding:6px 11px;background:#fff;}
@media (max-width:1000px){
  .mcx .sols{grid-template-columns:1fr;}
  .mcx .card.sm, .mcx .card.wide{grid-column:auto;min-height:0;grid-template-columns:1fr;}
  .mcx .card.wide .ico{grid-row:auto;}
  .mcx .card.wide h3, .mcx .card.wide p, .mcx .card.wide .go{grid-column:auto;}
  .mcx .why{grid-template-columns:1fr;gap:14px;}
  .mcx .why > div{min-height:0;padding:30px 26px 28px;}
  .mcx .tabs{grid-template-columns:1fr 1fr;}
  .mcx .nums, .mcx .nums[style]{grid-template-columns:1fr!important;gap:14px;}
  .mcx .nums > div, .mcx .nums > div[style]{grid-column:auto!important;grid-row:auto!important;min-height:0;padding:28px 26px 26px;}
  .mcx .nums .n1 b{font-size:clamp(56px,16vw,88px);}
  .mcx .pn{grid-template-columns:1fr;}
  .mcx .svc{grid-template-columns:1fr;}
  .mcx .boards{grid-template-columns:1fr;}
  .mcx .steps{grid-template-columns:1fr 1fr;row-gap:30px;}
  .mcx .step{padding:26px clamp(14px,3vw,22px) 4px 0;}
  .mcx .step + .step{padding-left:0;}
  .mcx .steps .step:nth-child(2n){padding-left:clamp(14px,3vw,22px);padding-right:0;}
  .mcx .pcbr{display:none;}
}
@media (max-width:520px){
  .mcx .marq li{width:172px;}
}
@media (prefers-reduced-motion:reduce){
  .mcx .marq ul{animation:none;}
  .mcx .card:hover{transform:none;}
}

/* ── 게시판 — NoticeListMain 뷰컴포넌트 마크업에 맞춘다 ─────────────────── */
.mcx .boards .board-box{border-radius:28px;background:var(--tintB);padding:34px 32px 26px;}
.mcx .board-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid #e2e6ee;}
.mcx .board-header h4{margin:0;font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.3px;}
.mcx .board-header a{font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;}
.mcx .board-header a:hover{color:var(--ink);}
.mcx .board-list{list-style:none;margin:0;padding:0;}
.mcx .board-list li + li{border-top:1px solid #e2e6ee;}
.mcx .board-list li a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;text-decoration:none;min-width:0;}
.mcx .board-list .notice-title{flex:1 1 auto;min-width:0;font-size:15px;font-weight:400;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcx .board-list li a:hover .notice-title{color:var(--blue);}
.mcx .board-list .notice-date{flex:none;font-size:13px;color:var(--muted);white-space:nowrap;}
@media (max-width:1000px){
  .mcx .boards .board-box{padding:28px 22px 20px;}
  .mcx .board-header h4{font-size:19px;}
}

/* ── 떠다니는 검색 + 14일 무료 — 위치·동작은 현행, 생김새만 새로 ───────────── */
.search-wrapper{gap:0;}
.floating-micro-banner{
  background:#fff;border-radius:999px;padding:7px 18px 7px 7px;gap:10px;margin-bottom:10px;
  font-size:14px;font-weight:600;color:#16295c;animation:none;
  box-shadow:0 10px 30px -10px rgba(16,24,48,.28),inset 0 0 0 1px rgba(16,24,48,.08);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s;}
.floating-micro-banner:hover{transform:translateY(-2px);background:#fff;
  box-shadow:0 16px 38px -12px rgba(16,24,48,.34),inset 0 0 0 1px rgba(37,99,255,.3);}
.floating-micro-banner .badge-free{background:#2563ff;color:#fff;border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:700;box-shadow:none;}
.floating-micro-banner .sparkle-icon{animation:none;}
.floating-micro-banner .banner-text{color:#16295c;}
.floating-micro-banner .arrow-icon{stroke:#16295c;opacity:.55;}
.floating-micro-banner:hover .arrow-icon{opacity:1;stroke:#16295c;}
.glass-panel{background:#fff;border:0;border-radius:999px;padding:8px;max-width:620px;
  backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;
  box-shadow:0 22px 54px -16px rgba(16,24,48,.34),inset 0 0 0 1px rgba(16,24,48,.1);}
.glass-panel:focus-within{box-shadow:0 22px 54px -16px rgba(16,24,48,.34),inset 0 0 0 2px #2563ff;}
.search-container{height:50px;padding:0 0 0 14px;background:transparent;}
.search-input{font-size:16px;font-weight:400;color:#16295c;}
.search-input::placeholder{color:#98a1b3;font-weight:400;}
.btn-search{background:#111;border-radius:999px;height:50px;padding:0 30px;
  font-size:15px;font-weight:700;box-shadow:none;}
.btn-search:hover{background:#2563ff;transform:none;box-shadow:none;}
.search-wrapper.is-focused .glass-panel{max-width:680px;border-radius:28px;padding:20px;
  box-shadow:0 30px 60px -18px rgba(16,24,48,.4),inset 0 0 0 1px rgba(16,24,48,.1);}
.search-wrapper.is-focused .search-container{background:#f5f6f8;border-radius:999px;}
@media (max-width:768px){
  .search-container{height:46px;} .btn-search{height:46px;padding:0 18px;font-size:14px;}
  .search-input{font-size:15px;}
  /* 배너는 터치 높이(min-height 44) 때문에 키가 커지는데 '14일 무료' 칩은 26 그대로라
     칩 둘레 여백이 위아래 9 · 왼쪽 5 로 달라 두 알약의 곡선 중심이 어긋났다.
     왼쪽도 9 로 맞춰 바깥 반지름 22 = 칩 13 + 여백 9 로 동심을 만든다(PC 는 20 = 13 + 7). */
  .floating-micro-banner{font-size:13px;padding:5px 13px 5px 9px;}
}
@media (prefers-reduced-motion:reduce){
  .floating-micro-banner,.glass-panel,.sparkle-icon{animation:none!important;}
}

/* 색 있는 바탕 위의 제목은 전역 h1~h6 색을 받지 않도록 못 박는다 */
.mcx .media h2, .mcx .contact h2, .mcx .why h3, .mcx .card h3, .mcx .step h3, .mcx .svc h3, .mcx h2.t{color:inherit;}
.mcx .media h2, .mcx .contact h2{color:#fff;}
.mcx h2.t, .mcx .card h3, .mcx .step h3, .mcx .svc h3{color:var(--ink);}

/* ── 버튼 색 체계 ────────────────────────────────────────────────────────
   누르면 움직이는 것(버튼·링크)은 무채색, 파랑은 '상태·강조' 에만 쓴다.
     주 행동  : 검정 솔리드 #111            (헤더 CTA, 검색 '분석', Contact 주 버튼)
     보조 행동: 흰 바탕 + 잉크 테두리 #191f2b (절 하단 알약, 카드 '자세히 보기')
     파랑     : 플랜 탭 활성(상태), 14일 무료 칩, 문장 강조, 링크 호버
   섞여 있던 파랑 원형 화살표를 잉크색으로 내린다. */
.mcx .card .go i{background:var(--ink);}
.mcx .card:hover .go i{background:#000;}
.mcx .pill.line .cir{background:var(--ink);}
.mcx .pill.line:hover .cir{background:#fff;color:var(--ink);}

/* 검색창 키워드 칩 — 옛 팔레트(#3b48cc)가 남아 있었다. 리뉴얼 파랑으로 통일 */
.keyword-tag{
    background: rgba(37,99,255,.07);
    border-color: rgba(37,99,255,.18);
    color: #2563ff;
}

    .keyword-tag:hover {
        background: rgba(37,99,255,.13);
        border-color: rgba(37,99,255,.32);
        box-shadow: 0 4px 12px rgba(37,99,255,.18);
    }

/* 아주 좁은 화면에서는 레일을 한 줄씩 세로로 */
@media (max-width:640px){
  .mcx .steps{grid-template-columns:1fr;row-gap:26px;}
  .mcx .steps .step, .mcx .steps .step:nth-child(2n){padding:24px 0 4px;}
}

/* 띠가 제 절의 첫 자식이 되면서 절 안쪽 여백과 margin 이 겹친다 */
.mcx .sec > .in > .strip:first-child{margin-top:0;}

/* ── Contact 와 푸터 사이의 흰 띠 걷기 ─────────────────────────
   .footer-spacer(50px 흰색)와 #footer 위 밝은 실선은 푸터가 흰 바탕이던
   시절의 것이다. 지금은 Contact(#0a0d14) 아래 푸터(#12151c)가 바로 붙어야
   한 덩어리로 읽힌다. 둘 다 메인에서만 쓰는 규칙이라 여기서 끈다. */
.footer-spacer{display:none;}
#footer{border-top:0;}

/* ── Contact — 바탕도 가운데 정렬도 그대로, 부품만 ─────────────
   레퍼런스(솔트룩스)와 겹친 마감이라 한번 왼쪽/오른쪽 두 칸으로 갈라 봤는데
   이 절은 가운데로 모이는 편이 맞았다(닫는 자리라 시선이 한 점으로 와야 한다).
   대칭은 되돌리고, 남의 화면과 갈리는 지점만 남긴다:
     · 주 버튼을 이 페이지가 이미 쓰는 .pill.line(흰 알약 + 잉크 원)으로.
       인라인 화살표가 붙은 흰 알약은 저쪽 부품이었다.
     · 세로 여백 250px → 180px. 한 장짜리 닫는 슬라이드 느낌을 덜어낸다. */
.mcx .contact{padding-block:clamp(92px,15vh,180px);}
.mcx .contact .lab{display:block;color:rgba(255,255,255,.72);}
.mcx .contact h2{margin:12px 0 0;line-height:1.3;}
.mcx .contact .btnrow{gap:12px;margin-top:38px;}
.mcx .contact .pill.line{background:#fff;border-color:#fff;color:var(--ink);}
.mcx .contact .pill.line:hover{background:#fff;color:var(--ink);transform:translateY(-2px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);}
.mcx .contact .pill.line .cir{background:var(--ink);color:#fff;}
.mcx .contact .pill.line:hover .cir{background:var(--ink);color:#fff;transform:translateX(3px);}
.mcx .contact .pill.ghost{border:1px solid rgba(255,255,255,.45);color:#fff;}
.mcx .contact .pill.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}


/* ══ 시각 리뷰 반영 (2026-09-22) ══════════════════════════════
   페이지가 '둥근 카드 + 흐린 원 장식' 한 모양의 반복이었다. 세 가지를 걷는다. */

/* 1) 흐린 원 장식은 279억 카드 하나에만.
   아홉 장에 같은 장식이 붙어 있었다(지표 3 · 차별점1 지표 3 · 기술/노하우/진심 3).
   한 번이면 포인트, 아홉 번이면 벽지다. 페이지에서 가장 자주 반복되는 시각
   요소가 뜻 없는 장식이면 안 된다. 가장 큰 숫자 하나만 남기고 걷는다.
   → 2026-09-28 첫 절 세 장은 마크업에서 원을 아예 걷고 번호로 바꿨다(파일 끝 1차 블록). */
.mcx .nums .n2 .ob, .mcx .nums .n3 .ob, .mcx .nums .n4 .ob{display:none;}
/* 기술·노하우·진심의 원 장식은 되살린다. '아홉 개는 벽지' 는 페이지 전체를 두고
   한 말이었고, 이 세 장에서는 색 채움과 한 벌이라 성격이 다르다 — 색만 있고
   빛이 없으니 납작했다. 결과: 색을 채운 카드 넷(279억 + 셋)에만 빛이 있다. */

/* 2) 기술 · 노하우 · 진심 — 삼색을 되살린다.
   '청록이 페이지에 친척이 없다' 며 잉크 하나로 눌렀는데, 틀렸다. 오로라
   (선언 띠 · Contact)에 청록이 들어 있다 — 세 장은 오로라 팔레트를 받고 있었다.
   잉크 셋으로 만들자 페이지 중간이 밋밋해졌다. 파랑 / 남색 / 청록으로 돌린다.
   흐린 원 장식은 걷은 채로 두고, 그 자리를 영문 워터마크가 맡는다. */
.mcx .why > div{min-height:0;padding:30px 34px 36px;gap:10px;border:0;}
.mcx .why .en{position:static;display:block;margin:0 0 -6px -2px;
  font-size:clamp(38px,3.9vw,54px);font-weight:700;letter-spacing:-.04em;line-height:1;
  opacity:1;pointer-events:none;user-select:none;}
.mcx .why h3{margin:0 0 4px;font-size:clamp(28px,2.6vw,36px);color:inherit;}
.mcx .why p{opacity:.88;}
.mcx .why > div:nth-child(1){background:var(--blue);color:#fff;}
.mcx .why > div:nth-child(2){background:#16295c;color:#fff;}
.mcx .why > div:nth-child(3){background:#12a6bd;color:#04252a;}
.mcx .why > div:nth-child(1) .en, .mcx .why > div:nth-child(2) .en{color:rgba(255,255,255,.14);}
.mcx .why > div:nth-child(3) .en{color:rgba(4,37,42,.12);}

/* 3) "광고는 대행이 아니라 운영입니다" — 오로라를 되살리고 높이만 줄인다.
   640px 오로라 위에 글 세 줄이라 빈 무대였던 건 맞다. 그런데 잉크 단색으로
   바꾸자 페이지에서 가장 살아 있던 절이 죽었다. 문제는 조명이 아니라 무대 크기.
   오로라는 그대로 두고 절을 절반 남짓으로 접는다. Contact 의 오로라와 겹치는
   건, 페이지의 양 끝을 같은 빛으로 여는/닫는 수미상관으로 읽힌다. */
.mcx .media{min-height:clamp(300px,32vw,420px);}
.mcx .media .cap{padding:clamp(48px,6vw,72px) clamp(24px,5vw,72px);}
.mcx .media h2{font-size:clamp(28px,3.8vw,52px);}
.mcx .media p{margin-top:18px;font-size:clamp(14px,1.2vw,17px);}

/* 4) 절 머리 왼쪽 정렬 — 시도했다가 되돌렸다.
   '여덟 절 연속 가운데'의 단조로움을 깨려고 네 단계 레일과 플랜 탭 두 절의
   머리를 왼쪽으로 옮겼는데, 눈으로 보니 가운데가 나았다. 이 페이지는 절마다
   내용 폭이 제각각(카드 2열·4열·탭·표)이라 머리까지 왼쪽으로 가면 기준선이
   하나 더 생겨 오히려 산만해진다. 가운데 정렬이 그 편차를 덮어 주고 있었다. */

/* 6) 첫 절 제목 — 하나는 크게 말해야 한다.
   "광고비는 지금 어디에 쓰이고 있나요?" 는 페이지의 논지인데 다른 절 제목과 같은
   크기(46px)였다. 페이지에서 가장 큰 글자가 '279' 라는 숫자였다.
   논지를 한 단 키우고 그 아래 두 문장도 조금 키워 첫 화면의 위계를 세운다. */
.mcx .sec:first-child h2.t{font-size:clamp(34px,4.6vw,64px);line-height:1.18;letter-spacing:-.6px;}
/* 6-b) 첫 절 두 문장. 논지의 절반을 이 둘이 말하는데 22 / 16px 이라
   64px 제목 아래에서 각주처럼 읽혔다. 게다가 둘 다 같은 회색 600 이라
   앞뒤 관계도 없이 한 덩어리 회색으로 보였다.
   앞 문장은 문제 진술이므로 최대 34px 까지 올리고, 답에 해당하는 절만
   잉크 700 으로 떼어 낸다. 뒤 문장은 크기를 더 내리는 대신 굵기만
   한 단 낮춰 받침으로 둔다. 색을 더 밝히면 대비가 4.19:1 밑으로 내려간다.
   34px / 600 은 large text 라 3:1 기준을 넉넉히 넘는다. */
.mcx .sec:first-child p.st{margin-top:clamp(24px,2.4vw,34px);max-width:min(100%,34ch);
  font-size:clamp(20px,2.4vw,34px);font-weight:600;line-height:1.42;letter-spacing:-.02em;}
.mcx .sec:first-child p.st em{font-weight:700;}
.mcx .sec:first-child p.sst{margin-top:clamp(18px,1.8vw,26px);max-width:min(100%,40ch);
  font-size:clamp(15px,1.45vw,19px);font-weight:500;line-height:1.62;}

/* 7) 지마켓 광고관리 카드 — 가로형 유지.
   '혼자 다르니 넷과 같게' 로 세로 짜임으로 바꿔 봤는데, 카드가 두 칸 폭(1200px)
   이라 글이 62ch 에서 끝나고 오른쪽 절반이 비었다. 혼자 가로였던 건 변덕이 아니라
   '폭이 넓어서' 였다. 원래 짜임으로 되돌린다. */


/* ══ 작은 글자 층 정리 (2026-09-22 타이포 검수) ═══════════════
   위계·굵기는 맞았다(논지 64 > 절 제목 46 > 카드 제목 26 > 본문 15,
   숫자 700 / 제목 600 / 부제 500 / 본문 400). 어긋난 건 작은 글자 층이었다. */

/* 1) 소제목 — 19 · 20 · 26 세 크기가 7px 안에 몰려 있었다.
   서비스 3칸 제목(19)은 바로 아래 본문(15)과 4px 차이라 제목으로 서지 않았다.
   네 단계 제목과 같은 20 으로. */
.mcx .svc h3{font-size:20px;}

/* 2) 600 굵기 라벨이 12·13·14·15·16 다섯 크기였다. 둘로 모은다 —
   칩·배지·라벨 13 / 버튼·탭 15. */
.mcx .tabs button{font-size:15px;}
.mcx .card .go{font-size:15px;}
.mcx .card h3 em{font-size:13px;padding:5px 10px;}

/* 3) 36px 제목 둘 중 기술·노하우·진심만 700 이었다. 영문 워터마크가 이미
   힘을 주고 있어 굵기까지 필요 없다. 페이지 규칙(제목은 600)으로. */
.mcx .why h3{font-weight:600;}

/* 남은 12px 둘 — 네 단계 키워드 칩(.k span, 레일 개편 때 12로 둔 것)과
   집행 예시의 '예시' 배지(.h em). 칩·배지는 13 하나로. */
.mcx .step .k span{font-size:13px;}
.mcx .pn .h em{font-size:13px;}

/* 플랜 매체 구성 — 원문에 있던 한 줄(검색광고 + 쇼핑광고 소형 패키지 등)을
   플랜 패널을 다시 짤 때 빠뜨렸다. 장식이 아니라 '이 플랜은 어떤 매체를 쓴다'는
   정보라 되살린다. 제목 아래, 설명 위. 앞에 점 하나로 원문의 hl-dot 을 잇는다. */
.mcx .pn .mix{display:flex;align-items:center;gap:8px;margin:12px 0 -4px;font-size:15px;font-weight:600;color:var(--blue);}
.mcx .pn .mix::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;}


/* ══ KPI 달성을 위한 운영 전략 — 절을 구역으로 세운다 ═══════════
   실측 진단
     · 페이지에서 유일하게 면이 없는 절이었다 (위 플랜 #eef4fb / 아래 기술 #2563ff
       사이에서 혼자 투명) — 빠진 자리처럼 보였다
     · 레일 선 2px #e8ecf3 은 흰 바탕과 대비 1.05:1 로 거의 안 보였다
     · 번호 01~04 가 13px #8a92a3 로 칩보다 존재감이 없었다 (순서가 핵심인 절인데)
     · 머리 137px + 여백 54px 이 내용(217px)보다 무거웠다
   카드를 늘리지 않고 면만 줘서 구역으로 만든다. */
.mcx .sec:has(.steps){position:relative;padding-block:clamp(72px,9vh,110px);}
.mcx .sec:has(.steps)::before{content:"";position:absolute;inset:0;z-index:0;
  left:50%;width:100vw;margin-left:-50vw;background:#f7f8f9;}
.mcx .sec:has(.steps) > *{position:relative;z-index:1;}

/* 레일 — 보이게.
   조각 사이 틈은 실측해 보니 0 이었다(칸이 정확히 맞닿는다). 끊겨 보인 건
   점에 두른 4px 면색 링이 선을 갉아먹고 있었기 때문. 링을 걷으면 한 줄로 이어진다. */
.mcx .steps{margin-top:clamp(34px,4.4vh,46px);}
.mcx .step::before{height:2px;background:#d7dce6;}
.mcx .step::after{width:10px;height:10px;top:-4px;background:var(--blue);box-shadow:none;}
.mcx .step:hover::before{background:var(--blue);}
.mcx .step:hover::after{background:var(--blue);transform:scale(1.2);}

/* 번호 — 순서가 먼저 읽히도록 */
.mcx .step .no{margin-bottom:10px;font-size:24px;font-weight:700;
  color:var(--blue);letter-spacing:-.02em;}
.mcx .step:hover .no{color:var(--ink);}

/* 칩은 면 위에 떠야 하므로 흰 바탕 유지 (이미 #fff), 테두리만 한 단 진하게 */
.mcx .step .k span{border-color:#dfe4ec;}


/* ══ 떠다니는 검색 — 청록 점멸 끄기 ═══════════════════════════
   Index.css 가 3초 주기로 청록(rgba(38,208,206))을 켰다 껐다 한다.
     .glass-panel        searchPanelGlow   테두리·글로우가 남보라 -> 청록
     .floating-micro-banner  breathingGlow  그림자가 남보라 -> 청록
   가만히 있는 화면에서 무언가 계속 번쩍이면 읽기를 방해하고,
   청록은 이 검색창 팔레트(흰 알약 + 잉크 버튼)에 없는 색이다.
   애니메이션을 끄고 마지막 상태 대신 차분한 정지값을 준다.

   주의 — 청록 점멸은 두 벌이었다.
   위 둘은 여기서 animation:none 으로 덮으면 꺼지지만, 8초마다 JS 가
   .glass-panel 에 .is-attention 을 붙여 돌리던 searchPulseAttention 은
   선택자가 한 수 높은 데다 !important 까지 붙어 있어 덮이지 않았다.
   그래서 그쪽은 Index.cshtml 의 타이머와 Index.css 의 keyframes 를
   함께 지웠다. 여기서 안 꺼진다고 이 블록을 의심하지 말 것. */
.search-wrapper .glass-panel{
  animation:none;
  border-color:rgba(16,24,48,.10);
  box-shadow:0 22px 54px -16px rgba(16,24,48,.34),inset 0 0 0 1px rgba(16,24,48,.1);
}
.search-wrapper .floating-micro-banner{
  animation:none;
  box-shadow:0 10px 30px -10px rgba(16,24,48,.28),inset 0 0 0 1px rgba(16,24,48,.08);
}


/* ══ 필요한 것부터 고르세요 — 전폭 파랑 띠 ═══════════════════════
   처음엔 연파랑 판에 카드 셋을 담았는데 '상자 안 상자' 라 강조가 아니라
   여백으로 읽혔다. 담는 그릇을 더해서는 특별해지지 않는다.

   이 페이지에 없던 것을 쓴다 — 화면 끝까지 가는 진한 채색 띠.
   파랑은 여태 작은 카드와 포인트에만 쓰였고 전폭 채색은 한 번도 없었다.
   (잉크 띠는 ②, 오로라는 Contact 가 쓰므로 겹치지 않는다)
   띠 자체가 그릇이 되므로 안쪽 판은 없앤다. */
.mcx .sec:has(.pick){padding-block:0;}
/* 이 절은 페이지에서 유일하게 '지금 고르세요' 를 말하는 자리인데
   높이가 390px 로 가장 짧아 스쳐 지나갔다. 색이 가장 센 절이 가장
   작게 지나가면 강조가 아니라 사고에 가깝다. 위아래를 크게 벌리고
   제목도 한 단 올려 멈춰 서는 자리로 만든다. */
.mcx .pick{position:relative;isolation:isolate;
  padding:clamp(88px,9.5vw,148px) 0 clamp(84px,9vw,140px);text-align:center;}
/* 띠 색 — 그라데이션을 걷고 한 단 깊은 파랑으로.
   1) radial-gradient 는 화면에 없었다. 시작색 #3a74ff(58,116,255)와
      바탕 var(--blue) #2563ff(37,99,255)의 차이가 (21,17,0) 이라
      단색과 구분되지 않는다. 코드에만 있는 장식이라 지운다.
   2) 바탕이 바로 위 '기술과 사람' 절의 첫 카드와 같은 값(#2563ff)이었다.
      연달아 오는 두 절이 같은 파랑을 쓰면 '이 절만 특별하다' 는 신호가
      서지 않는다. 한 단 깊은 #1e4fd8 로 내려 위 절과 갈라 놓는다
      (위 카드와 1.36:1 로 벌어진다).
   덤으로 흰 제목 대비가 4.88 -> 6.63:1 로 올라간다. */
.mcx .pick::before{content:"";position:absolute;inset:0;z-index:-1;
  left:50%;width:100vw;margin-left:-50vw;background:#1e4fd8;}
.mcx .pick h2.t{color:#fff;font-size:clamp(30px,3.6vw,50px);margin:0 0 clamp(40px,4.4vw,58px);}

/* 카드 — 파랑 위에서는 흰 카드 하나가 주인공, 나머지 둘은 유리판 */
.mcx .pick .strip{margin-top:0;}
/* 카드도 함께 키운다. 절만 늘리면 가운데가 비어 허전해진다 */
.mcx .pick .strip a{border-radius:22px;min-height:clamp(150px,13vw,186px);
  padding:clamp(28px,2.6vw,36px) clamp(28px,2.4vw,34px) clamp(26px,2.4vw,32px);}
.mcx .pick .strip .c1{background:#fff;color:var(--ink);box-shadow:0 18px 40px -20px rgba(6,20,64,.5);}
.mcx .pick .strip .c1 .k{color:var(--blue);}
/* 보조 카드 — 흰 반투명에서 어두운 파랑으로.
   실측(띠 rgb(37,99,255) 위, 흰색 12% 일 때)
     카드 면이 띠와 1.22:1  -> 카드가 카드로 안 보이고 얼룩처럼 얹혔다
     라벨(흰 72%) 2.83:1    -> 상담 라벨(4.88:1)의 절반, 거의 장식
   면과 글자를 둘 다 흰색으로 만들고 있어 면을 진하게 할수록 그 위 흰
   글자가 같이 죽는다 — 20% 로 올리면 라벨이 2.56 으로 더 나빠진다.
   흰색을 쓰는 한 빠져나올 수 없는 구조였다.

   그래서 띄우는 대신 가라앉힌다. 어두운 덮개는 둘이 같이 올라간다.
     띠와 1.22 -> 1.42:1 · 흰 본문 4.01 -> 6.92:1 · 라벨 2.83 -> 5.20:1
   흰 카드(상담) 하나만 떠오르는 위계도 더 분명해진다.
   테두리는 흰 28% 가 어두운 면에서 과해 14% 로 낮춘다 — 가라앉은 면의
   위쪽 모서리만 살짝 빛나는 정도면 된다. */
.mcx .pick .strip .c2,
/* 띠를 #1e4fd8 로 내리면 같은 28% 덮개로는 카드 분리가 1.42 -> 1.31 로
   되레 나빠진다(덮개가 어두운 띠에 가까워져서). 40% 로 올리면
   띠와 1.48 · 흰 본문 9.82 · 라벨 7.12 로 셋 다 이전보다 낫다. */
.mcx .pick .strip .c3{background:rgba(11,24,80,.4);color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:none;}
.mcx .pick .strip .c2 .k,
.mcx .pick .strip .c3 .k{color:rgba(255,255,255,.82);}
.mcx .pick .strip a:hover{transform:translateY(-4px);}
.mcx .pick .strip .c2:hover,
.mcx .pick .strip .c3:hover{background:rgba(11,24,80,.52);border-color:rgba(255,255,255,.22);}

@media (max-width:1000px){
  .mcx .pick{padding:44px 0 40px;}
  .mcx .pick h2.t{margin-bottom:24px;}
  /* .strip 은 여태 반응형 규칙이 없어 좁은 화면에서도 3열을 버텼다.
     390 에서 칸이 100px 남짓이 되어 글이 한 글자씩 끊기고 화살표가
     라벨 위로 올라탔다. 한 열로 쌓는다. */
  .mcx .strip{grid-template-columns:1fr;gap:12px;}
  .mcx .strip a{min-height:0;padding:22px 24px 20px;}
  .mcx .strip .ar{right:22px;top:24px;}
  .mcx .strip b{font-size:18px;}
}

/* ══ 게시판 높이 ══════════════════════════════════════════════
   줄 하나가 86px 였다. 패딩이 두 겹이었기 때문 —
     li  padding 16px 0   (레거시 bundle.css)
     a   padding 15px 0   (여기서 터치 영역 주며 추가)
     글자 23px  →  16+15+23+15+16 = 85
   li 쪽을 걷고 a 하나가 높이를 정하게 한다. 터치 영역은 44px 을 지킨다
   (12+23+12 = 47). 다섯 줄이면 상자마다 약 150px 이 준다. */
.mcx .board-list li{padding:0;}
.mcx .board-list li a{padding:12px 0;}
.mcx .boards .board-box{padding:28px 30px 20px;}
.mcx .board-header{padding-bottom:12px;}
.mcx .board-header h4{font-size:19px;}

/* ══ 절 제목 굵기 ═════════════════════════════════════════════
   600 은 Pretendard 에서 또렷하지만 큰 글자에서는 살짝 무릅니다.
   제목 계열만 700 으로 올린다 (부제 500 · 본문 400 은 그대로 — 굵기가
   역할을 나누는 체계는 유지). */
.mcx h2.t, .mcx .media h2, .mcx .contact h2{font-weight:700;}
.mcx .card h3, .mcx .step h3, .mcx .svc h3, .mcx .pn h3{font-weight:700;}


/* ══ 색 정리 (2026-09-22) ══════════════════════════════════════
   같은 역할에 값이 둘씩 있던 것을 하나로. 눈에 띄는 변화는 없고 정합성만 오른다.
     남색  #0e1b3d(노하우 카드) → #16295c  (1,000+ 카드와 같은 값)
     청록  #12b3c4(진심 카드)   → #12a6bd  (선언 띠·Contact 오로라 안의 청록)
   '진심 카드의 청록은 오로라에서 왔다' 고 말해 놓고 값이 달랐다. 이제 맞다.

   파랑은 두 값(#2563ff / tokens 의 --mc-blue #2b5bff)이 있지만, 히어로 아래에
   실제로 칠해지는 건 #2563ff 하나뿐이라(전수 실측) 보이는 충돌이 없다.
   억지로 맞추면 큰 파랑 띠가 옅어지므로 그대로 둔다.

   ── 글자 색 ──
   부제는 굵기를 같게(500) 두고 색 하나로만 강약을 만드는데, 두 색의 대비가
   3.0:1 뿐이라 신호가 약했다(약 #61697c 5.5:1 / 강 #191f2b 16.5:1).
   약한 쪽을 내려 강약을 넓힌다. 다만 실측으로 고른다 —
   손으로 계산한 #79808f 는 흰 바탕 대비 3.96:1 로 AA(4.5) 미달이었다.
     #61697c  5.50 / 3.00   지금
     #6e7688  4.56 / 3.62   ← AA 를 지키면서 내릴 수 있는 한계
     #71798b  4.37 / 3.78   AA 미달
   본문(.card p 등)은 읽는 글이라 그대로 두고 부제만 내린다 — 부제는 훑는 글이다. */
/* 부제 — 굵기를 올리고 회색을 한 단 밝힌다.
   굵기(500 -> 600)가 밝아진 만큼을 받쳐 준다 — 색만 밝히면 물러나 보이고,
   굵기만 올리면 본문처럼 무거워진다. 둘을 같이 움직여야 '약하지만 또렷한'
   부제가 된다.

   대비(실측): 흰 배경 4.56 -> 4.19:1, 강조(--ink #191f2b)와는 3.62 -> 3.94:1.
   약한 쪽이 물러나면서 강약 차이는 오히려 벌어진다.
   다만 4.19 는 WCAG AA 본문 기준(4.5:1) 아래다. 15px 인 .sst 와
   좁은 화면의 .st(clamp 최소 16px)가 여기 해당한다.
   기준을 지켜야 하면 #6e7688 로 되돌리면 된다 — 그 값이 4.56 으로 한계선이었다. */
.mcx p.st, .mcx p.sst{color:#747c8e;font-weight:600;}

/* ══ KPI 절 — 한 문장이 절을 가로지른다 ═══════════════════════════
   제목(34px) + 부제(19px) + 4열 카드라는 흔한 틀을 걷어내고, 문장 하나가
   절을 가로지르게 했다. 네 동사가 곧 네 단계라 제목이 목록을 겸한다.
   회색 본문 사이에서 동사만 잉크로 도드라지고, 마지막 '다시 조정합니다' 만
   파랑이라 순환의 시작점이 색으로 표시된다.

   아래 네 칸은 각주다. 굵은 선 하나로 문장과 갈라 놓으면 신문 편집의
   본문/각주 관계가 되어, 상자를 하나도 쓰지 않고 층이 생긴다.
   이 절이 가운데 정렬을 버린 유일한 절인 것도 의도다 — 배치만으로
   '여기는 성격이 다르다' 가 전달된다. */
.mcx h2.t.sentence{
  margin:34px 0 0;max-width:26ch;text-align:left;
  font-size:clamp(30px,3.9vw,58px);font-weight:800;line-height:1.3;
  letter-spacing:-.035em;color:#cdd5e6;word-break:keep-all;}
.mcx h2.t.sentence b{font-weight:800;color:var(--ink);}
.mcx h2.t.sentence i{font-style:normal;font-weight:800;color:var(--blue);}

/* 각주 — 문장과 굵은 선으로 가른다 */
.mcx .sec:has(.sentence) .steps{
  margin-top:clamp(44px,5vw,66px);padding-top:30px;
  border-top:2px solid var(--ink);}
.mcx .sec:has(.sentence) .step{padding-top:0;}
/* 레일(선·점)은 문장이 흐름을 말하므로 더는 필요 없다 */
.mcx .sec:has(.sentence) .step::before,
.mcx .sec:has(.sentence) .step::after{display:none;}
.mcx .sec:has(.sentence) .step .no{
  margin-bottom:8px;font-size:12px;font-weight:800;
  letter-spacing:.06em;color:var(--blue);}
.mcx .sec:has(.sentence) .step h3{font-size:16px;margin-bottom:8px;}
.mcx .sec:has(.sentence) .step p{font-size:14px;}

@media (max-width:760px){
  .mcx h2.t.sentence{max-width:none;}
  .mcx .sec:has(.sentence) .steps{padding-top:22px;}
}

/* ══ 2026-09-28 디자인 검수 — 세 군데 모양 어긋남 ══════════════════════

   1) 새 소식과 마케팅 팁 — 레거시(Index.css)가 남아 있었다.
      .board-list li { border-radius:16px; border-bottom:1px solid rgba(0,0,0,.04) }
      위에서 li 사이 선을 border-top 으로 새로 그었는데, 레거시 아래 선이 둥근
      모서리와 함께 남아 구분선 양 끝이 위로 휘어 보였다(PC·모바일 공통).
      호버 시 li 가 8px 옆으로 밀리고 옅은 면이 깔리는 것도 레거시다.
      좁은 화면에서는 .board-list a { margin:0 -8px } 가 살아 있어 글자가
      제목·구분선보다 8px 왼쪽에서 시작했다(390 실측 23 대 31). */
.mcx .board-list li{border-bottom:0;border-radius:0;transition:none;}
.mcx .board-list li:hover{background:none;transform:none;box-shadow:none;}
.mcx .board-list li a{margin:0;}
/* [더보기 +] 호버 — 레거시(Index.css)가 배경을 #111 로 칠하고 위 규칙이 글자를 잉크로
   바꿔 검정 위 검정이 되어 글자가 사라졌다. 이 파일의 버튼 색 체계대로 보조 행동은
   흰 바탕 + 잉크 테두리로 받는다. 레거시의 2px 들림도 다른 알약과 맞춰 뺀다. */
.mcx .board-header a:hover{background:#fff;color:var(--ink);transform:none;
  box-shadow:inset 0 0 0 1px var(--ink);}

/* 2) 지마켓 광고관리 가로 카드 — 아이콘이 세 줄(제목·설명·링크)을 걸친 칸의
      세로 가운데에 떠서 제목과 줄이 안 맞았다. 다른 카드는 아이콘이 제목 위다.
      가로형은 유지하고 아이콘만 제목 높이에 올린다.
      위로 붙여도 그대로였던 이유 — 레거시 bundle.css·css.css 의 .ico { min-height:90px }
      가 44px 아이콘 상자를 90px 로 늘리고, svg 가 그 가운데에 그려졌다.
   좁은 화면(1000 이하)은 카드가 세로형으로 접혀 다른 카드와 같은 90px 상자를
   써야 아이콘-제목 간격이 맞는다. 가로형일 때만 적용한다. */
@media (min-width:1001px){
  .mcx .card.wide{align-items:start;}
  .mcx .card.wide .ico{align-self:start;min-height:0;}
}

/* 3) 맞춤 플랜 탭 — 좁은 화면에서 4칸이 2x2 로 접히며 선택 밑줄이 1행과 2행
      사이에 떠 탭으로 읽히지 않았다. 밑줄 대신 칩으로 바꿔 선택 상태를 면으로
      보인다. 아이콘은 글자 왼쪽에 눕혀 칩 높이를 줄인다. */
@media (max-width:1000px){
  .mcx .tabs{gap:8px;margin-top:36px;border-bottom:0;}
  .mcx .tabs button{grid-auto-flow:column;justify-content:start;align-items:center;gap:10px;
    padding:10px 12px;border-radius:16px;background:var(--tintB);font-size:14px;text-align:left;}
  .mcx .tabs button .tico{width:34px;height:34px;border-radius:10px;background:#fff;}
  .mcx .tabs button .tico svg{width:19px;height:19px;}
  .mcx .tabs button::after{display:none;}
  .mcx .tabs button:hover .tico{background:#fff;}
  .mcx .tabs button[aria-selected="true"]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue);}
}

/* 4) 아이콘 위아래 숨은 여백 — 레거시 .ico { min-height:90px } 가 솔루션 카드(44)와
      서비스 항목(34)의 아이콘 상자를 90px 로 늘리고, svg(height:100%)가 그 가운데에
      그려져 그림 위아래로 23px(카드) · 28px(서비스)씩 빈칸이 생겼다(1440 실측).
      빈칸을 걷으면 그림-제목 간격이 카드 gap 14 · 서비스 gap 12 로 좁아지므로
      아이콘 아래에 조금 되돌려 22 · 18 로 둔다. 위 2) 의 가로 카드 규칙은
      이 규칙에 포함되지만 정렬(align) 때문에 그대로 둔다. */
.mcx .card .ico{min-height:0;margin-bottom:8px;}
.mcx .svc .ico{min-height:0;margin-bottom:6px;}

/* 서비스 항목은 좁은 화면에서 1열로 접히는데 칸 사이 왼쪽 세로선(border-left)이
   남아 2·3번 항목 왼쪽 끝에 짧은 세로선이 그어져 있었다. 가로선으로 바꾼다. */
@media (max-width:1000px){
  .mcx .svc div{border-left:0;}
  .mcx .svc div + div{border-top:1px solid var(--line);}
}

/* ══ 레퍼런스 검토 1차 적용 (2026-09-28) ══════════════════════════
   근거 시안: design/main-reference/final.html (인스플래닛 · 에스트소프트 ·
   카카오 지속가능성 · LG CNS 검토). 1차는 자료 준비 없이 되는 세 곳이다. */

/* 01) 첫 절 숫자 카드 — 흐린 원 대신 번호 01~03 + 여백.
   숫자는 위, 설명은 아래로 벌려 가운데를 비운다. 279억 카드는 설명 위에
   가는 선을 둬 숫자와 설명 사이의 거리를 보이게 한다. */
.mcx .sec:first-child .nums .n1{align-content:space-between;}
.mcx .sec:first-child .nums .idx{position:absolute;top:26px;right:30px;font-size:12px;font-weight:600;
  line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.62;}
.mcx .sec:first-child .nums .n1 span:not(.idx){padding-top:16px;border-top:1px solid rgba(255,255,255,.22);}

/* 03) 매체 공식 대행 & 파트너 — 카드 없는 정적 로고 그리드.
   로고 높이(--lh)는 위의 .l-* 규칙을 그대로 쓴다. 옛 .marq 규칙은 되돌릴 때를
   위해 남겨 둔다(마크업에서 빠져 지금은 아무것도 잡지 않는다). */
.mcx .logos{margin-top:56px;text-align:left;}
.mcx .logos .lg-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:16px;
  border-top:1px solid var(--line);padding:28px 0;}
.mcx .logos .lg-row:last-child{border-bottom:1px solid var(--line);}
.mcx .logos .lg-row > span{font-size:13px;font-weight:700;color:var(--muted);}
.mcx .logos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 12px;}
.mcx .logos li{display:grid;justify-items:center;gap:12px;text-align:center;}
.mcx .logos li .lg{height:40px;width:100%;display:grid;place-items:center;}
.mcx .logos li img{width:auto;height:var(--lh,30px);max-width:100%;display:block;object-fit:contain;}
.mcx .logos li b{font-size:13px;font-weight:600;color:var(--body);word-break:keep-all;}
.mcx .logos li.of b{color:var(--blue);}
@media (max-width:760px){
  .mcx .logos .lg-row{grid-template-columns:1fr;gap:18px;padding:24px 0;}
  .mcx .logos ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 8px;}
  .mcx .logos li b{font-size:12px;}
}

/* 07) KPI 한 문장 — 회색 부분이 배경 대비 1.35:1(#cdd5e6)로 거의 안 읽혔다.
   스크립트가 .fill 을 붙이면 아직 안 읽은 단어만 옅게 두고, 스크롤에 따라
   #858d9f(3.08:1 — 큰 글자 AA 3:1 이상)로 채운다. 스크립트가 없으면 처음부터
   #858d9f. 동사(b · i)는 위 규칙 그대로 잉크 · 파랑. */
.mcx h2.t.sentence{color:#858d9f;}
.mcx h2.t.sentence.fill .w{color:#cdd5e6;transition:color .35s ease;}
.mcx h2.t.sentence.fill .w.on{color:#858d9f;}
@media (prefers-reduced-motion:reduce){
  .mcx h2.t.sentence.fill .w{color:#858d9f;transition:none;}
}

/* ══ 레퍼런스 검토 2차 적용 (2026-09-28) ══════════════════════════
   근거 시안: design/main-reference/final.html. 절 순서가 바뀐 곳이 있다 —
   '성과를 만드는 기술이 다릅니다' 절을 걷고 그 솔루션 · 숫자를 설계 밴드로 옮겼다.
   옛 .media · .why · .svc · .sols · 둘째 .nums 규칙은 되돌릴 때를 위해 남긴다. */

/* 02) 설계 밴드 + 솔루션 + 기술 수치 */
.mcx .dsn{position:relative;border-radius:28px;overflow:hidden;background:#0b1226;isolation:isolate;
  padding:clamp(72px,8vw,112px) clamp(20px,5vw,64px) clamp(48px,5vw,72px);}
/* 블러 광원 대신 설계도 같은 그리드 선 + 4칸마다 + 표시. 광원은 오른쪽 아래 하나만 약하게 */
.mcx .dsn::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:72px 72px;}
.mcx .dsn::after{content:"";position:absolute;inset:0;z-index:-1;background-position:-9px -9px;background-size:288px 288px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='288'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E"),
    radial-gradient(60% 60% at 100% 100%,rgba(37,99,255,.26),transparent 70%);
  background-repeat:repeat,no-repeat;background-size:288px 288px,100% 100%;}
.mcx .dsn-hd{text-align:center;}
.mcx .dsn-hd h2{margin:0;font-size:clamp(32px,3.6vw,52px);font-weight:800;line-height:1.2;letter-spacing:-.035em;color:#fff;}
.mcx .dsn-hd p{margin:18px auto 0;max-width:46ch;font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:#aab4c8;word-break:keep-all;}
.mcx .dsn-hd p em{font-style:normal;font-weight:600;color:#fff;}
.mcx .dsn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin:64px auto 0;align-items:start;}
.mcx .dsn-col{display:grid;gap:16px;}
.mcx .dsn-col:nth-child(1){margin-top:72px;}
.mcx .dsn-col:nth-child(3){margin-top:140px;}
.mcx .dsn-card{display:flex;flex-direction:column;min-height:236px;padding:24px 24px 22px;border-radius:22px;text-decoration:none;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .2s,transform .2s;}
.mcx .dsn-card:hover{background:rgba(255,255,255,.09);transform:translateY(-3px);}
.mcx .dsn-card.hl{background:#2a4fd6;box-shadow:none;}
.mcx .dsn-card.hl:hover{background:#2f58e8;}
.mcx .dsn-card .k{font-size:12px;font-weight:700;color:#8fb0ff;}
.mcx .dsn-card.hl .k{color:#dbe5ff;}
.mcx .dsn-card h3{margin:8px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff;}
.mcx .dsn-card p{margin:10px 0 0;font-size:14px;line-height:1.65;color:#aab4c8;word-break:keep-all;}
.mcx .dsn-card.hl p{color:#dbe5ff;}
.mcx .dsn-card .ar{margin-top:auto;padding-top:18px;align-self:flex-end;font-size:20px;line-height:1;color:#fff;transition:transform .2s;}
.mcx .dsn-card:hover .ar{transform:translateX(4px);}
.mcx .dsn-card.all{min-height:120px;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);}
.mcx .dsn-card.all h3{font-size:18px;}
.mcx .dsn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;margin:72px auto 0;border-top:1px solid rgba(255,255,255,.16);}
.mcx .dsn-stats div{padding:26px 8px 0;}
.mcx .dsn-stats div + div{border-left:1px solid rgba(255,255,255,.16);padding-left:28px;}
.mcx .dsn-stats b{display:block;font-size:clamp(34px,3.4vw,44px);font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;}
.mcx .dsn-stats b small{margin-left:4px;font-size:.4em;color:#8fb0ff;}
.mcx .dsn-stats span{display:block;margin-top:10px;font-size:14px;color:#9fb0d4;}
@media (max-width:760px){
  .mcx .dsn-grid, .mcx .dsn-stats{grid-template-columns:1fr;}
  .mcx .dsn-grid{margin-top:40px;}
  .mcx .dsn-col{margin-top:0!important;}
  .mcx .dsn-card{min-height:0;}
  .mcx .dsn-card .ar{padding-top:14px;}
  .mcx .dsn-stats{margin-top:44px;}
  .mcx .dsn-stats div{padding:20px 4px;}
  .mcx .dsn-stats div + div{border-left:0;padding-left:4px;border-top:1px solid rgba(255,255,255,.16);}
}

/* 04) 기술과 사람 — 비대칭 헤더 + 헤어라인 그리드(바깥만 둥글게) */
.mcx .ahead{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start;text-align:left;}
.mcx .ahead .alab{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink);}
.mcx .ahead .alab::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:14px;font-weight:700;line-height:1;}
.mcx .ahead h2.t{text-align:left;margin:0;}
.mcx .ahead p.st{text-align:left;margin-left:0;margin-right:0;}
.mcx .hgrid{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #d9dfe9;border-radius:28px;overflow:hidden;text-align:left;}
.mcx .hcell{display:flex;flex-direction:column;min-height:260px;padding:32px 30px 34px;
  border-right:1px solid #d9dfe9;border-bottom:1px solid #d9dfe9;}
.mcx .hcell:nth-child(3n){border-right:0;}
.mcx .hcell:nth-child(n+4){border-bottom:0;}
.mcx .hcell .hn{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;}
.mcx .hcell .hn.b{color:var(--blue);}
.mcx .hcell h3{margin:0;padding-top:40px;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.mcx .hcell p{margin:10px 0 0;font-size:15px;line-height:1.7;color:var(--body);word-break:keep-all;}
.mcx .hcell.hsvc{min-height:0;padding:26px 30px 28px;background:var(--tintB);}
/* 레거시 .ico { min-height:90px } 를 받지 않도록 */
.mcx .hcell.hsvc .ico{display:block;width:30px;height:30px;min-height:0;color:var(--blue);}
.mcx .hcell.hsvc .ico svg{width:100%;height:100%;display:block;}
.mcx .hcell.hsvc h3{margin:16px 0 0;padding-top:0;font-size:18px;}
.mcx .hcell.hsvc p{margin-top:6px;font-size:14.5px;}
.mcx .hcell.hsvc p span{display:block;margin-top:8px;font-size:12.5px;color:var(--muted);}
@media (max-width:1000px){
  .mcx .ahead{grid-template-columns:1fr;gap:14px;}
  .mcx .ahead .alab{margin-top:0;}
  .mcx .hgrid{grid-template-columns:1fr;margin-top:36px;}
  .mcx .hcell{min-height:0;border-right:0!important;border-bottom:1px solid #d9dfe9!important;padding:26px 24px 28px;}
  .mcx .hcell:last-child{border-bottom:0!important;}
  .mcx .hcell .hn{font-size:44px;}
  .mcx .hcell h3{padding-top:24px;}
  /* 서비스 칸의 PC 여백(.hcell.hsvc, 특이도가 한 단 높다)이 위 규칙을 이겨 글자 시작선이 6px 어긋났다 */
  .mcx .hcell.hsvc{padding:24px 24px 26px;}
}

/* 06) 맞춤 플랜 — 가는 선 글자 탭. 위의 .tabs 규칙(아이콘 · 밑줄 · 좁은 화면 칩)을 덮는다 */
.mcx .tabs.lite{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-bottom:0;margin-top:52px;}
.mcx .tabs.lite button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative;padding:18px 0 0;border:0;border-radius:0;background:none;box-shadow:none;
  text-align:left;color:inherit;}
.mcx .tabs.lite button::after{display:none;}
.mcx .tabs.lite button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line);}
.mcx .tabs.lite .pg{position:absolute;left:0;top:0;height:2px;width:0;background:var(--blue);}
.mcx .tabs.lite button[aria-selected="true"] .pg{animation:tabfill 5s linear forwards;}
.mcx .tabs.lite.stopped button[aria-selected="true"] .pg{animation:none;width:100%;}
@keyframes tabfill{to{width:100%;}}
.mcx .tabs.lite .n{display:block;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.mcx .tabs.lite .l{display:block;margin-top:6px;font-size:18px;font-weight:700;color:#a3aab8;transition:color .2s;}
.mcx .tabs.lite .d{display:block;margin-top:4px;font-size:13.5px;font-weight:500;color:var(--muted);}
.mcx .tabs.lite button:hover .l{color:var(--body);}
.mcx .tabs.lite button[aria-selected="true"] .l{color:var(--ink);}
.mcx .tabs.lite button[aria-selected="true"] .n{color:var(--blue);}
.mcx .tabs.lite button:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}
@media (max-width:1000px){
  .mcx .tabs.lite{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;margin-top:36px;}
  .mcx .tabs.lite button{padding:14px 0 0;background:none;box-shadow:none;}
  .mcx .tabs.lite button[aria-selected="true"]{background:none;box-shadow:none;}
  .mcx .tabs.lite .l{font-size:16px;}
  .mcx .tabs.lite .d{font-size:12.5px;}
}

/* 09) 새 소식 — 왼쪽 제목 · 오른쪽 전환 + 전체 보기 · 최신 3건 글자 카드 */
.mcx .news-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.mcx .news-hd h2.t{margin:0;text-align:left;}
.mcx .news-ctl{display:flex;align-items:center;gap:10px;}
.mcx .news-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--tintB);}
.mcx .news-tabs button{border:0;background:none;padding:8px 14px;border-radius:9px;font:600 13.5px/1 var(--font);color:var(--muted);cursor:pointer;}
.mcx .news-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,48,.08);}
.mcx .news-all{padding:10px 14px;border-radius:10px;background:var(--tintB);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;}
.mcx .news-all:hover{background:var(--line);}
.mcx .news:not(.tabbed) .news-ctl{display:none;}
.mcx .news .boards{display:block;margin-top:32px;}
.mcx .news .boards .board-box{background:none;padding:0;border:0;border-radius:0;box-shadow:none;}
.mcx .news .boards .board-box + .board-box{margin-top:32px;}
.mcx .news.tabbed .boards .board-box + .board-box{margin-top:0;}
.mcx .news .board-box[hidden]{display:none;}
.mcx .news.tabbed .board-header{display:none;}
.mcx .news .board-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.mcx .news .board-list li{display:block;min-width:0;padding:0;border:0!important;}
.mcx .news .board-list li:nth-child(n+4){display:none;}
.mcx .news .board-list li a{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;height:100%;min-height:220px;
  padding:26px 26px 24px;border-radius:24px;background:var(--tintB);transition:background .2s;}
.mcx .news .board-list li a:hover{background:var(--line);}
.mcx .news .board-list li a::before{font-size:12.5px;font-weight:700;color:var(--blue);}
.mcx .news .board-box[data-cat="공지사항"] .board-list li a::before{content:"공지사항";}
.mcx .news .board-box[data-cat="마케팅 TIP"] .board-list li a::before{content:"마케팅 TIP";}
.mcx .news .board-list .notice-title{flex:none;margin-top:14px;font-size:20px;font-weight:700;line-height:1.45;letter-spacing:-.02em;
  color:var(--ink);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* 띄어쓰기 없는 긴 제목(예: 숫자 · 영문 나열)은 keep-all 로는 줄이 안 바뀌어 카드를 밀어냈다
     (390 실측 카드 342 → 558px, 화면 밖으로 잘림). 한글 낱말은 지키고 긴 덩어리만 끊는다 */
  overflow-wrap:anywhere;}
.mcx .news .board-list li a:hover .notice-title{color:var(--ink);}
/* 날짜 + 원형 화살표를 카드 바닥에 */
.mcx .news .board-list .notice-date{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:20px;font-size:13px;color:var(--muted);}
.mcx .news .board-list .notice-date::after{content:"→";display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:13px;}
@media (max-width:1000px){
  .mcx .news .board-list{grid-template-columns:minmax(0,1fr);gap:12px;}
  .mcx .news .board-list li a{min-height:0;padding:22px 22px 20px;}
  .mcx .news .board-list .notice-title{font-size:17px;margin-top:10px;}
  .mcx .news .board-list .notice-date{padding-top:16px;}
}

/* ══ 2차 보정 (2026-09-28) — 설계 밴드와 솔루션을 다시 떼었다 ═══════════
   흐름: 문제 → 약속(설계 밴드) → 자격(공식 대행) → 두 축(기술과 사람)
        → 기술 상세(성과를 만드는 기술 · 솔루션) → 사람 상세(전략 · KPI) → 선택.
   위 2차 블록의 .dsn-grid · .dsn-card · .dsn-stats 는 지금 마크업에 없다. */
.mcx .dsn.solo{display:grid;place-items:center;min-height:clamp(380px,40vw,560px);padding:clamp(64px,7vw,96px) clamp(20px,5vw,64px);}

/* 기술 수치 한 줄 — 가는 선으로 나눈 세 칸. 카드가 아니다 */
.mcx .tstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:52px;text-align:left;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mcx .tstats > div{padding:26px 28px 24px;}
.mcx .tstats > div + div{border-left:1px solid var(--line);}
.mcx .tstats b{display:block;font-size:clamp(36px,3.6vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;}
.mcx .tstats b small{margin-left:4px;font-size:.38em;font-weight:700;color:var(--blue);letter-spacing:-.02em;}
.mcx .tstats span{display:block;margin-top:10px;font-size:14px;color:var(--muted);}
.mcx .tstats + .sols{margin-top:40px;}
@media (max-width:760px){
  .mcx .tstats{grid-template-columns:1fr;margin-top:36px;}
  .mcx .tstats > div{padding:20px 4px 18px;}
  .mcx .tstats > div + div{border-left:0;border-top:1px solid var(--line);}
  .mcx .tstats + .sols{margin-top:28px;}
}

/* ══ 성과를 만드는 기술 — 다크 판 + 글래스 제품 창 (2026-09-28) ════════════
   근거 시안: design/main-reference/solutions-dark.html.
   · 판은 텍스처 없이 광원만 — 유리 뒤로 비칠 색(파랑 · 보라 · 청록)이다.
   · 창(.tw)은 흰 10~20% 유리 + 강한 흐림 · 채도 + 1px 흰 테두리 · 위쪽 빛 반사.
   · 흐림(backdrop-filter)이 없는 환경은 불투명한 남색 면으로 대신한다(@supports).
   · 옛 .sols · .tstats 규칙은 지금 이 절에서 쓰지 않는다(되돌릴 때를 위해 남긴다). */
.mcx .tech{position:relative;border-radius:28px;overflow:hidden;background:#0b1226;isolation:isolate;color:#c9d3ea;
  padding:clamp(72px,8vw,112px) clamp(20px,4.4vw,64px) clamp(56px,6vw,80px);}
.mcx .tech::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 22% at 22% 42%,rgba(37,99,255,.55),transparent 70%),
    radial-gradient(28% 20% at 76% 46%,rgba(124,58,237,.45),transparent 70%),
    radial-gradient(28% 18% at 26% 70%,rgba(18,166,189,.42),transparent 70%),
    radial-gradient(30% 20% at 74% 72%,rgba(37,99,255,.45),transparent 70%),
    radial-gradient(36% 16% at 60% 92%,rgba(124,58,237,.40),transparent 70%),
    radial-gradient(52% 30% at 50% 0%,rgba(76,141,255,.18),transparent 70%);}
.mcx .tech-hd{text-align:center;}
.mcx .tech-hd h2{margin:0;font-size:clamp(28px,3.6vw,50px);font-weight:800;line-height:1.24;letter-spacing:-.035em;color:#fff;word-break:keep-all;}
.mcx .tech-hd p{margin:16px auto 0;max-width:48ch;font-size:clamp(15px,1.25vw,17px);line-height:1.7;color:#8a96b4;word-break:keep-all;}
.mcx .tech-hd p em{font-style:normal;font-weight:600;color:#fff;}
.mcx .tech-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;margin:48px auto 0;
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);}
.mcx .tech-st > div{padding:22px 26px 20px;}
.mcx .tech-st > div + div{border-left:1px solid rgba(255,255,255,.10);}
.mcx .tech-st b{display:block;font-size:clamp(32px,3.2vw,44px);font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;}
.mcx .tech-st b small{margin-left:4px;font-size:.4em;color:#8fb0ff;}
.mcx .tech-st span{display:block;margin-top:8px;font-size:13.5px;color:#8a96b4;}

.mcx .tech-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px;}
.mcx .tc{display:flex;flex-direction:column;padding:30px 30px 0;border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:background .2s;}
.mcx .tc:hover{background:rgba(255,255,255,.05);}
.mcx .tc-k{display:flex;flex-wrap:wrap;gap:6px;}
.mcx .tc-k span{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;font-weight:600;color:#aebce0;}
.mcx .tc-k span.acc{background:rgba(76,141,255,.16);color:#a9c6ff;}
.mcx .tc h3{margin:14px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fff;}
.mcx .tc p{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:#8a96b4;word-break:keep-all;}
.mcx .tc-go{display:inline-flex;align-items:center;gap:10px;margin:16px 0 26px;font-size:14px;font-weight:600;color:#fff;}
.mcx .tc-go i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-size:13px;transition:transform .2s;}
.mcx .tc:hover .tc-go i{transform:translateX(4px);}

/* 제품 창 — 글래스. 카드 바닥에 붙는다(margin-top:auto) */
.mcx .tw{position:relative;overflow:hidden;margin-top:auto;padding:12px 16px 14px;border-radius:14px 14px 0 0;
  font-size:12px;color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums;text-align:left;
  background:rgba(34,46,86,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.22),0 24px 48px -24px rgba(3,8,24,.7);}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mcx .tw{background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.063) 100%);
    -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);}
}
.mcx .tw::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%);}
.mcx .tw > *{position:relative;}
.mcx .tw-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.mcx .tw-bar > i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.34);}
.mcx .tw-bar > b{margin-left:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;}
.mcx .tw-bar > em{margin-left:auto;font-style:normal;font-size:11px;color:rgba(255,255,255,.52);}
.mcx .tw-bar .state b{color:#dbe7ff;}
.mcx .tw-tbl{width:100%;border-collapse:collapse;}
.mcx .tw-tbl th{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.16);font-weight:600;color:rgba(255,255,255,.66);text-align:left;}
.mcx .tw-tbl td{padding:8px;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.88);}
.mcx .tw .r{text-align:right;}
.mcx .tw .up{color:#ff9aac;} .mcx .tw .dn{color:#a9c9ff;} .mcx .tw .ok{color:#7ef0c0;font-weight:600;}
.mcx .tw-dot{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#7ef0c0;vertical-align:middle;}
.mcx .tw-dot.off{background:rgba(255,255,255,.28);}
.mcx .tw-tag{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10.5px;font-weight:700;white-space:nowrap;}
.mcx .tw-tag.a{background:rgba(52,211,153,.20);color:#b4f5d8;}
.mcx .tw-tag.b{background:rgba(156,188,255,.22);color:#dbe7ff;}
.mcx .tw-tag.p{background:rgba(245,158,11,.22);color:#fde7a6;}
.mcx .tw-rk{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;}
.mcx .tw-rk svg{display:block;width:100%;height:96px;}
.mcx .tw-rk .gl{stroke:rgba(255,255,255,.16);}
.mcx .tw-rk .ln{stroke:#9cbcff;}
.mcx .tw-rk .ar{fill:#9cbcff;fill-opacity:.12;}
.mcx .tw-rk .pt{fill:#9cbcff;}
.mcx .tw-rk .now{text-align:right;}
.mcx .tw-rk .now b{display:block;font-size:30px;font-weight:800;line-height:1;color:#fff;}
.mcx .tw-rk .now span{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.66);}
.mcx .tw-rk .now i{font-style:normal;font-weight:700;color:#ff9aac;}
.mcx .tw-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:rgba(255,255,255,.52);}
.mcx .tw-kw{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:end;}
.mcx .tw-kw .big b{display:block;font-size:28px;font-weight:800;line-height:1;color:#fff;}
.mcx .tw-kw .big span{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.66);}
.mcx .tw-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:84px;}
.mcx .tw-bars i{display:block;border-radius:3px 3px 0 0;background:rgba(156,188,255,.34);}
.mcx .tw-bars i.hi{background:#9cbcff;}
.mcx .tw-split{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.mcx .tw-split span{padding:5px 9px;border-radius:7px;background:rgba(255,255,255,.08);font-size:11px;}
.mcx .tw-in{display:flex;gap:8px;margin-bottom:10px;}
.mcx .tw-in > div{flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;}
.mcx .tw-in small{display:block;margin-bottom:2px;font-size:10px;color:rgba(255,255,255,.52);}
.mcx .tw-in .btn{display:grid;place-items:center;flex:none;padding:0 14px;border-radius:8px;background:rgba(76,141,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);font-size:12px;font-weight:700;color:#fff;}

/* 지마켓 광고관리 — 가로 카드 + 주간 스케줄 보드(소개 페이지 히어로와 같은 예시) */
.mcx .tc.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:center;padding:30px;}
.mcx .tc.wide .tc-go{margin-bottom:0;}
.mcx .tc.wide .tw{margin-top:0;border-radius:14px;}
.mcx .tw-hrs{display:flex;justify-content:space-between;margin:0 0 6px 25px;font-size:9.5px;color:rgba(255,255,255,.52);}
.mcx .tw-grows{position:relative;display:grid;gap:4px;}
.mcx .tw-grow{display:grid;grid-template-columns:22px repeat(24,minmax(0,1fr));gap:3px;align-items:center;}
.mcx .tw-grow b{font-size:10px;font-weight:600;color:rgba(255,255,255,.52);text-align:center;}
.mcx .tw-grow i{height:13px;border-radius:3px;background:rgba(255,255,255,.09);}
.mcx .tw-grow i.on{background:#9cbcff;}
/* '지금' 마커 20시 — 한 칸 폭 = (그리드 폭 - 요일 라벨 - gap 24개) / 24 */
.mcx .tw-now{position:absolute;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:#F59E0B;
  left:calc(25px + 20 * ((100% - 25px - 24 * 3px) / 24 + 3px));}
.mcx .tw-now em{position:absolute;top:-17px;left:50%;transform:translateX(-50%);padding:1px 6px;border-radius:999px;
  background:#F59E0B;color:#fff;font-style:normal;font-size:9.5px;font-weight:700;white-space:nowrap;}

.mcx .tech-cap{margin:14px 0 0;text-align:right;font-size:11px;color:#5f6b8a;}
.mcx .tech-more{margin-top:36px;text-align:center;}
.mcx .tech-more a{display:inline-flex;align-items:center;gap:12px;padding:13px 14px 13px 24px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);font-size:15px;font-weight:600;color:#fff;text-decoration:none;transition:background .2s;}
.mcx .tech-more a:hover{background:rgba(255,255,255,.06);}
.mcx .tech-more a i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-size:13px;}

@media (max-width:900px){
  .mcx .tech-grid, .mcx .tech-st{grid-template-columns:1fr;}
  .mcx .tech-st > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.10);}
  .mcx .tc{padding:26px 22px 0;}
  .mcx .tc.wide{grid-template-columns:1fr;gap:22px;padding:26px 22px 22px;}
  .mcx .tw-grow i{height:10px;}
  /* 창 상단 제목과 상태 문구가 한 줄에 못 들어가 쪼개졌다 — 상태를 아랫줄로 */
  .mcx .tw-bar{flex-wrap:wrap;row-gap:6px;}
  .mcx .tw-bar > em.state{flex-basis:100%;margin-left:0;}
  /* 390 에서 표 칸이 좁아 태그가 낱자로 쪼개졌다 — 칸 여백을 줄이고 태그는 한 줄로 */
  .mcx .tw-tbl th, .mcx .tw-tbl td{padding:7px 5px;}
  .mcx .tw{font-size:11.5px;padding:12px 12px 14px;}
}

/* ══ 성과를 만드는 기술 — 비대칭 카드판 (2026-09-28) ══════════════════════
   제품 창(.tw)을 걷어내고 2차 시안의 세 열 어긋난 카드(.dsn-*)를 다크 판에 올렸다.
   · 유리 뒤로 비칠 색이 필요 없어져 광원은 위쪽 파랑 하나만 남긴다(보라는 문의 밴드에만).
   · 수치 줄은 카드 아래 바닥 줄로 내린다. */
.mcx .tech.asym::before{background:radial-gradient(60% 34% at 50% 0%,rgba(76,141,255,.22),transparent 72%);}
.mcx .tech.asym .dsn-grid{max-width:1040px;margin-top:56px;}
.mcx .tech.asym .dsn-card{min-height:250px;}
.mcx .tech.asym .dsn-card h3{margin-top:0;}
.mcx .tech.asym .dsn-card.all{min-height:120px;}
.mcx .dsn-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none;}
.mcx .dsn-tags li{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.07);font-size:12px;font-weight:600;line-height:1.3;color:#aab4c8;white-space:nowrap;}
.mcx .dsn-tags li.acc{background:rgba(143,176,255,.16);color:#c9d8ff;}
.mcx .dsn-card.hl .dsn-tags li{background:rgba(255,255,255,.16);color:#e6ecff;}
.mcx .dsn-card.hl .dsn-tags li.acc{background:#fff;color:#2a4fd6;}
.mcx .tech.asym .tech-st{margin-top:64px;}
@media (max-width:900px){
  .mcx .tech.asym .dsn-grid{grid-template-columns:1fr;margin-top:36px;gap:12px;}
  .mcx .tech.asym .dsn-col{margin-top:0!important;gap:12px;}
  .mcx .tech.asym .dsn-card{min-height:0;padding:22px 20px 18px;}
  .mcx .tech.asym .dsn-card.all{min-height:0;}
  /* 수치 셋을 세로로 쌓으면 화면 하나를 먹는다 — 모바일도 세 칸 한 줄 */
  .mcx .tech.asym .tech-st{margin-top:40px;grid-template-columns:repeat(3,minmax(0,1fr));}
  .mcx .tech.asym .tech-st > div{padding:18px 6px 4px;text-align:center;}
  .mcx .tech.asym .tech-st > div + div{border-top:0;border-left:1px solid rgba(255,255,255,.10);}
  .mcx .tech.asym .tech-st b{font-size:26px;}
  .mcx .tech.asym .tech-st b small{margin-left:2px;}
  .mcx .tech.asym .tech-st span{font-size:11.5px;line-height:1.45;word-break:keep-all;}
}

/* ══ 소개형 순서 (2026-09-28) ════════════════════════════════════════════
   흐름: 우리는 누구인가(실적) → 자격(공식 대행) → 두 축(기술과 사람) → 기술 상세
        → 사람 상세(KPI 과정 → 맞춤 전략) → 다짐(설계 밴드) → 선택 → 문의 → 소식.
   설계 밴드는 .sec 가 아니라 위아래 여백이 없다. 예전엔 다음 절의 윗여백이 틈을
   만들었는데, 지금 다음은 파랑 판이 절 맨 위부터 칠해지는 선택 절이라 둘이 맞붙었다.
   절 하나의 여백만큼 띄운다. */
.mcx > .in:has(> .dsn.solo){margin-bottom:clamp(84px,13vh,170px);}

/* 좁은 화면에서만 끊는 줄(.pcbr 의 반대). 첫 제목을 쉼표 뒤 '전략부터 성과까지, /
   광고를 제대로 운영합니다' 로 끊는다. 태블릿은 한 줄에 들어가 600 이하만. */
.mcx .mobr{display:none;}
@media (max-width:600px){ .mcx .mobr{display:inline;} }

/* ══ 텍스트 위계 정리 (2026-09-28) ══════════════════════════════════════
   전 절 실측(1440 / 390) 뒤 표준에서 벗어난 값만 맞춘다.
   표준: 절 제목 50·700 / 28·700(h2.t 와 같은 clamp) · 부제 19.44 / 16 · 라벨 15·600. */

/* 다크 판 두 곳 — 제목 굵기 800 · 설계 밴드 51.84 / 32 가 흰 바탕 절과 달랐다 */
.mcx .tech-hd h2, .mcx .dsn-hd h2{font-size:clamp(28px,3.6vw,50px);font-weight:700;}
/* 부제 17·400 → 다른 절 부제 크기로. 다크 바탕에서 600 은 뭉쳐 첫 줄 400 · 강조 줄 600 */
.mcx .tech-hd p, .mcx .dsn-hd p{font-size:clamp(16px,1.35vw,20px);font-weight:400;}
.mcx .tech-hd p em, .mcx .dsn-hd p em{font-weight:600;}
/* 선택 절 제목만 모바일 30 이었다 */
.mcx .pick h2.t{font-size:clamp(28px,3.6vw,50px);}
/* 첫 절 부제 34 가 아래 절 제목(50)과 한 단 차이라 제목이 둘로 읽혔다. 64 와의 대비를 살린다 */
.mcx .sec:first-child p.st{font-size:clamp(20px,1.7vw,24px);}
/* KPI 단계 제목 16 이 본문 14 와 붙어 있었다 */
.mcx .sec:has(.sentence) .step h3{font-size:18px;}
/* 라벨 14 / 15 가 갈렸다 */
.mcx .ahead .alab{font-size:15px;}
/* 소수점 크기 정리 */
.mcx .hcell.hsvc p{font-size:15px;}
.mcx .hcell.hsvc p span{font-size:13px;}
.mcx .tabs.lite .d{font-size:14px;}
.mcx .news-tabs button{font-size:14px;}
.mcx .tech-st span{font-size:14px;}
@media (max-width:1000px){
  .mcx .tabs.lite .d{font-size:13px;}
}
@media (max-width:900px){
  /* 세 칸 한 줄로 줄이며 설명 11.5 · 단위 10.4 까지 내려가 있었다 — 12 미만은 쓰지 않는다 */
  .mcx .tech.asym .tech-st span{font-size:12px;}
  .mcx .tech.asym .tech-st b small{font-size:13px;}
}

/* KPI 네 단계 — 설명 줄 수가 달라(03 만 4줄) 칩 높이가 칸마다 어긋났다. 칩을 칸 바닥에 맞춘다.
   칸은 그리드라 이미 같은 높이로 늘어나 있으니, 안쪽 묶음을 세로 flex 로 채우고 칩을 margin-top:auto 로 내린다.
   한 열(모바일)에서는 auto 가 0 이 되어 차이가 없다. */
.mcx .sec:has(.sentence) .step{display:flex;flex-direction:column;}
.mcx .sec:has(.sentence) .step > div{display:flex;flex-direction:column;flex:1 1 auto;}
.mcx .sec:has(.sentence) .step .k{margin-top:auto;padding-top:16px;}

/* 맞춤 전략 패널 제목 — 모바일에서 두 줄로 꺾이는데(자사몰 · 대형셀러) 행간 1.0 이라 줄이 붙었다 */
.mcx .pn h3{line-height:1.3;}

/* 첫 제목 둘째 줄 '광고를 제대로 운영합니다' 가 390 에서 331px 인데 360 은 쓸 수 있는 폭이 328px 라
   '운영합니다' 만 셋째 줄로 떨어졌다. 375 미만에서만 34 → 32. */
@media (max-width:374px){ .mcx .sec:first-child h2.t{font-size:32px;} }

/* 기술과 사람 — 머리(라벨 · 제목 · 부제) 시작선을 아래 세 칸의 글 시작선에 맞춘다.
   머리는 5fr / 7fr 두 열이라 제목이 1440 에서 x626 에 섰다. 아래 칸 글은 103 · 534 · 966 이라
   어느 칸과도 맞지 않고 02 칸 글보다 92px 오른쪽에 떠 있었다(1024 도 같은 어긋남).
   머리도 같은 세 등분으로 나누고, 라벨은 01 칸 글(바깥 테두리 1 + 안쪽 30),
   제목 묶음은 02 칸 글(안쪽 30) 위에 세운다. 한 열로 쌓이는 1000 이하는 그대로. */
@media (min-width:1001px){
  /* (2026-09-29) 제목을 02 칸 위에 세웠더니 왼쪽 칸이 작은 라벨뿐이라 비어 보였고, 제목이 화면
     가운데 떠 있는 것처럼 읽혀 정렬 실수로 오해됐다. 라벨 · 제목 · 부제를 한 열로 쌓아 01 칸 글
     시작선(바깥 테두리 1 + 안쪽 30)에 맞춘다. 새 소식 절과 같은 왼쪽 정렬 어법. */
  .mcx .ahead{grid-template-columns:minmax(0,1fr);gap:16px;}
  .mcx .ahead > .alab{margin-top:0;padding-left:31px;}
  .mcx .ahead > div{padding-left:31px;}
}

/* 스크롤 등장(.rv) — 스크립트가 붙이고, 나타난 뒤 뗀다. 투명도만.
   위치 이동(translateY)도 줬었는데, 호버에 transform 을 쓰는 카드(선택 절 등)와 덮어쓰며
   어정쩡하게 흔들렸다. 그냥 나타나게 한다. 상태 클래스는 .rv-on — .in 은 절 안쪽 틀 이름이다. */
.mcx .rv{opacity:0;transition:opacity .5s ease;}
.mcx .rv.rv-on{opacity:1;}