/* DWork — shared base + design tokens (from 디자인기획서 v3 §1) */
:root{
  --canvas:#EEF2F6;      /* site background (cool light blue-grey) */
  --surface:#FFFFFF;     /* cards, panels */
  --graphite:#15181C;    /* hero/footer bg, primary buttons, big headings */
  --ink:#232A33;         /* body text */
  --slate:#6B7684;       /* secondary text, captions */
  --line:#D9E1E9;        /* borders, dividers */
  --accent:#2C5F8F;      /* links, active state, emphasis (deep blue) */
  --accent-soft:#DCE8F3; /* tag / badge background */
}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--graphite)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   Responsive pass (2026-09-16)
   The pages carry desktop-only *inline* styles, so these rules
   override the (consistently formatted) inline patterns with
   !important. Hooks are the shared tokens: every content
   container is `max-width:1280px`, grids/fonts use fixed values.
   Breakpoints: <=960px = tablet/stack + mobile nav, <=600px = phone.
   ============================================================ */
main{overflow-x:clip}                       /* stray-wide safety; keeps sticky working */

/* --- Mobile nav (button + panel injected by site.js initMobileNav) --- */
#mobile-nav-toggle{display:none;flex:none;width:44px;height:44px;margin-left:auto;padding:0;
  background:transparent;border:0;cursor:pointer;color:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
#mobile-nav-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
#mobile-nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#mobile-nav-toggle.is-open span:nth-child(2){opacity:0}
#mobile-nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobile-nav-panel{display:none;position:fixed;top:64px;left:0;right:0;z-index:99;
  flex-direction:column;gap:2px;padding:12px 20px 24px;
  background:var(--surface);border-bottom:1px solid var(--line);
  max-height:calc(100dvh - 64px);overflow-y:auto;
  box-shadow:0 24px 40px -24px rgba(21,24,28,.35)}
#mobile-nav-panel a{padding:14px 8px;font-family:'IBM Plex Mono',monospace;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line)}
#mobile-nav-panel a:last-child{border-bottom:0}
#mobile-nav-panel a.m-cta{margin-top:16px;text-align:center;background:var(--graphite);color:#fff;
  border-radius:999px;padding:16px}

@media (max-width:960px){
  #mobile-nav-toggle{display:flex}
  #mobile-nav-panel.is-open{display:flex}
  #site-nav{display:none!important}
  #site-nav ~ a{display:none!important}                 /* inline desktop CTA button */

  [style*="max-width:1280px"]{padding-left:32px!important;padding-right:32px!important}
  [style*="padding:96px 0"]{padding-top:64px!important;padding-bottom:64px!important}
  [style*="gap:80px"],[style*="gap: 80px"]{gap:40px!important}

  /* Stacked layout: sticky content columns (desktop's pinned image/heading
     beside a scrolling column) must NOT pin once the grid collapses to one
     column, or the content stacked below scrolls up and overlaps them.
     Only the top:120px/150px content columns are dropped; the anchor
     sub-nav (top:64px) and the privacy-modal header (top:0) stay sticky. */
  [style*="position:sticky"][style*="top:120px"],
  [style*="position:sticky"][style*="top:150px"]{position:static!important}

  /* 2-col + table-like row grids -> single column.
     NB: site.js (initReveal) re-serializes some inline styles with spaces,
     so property-prefixed no-space substrings are unreliable. Track-list
     tokens (`5fr 7fr`, `1fr 1fr`, `repeat(3`) are space-stable in both
     forms; `fr` only occurs in grid values, so no prefix is needed. Only
     `1fr auto` needs the `columns:` anchor (both space forms) so it does
     not also match the `auto 1fr auto` keeper. */
  [style*="5fr 7fr"],
  [style*="6fr 5fr"],
  [style*="6fr 6fr"],
  [style*="4fr 8fr"],
  [style*="5fr 4fr"],
  [style*="3fr 9fr"],
  [style*="2fr 3fr 5fr"],
  [style*="3fr 3fr 6fr"],
  [style*="3fr 3fr 3fr"],
  [style*="1fr 1fr"],
  [style*="columns:1fr auto"],[style*="columns: 1fr auto"]{grid-template-columns:1fr!important}

  /* card grids -> 2 columns on tablet */
  [style*="repeat(2"],
  [style*="repeat(3"],
  [style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* horizontal step flows -> stack, drop the arrow-spacer cells */
  [style*="1fr 28px 1fr"],
  [style*="1fr 32px 1fr"]{grid-template-columns:1fr!important}
  [style*="1fr 28px 1fr"] > :nth-child(even),
  [style*="1fr 32px 1fr"] > :nth-child(even){display:none!important}

  [style*="font-size:64px"],[style*="font-size: 64px"]{font-size:40px!important}
  [style*="font-size:56px"],[style*="font-size: 56px"]{font-size:36px!important}
  [style*="font-size:52px"],[style*="font-size: 52px"]{font-size:34px!important}
  [style*="font-size:48px"],[style*="font-size: 48px"]{font-size:32px!important}
  [style*="font-size:38px"],[style*="font-size: 38px"]{font-size:28px!important}
  [style*="font-size:36px"],[style*="font-size: 36px"]{font-size:26px!important}

  /* Comparison tables (.cmp on simulator/ax-solution): the 4-col grid rows
     collapse to 1fr above, which orphans the dark header row's option names at
     the top and drops every stacked value's column. Hide that header and label
     each value cell with its column, so "열 구분" survives on mobile. Column
     labels live in CSS (below) mirroring the header cells — keep them in sync
     if a header changes. First cell of each row is the metric = group title. */
  .cmp > div:first-child{display:none!important}                 /* orphaned header row */
  .cmp > div > *{padding:14px 22px!important}
  .cmp > div > :first-child{background:#F2F5F8!important;box-shadow:none!important;
    border-top:2px solid #15181C!important}                      /* metric = group title */
  .cmp > div > :not(:first-child){border-top:1px solid #E4EAF0!important}
  .cmp > div > :not(:first-child)::before{display:block;margin-bottom:5px;
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:#6B7684}
  .cmp-sim > div > :nth-child(2)::before{content:"강의·케이스 스터디"}
  .cmp-sim > div > :nth-child(3)::before{content:"e-러닝·게임형"}
  .cmp-sim > div > :nth-child(4)::before{content:"Leader Track"}
  .cmp-ax  > div > :nth-child(2)::before{content:"실무자"}
  .cmp-ax  > div > :nth-child(3)::before{content:"직무 전문가"}
  .cmp-ax  > div > :nth-child(4)::before{content:"팀장·관리자"}
}

@media (max-width:600px){
  [style*="max-width:1280px"]{padding-left:20px!important;padding-right:20px!important}

  [style*="repeat(2"],
  [style*="repeat(3"],
  [style*="repeat(4"],
  [style*="96px 1fr"],
  [style*="132px 1fr"]{grid-template-columns:1fr!important}

  [style*="font-size:64px"],[style*="font-size: 64px"]{font-size:33px!important}
  [style*="font-size:56px"],[style*="font-size: 56px"]{font-size:30px!important}
  [style*="font-size:52px"],[style*="font-size: 52px"]{font-size:29px!important}
  [style*="font-size:48px"],[style*="font-size: 48px"]{font-size:28px!important}
  [style*="font-size:38px"],[style*="font-size: 38px"]{font-size:25px!important}
  [style*="font-size:36px"],[style*="font-size: 36px"]{font-size:24px!important}
}