:root{
  /* 팔레트 '더스크' — 참고 이미지(palette-texture_ref.webp) 실측: 위 #192046→#2746cb 파랑, 지평선 #d4782f 주황, 아래 #971c23→#54191a 적갈 */
  --bg:#101c5e;
  --ink:#f3e9dc;                 /* 크림 글자 (참고 이미지의 막대 테두리 톤) */
  --ink-soft:rgba(243,233,220,.62);
  --on-ink:#192046;              /* 크림 버튼 위 글자 */
  --deep:#54191a;
  --tile:#1a1230;
  --sky:linear-gradient(180deg,#0b1240 0%,#101c5e 16%,#15297f 32%,#1a35a0 44%,#3f4297 50%,#8a5470 55%,#d0702c 60%,#ff8a1c 65%,#ff7412 70%,#e8501c 76%,#c12f22 83%,#9a1c20 90%,#5a1517 100%);
  --sunbar:linear-gradient(180deg,#000000 0%,#0b1240 18%,#1a35a0 38%,#3f6fd0 50%,#ffd23a 64%,#ff7412 80%,#ffffff 100%);   /* 일출-일몰: 블랙→네이비→블루→옐로우→오렌지→화이트 */
  --soloH:clamp(240px,36vw,560px);   /* 가로 단독 타일의 공통 높이 */
  --radius:14px;
  --gap:10px;
  --pad:24px;
  --nav-h:64px;
  --font-display:'Sofia Sans Extra Condensed','Anton','Pretendard',Impact,sans-serif;
  --font-weight-display:900;
  --font-ui:'Sofia Sans Extra Condensed','Oswald','Pretendard',system-ui,sans-serif;
  --font-body:'Pretendard',system-ui,-apple-system,sans-serif;
}
/* 서체 비교 — ?font=bigshoulders / ?font=anton */
[data-font="bigshoulders"]{ --font-display:'Big Shoulders Display','Anton',Impact,sans-serif; --font-ui:'Big Shoulders Display','Oswald',sans-serif; }
[data-font="anton"]{ --font-display:'Anton',Impact,sans-serif; --font-weight-display:400; --font-ui:'Oswald',sans-serif; }
/* 팔레트 비교 — ?theme=signal(빨강/핑크) / ?theme=brand(네이비/크림) */
[data-theme="signal"]{ --bg:#f9e6e2; --ink:#ef3327; --ink-soft:rgba(239,51,39,.65); --on-ink:#fdf1ef; --deep:#ef3327; --tile:#1a0b09; --sky:none; }
[data-theme="brand"]{ --bg:#f3efe8; --ink:#141b4d; --ink-soft:rgba(20,27,77,.62); --on-ink:#f3efe8; --deep:#141b4d; --tile:#0d1030; --sky:none; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--deep);color:var(--ink);position:relative;min-height:100%;font-family:var(--font-body);font-size:15px;line-height:1.5;letter-spacing:-.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* 배경 그라데이션: 첫 화면에는 전체 색이 한 번에 보이고, 스크롤할수록 푸터까지 넓게 퍼진다 */
.bg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-2;background-image:var(--sky);background-color:var(--deep);background-repeat:no-repeat;background-size:100% 100svh;background-position:0 0}
/* 그라데이션 높이는 JS가 스크롤에 맞춰 첫 화면 높이 → 문서 전체 높이로 늘린다 */
.grain{position:fixed;inset:-40%;z-index:60;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:360px 360px;animation:grain 1.6s steps(8) infinite,flicker 4s ease-in-out infinite}
/* 16mm 필름 그레인: 굵은 입자, 1.6초에 8프레임(초당 5회)으로 자리가 바뀌고 밝기가 미세하게 흔들린다 */
@keyframes grain{0%{transform:translate(0,0)}12.5%{transform:translate(-3%,2%)}25%{transform:translate(2%,-3%)}37.5%{transform:translate(-1%,3%)}50%{transform:translate(3%,-1%)}62.5%{transform:translate(-2%,-2%)}75%{transform:translate(1%,1%)}87.5%{transform:translate(-3%,-1%)}100%{transform:translate(0,0)}}
@keyframes flicker{0%,100%{opacity:.2}30%{opacity:.17}55%{opacity:.22}80%{opacity:.185}}
[data-theme="signal"] .grain,[data-theme="brand"] .grain{opacity:.1;mix-blend-mode:multiply;animation:grain 1.6s steps(8) infinite}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--on-ink);padding:8px 12px}

.u{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.02em;font-weight:500}

/* ===== NAV ===== */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 calc(var(--pad) + 6px);pointer-events:none}  /* 로고·버튼을 그리드 가장자리보다 6px 안쪽으로 */
.nav>*{pointer-events:auto}
.nav__brand,.nav__links a{font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:16px;letter-spacing:.03em;color:var(--ink)}
.nav__brand{display:inline-flex;align-items:flex-end}
.nav__brand .c{font-weight:400;position:relative;top:.42em;margin-left:.06em;line-height:1}
.nav__links{display:flex;gap:22px}
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__count{opacity:.55;font-weight:400}
.nav .pill{justify-self:end}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--on-ink);font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:16px;letter-spacing:.03em;padding:8px 18px;border-radius:999px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.pill:hover{transform:scale(1.04)}
.pill--lg{font-size:20px;padding:14px 28px}

