/* Pretendard Std(한글 2,350자 표준 세트, 굵기당 133KB) — 외부 CSS 차단 요청을 없애려고 여기 선언(2026-09-15). 원본 Pretendard 는 굵기당 747KB 였다 */
@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:local('Pretendard Regular'),url(/assets/fonts/PretendardStd-Regular.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:local('Pretendard Medium'),url(/assets/fonts/PretendardStd-Medium.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:local('Pretendard SemiBold'),url(/assets/fonts/PretendardStd-SemiBold.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:local('Pretendard Bold'),url(/assets/fonts/PretendardStd-Bold.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:800;font-display:swap;src:local('Pretendard ExtraBold'),url(/assets/fonts/PretendardStd-ExtraBold.woff2) format('woff2')}
/* 앤씨 홈페이지 공용 스타일 — 메인·하위 페이지 공통. 원본은 메인 A안 <style>에서 옮김 */
:root{
  --bg:#0b0810;--bg2:#100b16;--card:#150f1c;
  --fg:#fff;--mute:#b7b0c4;--dim:#8f88a0;
  --acc:#ed4036;--acc2:#f4705f;
  /* 포인트 글씨는 한 색(B안). 라이트 배경에서 글씨에 쓴다. 다크 배경에선 글씨를 붉게 하지 않고 .ul 밑줄로 강조한다. */
  --pt:#d9362e;
  --grad:linear-gradient(112deg,#ed4036,#f4705f);
  --line:rgba(255,255,255,.08);
  --hex:polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
  --wrap:1480px;
  --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* 육각 마커 — 꽉 찬 도형 대신 가는 선. 작은 마커는 선을 굵게, 큰 칩은 가늘게 */
  --hexo:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20116'%3E%3Cpolygon%20points='50,4%2096,30.5%2096,85.5%2050,112%204,85.5%204,30.5'%20fill='none'%20stroke='%23F4705F'%20stroke-width='9'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --hexo-dim:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20116'%3E%3Cpolygon%20points='50,4%2096,30.5%2096,85.5%2050,112%204,85.5%204,30.5'%20fill='none'%20stroke='%23F4705F'%20stroke-opacity='.45'%20stroke-width='7'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --hexo-chip:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20116'%3E%3Cpolygon%20points='50,4%2096,30.5%2096,85.5%2050,112%204,85.5%204,30.5'%20fill='none'%20stroke='%23F4705F'%20stroke-width='3.2'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --hexo-chip-k:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20116'%3E%3Cpolygon%20points='50,4%2096,30.5%2096,85.5%2050,112%204,85.5%204,30.5'%20fill='none'%20stroke='%23ED4036'%20stroke-width='3.2'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  /* 벌집 텍스처 — 박스 안쪽에 은은히 깔리는 브랜드 패턴 */
  --hexbg:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='45'%3E%3Cpath%20d='M13,0L26,7.5V22.5L13,30L0,22.5V7.5ZM13,30V45'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='.055'/%3E%3C/svg%3E");
  --hexbgd:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='45'%3E%3Cpath%20d='M13,0L26,7.5V22.5L13,30L0,22.5V7.5ZM13,30V45'%20fill='none'%20stroke='%23000000'%20stroke-opacity='.05'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
::selection{background:rgba(237,64,54,.32);color:#fff}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  font-family:"Pretendard","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;transition:background .55s var(--ease),color .55s var(--ease)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

h1{margin:0;font-size:clamp(42px,6.4vw,96px);line-height:1.02;font-weight:700;letter-spacing:-.048em}
h2{margin:0;font-size:clamp(30px,4.4vw,66px);line-height:1.1;font-weight:700;letter-spacing:-.042em;word-break:keep-all}
h3{margin:0;font-size:clamp(18px,1.55vw,22px);line-height:1.4;font-weight:600;letter-spacing:-.022em}
.lede{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.82;color:var(--mute);max-width:46ch;word-break:keep-all}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* 섹션 헤더 체계 */
.head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  column-gap:clamp(40px,6vw,110px);align-items:end;margin-bottom:clamp(46px,5.2vw,74px)}
.head .eyebrow{grid-column:1/-1;margin-bottom:clamp(18px,1.8vw,28px)}
.head h2{max-width:17ch}
.head .lede{margin-top:0;padding-bottom:.55em;max-width:46ch}
@media(max-width:980px){.head{grid-template-columns:1fr}
  .head .lede{margin-top:22px;padding-bottom:0}}
.rule{position:relative;height:1px;border:0;margin:0 0 clamp(38px,4vw,54px);overflow:visible;
  background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 38%,rgba(255,255,255,.045))}
.rule::after{content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:11px;height:12.8px;background:var(--hexo) center/contain no-repeat}

.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);z-index:90;pointer-events:none}

#orb{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity 1.1s var(--ease)}
#orb.off{opacity:0}
main{position:relative;z-index:2}

/* 네비 */
.nav{position:fixed;inset:0 0 auto;height:74px;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);background:linear-gradient(180deg,rgba(11,8,16,.72),rgba(11,8,16,0));
  border-bottom:1px solid transparent;
  transition:height .4s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.nav.stuck{height:62px;background:#0b0810;backdrop-filter:none;border-bottom-color:var(--line)}
.nav .brand{display:flex;align-items:center;text-decoration:none}
.nav .brand .logo{height:30px;width:auto;display:block;transition:opacity .3s}
.nav .brand:hover .logo{opacity:.85}
/* 라이트 구간에선 검정 로고타입으로 */
body.light .nav .brand .logo{content:url("../assets/brand/nc_logo.png")}
.nav .links{display:flex;gap:4px}
.nav .links a{position:relative;text-decoration:none;color:#cfc9dc;font-size:14px;padding:9px 13px;border-radius:8px;
  transition:color .28s var(--ease)}
.nav .links a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .38s var(--ease)}
.nav .links a:hover{color:#fff}
.nav .links a:hover::after,.nav .links a.on::after{transform:scaleX(1)}
.nav .links a.on{color:#fff}
.nav .cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--grad);color:#fff;
  font-weight:700;font-size:13px;padding:11px 19px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(237,64,54,.26);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav .cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(237,64,54,.42)}
.ar{transition:transform .32s var(--ease);display:inline-block}
.nav .cta:hover .ar{transform:translateX(4px)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  border-radius:11px;cursor:pointer;position:relative;flex:none}
.burger i{position:absolute;left:11px;right:11px;height:1.6px;background:#fff;border-radius:2px;
  transition:transform .38s var(--ease),opacity .28s var(--ease)}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:25px}
body.menu .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:1040px){.nav .links,.nav .cta{display:none}.burger{display:block}}

