/* 서울이고운치과 ERP - 디자인 토큰 + 토스풍 반응형 셸
   단일 소스: website-tokens.md 미러 (ADR-014). 카드 radius 통일 16px.
   목업(c:/tmp/erp_mock/) 디자인을 실앱에 이식. WCAG AA 대비 토큰 유지. */
:root {
  /* ---- 브랜드 오렌지 4단 ---- */
  --o-light:  #FF7E5F;   /* 다크배경 텍스트/장식/액센트 */
  --o-hover:  #E8624A;   /* hover / 라인 */
  --o-text:   #D54E30;   /* 흰배경 텍스트 WCAG AA */
  --o-strong: #A63A1E;   /* 강조 */

  /* 호환용 별칭(기존 inline hex 매핑) */
  --brand-accent: #FF7E5F;
  --brand-hover:  #E8624A;
  --brand-text:   #D54E30;
  --brand-strong: #A63A1E;

  --base:  #FFFFFF;
  --soft:  #F7F7F7;
  --tint:  #FFE8DF;
  --tint2: #FFF3EC;
  --bg-base: #FFFFFF;
  --bg-soft: #F7F7F7;

  --ink:      #1B1410;
  --dim:      #7A6E66;
  --border:   #ECE4DD;
  --text:     #1B1410;
  --text-dim: #7A6E66;

  --up:#20C997;        /* dots/bars/장식 전용 */
  --down:#F04452;
  --up-text:#087F5B;   /* 흰/soft 위 텍스트 AA */
  --down-text:#E03131;

  --page:#FAF8F6;      /* 따뜻한 중립 페이지 배경(순백 아님) */
  --card:#FFFFFF;

  --radius:16px;       /* 카드 radius 통일 */
  --radius-sm:12px;
  --radius-xs:8px;

  --shadow-sm:0 1px 2px rgba(27,20,16,.04), 0 1px 3px rgba(27,20,16,.05);
  --shadow:0 2px 6px rgba(27,20,16,.05), 0 8px 24px -10px rgba(27,20,16,.10);
  --shadow-hi:0 8px 28px -8px rgba(166,58,30,.22), 0 2px 8px rgba(27,20,16,.06);

  --sidebar-w:248px;
  --max:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Pretendard","Pretendard Variable",-apple-system,system-ui,sans-serif;
  background:var(--page);
  color:var(--ink);
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* 키보드 포커스 가시성(상시 ERP, a11y) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--o-text);outline-offset:2px;border-radius:8px;
}
.num{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ LAYOUT SHELL ============ */
.shell{display:flex;min-height:100dvh}

/* ---- Sidebar (PC >=1024) ---- */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--base);border-right:1px solid var(--border);
  padding:22px 16px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px}
.brand-mark{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(150deg,var(--o-light),var(--o-strong));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 4px 12px -3px rgba(166,58,30,.45);
}
.brand-name{font-weight:700;font-size:15px;line-height:1.15}
.brand-sub{font-size:11px;color:var(--dim);font-weight:500}

.nav-group{margin-top:6px}
.nav-label{font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;padding:14px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:12px;min-height:44px;
  padding:10px 12px;border-radius:11px;
  font-size:14px;font-weight:500;color:#52483F;
  transition:background .14s ease,color .14s ease;position:relative;
}
.nav-item:hover{background:var(--soft)}
.nav-item .ico{width:19px;height:19px;flex-shrink:0;stroke:#52483F;stroke-width:1.7;fill:none}
.nav-item.active{background:var(--tint2);color:var(--o-strong);font-weight:600}
.nav-item.active .ico{stroke:var(--o-text)}
.nav-item.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--o-text)}
.nav-item .badge{margin-left:auto;font-size:11px;font-weight:700;background:var(--o-text);color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center}
.nav-lock{margin-left:auto;width:14px;height:14px;stroke:var(--dim);stroke-width:1.8;fill:none}

