/* =========================================================
   ZIP Theme & Style Packs (NEO / GLASS / BRUTALIST)
   ========================================================= */

/* ---------- Severity & brand tokens (공통) ---------- */
:root{
  --ok: oklch(70% .10 145);
  --warn: oklch(78% .12 80);
  --err: oklch(62% .16 30);

  /* Brand / layout tokens (bg/surface 등은 theme.css에서 정의) */
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.06);
  --brand-1: oklch(63% .16 250);
  --brand-2: oklch(56% .18 250);
  --danger: oklch(60% .17 25);
  --radius:16px;
  --radius-sm:10px;
  --gap:12px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --focus: var(--brand-1);
}

/* 다크모드에서 severity 톤 조정 */
:root[data-theme="dark"]{
  --ok: oklch(78% .10 145);
  --warn: oklch(86% .12 80);
  --err: oklch(70% .16 30);
}

@layer zip {

  /* ---------- 베이스 ---------- */
  html,
  body{
    height:100%;
  }
  body{
    background:var(--bg);
    color:var(--fg, var(--text));
    font-family:var(--font-sans);
  }
  a{
    color:color-mix(in oklch, var(--brand-1) 75%, var(--fg, #111));
    text-decoration:none;
  }
  a:hover{
    text-decoration:underline;
  }
  ::placeholder{
    color:var(--muted);
    opacity:1;
  }
  input,
  select,
  textarea{
    accent-color:var(--brand-1);
  }

  .main{
    container-type:inline-size;
    container-name:main;
  }

  .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .skip-link{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  .skip-link:focus{
    left:12px;
    top:12px;
    width:auto;
    height:auto;
    padding:.5rem .75rem;
    background:var(--surface);
    border-radius:8px;

    z-index:9999;
  }

  /* 카드/컨테이너 (레이아웃만, 색은 theme.css) */
  .card{
    border-radius:var(--radius);
    padding:20px;

  }


  :root{
    --header-h:64px;
    --toolbar-h:0px;
  }
  body{
    padding-top:var(--header-h);
  }
  html{
    scroll-padding-top:calc(var(--header-h) + 16px);
  }
  .section[id]{
    scroll-margin-top:calc(var(--header-h) + 16px);
  }

  /* 헤더 */
  .zip-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }
  .zip-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

  }
  .brand-zip{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:-.01em;
  }
  .brand-text{
    font-size:clamp(18px, 2.2vw, 20px);
  }
  .brand-text .dot{
    opacity:.7;
  }
  .zip-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:10px;
    cursor:pointer;
  }
  .theme-toggle:focus-visible{
    outline:2px solid var(--brand-1);
    outline-offset:2px;
  }

  /* 히어로 */
  .hero-zip{
    position:relative;
    overflow:hidden;
  }
  .h1-hero{
    margin:0 0 8px;
    font-size:clamp(26px, 3.6vw, 38px);
    letter-spacing:-.02em;
  }
  .hero-sub{
    margin:0 0 18px;
    color:var(--muted);
  }

  /* ZIP 시각화 */
  .zip-visual{
    position:relative;
    height:84px;
    margin:8px 0 18px;
  }
  .zip-visual .file-stack{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:100%;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .zip-visual .file-stack span{
    display:inline-flex;
    align-items:flex-end;
    justify-content:center;
    width:52px;
    height:64px;
    border-radius:12px;
    background:var(--surface-2);

    padding-bottom:6px;
    font:700 11px/1 var(--font-mono);
    color:var(--muted);
  }
  .zip-visual .file-stack span::after{
    content:attr(data-ext);
    opacity:.9;
  }
  .zip-visual .zip-line{
    position:absolute;
    right:0;
    top:12px;
    bottom:12px;
    width:2px;
    background:linear-gradient(
      180deg,
      transparent,
      color-mix(in oklch, var(--brand-1) 80%, transparent),
      transparent
    );
  }
  .file-stack.animate span{
    animation:zipstack 2.4s ease-in-out infinite;
  }
  .file-stack.animate span:nth-child(2){ animation-delay:.12s; }
  .file-stack.animate span:nth-child(3){ animation-delay:.24s; }

  @keyframes zipstack{
    0%,100%{ transform:translateX(0) scale(1); }
    50%{ transform:translateX(6px) scale(.98); }
  }

  /* 홈 그리드 (container query 기반) */
  .home-grid{
    display:grid;
    gap:16px;
  }
  @container main (min-width:900px){
    .home-grid{
      grid-template-columns:7fr 5fr;
      align-items:start;
    }
    .value-props{
      grid-column:1 / 2;
    }
    .aside-recent{
      grid-column:2 / 3;
      position:sticky;
      top:76px;
    }
    .how-it-works{
      grid-column:1 / -1;
    }
  }

  /* 입력 그룹 (스킨만) */
  .input-group input{
    background:var(--surface-2);
    color:var(--fg, var(--text));
  }
  .input-group input:focus-visible{
    outline:2px solid var(--brand-1);
    outline-offset:2px;
  }
  .btn-primary{
    height:48px;
    padding:0 16px;
    border-radius:12px;
    border:1px solid var(--border);
    background:linear-gradient(180deg, var(--brand-1), var(--brand-2));
    color:#fff;
    font-weight:800;
  }
  .btn-primary:focus-visible{
    outline:2px solid var(--brand-1);
    outline-offset:2px;
  }
  .hint{
    margin-top:8px;
    font-size:.92rem;
    color:var(--muted);
  }
  .hero-zip.drag{
    outline:2px dashed var(--border);
    outline-offset:6px;
  }

  /* 칩/리스트 */
  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .chip{
    display:inline-flex;
    align-items:center;
    padding:.45rem .75rem;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
  }

  .h2-section{
    margin:0 0 12px;
    font-size:clamp(18px, 2vw, 20px);
  }
  .h3-aside{
    margin:0 0 10px;
    font-size:16px;
  }
  .aside-tips .tip{
    font-size:.92rem;
    color:var(--muted);
  }

  /* KPI / steps */
  .kpi-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
  }
  .kpi-num{
    display:block;
    font-size:clamp(18px, 2.2vw, 22px);
    line-height:1.1;
  }

  .steps{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
  }
  .steps li{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .step-num{
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:999px;
    background:var(--brand-1);
    color:#fff;
    font-weight:800;
  }

  /* 푸터 */
  .site-footer{
    margin:36px auto;
    color:var(--muted);
    font-size:.95rem;
  }
}

/* ---------- Style Pack: GLASS ---------- */
@layer zip {
  :root[data-style="glass"]{
    --surface:color-mix(in oklch, var(--bg) 85%, transparent);
    --surface-2:color-mix(in oklch, var(--bg) 78%, transparent);
    --border:color-mix(in oklch, var(--fg, #111) 18%, transparent);
  }
  :root[data-style="glass"] .zip-header,
  :root[data-style="glass"] .card{
    backdrop-filter:saturate(1.2) blur(12px);
  }
  :root[data-style="glass"] .card{

  }
  :root[data-style="glass"] .btn-primary{
    border:0;
  }
}

/* ---------- Style Pack: BRUTALIST ---------- */
@layer zip {
  :root[data-style="brutalist"]{
    --radius:6px;
    --gap:10px;
    --surface:var(--bg);
    --surface-2:var(--bg);
    --border:color-mix(in oklch, var(--fg, #111) 35%, transparent);
  }
  :root[data-style="brutalist"] body{
    font-family:var(--font-mono);
  }
  :root[data-style="brutalist"] .zip-header{
    border-bottom-width:2px;
  }
  :root[data-style="brutalist"] .card{
    border-width:2px;
    border-radius:var(--radius);
    box-shadow:none;
    padding:22px;
    background:repeating-linear-gradient(
      45deg,
      color-mix(in oklch, var(--bg) 96%, transparent),
      color-mix(in oklch, var(--bg) 96%, transparent) 8px,
      color-mix(in oklch, var(--bg) 92%, transparent) 8px,
      color-mix(in oklch, var(--bg) 92%, transparent) 16px
    );
  }
  :root[data-style="brutalist"] .h1-hero{
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  :root[data-style="brutalist"] .input-group input{
    border-width:2px;
    border-radius:6px;
    background:var(--surface);
  }
  :root[data-style="brutalist"] .btn-primary{
    border:2px solid var(--fg, #111);
    border-radius:6px;
    background:var(--fg, #111);
    color:var(--bg);
  }
  :root[data-style="brutalist"] .chip{
    border-width:2px;
    background:transparent;
  }
}

/* ---------- 다크모드 안전망 오버라이드 ---------- */
@layer override{
  :root[data-theme="dark"] :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,small,label,legend,button,a,span,strong,em,th,td){
    color:var(--fg, var(--text)) !important;
  }
  :root[data-theme="dark"] .muted,
  :root[data-theme="dark"] .hint,
  :root[data-theme="dark"] .kpi-label,
  :root[data-theme="dark"] .aside-tips .tip{
    color:var(--muted) !important;
  }
  :root[data-theme="dark"] a{
    color:color-mix(in oklch, var(--brand-1) 85%, white) !important;
  }
  :root[data-theme="dark"] :where(.card,.surface,.chip,.theme-toggle,input,select,textarea){
    background:var(--surface) !important;
    border-color:var(--border) !important;
  }
  :root[data-theme="dark"] :where(input,select,textarea){
    color:var(--fg, var(--text)) !important;
  }
  :root[data-theme="dark"] ::placeholder{
    color:var(--muted) !important;
    opacity:1 !important;
  }
  :root[data-theme="dark"] svg [fill="#000"],
  :root[data-theme="dark"] svg [fill="#000000"]{
    fill:currentColor !important;
  }
  :root[data-theme="dark"] svg [stroke="#000"],
  :root[data-theme="dark"] svg [stroke="#000000"]{
    stroke:currentColor !important;
  }
}

/* ---------- Analysis Layout & Components ---------- */
@layer zip {

  /* Toolbar & inpage nav: 현재는 숨김 */
  .analysis-toolbar{
    display:none !important;
  }
  .inpage-nav{
    display:none !important;
  }

  .analysis-toolbar .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .title-domain{
    font-size:clamp(18px, 2.4vw, 22px);
    margin:0;
  }
  .toolbar-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .btn{
    height:36px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--fg, var(--text));
    font-weight:700;
    cursor:pointer;
  }
  .btn.primary{
    background:linear-gradient(180deg, var(--brand-1), var(--brand-2));
    color:#fff;
  }
  .btn.ghost{
    background:transparent;
  }
  .generated{
    margin:0;
  }

  /* Filter segmented */
  .filter-bar{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .seg{
    display:inline-flex;
    padding:4px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-2);
  }
  .seg-btn{
    height:28px;
    padding:0 10px;
    border-radius:999px;
    border:0;
    background:transparent;
    cursor:pointer;
  }
  .seg-btn.is-active{
    background:var(--surface);
    border:1px solid var(--border);
  }

  @container main (min-width:1000px){
    .analysis-shell{
      grid-template-columns:1fr !important;
      align-items:start;
    }
    .analysis-aside{
      display:none !important;
    }
  }

  /* Fallback: 컨테이너 쿼리 미지원 환경 */
  @supports not (container-type:inline-size){
    @media (min-width:1200px){
      .analysis-shell{
        grid-template-columns:1fr !important;
      }
    }
  }

  .analysis-main{
    min-width:0;
  }
  .analysis-aside{
    display:none !important;
  }

  /* Section head */
  .section .section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
  }
  .section h2{
    margin:0;
    font-size:clamp(18px, 2.2vw, 20px);
  }

  /* Table */
  .table-wrap{
    overflow:auto;
  }
  .data-table{
    width:100%;
    border-collapse:collapse;
    font-variant-numeric:tabular-nums;
  }
  .data-table thead th{
    text-align:left;
    font-weight:800;
    font-size:.92rem;
    color:var(--muted);
    border-bottom:1px solid var(--border);
    padding:10px;
  }
  .data-table td{
    padding:10px;
    border-bottom:1px solid var(--border);
  }
  .data-table tr:last-child td{
    border-bottom:0;
  }

  /* Badge severity */
  .badge{
    display:inline-flex;
    align-items:center;
    height:22px;
    padding:0 8px;
    border-radius:999px;
    font-size:.85rem;
    border:1px solid var(--border);
  }
  .badge.ok{
    background:color-mix(in oklch, var(--ok) 35%, white);
    color:oklch(20% 0 0);
  }
  .badge.warn{
    background:color-mix(in oklch, var(--warn) 35%, white);
    color:oklch(20% 0 0);
  }
  .badge.err{
    background:color-mix(in oklch, var(--err) 35%, white);
    color:oklch(20% 0 0);
  }
  .badge.unknown{
    background:var(--surface-2);
    color:var(--muted);
  }

  /* Issues-only filter */
  :root[data-filter="issues"] [data-status="ok"]{
    display:none;
  }

  /* KPI 4열 카드 (컨테이너 쿼리 기반, 도메인 상세일 땐 theme.css에서 다시 오버라이드) */
  .kpi{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
  }
  .kpi-item{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
  }
  .kpi-label{
    color:var(--muted);
    font-size:.92rem;
  }
  .kpi-value{
    font-weight:800;
    font-size:clamp(16px, 1.8vw, 18px);
  }
  .badge-score{
    display:inline-flex;
    align-items:center;
    height:26px;
    padding:0 10px;
    border-radius:999px;
    background:linear-gradient(180deg, var(--brand-1), var(--brand-2));
    color:#fff;
  }
  @container main (max-width:860px){
    .kpi{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
  }

  /* Metric 행 */
  .metric{
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:baseline;
    gap:8px;
    padding:8px 0;
    border-bottom:1px dashed var(--border);
  }
  .metric:last-child{
    border-bottom:0;
  }
  .metric .unit{
    color:var(--muted);
    font-size:.9rem;
  }

  /* 2/3열 그리드 (컨테이너 쿼리 기준) */
  .grid-2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
  }
  .grid.cols-2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
  .grid.cols-3{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
  }
  @container main (max-width:860px){
    .grid-2,
    .grid.cols-2,
    .grid.cols-3{
      grid-template-columns:1fr;
    }
  }

  /* Pills */
  .list-pills{
    margin: 8px 0 20px;
    padding: 0;
    list-style: none;
  }
  .list-pills > li{
    display:inline-flex;
    align-items:center;
    height:28px;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface);
  }
  .list-pills > li.ok{
    padding: 5px;
    margin: 5px 0;

  }
  .list-pills > li.na,
  .list-pills > li[data-status="warn"]{
    background:color-mix(in oklch, var(--warn) 30%, white);
  }

  /* 별점 */
  .rating{
    display:inline-grid;
    grid-auto-flow:column;
    gap:6px;
    --s:18px;
  }
  .rating input{
    position:absolute;
    left:-9999px;
  }
  .rating label{
    width:var(--s);
    height:var(--s);
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 .587 3.668 7.568 8.332 1.151-6.064 5.746 1.516 8.148L12 18.896l-7.452 4.304 1.516-8.148L0 9.306l8.332-1.151z"/></svg>') center/contain no-repeat;
    -webkit-mask:inherit;
    background:var(--border);
    display:inline-block;
    cursor:pointer;
  }
  .rating input:checked ~ label,
  .rating label:hover,
  .rating label:hover ~ label{
    background:linear-gradient(180deg, var(--brand-1), var(--brand-2));
  }
}

/* Print styles */
@media print{
  .site-header,
  .analysis-toolbar,
  .inpage-nav,
  .summary-actions{
    display:none !important;
  }
  .card{
    box-shadow:none !important;
  }
}

/* Style Pack nuances */
@layer zip {
  :root[data-style="glass"] .analysis-toolbar{
    backdrop-filter:saturate(1.2) blur(10px);
  }
  :root[data-style="brutalist"] .btn{
    border-width:2px;
    border-radius:6px;
  }
  :root[data-style="brutalist"] .kv > div,
  :root[data-style="brutalist"] .kv > li{
    border-width:2px;
    border-radius:6px;
    background:transparent;
  }
}

/* Active section highlight (현재는 nav 비활성화) */
@layer zip{
  .inpage-nav a.active{
    display:none !important;
  }
}

/* ================== Enhancements Pack (layout/ux/viz) ================== */
@layer zip {
  /* 1) Header/Toolbar 실제 높이 기반 오프셋 (JS가 런타임에 업데이트) */
  :root{
    --header-h:64px;
    --toolbar-h:48px;
  }
  body{
    padding-top:var(--header-h);
  }
  html{
    scroll-padding-top:calc(var(--header-h) + var(--toolbar-h) + 16px);
  }
  .section[id]{
    scroll-margin-top:calc(var(--header-h) + var(--toolbar-h) + 16px);
  }

  /* 2) 고정 헤더 */
  header.zip-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }

  /* 3) 툴바/사이드 스티키가 헤더/툴바 높이를 존중하도록 */
  .analysis-toolbar{
    position:sticky;
    top:calc(var(--header-h) + 8px);
    z-index:900;
  }
  @container main (min-width:1000px){
    .analysis-aside{
      position:sticky;
      top:calc(var(--header-h) + var(--toolbar-h) + 12px);
    }
  }

  /* 4) 도넛 링 신호등(OK/WARN/ERR) – 크기는 theme.css에서 관리 */
  .meter[data-sev="ok"]{
    --ring:var(--ok);
  }
  .meter[data-sev="warn"]{
    --ring:var(--warn);
  }
  .meter[data-sev="err"]{
    --ring:var(--err);
  }
  .meter{
    --ring:var(--brand-1);
    background:conic-gradient(
      var(--ring) calc(var(--p) * 1%),
      var(--border) 0
    );
  }

  /* 5) 섹션 타이틀 오른쪽 이슈 카운트 배지 */
  .section .section-head .issues-badge,
  .section h2 + .issues-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
    height:22px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface-2);
    font-size:.85rem;
  }
  .section .section-head .issues-badge .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:color-mix(in oklch, var(--err) 60%, white);
  }


  .fix{
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-2);
    padding:12px;
    margin: 10px 0;
  }
  .fix .fix-title{
    font-weight:800;
    margin:0 0 6px;
  }
  .fix pre{
    margin:8px 0 0;
    padding:10px;
    overflow:auto;
    border-radius:10px;
    background:var(--surface);
    border:1px solid var(--border);
  }

  /* 7) Sparkline label 색상 */
  .sparkline{
    display:block;
    width:100%;
    height:46px;
  }
  .spark-label{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
  }

  /* 8) Toast */
  .toast-wrap{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:1200;
    display:grid;
    gap:8px;
  }
  .toast{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    box-shadow:var(--shadow);
  }
  .toast[hidden]{
    display:none;
  }

  /* 9) Skeleton */
  .skeleton{
    position:relative;
    overflow:hidden;
    background:var(--surface-2);
    color:transparent;
  }
  .skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform:translateX(-100%);
    animation:skel 1.2s infinite;
    mix-blend:overlay;
  }
  @keyframes skel{
    to{ transform:translateX(100%); }
  }

  /* 10) Tooltip */
  .tip{
    position:relative;
    cursor:help;
  }
  .tip[data-tip]::after{
    content: attr(data-tip);
    position: absolute;
    background: var(--surface);
    color: var(--fg, var(--text));
    border: 1px solid var(--border);
    border-radius: 8px;
    left: 60px;
    padding: 8px 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    box-shadow: var(--shadow);
    z-index: 1100;
    width: 150px;
    white-space: normal;
  }
  .tip:focus-visible[data-tip]::after,
  .tip:hover[data-tip]::after{
    opacity:1;
    transform:translate(-50%, -2px);
  }

  /* 11) 색약 팔레트 토글 (data-colorsafe="1") */
  :root[data-colorsafe="1"]{
    --ok:oklch(72% .05 155);
    --warn:oklch(78% .09 95);
    --err:oklch(65% .08 35);
  }

  /* 12) 홈(메인) aside 스티키 top 보정 */
  .home-grid .aside-recent{
    position:sticky;
    top:calc(var(--header-h) + 12px);
  }
}


@media (max-width: 640px) {
  .tip[data-tip]::after{
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px); /* 좌우 16px 여백 */
    width: auto;
    text-align: center;
  }
}