/* ===== HERO ===== */
.hero{padding:var(--nav-h) var(--pad) 18px;min-height:calc(100svh - 100px);display:flex;flex-direction:column;justify-content:space-between}
.hero__head{position:relative;margin:1vw 0 0}
.hero__title{font-family:var(--font-display);font-weight:var(--font-weight-display);line-height:.86;letter-spacing:0;text-transform:uppercase;width:100%;white-space:nowrap;font-size:22vw;margin:0;user-select:none;cursor:default}
.hero__base{display:inline-block;color:var(--ink)}
.hero__c{font-size:.2em;vertical-align:baseline;margin-left:.015em}
.hero__head.has-canvas .hero__base{color:transparent}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.hero__video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.hero__meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;padding-top:40px;font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:15px;letter-spacing:.03em;line-height:1.4;color:var(--ink)}
.hero__meta-c{text-align:center}
.hero__meta-r{text-align:right}

/* 고객사 로고 띠: 소개 섹션 아래 (그리드 안, 위아래 간격) */
.hero__clients{margin:clamp(8px,2vw,24px) 0 clamp(40px,6vw,80px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hero__clients-track{display:flex;align-items:center;gap:56px;width:max-content;padding-right:56px;animation:clients 90s linear infinite}
.hero__clients:hover .hero__clients-track{animation-play-state:paused}
.hero__clients img{height:22px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);opacity:.72}
@keyframes clients{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero__clients-track{animation:none}}

/* ===== WORK GRID ===== */
.work{padding:0 var(--pad) var(--gap);display:grid;gap:var(--gap)}
.row{display:grid;gap:var(--gap)}
.row--1{grid-template-columns:1fr}
.row--2{grid-template-columns:1fr 1fr}
.row--3{grid-template-columns:repeat(3,1fr)}
.row--mix{grid-template-columns:9fr 16fr}
.row--mixl{grid-template-columns:3fr 2fr}   /* 가로 3:2 + 정사각 1:1 = 같은 높이 */
/* 12칸 그리드 행: 타일마다 시작칸·칸수 지정, 원본 비율 유지, 위 정렬 → 레퍼런스처럼 불규칙하지만 정돈 */
.row--g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.row--g .tile{width:100%}
.row--g169{grid-template-columns:16fr 9fr}   /* 16:9 + 1:1, 같은 높이·간격 없음 */
/* 가로 단독 행: 원본 비율 유지, 같은 높이, 좌/우 정렬 번갈아 */
.row--solo{display:flex}
.row--solo.is-right{justify-content:flex-end}
.row--solo .tile{height:var(--soloH);width:auto;max-width:100%}
.tile{position:relative;aspect-ratio:var(--ar);border-radius:var(--radius);overflow:hidden;background:var(--tile);cursor:none;isolation:isolate;transform:translateZ(0);outline:none}
.tile:focus-visible{box-shadow:0 0 0 3px var(--ink)}
.tile__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .8s ease;transform:scale(1.001)}
.tile.is-live .tile__poster{opacity:0}
/* 디졸브 슬라이드 타일: 포스터를 겹쳐 두고 is-on 인 것만 보이게 */
.tile[data-slides] .tile__poster{opacity:0;transition:opacity 2.6s ease-in-out}
.tile[data-slides] .tile__poster.is-on{opacity:1}
.tile__player{position:absolute;inset:0;z-index:1;overflow:hidden}
.tile__player iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.tile__meta{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:12px;padding:12px 14px;
  font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:17px;letter-spacing:.02em;line-height:1.1;color:#fff;pointer-events:none}
.tile__meta span{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35)}
.tile__name{max-width:70%;line-height:1.3}
.tile__year{opacity:.9}
.tile.is-blur{filter:blur(22px);transform:scale(1.02);transition:filter 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tile.is-blur.is-in{filter:blur(0);transform:none}

/* ===== ABOUT (그리드 중간): 상단 About 라벨 → 분야 워드 스택 · 소개문 · Let's collab 가로 3열 ===== */
.about{padding:clamp(56px,9vw,140px) clamp(8px,2vw,32px);display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"label label label" "words text link";gap:clamp(28px,4vw,56px) clamp(32px,5vw,80px);align-items:center}
.about__label{grid-area:label;font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:15px;letter-spacing:.03em;opacity:.7;margin:0}
.about__words{grid-area:words;list-style:none;margin:0;padding:0;text-align:center;font-family:var(--font-display);font-weight:var(--font-weight-display);text-transform:uppercase;font-size:clamp(40px,5.4vw,84px);line-height:.98;letter-spacing:-.005em}
.about__text{grid-area:text;font-size:clamp(17px,1.4vw,21px);line-height:1.7;max-width:30em;margin:0;word-break:keep-all}
.about__link{grid-area:link;justify-self:end;font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:18px;letter-spacing:.03em;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.about__link:hover{opacity:.8}

/* ===== LET'S TALK ===== */
.talk{padding:var(--gap) var(--pad) var(--pad)}
.talk__inner{background:rgba(40,10,20,.38);box-shadow:inset 0 0 0 1px rgba(243,233,220,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ink);border-radius:var(--radius);min-height:0;padding:clamp(32px,5vw,72px) clamp(16px,2.4vw,40px) clamp(24px,3vw,44px);display:flex;flex-direction:column;position:relative}
[data-theme="signal"] .talk__inner,[data-theme="brand"] .talk__inner{background:var(--ink);color:var(--on-ink);box-shadow:none;backdrop-filter:none}
.bar{position:absolute;right:clamp(16px,2.4vw,40px);top:clamp(32px,5vw,72px);width:14px;height:clamp(180px,26vw,380px);background:var(--sunbar);box-shadow:0 0 0 3px var(--ink);border-radius:1px}
.talk__title{font-family:var(--font-display);font-weight:var(--font-weight-display);text-transform:uppercase;line-height:.86;letter-spacing:-.01em;font-size:clamp(88px,19.6vw,300px);margin:0 0 0 -.02em;white-space:nowrap;overflow:hidden;padding-bottom:.06em}
.talk__title span{display:inline-block;transform:translateY(-110%);transition:transform 1.1s cubic-bezier(.2,.9,.2,1)}
.talk__title span+span{transition-delay:.08s}
.talk.is-in .talk__title span{transform:translateY(0)}
.talk__lead{font-size:clamp(17px,1.6vw,22px);line-height:1.55;max-width:34em;margin-top:clamp(20px,2.4vw,32px);opacity:.92}
.talk__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:28px}
.talk .pill{background:var(--ink);color:var(--on-ink)}
[data-theme="signal"] .talk .pill,[data-theme="brand"] .talk .pill{background:var(--on-ink);color:var(--ink)}
.talk__mail{font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:17px;letter-spacing:.04em;border-bottom:1px solid currentColor;padding-bottom:2px;opacity:.9}
.talk__mail:hover{opacity:1}
.talk__cols{margin-top:auto;margin-left:50%;padding-top:clamp(48px,6vw,96px);display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:15px;letter-spacing:.03em;line-height:1.7}
.talk__cols h3{font-size:13px;font-weight:800;opacity:.55;margin-bottom:8px}
.talk__cols a{display:block;width:max-content;border-bottom:1px solid currentColor;padding-bottom:1px;margin-bottom:4px;transition:opacity .3s}
.talk__cols a:hover{opacity:.7}
.talk__cols p{opacity:.9;text-transform:none;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:0;line-height:1.6;margin-top:6px}
@supports not (font-size:clamp(1px,1vw,2px)){.talk__title{font-size:19.6vw}}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(6,8,24,.94);display:flex;align-items:center;justify-content:center;padding:6vh 4vw;opacity:0;transition:opacity .35s}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox__frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.lightbox__frame iframe{border:0;max-width:100%;max-height:100%;border-radius:10px;background:#000}
.lightbox__close{position:absolute;top:18px;right:var(--pad);background:none;border:0;color:#fff;font-family:var(--font-ui);text-transform:uppercase;font-weight:800;font-size:16px;letter-spacing:.06em;cursor:pointer;padding:8px 0}
.lightbox__title{position:absolute;left:var(--pad);bottom:18px;color:#fff;font-family:var(--font-ui);text-transform:uppercase;font-size:12px;letter-spacing:.05em;opacity:.8}

/* ===== CURSOR: 녹화 점 + REC → 영상 위에서는 같은 크기·색의 둥근 재생 삼각형 + PLAY (원→삼각형 clip-path 변형) ===== */
.cursor{position:fixed;left:0;top:0;z-index:80;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s}
.cursor.is-shown{opacity:1}
.cursor__row{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;transform:translate(-6.5px,-50%)}   /* 도형 중심이 포인터 위치 */
.cursor__glow{width:13px;height:13px;flex:none;filter:drop-shadow(0 0 3px rgba(255,42,26,.9)) drop-shadow(0 0 9px rgba(255,42,26,.5));animation:rec 1.3s ease-in-out infinite}
.cursor__shape{display:block;width:100%;height:100%;background:#ff2a1a;clip-path:polygon(50.0% 0.0%,62.9% 1.7%,75.0% 6.7%,85.4% 14.6%,93.3% 25.0%,98.3% 37.1%,100.0% 50.0%,98.3% 62.9%,93.3% 75.0%,85.4% 85.4%,75.0% 93.3%,62.9% 98.3%,50.0% 100.0%,37.1% 98.3%,25.0% 93.3%,14.6% 85.4%,6.7% 75.0%,1.7% 62.9%,0.0% 50.0%,1.7% 37.1%,6.7% 25.0%,14.6% 14.6%,25.0% 6.7%,37.1% 1.7%);transition:clip-path .45s cubic-bezier(.3,.9,.2,1),transform .45s cubic-bezier(.3,.9,.2,1)}
.cursor.is-play .cursor__shape{clip-path:polygon(8.0% 24.6%,8.6% 20.8%,10.2% 17.4%,12.7% 14.5%,16.0% 12.6%,19.7% 11.6%,23.5% 11.8%,27.1% 13.1%,75.2% 38.5%,78.4% 40.9%,80.8% 44.2%,82.0% 48.0%,82.0% 52.0%,80.8% 55.8%,78.4% 59.1%,75.2% 61.5%,27.1% 86.9%,23.5% 88.2%,19.7% 88.4%,16.0% 87.4%,12.7% 85.5%,10.2% 82.6%,8.6% 79.2%,8.0% 75.4%);transform:scale(1.5)}
@keyframes rec{0%,100%{filter:drop-shadow(0 0 3px rgba(255,42,26,.9)) drop-shadow(0 0 9px rgba(255,42,26,.5))}50%{filter:drop-shadow(0 0 2px rgba(255,42,26,.6)) drop-shadow(0 0 5px rgba(255,42,26,.25))}}
.cursor__label{position:relative;height:16px;width:3.4em;font-family:var(--font-ui);font-weight:800;font-size:16px;letter-spacing:.05em;color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.35);line-height:1;white-space:nowrap}
.cursor__label span{position:absolute;left:0;top:50%;transform:translateY(-46%);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.2,1)}   /* -46%: 대문자 서체의 시각 중심 보정 */
.cursor__rec{opacity:1}
.cursor__play{opacity:0;transform:translateY(calc(-46% + 6px))}
.cursor.is-play .cursor__rec{opacity:0;transform:translateY(calc(-46% - 6px))}
.cursor.is-play .cursor__play{opacity:1;transform:translateY(-46%)}
@media (prefers-reduced-motion:reduce){.cursor__glow{animation:none}.cursor__shape{transition:none}}
@media (hover:none),(pointer:coarse){.cursor{display:none}.tile{cursor:pointer}}

/* ===== MOTION PREFS ===== */
@media (prefers-reduced-motion:reduce){.tile.is-blur{filter:none;transform:none}.talk__title span{transform:none}}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  :root{--pad:16px;--gap:8px;--nav-h:56px}
  .nav__links{display:none}
  .nav{grid-template-columns:1fr auto}
  .hero__title{font-size:23vw}
  .hero{min-height:0;padding-bottom:14px}
  .hero__clients{margin:8px 0 36px}
  .hero__clients-track{gap:36px;padding-right:36px}
  .hero__clients img{height:18px;max-width:110px}
  .hero__meta{grid-template-columns:1fr 1fr;padding-top:40px}
  .hero__meta-c{display:none}
  .row--2{grid-template-columns:1fr}
  .row--2 .tile{--ar:16/9}
  .row--1 .tile{--ar:16/9}
  .row--3{grid-template-columns:repeat(3,72vw);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);scrollbar-width:none}
  .row--3::-webkit-scrollbar{display:none}
  .row--3 .tile{scroll-snap-align:start}
  .row--solo .tile{height:auto;width:100%}
  .row--g{grid-template-columns:1fr}
  .row--g .tile{grid-column:1/-1!important}
  .row--g169{grid-template-columns:1fr}
  .row--g3{grid-template-columns:repeat(3,1fr);gap:6px}
  .row--g3 .tile{grid-column:auto!important}
  .row--mix,.row--mixl{grid-template-columns:1fr}
  .row--mix .tile{--ar:1/1}
  .row--mixl .tile{--ar:1/1}
  .about{grid-template-columns:1fr;grid-template-areas:"label" "words" "text" "link";padding:56px 4px;gap:28px}
  .talk__inner{min-height:0}
  .talk__cols{margin-left:0;grid-template-columns:1fr 1fr;padding-top:48px}
  .talk__cols div:last-child{grid-column:1/-1}
  .tile.is-blur{filter:blur(12px)}
  .bar{display:none}
}