.sheet{position:fixed;inset:0;z-index:79;background:rgba(11,8,16,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:90px clamp(24px,7vw,48px) 40px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
body.menu .sheet{opacity:1;visibility:visible}
.sheet a{display:flex;align-items:center;gap:14px;text-decoration:none;font-size:clamp(23px,5.6vw,32px);color:#fff;   /* 라이트 구간에서 열어도 시트는 늘 다크 */
  font-weight:700;letter-spacing:-.03em;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.sheet a i{width:13px;height:15px;background:var(--hexo) center/contain no-repeat;flex:none}
.sheet .mcta{margin-top:26px;border:0;justify-content:center;background:var(--grad);border-radius:999px;
  font-size:17px;padding:18px 0}
.sheet .mcta i{display:none}

/* 히어로 */
.hero{--striph:clamp(104px,14vh,164px);
  min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;
  padding:104px 0 var(--striph)}
.hero .wrap{position:relative;z-index:3}
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-.18em;height:2px;background:var(--pt);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .85s var(--ease) .2s}
.ul.in::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.ul::after{transform:scaleX(1);transition:none}}
.hero .lede{font-size:clamp(16px,1.3vw,19px);max-width:37ch;margin-top:clamp(64px,5vw,76px)}
/* 히어로 제목 밑줄 — 글자가 다 올라온 뒤 'NC가 있다.' 아래로 그어진다 */
.hero h1 .ul::after{height:.07em;bottom:-.04em;transition-delay:.95s}
/* SINCE 2010 — 밑줄이 다 그어진 뒤 선 오른쪽 끝에 떠오른다 */
/* SINCE 2010 — 밑줄이 끝나는 자리의 빨간 태그. 선이 끝에 닿을 때 같은 방향(왼→오)·같은 속도로 열린다 */
/* 포트폴리오 카드 워드마크와 같은 타이포 — 글자가 박스 양끝·아랫단에 붙는다 */
.hero h1 .since{position:absolute;right:0;top:calc(100% + .03em);font-style:normal;font-size:clamp(30px,2.7vw,46px);font-weight:800;letter-spacing:-.04em;line-height:.86;color:#fff;background:var(--pt);padding:.1em .1em .02em .12em;white-space:nowrap;clip-path:polygon(0 0,0 0,0 calc(100% - 10px),0 100%,0 100%);transition:clip-path .5s var(--ease) 1.3s}   /* 밑줄이 태그 자리에 닿을 즈음 같은 방향으로 열린다 */
.hero h1 .ul.in .since{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
/* 히어로만: 밑줄과 SINCE 를 스크립트 없이 CSS 애니메이션으로(2026-09-15). 제목 등장(.9s) 뒤 밑줄이 그어지고, 이어서 SINCE 태그가 열린다. .ul.in 은 다른 구간용으로 그대로 */
@keyframes ulDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sinceOpen{from{clip-path:polygon(0 0,0 0,0 calc(100% - 10px),0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}}
.hero h1 .ul::after{transition:none;animation:ulDraw .85s var(--ease) 1s both}
.hero h1 .since{animation:sinceOpen .5s var(--ease) 1.75s both}
@media(prefers-reduced-motion:reduce){.hero h1 .ul::after,.hero h1 .since{animation:none;transform:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;height:58px;padding:0 27px;border-radius:999px;
  font-size:16px;font-weight:600;text-decoration:none;overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn.solid{background:#fff;color:#0b0810}
.btn.solid::before{content:"";position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(237,64,54,.2),transparent);transition:transform .7s var(--ease)}
.btn.solid:hover::before{transform:translateX(110%)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(255,255,255,.16)}
.btn.ghost{border:1px solid rgba(255,255,255,.24)}
.btn.ghost:hover{border-color:#fff;transform:translateY(-2px)}

/* 벌집 격자 */
.lattice{position:absolute;inset:-6% -4%;z-index:1;pointer-events:none;
  display:grid;grid-auto-flow:row;gap:var(--hgap,7px);align-content:center;justify-content:center}
.lrow{display:flex;gap:var(--hgap,7px)}
@keyframes cellIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
.lcell{animation:cellIn .6s var(--ease,ease) both}
.lrow:nth-child(even){margin-left:calc((var(--hw,58px) + var(--hgap,7px)) / 2)}
.lattice{contain:layout style paint;will-change:transform;transform:translateZ(0)}
.lcell{contain:layout style paint;width:var(--hw,58px);height:calc(var(--hw,58px) * 1.12);clip-path:var(--hex);
  background:rgba(255,255,255,.028);transition:background .3s var(--ease)}
.lcell.near{background:rgba(244,112,95,.15)}
.lcell.hot{background:rgba(240,84,70,.5)}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;will-change:transform;
  background:radial-gradient(64% 58% at 22% 48%,rgba(11,8,16,.95) 30%,rgba(11,8,16,.5) 60%,transparent 82%)}
@media(min-width:1500px){.lattice{--hw:72px;--hgap:8px}}
@media(min-width:1900px){.lattice{--hw:84px;--hgap:9px}}
@media(max-width:760px){.lattice{--hw:42px;--hgap:5px}}


/* 히어로 하단 — 실제 고객 병원 띠. 서비스 키워드는 바로 아래 섹션에서 다루므로 여기선 '누구와 일했는가'만 말한다. */
/* 불투명 막대는 히어로를 가린다 → 아래로 갈수록 짙어지는 그라데이션으로 깔고,
   글자만 키워 벌집·오브가 띠 뒤로 비쳐 보이게 한다. */
.hstrip{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(11,8,16,.42) 34%,rgba(11,8,16,.86));
  display:flex;align-items:center;height:var(--striph);overflow:hidden}
.mq{flex:1;min-width:0;overflow:hidden}
.mq ul{display:flex;margin:0;padding:0;list-style:none;width:max-content;
  animation:mq 74s linear infinite;will-change:transform}
/* 이름은 섹션 제목에 가까운 크기로. 대신 투명도를 낮춰 헤드라인과 싸우지 않게 한다. */
.mq li{display:flex;align-items:center;padding:0 clamp(28px,2.8vw,48px);
  font-size:clamp(28px,3.6vw,54px);font-weight:800;letter-spacing:-.042em;line-height:1;   /* 800: 제목과 같은 굵기 파일을 재사용 — 띠 글꼴 도착이 LCP 를 미루던 것 제거(2026-09-15) */
  color:rgba(233,227,245,.3);white-space:nowrap;transition:color .5s var(--ease)}
/* 이름 사이 육각 마커는 2026-09-14 대표 지시로 제거. 간격은 padding 으로만 */
.hstrip:hover .mq li{color:rgba(233,227,245,.52)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq ul{animation:none}}
@media(max-width:760px){.hero{flex-direction:column;justify-content:center;align-items:stretch;padding-top:96px}
  .hero .wrap{width:100%}
  .hstrip{position:static;width:100%;margin-top:34px;background:none;border-top:1px solid var(--line)}
}

.sec{padding:clamp(88px,10.5vw,148px) 0;position:relative}
.sec>.wrap{position:relative;z-index:1}

/* 스포트라이트 카드 */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.g3{grid-template-columns:1fr}}
/* 브랜드 박스 — 로고의 깎인 모서리를 따 오른쪽 아래를 자르고, 안쪽에 벌집 텍스처를 깐다.
   테두리는 1px 레이어(::before) 위에 본체(::after)를 덮어 만든다. clip-path 는 border 를 잘라먹기 때문. */
.card,.stat,.post{--c:34px;--bxline:var(--line);--bxfill:var(--card);--bxtex:var(--hexbg);
  position:relative;border:0;border-radius:0;background:none;overflow:visible;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.card>*,.stat>*,.post>*{position:relative;z-index:2}
.card::before,.stat::before,.post::before{content:"";position:absolute;inset:0;z-index:0;clip-path:inherit;
  background:var(--bxline);transition:background .45s var(--ease)}
.card::after,.stat::after,.post::after{content:"";position:absolute;inset:1px;z-index:1;clip-path:inherit;
  background:var(--bxtex),var(--bxfill);background-position:0 0;
  transition:background-color .45s var(--ease)}
.card:hover::before,.stat:hover::before,.post:hover::before{background:var(--grad)}

.card{padding:clamp(28px,2.7vw,36px)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 64px rgba(0,0,0,.45)}
.card .en{display:block;margin-top:clamp(20px,1.8vw,26px);font-size:12px;letter-spacing:.13em;
  color:var(--dim);font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--line)}
.card h3{margin:18px 0 13px}
.card p{margin:0;font-size:16px;line-height:1.75;color:var(--mute);word-break:keep-all}
/* 카드 하위 항목 — 세 서비스 아래 실제 일. 얇은 선으로 나누고 육각 불릿 */
.card .sub{margin:22px 0 0;padding:18px 0 0;list-style:none;border-top:1px solid var(--line);display:grid;gap:12px}
.card .sub li{display:grid;grid-template-columns:12px 1fr;column-gap:10px;align-items:baseline}
.card .sub li::before{content:"";width:11px;height:12.7px;background:var(--hexo-chip) center/contain no-repeat;align-self:center}
.card .sub b{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.card .sub span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--dim);word-break:keep-all}
.card .sub b,.card .sub span{grid-column:2}
.hexicon{width:52px;height:60px;display:flex;align-items:center;justify-content:center;flex:none;
  font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--fg);
  background:var(--hexo-chip) center/contain no-repeat;transition:transform .45s var(--ease)}
.card:hover .hexicon{transform:translateY(-3px) rotate(-6deg)}

/* 역량 */

/* S.A.G */
.sag{background:linear-gradient(165deg,#140d1c,#1c1025);border-block:1px solid var(--line)}
/* 벌집 — 화면 폭 가득 6개. 짝수 칸을 내려 실제 벌집처럼 물리게 한다.
   점등 효과는 transform 대신 scale 프로퍼티를 써서 짝수 칸 오프셋과 겹치지 않게. */
.hexwrap{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,.9vw,14px);
  padding-bottom:9.5%;margin-top:clamp(8px,1.4vw,22px)}
.hexwrap>*:nth-child(even){transform:translateY(52%)}
/* S.A.G 셀 — 단색 면 대신 가는 선 육각. 켜지면 빨간 선이 테두리를 따라 그려지고 안쪽에 옅은 빛이 찬다. */
.hexcell{position:relative;aspect-ratio:1/1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:14% 10%;text-align:center;transition:scale .7s var(--ease)}
.hexcell svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hexcell .base{fill:rgba(255,255,255,.028);stroke:rgba(255,255,255,.16);stroke-width:.7;
  transition:fill .8s var(--ease)}
.hexcell .fillx{fill:var(--hexbg);opacity:.9}                       /* 벌집 텍스처 — 육각 안에만 */
.hexcell .ring{fill:none;stroke:#f4705f;stroke-width:.9;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.hexcell.on .ring{stroke-dashoffset:0}
.hexcell.on .base{fill:rgba(237,64,54,.11)}
/* 꼭짓점 점 — 셀 n이 육각의 n번째 꼭짓점을 채운다는 은유. 링이 다 그려진 뒤 켜짐 */
.hexcell .pt{fill:#fff;transform-origin:center;transform-box:fill-box;scale:0;transition:scale .5s cubic-bezier(.34,1.56,.64,1) 1s}
.hexcell .halo{fill:#f4705f;opacity:0;transform-origin:center;transform-box:fill-box;scale:.4;transition:opacity .6s var(--ease) 1.05s,scale .6s var(--ease) 1.05s}
.hexcell.on .pt{scale:1}
.hexcell.on .halo{opacity:.38;scale:1}
.hexcell::before{content:"";position:absolute;inset:-18%;background:radial-gradient(closest-side,rgba(237,64,54,.22),transparent 70%);
  opacity:0;transition:opacity 1s var(--ease);pointer-events:none}   /* ponytail: drop-shadow 대신 그라데이션 글로우 — 필터가 무겁다 */
.hexcell.on{scale:1.03}
.hexcell.on::before{opacity:1}
.sagcta{margin-top:clamp(30px,3.4vw,52px)}
@media(max-width:820px){.hexwrap{grid-template-columns:repeat(3,1fr);gap:8px 10px;padding-bottom:17%}
  .hexwrap>*:nth-child(even){transform:none}.hexwrap>*:nth-child(3n+2){transform:translateY(50%)}}   /* 3열: 가운데 열만 반 칸 내림 */
.hexcell b{position:relative;font-size:clamp(20px,1.8vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:rgba(255,255,255,.82);transition:color .6s var(--ease)}
.hexcell span{position:relative;font-size:clamp(12px,.95vw,14px);color:var(--dim);line-height:1.4;word-break:keep-all;transition:color .6s var(--ease)}
.hexcell.on b{color:#fff}
.hexcell.on span{color:rgba(255,255,255,.62)}

/* 라이트 구간 */
body.light{background:#f5f4f7;color:#17171c}
body.light .nav{background:rgba(245,244,247,.62)}
body.menu .nav,body.light body.menu .nav{background:#0b0810!important;border-bottom-color:rgba(255,255,255,.08)}
body.light.menu .nav .brand .logo{content:url("../assets/brand/nc_logo_white.png")}
body.light.menu .burger{border-color:var(--line);background:rgba(255,255,255,.04)}
body.light.menu .burger i{background:#fff}
body.light .nav.stuck{background:#f5f4f7;backdrop-filter:none;border-bottom-color:rgba(0,0,0,.08)}
body.light .nav .links a{color:#4b4b57}
body.light .nav .links a:hover,body.light .nav .links a.on{color:#17171c}
body.light .nav .brand b{color:#17171c}
body.light .burger{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.03)}
body.light .burger i{background:#17171c}
body.light #orb{opacity:0}
.lightsec{background:#f5f4f7;color:#17171c;border-block:1px solid rgba(0,0,0,.07)}
.lightsec .lede{color:#5a5a68}
.lightsec .eyebrow{color:var(--acc)}
.lightsec .eyebrow em{color:#6b6b78}
/* 엠블럼 크기·자리 — 제목(h2) 높이만큼, 세로는 제목 중앙, 가로는 아래 박스 열 오른쪽 끝에 맞춘다 */
.head{position:relative}
.sagfull{position:absolute;right:0;top:50%;transform:translateY(-50%);width:clamp(120px,13vw,196px);overflow:visible}
/* B안 — 채워진 육각이 여섯 조각으로 잠깐 벌어졌다(퍼짐) 다시 하나로 닫힌다(완성). 반복 */
.sagfull .fc{fill:var(--pt);stroke:var(--pt);stroke-width:.6;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:sagOpen 5s var(--ease) infinite;animation-delay:calc(var(--i)*.08s)}
@keyframes sagOpen{0%,12%{transform:translate(0,0);opacity:1}42%,58%{transform:translate(calc(var(--dx)*1px),calc(var(--dy)*1px));opacity:.85}88%,100%{transform:translate(0,0);opacity:1}}
.sagfull .ghost{fill:none;stroke:var(--pt);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:sagGhost 5s var(--ease) infinite}
@keyframes sagGhost{0%,20%{transform:scale(1);opacity:0}50%{transform:scale(1.9);opacity:.5}88%,100%{transform:scale(2.6);opacity:0}}
.sagfull .cd{fill:#fff;animation:sagDot 5s var(--ease) infinite}
@keyframes sagDot{0%,12%{opacity:1}42%,58%{opacity:0}88%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sagfull .fc,.sagfull .ghost,.sagfull .cd{animation:none}.sagfull .ghost{opacity:.3;transform:scale(1.6)}}
@media(max-width:980px){.sagfull{width:clamp(110px,16vw,150px)}}
@media(max-width:640px){.sagfull{position:static;transform:none;width:110px;margin:18px 0 0}}
.lightsec .rule{background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,.08) 38%,rgba(0,0,0,.05))}

/* 성과 */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.stat{--bxline:rgba(0,0,0,.1);--bxfill:#fff;--bxtex:var(--hexbgd);--c:30px;
  text-align:center;padding:clamp(32px,3.2vw,46px) 20px}
.stat:hover{transform:translateY(-5px);box-shadow:0 24px 56px rgba(0,0,0,.1)}
.stat .n{font-size:clamp(42px,4.8vw,66px);font-weight:700;letter-spacing:-.048em;line-height:1;
  background:linear-gradient(118deg,#17171c,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .t{margin-top:14px;font-size:15px;color:#4b4b57}
.stat .s{margin-top:6px;font-size:13px;color:#6b6b78}

/* 포트폴리오 — 다크 구간. 좌우로 흐르는 스트립, 왼쪽 자리에 오는 카드가 커진다. 카드 하단에 영문 상호 워드마크. */
.pfsec{background:var(--bg);color:var(--fg);border-block:1px solid var(--line)}
.pfsec .lede{color:var(--mute)}
.pfwrap{--h:min(clamp(360px,58vh,660px),46vw);padding:0 var(--pad);margin-top:clamp(8px,1vw,16px)}
.pfstrip{position:relative;height:var(--h);overflow:hidden;touch-action:pan-y;user-select:none;outline:0}
.pfstrip:focus-visible{outline:2px solid var(--pt);outline-offset:4px}
.gc{position:absolute;left:0;top:0;height:var(--h);text-decoration:none;color:#fff;display:block;overflow:hidden;background:#111;
  transition:transform .6s var(--ease),width .6s var(--ease),opacity .9s var(--ease) var(--d,0ms);opacity:0}
.pfstrip.drag .gc{transition:opacity .9s var(--ease) var(--d,0ms)}
.gc.in{opacity:1}
.gc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter .6s var(--ease);filter:saturate(.8) brightness(.72)}
.gc.lead img{filter:saturate(1) brightness(1)}
.gc .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,16,0) 50%,rgba(11,8,16,.35) 72%,rgba(11,8,16,.82));pointer-events:none}
.gc .nm{position:absolute;left:0;right:0;bottom:0;padding:0 var(--nmp,14px) .04em;white-space:nowrap;line-height:.86;
  font-weight:800;letter-spacing:-.04em;color:#fff;transition:font-size .6s var(--ease),color .6s var(--ease)}
.gc:not(.lead) .nm{color:rgba(255,255,255,.55)}
.pfstrip.drag .gc .nm{transition:none}
.gc .nm i{position:absolute;left:var(--nmp,14px);right:var(--nmp,14px);top:-14px;height:2px;background:var(--pt);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.gc.lead .nm i{transform:scaleX(1)}
.pfarrows{display:flex;gap:10px;justify-content:center;margin-top:22px}
.pfarrows button{width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;border:1px solid rgba(255,255,255,.22);background:none;color:#fff;font-size:18px;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:border-color .3s,background .3s}
.pfarrows button:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.pfarrows button:disabled{opacity:.3;cursor:default}
.pfarrows button:focus-visible{outline:2px solid var(--pt);outline-offset:3px}
.pfsec .acts{margin-top:clamp(30px,3.4vw,52px)}
@media(max-width:700px){.pfwrap{--h:min(300px,62vw)}}
@media(prefers-reduced-motion:reduce){.gc{transition:opacity .01s}.gc .nm{transition:none}}

/* 사례 */
.caselist{border-top:1px solid rgba(0,0,0,.09)}
.case{display:grid;grid-template-columns:92px 1fr auto;gap:22px;padding:22px 4px;
  border-bottom:1px solid rgba(0,0,0,.09);align-items:baseline;
  transition:padding-left .38s var(--ease),background .38s var(--ease)}
.case:hover{padding-left:14px;background:rgba(0,0,0,.02)}
.case .y{font-size:14px;font-weight:700;color:var(--pt)}
.case b{font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.02em}
.case p{margin:7px 0 0;font-size:14.5px;color:#5f5f6c;line-height:1.65;word-break:keep-all}
.case .plus{font-size:18px;color:#b9b9c4;transition:transform .38s var(--ease),color .38s var(--ease)}
.case:hover .plus{transform:rotate(90deg);color:var(--pt)}
@media(max-width:700px){.case{grid-template-columns:1fr auto;gap:6px}.case .y{grid-column:1/-1}}

/* 인사이트 */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posts{grid-template-columns:1fr}}
.post{--bxline:rgba(0,0,0,.1);--bxfill:#fff;--bxtex:var(--hexbgd);
  min-width:0;/* 사파리: 1fr 칸의 최소폭이 썸네일 원본 폭(1600px)이 되어 아이폰에서 격자가 옆으로 벌어지고 페이지가 축소된다 */
  display:flex;flex-direction:column;text-decoration:none}
.post:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.1)}
.post .thumb{aspect-ratio:16/9;overflow:hidden;background:#eee;margin:1px 1px 0}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .thumb img{transform:scale(1.06)}
.post .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.post .tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--pt);
  border:1px solid rgba(237,64,54,.28);border-radius:999px;padding:5px 11px}
.post h3{font-size:19px;line-height:1.42;color:#17171c}
.post p{margin:0;font-size:14.5px;line-height:1.7;color:#5f5f6c;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .date{margin-top:auto;font-size:12.5px;color:#6b6b78}

/* CTA */
.band{background:var(--bg);color:#fff;text-align:center;padding:clamp(84px,9.5vw,136px) 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;left:50%;top:-140px;translate:-50% 0;width:420px;height:462px;
  clip-path:var(--hex);background:radial-gradient(closest-side,rgba(237,64,54,.2),transparent)}
.band .wrap{position:relative;z-index:2}
.band .eyebrow{justify-content:center}
.band .lede{margin:22px auto 0;text-align:center;max-width:44ch;color:var(--mute)}

/* 푸터 */
/* 푸터 — 오브가 비치는 자리. 캔버스보다 위 층에 두고 배경은 반투명, 글씨 뒤에만 옅은 받침판 */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:66px 0 40px;background:rgba(11,8,16,.38);color:#fff}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding:clamp(24px,2.6vw,38px);background:rgba(11,8,16,.62);
  border:1px solid rgba(255,255,255,.1);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:26px}}
.fgrid h4{margin:0 0 15px;font-size:11px;letter-spacing:.14em;color:#b3acc2;font-weight:700}
.fgrid a{display:inline-flex;align-items:center;gap:0;text-decoration:none;color:#f1edf6;font-size:14px;
  margin-bottom:10px;transition:color .28s var(--ease),gap .28s var(--ease)}
.fgrid a::before{content:"";width:0;height:1px;background:var(--acc2);transition:width .3s var(--ease)}
.fgrid a:hover{color:var(--acc2);gap:8px}
.fgrid a:hover::before{width:10px}
.fbrand{display:flex;flex-direction:column;gap:14px}
.fbrand .lock{display:flex;align-items:center;gap:10px}
.fbrand .lock img{width:30px;height:30px}
.fbrand b{font-size:19px;font-weight:800}
.ftag{margin:0;font-size:14px;color:#d9d3e3;line-height:1.8}
.flegal{margin:26px 0 0;font-size:12.5px;line-height:1.8;color:#8f889e;word-break:keep-all}
.flegal a{color:inherit;text-decoration:none}
.fbar{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12px;color:#b3acc2}

.top{position:fixed;right:22px;bottom:22px;z-index:70;width:46px;height:53px;
  background:var(--hexo-chip) center/contain no-repeat;border:0;cursor:pointer;color:var(--acc2);font-size:15px;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.top.show{opacity:1;transform:none;pointer-events:auto}
/* 카카오톡 채널 — 옛 홈페이지에 있던 상담 버튼. 맨 위로 버튼 위에 늘 보인다 */
.kakao{position:fixed;right:22px;bottom:86px;z-index:70;width:46px;height:53px;display:grid;place-items:center;
  background:#FEE500;clip-path:polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.kakao svg{width:22px;height:22px;fill:#191919}
.kakao:hover{transform:translateY(-3px);filter:brightness(1.05)}
.kakao:focus-visible{outline:2px solid var(--pt);outline-offset:3px}

/* 첫 화면(히어로)은 스크립트를 기다리지 않고 CSS 로 바로 등장 — 최대 콘텐츠 표시(LCP)가 gsap 로드 뒤로 밀리지 않게(2026-09-15). 나머지 구간은 data-reveal 스크롤 모션 그대로 */
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero h1,.hero .lede,.hero .acts,.phero h1,.phero .lede,.phero .kind{animation:heroIn .9s var(--ease) both}
.hero .lede,.phero .lede{animation-delay:.15s}.hero .acts{animation-delay:.3s}
html.js [data-reveal]{opacity:0;transform:translateY(22px)}
html.js [data-split] .ch{opacity:0;transform:translateY(26px);display:inline-block}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-split] .ch{opacity:1;transform:none}
  .hero h1,.hero .lede,.hero .acts,.phero h1,.phero .lede,.phero .kind{animation:none}
  .prog{display:none}
}

/* nc.js(SAG 랜딩 공용)가 붙이는 플로팅 버튼 — 홈페이지는 자체 .top 버튼을 쓴다 */
.fbtns{display:none}

/* 인사이트 카드뉴스(정사각) 썸네일은 자르지 않고 담는다 */
.post .thumb.fit{background:#ece9f1}
.post .thumb.fit img{object-fit:contain}

/* 푸터 하단 바의 링크(개인정보처리방침) — 주변 글씨색 그대로, 밑줄만 */
.fbar a{color:inherit;text-decoration:underline;text-underline-offset:3px}