.sidebar-foot{margin-top:auto;padding-top:14px}
.sb-profile{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;background:var(--soft)}
.avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:linear-gradient(150deg,#FFD9C9,#FFB59C);display:grid;place-items:center;color:var(--o-strong);font-weight:700;font-size:14px}
.sb-profile .pn{font-size:13px;font-weight:600;line-height:1.2}
.sb-profile .pr{font-size:11px;color:var(--dim)}
.sb-logout{margin-top:10px}
.sb-logout button{width:100%;text-align:left;display:flex;align-items:center;gap:12px;min-height:42px;padding:10px 12px;border-radius:11px;font-size:14px;font-weight:500;color:#52483F;transition:background .14s ease}
.sb-logout button:hover{background:var(--soft)}
.sb-logout svg{width:18px;height:18px;stroke:#52483F;stroke-width:1.8;fill:none}

/* ---- Main column ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* top bar */
.topbar{
  height:64px;flex-shrink:0;display:flex;align-items:center;gap:14px;
  padding:0 clamp(20px,4vw,40px);
  background:color-mix(in srgb,var(--page) 86%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;
}
.hamburger{display:none}
.topbar .greet{font-size:13px;color:var(--dim);font-weight:500}
.topbar .greet b{color:var(--ink);font-weight:700}
.crumbs{font-size:13px;color:var(--dim);font-weight:500;display:flex;align-items:center;gap:7px}
.crumbs b{color:var(--ink);font-weight:700}
.crumbs svg{width:14px;height:14px;stroke:var(--dim);stroke-width:2;fill:none}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill-date{font-size:12.5px;font-weight:600;color:#52483F;background:var(--base);border:1px solid var(--border);padding:7px 13px;border-radius:999px;box-shadow:var(--shadow-sm)}
.icon-btn{width:40px;height:40px;border-radius:11px;background:var(--base);border:1px solid var(--border);display:grid;place-items:center;box-shadow:var(--shadow-sm);position:relative}
.icon-btn svg{width:18px;height:18px;stroke:#52483F;stroke-width:1.7;fill:none}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--o-text);border:1.5px solid var(--base)}
.topbar-avatar{display:flex;align-items:center;gap:9px;padding:5px 6px 5px 5px;border-radius:999px;border:1px solid var(--border);background:var(--base);box-shadow:var(--shadow-sm)}
.topbar-avatar .nm{font-size:13px;font-weight:600;padding-right:4px}
.mbrand{display:none;align-items:center;gap:9px;font-weight:700;font-size:15px}

/* content scroll area */
.content{flex:1;padding:clamp(20px,3.4vw,36px) clamp(20px,4vw,40px) 60px;max-width:var(--max);width:100%}

/* page heading */
.page-head{margin-bottom:22px}
.page-head h1{font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-.025em}
.page-head h1 .accent{color:var(--o-text)}
.page-head p,.page-head .sub{color:var(--dim);font-size:14px;margin-top:5px;font-weight:500}
.page-head .sub b{color:var(--o-text);font-weight:700}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--dim);margin-bottom:8px}
.back-link svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none}

/* ============ DASHBOARD GRID ============ */
.grid{display:grid;gap:18px;grid-template-columns:1.55fr 1fr;align-items:start}
@media (max-width:1180px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card-link{display:block;transition:transform .16s ease,box-shadow .2s ease}
.card-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi)}
.card-link:active{background:var(--tint2)}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-title{font-size:14.5px;font-weight:600;color:#52483F;display:flex;align-items:center;gap:8px}
.card-title .ti{width:18px;height:18px;stroke:var(--o-text);stroke-width:1.8;fill:none}
.chev{width:18px;height:18px;stroke:var(--dim);stroke-width:2;fill:none;flex-shrink:0}

/* ===== HERO: 매출 (대시보드 시각 지배자) ===== */
.hero{grid-row:span 2;background:radial-gradient(120% 90% at 100% 0%, #FFF3EC 0%, transparent 55%),var(--card);position:relative;overflow:hidden}
.hero .badge-status{font-size:11.5px;font-weight:700;color:var(--o-strong);background:var(--tint);padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.hero .badge-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--up)}
.hero .badge-muted{font-size:11.5px;font-weight:700;color:var(--dim);background:var(--soft);padding:5px 11px;border-radius:999px}

.gauge-wrap{display:flex;align-items:center;gap:28px;margin:6px 0 4px;flex-wrap:wrap}
.gauge{position:relative;width:200px;height:200px;flex-shrink:0}
.gauge svg{transform:rotate(-90deg)}
.gauge .center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge .center .pct{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1}
.gauge .center .pct .u{font-size:22px;font-weight:700}
.gauge .center .pl{font-size:12px;color:var(--dim);font-weight:600;margin-top:6px}

.hero-figures{flex:1;min-width:190px}
.figrow{display:flex;align-items:baseline;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--border)}
.figrow:last-child{border-bottom:none}
.figrow .fl{font-size:13px;color:var(--dim);font-weight:500}
.figrow .fv{font-size:18px;font-weight:700;letter-spacing:-.02em}
.figrow .fv.big{font-size:23px;color:var(--o-strong);font-weight:800}
.figrow .fv .u{font-size:13px;color:var(--dim)}
.delta{font-size:12px;font-weight:700;color:var(--up-text);display:inline-flex;align-items:center;gap:3px}
.hero-bar{height:9px;border-radius:999px;background:#F2EBE5;overflow:hidden;margin-top:16px}
.hero-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--o-light),var(--o-strong))}
.hero-foot{margin-top:14px;font-size:12px;color:var(--dim);display:flex;align-items:center;gap:7px}
.hero-foot .live{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 0 3px rgba(32,201,151,.18);flex-shrink:0}

/* ===== LEAVE card (연차 — 매출보다 작게) ===== */
.leave-num{display:flex;align-items:baseline;gap:6px;margin:2px 0 14px}
.leave-num .n{font-size:clamp(34px,5vw,42px);font-weight:800;letter-spacing:-.04em;line-height:.92;color:var(--ink)}
.leave-num .u{font-size:16px;font-weight:700;color:var(--dim)}
.leave-bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden;display:flex}
.leave-bar i{display:block;height:100%}
.leave-bar .used{background:var(--border)}
.leave-bar .rem{background:linear-gradient(90deg,var(--o-light),var(--o-text))}
.leave-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:12.5px;color:var(--dim);font-weight:500}
.leave-meta b{color:#52483F}

/* ===== SURGERY list ===== */
.surg-count{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.surg-count .n{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.surg-count .u{font-size:15px;font-weight:700;color:var(--dim)}
.surg-list{margin-top:14px;display:flex;flex-direction:column}
.surg-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border)}
.surg-item:first-child{border-top:none}
.surg-time{font-size:13px;font-weight:700;color:var(--o-strong);width:48px;flex-shrink:0}
.surg-info{flex:1;min-width:0}
.surg-info .pn{font-size:14px;font-weight:600}
.surg-info .px{font-size:12px;color:var(--dim);margin-top:1px}
.surg-tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;flex-shrink:0;background:var(--tint2);color:var(--o-strong)}
.surg-tag.gum{background:#E8F8F2;color:#0E7A5B}
.surg-tag.ext{background:#F1ECFB;color:#5B3FB0}
.surg-empty{font-size:13px;color:var(--dim);margin-top:8px}
.surg-more{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--o-strong);padding:14px 0 4px;margin-top:4px;border-top:1px solid var(--border)}

/* 데모 카드 */
.demo-body{font-size:13.5px;color:var(--dim);line-height:1.55}
.demo-body b{color:var(--o-strong);font-weight:700}

/* ===== 일반 폼/버튼(연차 신청·로그인·승인) ===== */
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.form-card .fc-title{font-weight:700;font-size:15px;margin-bottom:12px}
.field{display:block;margin-bottom:12px}
.field .lab{display:block;font-size:12.5px;color:var(--dim);font-weight:600;margin-bottom:5px}
.field input{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;font:inherit;background:var(--base);color:var(--ink);transition:border-color .14s,box-shadow .14s}
.field input:focus{outline:none;border-color:var(--o-text);box-shadow:0 0 0 3px rgba(213,78,48,.14)}
.keep-login{display:flex;align-items:center;gap:8px;margin:2px 0 16px;font-size:13px;color:var(--dim);user-select:none;cursor:pointer}
.keep-login input{width:16px;height:16px;accent-color:var(--o-strong);cursor:pointer}
.btn{height:46px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;display:grid;place-items:center;width:100%;transition:transform .12s,filter .15s,background .15s}
.btn:active{transform:scale(.98)}
.btn-pri{background:var(--o-strong);color:#fff;box-shadow:0 6px 16px -6px rgba(166,58,30,.5)}
.btn-pri:hover{background:var(--o-text)}
.btn-sec{background:var(--base);border:1px solid var(--border);color:#52483F}
.btn-sec:hover{background:var(--soft)}
.row-actions{display:flex;gap:10px}
.row-actions .btn{flex:1}

.alert{margin-bottom:14px;border-radius:var(--radius-sm);background:var(--tint);color:var(--o-strong);padding:11px 14px;font-size:13.5px;font-weight:500}

/* 신청 내역 / 승인 행 */
.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:10px}
.list-row .lr-main{font-size:13.5px;font-weight:600}
.list-row .lr-sub{font-size:12.5px;color:var(--dim);margin-top:2px}
.status-pill{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap}
.status-pill.approved{background:var(--tint);color:var(--o-strong)}
.status-pill.rejected{background:var(--soft);color:var(--dim)}
.status-pill.pending{background:var(--tint2);color:var(--o-text)}

/* 섹션 라벨 */
.sec-label{font-size:13px;font-weight:700;color:#52483F;margin:18px 0 10px}
.empty-note{font-size:13px;color:var(--dim)}

/* ===== 권한콘솔 ===== */
.perm-wrap{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start}
@media (max-width:760px){.perm-wrap{grid-template-columns:1fr}}
.perm-roles{display:flex;flex-direction:column;gap:8px}
@media (max-width:760px){.perm-roles{flex-direction:row;flex-wrap:wrap}}
.perm-roles .rl{font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.role-btn{padding:11px 14px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border);font-size:13.5px;font-weight:600;color:#52483F;text-align:left;transition:background .14s,border-color .14s}
.role-btn:hover{background:var(--tint2);border-color:var(--o-light);color:var(--o-strong)}
.perm-panel{min-height:120px}
.perm-panel .ph{font-size:14px;font-weight:700;margin-bottom:12px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 15px;margin-bottom:8px}
.toggle-row .tl{font-size:13.5px;font-weight:600}
.toggle-row .tl .sc{color:var(--dim);font-weight:500;font-size:12px}
.tg{font-size:12.5px;font-weight:700;border-radius:999px;padding:6px 14px;transition:background .14s}
.tg.on{background:var(--o-strong);color:#fff}
.tg.on:hover{background:var(--o-text)}
.tg.off{background:var(--soft);color:var(--dim);border:1px solid var(--border)}
.tg.off:hover{background:var(--tint2);color:var(--o-text)}

/* ===== 로그인 화면 ===== */
.login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(130% 80% at 50% 0%, var(--tint2) 0%, transparent 60%),var(--page)}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 26px}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.login-brand .brand-mark{width:40px;height:40px;font-size:17px;border-radius:12px}
.login-brand .bn{font-weight:800;font-size:17px;line-height:1.1}
.login-brand .bs{font-size:12px;color:var(--dim);font-weight:500;margin-top:2px}
.login-card h1{font-size:19px;font-weight:800;margin-bottom:4px}
.login-card .lh-sub{font-size:13px;color:var(--dim);margin-bottom:20px}

/* ===== 상세: 타임라인 + 패널 ===== */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:13px 17px;box-shadow:var(--shadow-sm);min-width:96px}
.chip .cl{font-size:12px;color:var(--dim);font-weight:600}
.chip .cv{font-size:23px;font-weight:800;letter-spacing:-.03em;margin-top:3px}

.det-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;margin-top:6px}
.card-h{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-flat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h .t{font-size:15px;font-weight:700}
.card-h .mask{font-size:11.5px;font-weight:600;color:var(--dim);display:inline-flex;align-items:center;gap:5px;background:var(--soft);padding:5px 10px;border-radius:999px}
.card-h .mask svg{width:12px;height:12px;stroke:var(--dim);stroke-width:2;fill:none}
.det-list{padding:8px 22px 18px}
.det-item{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--border)}
.det-item:first-child{border-top:none}
.det-time{width:54px;flex-shrink:0;font-size:13px;font-weight:700;color:#52483F}
.det-time .dur{display:block;font-size:11px;color:var(--dim);font-weight:500;margin-top:2px}
.det-body{flex:1;min-width:0}
.det-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.det-name{font-size:14.5px;font-weight:700}
.det-proc{font-size:12.5px;color:#52483F;margin-top:3px}

/* ============ MOBILE BOTTOM NAV + DRAWER (<1024) ============ */
.bottomnav{display:none}
.drawer-scrim{display:none}

@media (max-width:1023px){
  .sidebar{display:none}
  .hamburger{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--base);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
  .hamburger svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.9;fill:none}
  .mbrand{display:flex}
  .topbar .greet{display:none}
  .topbar-avatar .nm{display:none}
  .crumbs .pre{display:none}
  .content{padding-bottom:96px}

  .drawer-scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(27,20,16,.42);opacity:0;pointer-events:none;transition:opacity .22s ease;backdrop-filter:blur(2px)}
  .drawer{position:fixed;top:0;left:0;height:100dvh;width:min(82vw,300px);z-index:51;background:var(--base);box-shadow:0 0 40px rgba(0,0,0,.2);transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.1,1);padding:22px 16px;display:flex;flex-direction:column;overflow-y:auto}
  body.drawer-open .drawer-scrim{opacity:1;pointer-events:auto}
  body.drawer-open .drawer{transform:translateX(0)}

  .bottomnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;inset-inline:0;z-index:40;background:color-mix(in srgb,var(--base) 92%,transparent);backdrop-filter:saturate(160%) blur(14px);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:8px 0;font-size:11px;font-weight:600;color:#6B6058;width:100%}
  .tab svg{width:23px;height:23px;stroke:#6B6058;stroke-width:1.8;fill:none}
  .tab.active{color:var(--o-strong)}
  .tab.active svg{stroke:var(--o-text)}
}
@media (min-width:1024px){.drawer,.drawer-scrim{display:none!important}}
.drawer .brand{padding:0 8px 20px}

/* entrance animation */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference){
  .grid > *{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .grid > *:nth-child(1){animation-delay:.02s}
  .grid > *:nth-child(2){animation-delay:.07s}
  .grid > *:nth-child(3){animation-delay:.12s}
  .grid > *:nth-child(4){animation-delay:.17s}
}