/* ===== 레이아웃 편집 모드 (?edit=1) ===== */
.editbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;align-items:center;gap:14px;padding:10px 18px;background:#111;color:#fff;font:500 13px/1.4 var(--font-body);box-shadow:0 -4px 20px rgba(0,0,0,.35)}
.editbar strong{font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.editbar span{opacity:.75;flex:1}
.editbar button,.editbar a{font:inherit;cursor:pointer;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;padding:6px 14px;border-radius:999px}
.editbar button[data-act="save"]{background:#ff2a1a;border-color:#ff2a1a}
.editbar__msg{font-style:normal;opacity:.9}
.editbar__msg[data-ok="0"]{color:#ffb4ad}
.is-edit .work{padding-bottom:80px}
.is-edit .tile{cursor:grab;outline:2px dashed rgba(255,255,255,.35);outline-offset:-2px}
.is-edit .tile.is-dragging{opacity:.4}
.is-edit .tile.is-over{outline:3px solid #ff2a1a}
.is-edit .cursor{display:none}
.is-edit .is-unit{position:relative}
.is-edit .is-unit.is-over{box-shadow:0 -3px 0 #ff2a1a}
.is-edit .is-unit.is-dragging{opacity:.5}
.rowhandle{position:absolute;left:-22px;top:0;width:18px;height:40px;border:0;border-radius:6px;background:rgba(255,255,255,.18);color:#fff;font-size:12px;cursor:grab;z-index:5;line-height:1}
.rowhandle:hover{background:#ff2a1a}