/* Post content styles shared by the site and Classic Editor. */
:root { --jb-accent: #1976D2; --jb-accent-hover: #1565C0; --jb-accent-soft: #EAF3FC; --jb-accent-ring: rgba(25, 118, 210, 0.12); }

/* Typography */

  body { line-height: 1.7; font-size: 14px; font-family: "Noto Sans KR", sans-serif; font-weight: 300; color: #444444; overflow-wrap: break-word; word-wrap: break-word; counter-reset: jb-heading-h2; }
  h1, h2, h3, h4, h5, h6 { margin: 20px 0px; line-height: 1.4; font-weight: 500; color: #333333; }
  h1 { font-size: 22px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  h5 { font-size: 14px; }
  h6 { font-size: 12px; }
  a { text-decoration: none; color: var(--jb-accent); }
  a:hover { color: var(--jb-accent-hover); }
  a:focus-visible { outline: 2px solid var(--jb-accent); outline-offset: 2px; }
  p { margin: 5px 0px; }
  blockquote { margin: 20px 0px; padding-left: 15px; border-left: 10px solid #dadada; font-style: italic; color: #777777; }
  ol, ul { padding-left: 24px; }
  ol li, ul li { margin: 4px 0px; }
  pre, code { font-family: Consolas, "Source Code Pro", Menlo, Monaco, "Courier New", "Nanum Gothic Coding", monospace; }
  pre { margin: 20px 0px; padding: 10px 10px; background-color: #fafafa; line-height: 1.8; font-size: 13px; white-space: pre-wrap; text-align: left; overflow: auto; -moz-tab-size: 2; tab-size: 2; }
  .jb-content :not(pre) > code { margin: 0 0.1em; padding: 0.12em 0.35em; border: 1px solid #e1e4e8; border-radius: 4px; background-color: #f6f8fa; color: #1f2328; font-size: 0.9em; font-weight: 500; vertical-align: 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  #tinymce :not(pre) > code { margin: 0 0.1em; padding: 0.12em 0.35em; border: 1px solid #e1e4e8; border-radius: 4px; background-color: #f6f8fa; color: #1f2328; font-size: 0.9em; font-weight: 500; vertical-align: 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .jb-content pre code { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; }
  #tinymce pre code { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; }
  .jb-content a code { color: inherit; }
  #tinymce a code { color: inherit; }
  strong { font-weight: 700; }

/* Typography*/

/* Tiny MCE */

  .mce-content-body code { padding: 0px 0px; border-radius: 0; color: inherit; background: none; }
  .mce-content-body *[data-mce-selected="inline-boundary"] { background: none; }
  .mce-content-body code[data-mce-selected] { background: none; }

/* Tiny MCE */

/* Media */

  img { max-width: 100%; height: auto; vertical-align: middle; }
  img.alignright, a img.alignright { float: right; margin: 0 0 1em 1em; }
  img.alignleft, a img.alignleft { float: left; margin: 0 1em 1em 0; }
  img.aligncenter, a img.aligncenter { display: block; margin: 20px auto; }
  .wp-caption { max-width: 100%; margin-top: 20px; margin-bottom: 20px; }
  p.wp-caption-text { margin: 5px 0px 20px 0px; padding: 0px 10px; text-align: center; font-style: italic; color: #666666; }
  .jb-youtube-16x9 { position: relative; width: 100%; padding-bottom: 56.25%; }
  .jb-youtube-16x9 iframe { position: absolute; width: 100%; height: 100%; }

/* Media */

  .jb-content { margin: 20px 0px 40px 0px; font-size: 1rem; font-weight: 400; line-height: 1.8; }
  body#tinymce { font-size: 1rem; font-weight: 400; line-height: 1.8; }

/* JB Style - Typography */

  /* Previous heading design - restore by replacing the active h2/h3 rules below.
  h2.jb-heading { margin: 40px 0px 30px 0px; padding: 0px 0px 20px 0px; border-bottom: 2px solid #dadada; }
  h3.jb-heading { margin: 40px 0px 30px 0px; }
  h3.jb-heading:before { content: "#"; margin: 0px 10px 0px 0px; }
  */

  /* h2.jb-heading { margin: 30px 0px 20px 0px; padding: 15px 10px 15px 20px; border-left: 5px solid #444444; background-color: #fafafa; font-size: 15px; font-weight: 700; overflow-x: auto; color: #37474F; } */
  h2.jb-heading { margin: 48px 0px 24px 0px; padding: 0px; border: 0; color: #222222; font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; counter-increment: jb-heading-h2; counter-reset: jb-heading-h3; }
  h2.jb-heading::before { content: counter(jb-heading-h2) "."; display: inline-block; margin-right: 0.45em; color: var(--jb-accent); font-variant-numeric: tabular-nums; }
  /* h2.jb-heading:before { content: "#"; margin: 0px 10px 0px 0px; } */

  /* h3.jb-heading { padding: 0px 0px 10px 0px; border-bottom: 3px solid #888888; font-size: 15px; font-weight: 700; color: #455A64; } */
  h3.jb-heading { margin: 36px 0px 24px 0px; color: #333333; font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -0.015em; counter-increment: jb-heading-h3; }
  h3.jb-heading::before { content: counter(jb-heading-h2) "." counter(jb-heading-h3) "."; display: inline-block; margin-right: 0.45em; color: var(--jb-accent); font-variant-numeric: tabular-nums; }

  /* h4.jb-heading { padding: 0px 0px 0px 0px; font-size: 15px; font-weight: 700; color: #546E7A; } */
  h4.jb-heading { margin: 40px 0px 30px 0px; }
  h4.jb-heading:before { content: "##"; margin: 0px 10px 0px 0px; }

  div.jb-more-info { margin: 20px 0px; padding: 5px 20px; border: 5px solid #eeeeee; border-radius: 10px; background-color: #fcfcfc; }
  div.jb-more-info ol, div.jb-more-info ul { padding-left: 20px; }

  div.jb-tip { position: relative; margin: 45px 0px 30px 0px; padding: 20px 20px 1px 20px; border: 5px solid #eeeeee; border-radius: 10px; background-color: #ffffff; }
  div.jb-tip:before { content: "TIP"; position: absolute; top: -15px; margin: 0px; padding: 3px 10px; border-radius: 3px; background-color: #666666; color: #ffffff; font-weight: 800; font-size: 14px; font-family: "Noto Serif", sans-serif; }

  .jb-faq-q,
  .jb-faq-a { position: relative; padding: 16px 18px 16px 54px; border: 1px solid #e1e4e8; border-radius: 8px; }
  .jb-faq-q { margin: 32px 0px 0px; background-color: var(--jb-accent-soft); color: #222222; font-weight: 400; line-height: 1.6; }
  .jb-faq-a { margin: 12px 0px 24px; background-color: #ffffff; color: #444444; line-height: 1.8; }
  .jb-faq-q:has(+ .jb-faq-a) { border-radius: 8px 8px 0px 0px; }
  .jb-faq-q + .jb-faq-a { margin-top: -1px; border-radius: 0px 0px 8px 8px; }
  .jb-faq-q::before,
  .jb-faq-a::before { position: absolute; top: 17px; left: 18px; display: flex; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; align-items: center; justify-content: center; }
  .jb-faq-q::before { content: "Q"; background-color: var(--jb-accent); color: #ffffff; }
  .jb-faq-a::before { content: "A"; top: 18px; border: 1px solid var(--jb-accent); background-color: #ffffff; color: var(--jb-accent); }
  .jb-faq-q > :first-child,
  .jb-faq-a > :first-child { margin-top: 0px; }
  .jb-faq-q > :last-child,
  .jb-faq-a > :last-child { margin-bottom: 0px; }

  ul.jb-related-post { margin: 30px 0px; padding: 0px 15px 10px 35px; border: 5px solid #eeeeee; border-radius: 10px; }
  ul.jb-related-post:before { content: "같이 보면 좋은 글"; display: block; margin: 0px 0px 15px -20px; padding: 8px 0px; border-bottom: 1px solid #eeeeee; font-weight: 700; }
  ul.jb-related-post li { margin: 5px 0px; }

  p.jb-title-01 { margin: 20px 0px 10px 0px; font-family: "Noto Sans KR", sans-serif; font-weight: 700; }

  h3.jb-content-heading { margin: 30px 0px 20px 0px; padding: 15px 10px 15px 20px; border-left: 5px solid var(--jb-accent); background-color: var(--jb-accent-soft); font-size: 16px; font-weight: 400; overflow-x: auto; }

  h4.jb-content-heading { padding: 0px 0px 10px 0px; border-bottom: 1px solid var(--jb-accent); font-family: "Noto Sans KR", sans-serif; font-size: 16px; font-weight: 500; }

  p.jb-download-01 { text-align: center; }
  p.jb-download-01 a { display: inline-block; margin: 30px 0px; padding: 10px 20px; border-radius: 5px; background-color: var(--jb-accent); color: #ffffff; }
  p.jb-download-01 a:hover { background-color: var(--jb-accent-hover); }

/* JB Style - Typography */

/* JB Style - Table */

  .jb-table-scroll { margin: 24px 0px; overflow-x: auto; border: 1px solid #e1e4e8; border-radius: 8px; background-color: #ffffff; -webkit-overflow-scrolling: touch; }
  table.jb-table-01 { width: 100%; min-width: 100%; margin: 0px; border-collapse: separate; border-spacing: 0px; table-layout: auto; font-size: 15px; }
  table.jb-table-01 th,
  table.jb-table-01 td { padding: 11px 14px; border: 0; border-bottom: 1px solid #e8eaed; text-align: left; vertical-align: top; }
  table.jb-table-01 th { background-color: #f6f8fa; color: #333333; font-weight: 700; white-space: nowrap; }
  table.jb-table-01 tbody tr { transition: background-color 0.15s ease; }
  table.jb-table-01 tbody tr:hover { background-color: #fafbfc; }
  table.jb-table-01 tr:last-child > td { border-bottom: 0; }
  table.jb-table-01 caption { padding: 11px 14px; border-bottom: 1px solid #e8eaed; background-color: #ffffff; color: #555555; font-weight: 700; text-align: left; }

  @media ( max-width: 767px ) {
    table.jb-table-01 { min-width: 640px; }
  }

/* JB Style - Table */

/* JB Style - Layout */

  .jb-grid-2x3 { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px; }
  @media ( min-width: 1024px ) {
    .jb-grid-2x3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
  }

/* JB Style - Layout */

/* Menu In Post or Page */

  .jb-content ul.menu { padding: 0px; }
  #tinymce ul.menu { padding: 0px; }
  .jb-content ul.menu li { margin: 8px 0px; list-style-type: none; }
  #tinymce ul.menu li { margin: 8px 0px; list-style-type: none; }
  .jb-content ul.menu li ul { padding-left: 20px; }
  #tinymce ul.menu li ul { padding-left: 20px; }
  .jb-content ul.menu li ul li { list-style-type: disc; }
  #tinymce ul.menu li ul li { list-style-type: disc; }
  .jb-content ul.menu a.jb-menu-no-link { color: #333333; }
  #tinymce ul.menu a.jb-menu-no-link { color: #333333; }
  .jb-content ul.menu a.jb-menu-no-link:hover { color: #333333; }
  #tinymce ul.menu a.jb-menu-no-link:hover { color: #333333; }
  .jb-content ul.menu > li > a { display: block; margin: 10px 0px 20px 0px; padding: 10px 0px; border-bottom: 1px solid #dadada; font-weight: bold; }
  #tinymce ul.menu > li > a { display: block; margin: 10px 0px 20px 0px; padding: 10px 0px; border-bottom: 1px solid #dadada; font-weight: bold; }
  .jb-print-menu-1 { margin: 30px 0px; padding: 0px 30px 20px; border: 1px solid #dadada; }
  .jb-content .jb-menu-page-reference ul.menu li { display: inline-block; margin: 0px 0px; font-family: "Consolas", "Noto Sans KR", sans-serif; }
  #tinymce .jb-menu-page-reference ul.menu li { display: inline-block; margin: 0px 0px; font-family: "Consolas", "Noto Sans KR", sans-serif; }
  .jb-content .jb-menu-page-reference ul.menu > li > a { display: block; margin: 0px 5px 10px 0px; padding: 5px 14px; border: none; border-radius: 5px; background-color: var(--jb-accent-soft); font-weight: 400; }
  #tinymce .jb-menu-page-reference ul.menu > li > a { display: block; margin: 0px 5px 10px 0px; padding: 5px 14px; border: none; border-radius: 5px; background-color: var(--jb-accent-soft); font-weight: 400; }
  .jb-content .jb-menu-page-reference ul.menu > li > a:hover { background-color: var(--jb-accent-hover); color: #ffffff; }
  #tinymce .jb-menu-page-reference ul.menu > li > a:hover { background-color: var(--jb-accent-hover); color: #ffffff; }

/* Menu In Post or Page */

/* TOC */

  #toc_container { width: 100% !important; margin: 20px 0px; padding: 0px 16px; border: 1px solid #dadada; background-color: transparent; }
  #toc_container p.toc_title { margin: 10px 0px; padding-bottom: 10px; border-bottom: 1px solid #dadada; text-align: center; font-size: 16px; font-family: "Noto Sans KR", sans-serif; font-weight: 500; }
  #toc_container > ul { margin: 16px 0px; }
  #toc_container ul li { margin: 4px 0px; }
  #toc_container a:hover { text-decoration: none; }
  #toc_container a .toc_number { margin-right: 4px; color: #333333; }
  #toc_container.no_bullets ul { list-style-type: none; }
  #toc_container.no_bullets > ul { padding-left: 4px; }
  #toc_container.no_bullets > ul > li > ul { padding-left: 20px; }

/* TOC */

/* Enlighter */

  .jb-content .enlighter-default { margin: 20px 0px; font-family: Consolas, "Source Code Pro", Menlo, Monaco, "Courier New", "Nanum Gothic Coding", monospace;  font-size: 12px; }
  #tinymce .enlighter-default { margin: 20px 0px; font-family: Consolas, "Source Code Pro", Menlo, Monaco, "Courier New", "Nanum Gothic Coding", monospace;  font-size: 12px; }
  .jb-content div.enlighter > div > div { padding: 0px; line-height: 1.8; }
  #tinymce div.enlighter > div > div { padding: 0px; line-height: 1.8; }
  #tinymce code.EnlighterJSRAW, #tinymce pre.EnlighterJSRAW { font-size: 1.0em !important; }
  
  .jb-content .enlighter-t-minimal { padding: 10px 15px; border-width: 2px;  background-color: #f8f9fa; }
  #tinymce .enlighter-t-minimal { padding: 10px 15px; border-width: 2px;  background-color: #f8f9fa; }
  .jb-content div.enlighter>div>div::before { content: ""; }
  #tinymce div.enlighter>div>div::before { content: ""; }
  .jb-content .enlighter-t-minimal span { border-bottom: none; }
  #tinymce .enlighter-t-minimal span { border-bottom: none; }

  .jb-content .enlighter-t-bootstrap4 { padding: 10px 15px 10px 15px; }
  #tinymce .enlighter-t-bootstrap4 { padding: 10px 15px 10px 15px; }

/* Enlighter */

/* iframe */

  .jb-iframe-example {
    border: 3px solid #e0e0e0;
  }

/* iframe */

/* Prismatic */

  pre[class^="language-"] { margin: 1em 0em; border-radius: 5px; white-space: pre-wrap; }
  code[class^="language-"] { white-space: pre-wrap; }

/* Prismatic */