/* 무료서체 -- html/sub_guide/font/main.asp
   NO LANE GATE: both lanes serve the same markup, scripts and inline <style>, and that
   <style> sits in <body> so it cascades AFTER this file. Hence the html body prefix. */

/* ---- what the page's own <style> has to be talked out of ----
   It reaches 35 of the elements this sheet aims at and wins every specificity tie by
   being later, so each cancel below answers one of its declarations. */

@media (max-width: 1023px) {
html body article.content_wrap,
html body article.content_wrap .w1200 { width: auto !important; }

html body article.content_wrap .main_tit,
html body article.content_wrap .sub_notice { position: static; top: auto; }

html body article.content_wrap .main_txt::after { content: none; }

html body article.content_wrap .sub_tit ul li { list-style: none; }

html body article.content_wrap .tb_guide1,
html body article.content_wrap .tb_guide2 { border-bottom: 0; }

html body article.content_wrap .tb_guide1 caption { display: table-caption; }

html body article.content_wrap .tb_guide1 tr th,
html body article.content_wrap .tb_guide1 tr td,
html body article.content_wrap .tb_guide2 tr th,
html body article.content_wrap .tb_guide2 tr td { border-right: 0; border-top: 0; }

html body article.content_wrap .tb_guide2 tr td img { margin: 0; }

/* The legacy markup has no single wrapper: the sticky bar is a body-level sibling
   of the content, so the tokens are declared on BOTH. */

html body .hero-nav,
html body article.content_wrap {
  --c-primary: #159fda;
  --c-point: #fb5a5a;
  --c-line: #e6e8ec;
  --c-line-2: #eef0f3;
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.01em; color: #3a3d44;
  max-width: 1200px; margin: 0 auto;
}

html body .hero-nav, html body .hero-nav *,
html body .hero-nav *::before, html body .hero-nav *::after,
html body article.content_wrap, html body article.content_wrap *,
html body article.content_wrap *::before,
html body article.content_wrap *::after { box-sizing: border-box; }

html body .hero-nav { padding: 0 30px; }

html body article.content_wrap { padding: 0 30px 90px; }

/* ---- the category bar ----
   Scroll down and stickyNavbar writes position:fixed inline; scroll back up and jQuery
   writes display:none inline. Only those two need priority; font_sticky.py proves it. */

html body .hero-nav {
  position: sticky !important; display: block !important;
  height: auto; left: auto; background: none; box-shadow: none;
}

html body .hero-nav .nav-wrap {
  position: static; width: auto; margin: 0; text-align: center;
  background: #fff; border-bottom: 1px solid #e5e8ec;
  display: flex; gap: 48px; justify-content: center; padding: 20px 0; margin-bottom: 44px;
}

html body .hero-nav .nav-wrap li a,
html body .hero-nav .nav-wrap li:first-child a {
  display: block; font-size: 16px; font-weight: 600; color: #888;
  margin: 0; padding: 0; background: none;
  line-height: normal; letter-spacing: normal;
}

/* stickyNavbar moves .active as the reader scrolls, which is the same idea the mockup
   body drew with .ft-cat.on -- but it marks NOBODY until the first section is reached,
   where the mockup marked the open panel. The first label stands in until then. */

html body .hero-nav .nav-wrap li:first-child a { color: #111; font-weight: 800; }

html body .hero-nav .nav-wrap:has(a.active) li:first-child a:not(.active) {
  color: #888; font-weight: 600;
}

html body .hero-nav .nav-wrap li a.active { color: #111; font-weight: 800; }

/* ---- hero ---- */

html body article.content_wrap .content_box1 { padding: 30px 0 0; }

html body article.content_wrap .main_tit,
html body article.content_wrap .sub_tit { max-width: none; }

html body article.content_wrap .content_box1 .main_txt {
  font-family: "Montserrat", sans-serif; font-size: 40px; font-weight: 800; color: #111;
  padding-bottom: 16px; border-bottom: 3px solid #111; letter-spacing: -.01em;
  line-height: 1.5;
}

html body article.content_wrap .content_box1 .sub_tit h4 {
  font-size: 26px; font-weight: 800; color: #222; margin: 34px 0 22px;
  letter-spacing: -.02em; line-height: 1.5; text-align: start;
}

html body article.content_wrap ul.sub_txt { margin: 0 0 34px; font-weight: 400; }

html body article.content_wrap ul.sub_txt li {
  font-size: 14px; color: #888; line-height: 2; padding-left: 16px; position: relative;
}

html body article.content_wrap ul.sub_txt li::before {
  content: "\00b7"; position: absolute; left: 2px;
}

html body article.content_wrap ul.sub_txt li .coral_color {
  color: var(--c-point) !important; text-decoration: none;
}

/* ---- the usage-range table ---- */

html body article.content_wrap .tb_guide1 { width: 100%; margin: 0 0 16px; }

html body article.content_wrap .tb_guide1 caption {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

html body article.content_wrap .tb_guide1 tr th {
  background: #fafbfc; border-top: 1px solid #333; border-bottom: 1px solid #e5e8ec;
  padding: 12px 8px; color: #555; font-weight: 700;
}

html body article.content_wrap .tb_guide1 tr td {
  border-bottom: 1px solid var(--c-line-2); padding: 14px 8px;
  color: #555; font-size: 14px;
}

html body article.content_wrap .tb_guide1 tr td:first-child {
  font-weight: 700; color: #333; width: 84px;
}

html body article.content_wrap .tb_guide1 tr td.o,
html body article.content_wrap .tb_guide1 tr td.x { font-weight: 800; width: 48px; }

html body article.content_wrap .tb_guide1 tr td.o { color: #2a7fe0; }

html body article.content_wrap .tb_guide1 tr td.x { color: #e0483d; }

html body article.content_wrap .sub_notice {
  font-size: 13px; color: #aaa; line-height: 1.9; text-align: right; margin: 0 0 70px;
  max-width: none;
}

html body article.content_wrap .sub_notice .coral_color {
  color: var(--c-point) !important; text-decoration: none;
}

/* ---- section headings ---- */

html body article.content_wrap .content_box2 { padding: 0; max-width: none; }

html body article.content_wrap .content_box2 .main_txt {
  font-family: "Montserrat", sans-serif; font-size: 34px; font-weight: 800; color: #111;
  padding-bottom: 16px; border-bottom: 3px solid #111; letter-spacing: -.01em;
  line-height: 1.5;
}

html body article.content_wrap .content_box2 .sub_tit h4 {
  font-size: 24px; font-weight: 800; color: #222; margin: 32px 0 24px;
  letter-spacing: -.02em; line-height: 1.5; text-align: start;
}

/* ---- the font tables ---- */

/* <col style="width:15%"> is an INLINE style on the column, so an author rule
   without priority cannot reach it and the mockup's column widths never apply. */

html body article.content_wrap .tb_guide1 col,
html body article.content_wrap .tb_guide2 col { width: auto !important; }

html body article.content_wrap .tb_guide2 { width: 100%; margin: 0; }

html body article.content_wrap .tb_guide2 thead tr th {
  background: #28b0e6; padding: 16px 12px; font-size: 15px; font-weight: 700;
}

html body article.content_wrap .tb_guide2 tr td {
  border-bottom: 1px solid var(--c-line-2); padding: 0; color: #555; font-size: 14px;
}

/* No class survives on these cells, so each one is named by what it CONTAINS.
   The six selectors partition the 2 421 cells exactly: 0 unclassified, 0 overlap. */

html body article.content_wrap .tb_guide2 tr td:first-child:has(+ td + td > img) {
  width: 150px; font-weight: 700; color: #333; border-right: 1px solid #f0f2f4;
}

html body article.content_wrap .tb_guide2 tr td:has(+ td > img) {
  width: 210px; color: #777; padding: 22px 12px;
}

html body article.content_wrap .tb_guide2 tr td:has(> img) {
  text-align: left; padding: 14px 20px;
}

html body article.content_wrap .tb_guide2 tr td:has(> img) + td {
  width: 110px; color: #999; border-left: 1px solid #f0f2f4;
}

html body article.content_wrap .tb_guide2 tr td:has(> a) {
  width: 130px; border-left: 1px solid #f0f2f4;
}

/* THE STRAY SIXTH CELL NEEDS NO RULE: the page's own td:last-child{padding:0!important}
   -- the same one that costs 4px a few lines below -- already gives all 422 of them
   0x88 here and 324x0 at <=1024. Measured with and without: not one box moves. */

html body article.content_wrap .tb_guide2 tr td a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid #cfd6e0; border-radius: 6px; color: #888;
}

html body article.content_wrap .tb_guide2 tr td a:hover {
  color: var(--c-primary); border-color: var(--c-primary);
}

/* The mockup body drew this glyph with an inline <svg> that took its colour from
   the anchor; the legacy markup has a <button class="ir_pm"> and no svg, so the
   same two paths are a background image and the hover state is a second copy. */

html body article.content_wrap .tb_guide2 tr td button.ir_pm {
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v7m0 0 3-3M8 9 5 6'/%3E%3Cpath d='M3 11.5v1.5a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

html body article.content_wrap .tb_guide2 tr td a:hover button.ir_pm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23159fda' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v7m0 0 3-3M8 9 5 6'/%3E%3Cpath d='M3 11.5v1.5a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.5'/%3E%3C/svg%3E");
}

html body article.content_wrap .tb_guide2 tr td img { max-width: 420px; width: 100%; }
}

@media (max-width: 1023px) {
  html body .hero-nav { padding: 0 16px; }
  html body article.content_wrap { padding: 0 16px 40px; }

  html body .hero-nav .nav-wrap {
    gap: 22px; padding: 14px 0; overflow-x: auto; justify-content: flex-start;
  }
  html body .hero-nav .nav-wrap li { flex: 0 0 auto; }
  html body .hero-nav .nav-wrap li a,
  html body .hero-nav .nav-wrap li:first-child a { font-size: 14px; white-space: nowrap; }

  html body article.content_wrap .content_box1 .main_txt { font-size: 28px; }
  html body article.content_wrap .content_box1 .sub_tit h4 { font-size: 18px; margin: 20px 0 16px; }
  html body article.content_wrap ul.sub_txt { margin-bottom: 24px; }
  html body article.content_wrap .content_box2 .main_txt { font-size: 24px; }
  html body article.content_wrap .content_box2 .sub_tit h4 { font-size: 17px; margin: 20px 0 16px; }

  html body article.content_wrap .content_box1 { padding-top: 0; }
  html body article.content_wrap .sub_notice { text-align: left; margin-bottom: 0; }

  html body article.content_wrap .tb_guide2 thead { display: none; }
  html body article.content_wrap .tb_guide2,
  html body article.content_wrap .tb_guide2 tbody,
  html body article.content_wrap .tb_guide2 tr,
  html body article.content_wrap .tb_guide2 tr td { display: block; }
  html body article.content_wrap .tb_guide2 tr {
    border: 1px solid var(--c-line); border-radius: 10px;
    margin-bottom: 14px; padding: 14px 16px; position: relative;
  }
  /* .tb_guide2 tr td:last-child { padding: 0 !important } of the page's own <style>
     reaches whichever cell is last, and in ONE row of 569 -- 조선일보명조, the only row
     the legacy markup wrote without the stray sixth cell -- that is the 굵기 cell. */
  html body article.content_wrap .tb_guide2 tr td {
    border-bottom: 0; padding: 4px 0; text-align: left;
  }
  html body article.content_wrap .tb_guide2 tr td:first-child:has(+ td + td > img) {
    width: auto; font-size: 15px; color: var(--c-primary); border-right: 0;
  }
  html body article.content_wrap .tb_guide2 tr td:has(+ td > img) {
    width: auto; padding: 4px 0; font-weight: 700; color: #333;
  }
  html body article.content_wrap .tb_guide2 tr td:has(> img) { padding: 8px 0; }
  html body article.content_wrap .tb_guide2 tr td:has(> img) + td {
    width: auto; border-left: 0; padding: 4px 0 !important;
  }
  html body article.content_wrap .tb_guide2 tr td:has(> img) + td::before {
    content: "굵기: "; color: #aaa;
  }
  html body article.content_wrap .tb_guide2 tr td:has(> a) {
    width: auto; border-left: 0; position: absolute; top: 12px; right: 14px;
    padding: 4px 0 !important;
  }
  html body article.content_wrap .tb_guide2 tr td img { max-width: 100%; }

  /* Only a group's first <tr> has five cells (vendor name ... download button, rowspan or not);
     lift both out above that card as a header for the whole group. 44 = 34px button + 10px gap. */
  html body article.content_wrap .tb_guide2 tr:has(> td:nth-child(5):last-child) { margin-top: 58px; }
  html body article.content_wrap .tb_guide2 tr:has(> td:nth-child(5):last-child) > td:is(:first-child, :last-child) {
    position: absolute; top: -44px; height: 34px; padding: 0 !important;
    display: flex; align-items: center;
  }
  html body article.content_wrap .tb_guide2 tr:has(> td:nth-child(5):last-child) > td:first-child { left: 16px; }
  html body article.content_wrap .tb_guide2 tr:has(> td:nth-child(5):last-child) > td:last-child { right: 16px; }

  /* The bar is the pinned layer, so its own box must paint: with the white on the
     child alone it covers nothing at its own top edge, and the 16px padding leaves
     a transparent column at each end for the page to scroll through. */
  html body .hero-nav {
    top: -1px; margin-bottom: 24px;
    background: #fff; border-bottom: 1px solid #e5e8ec;
  }
  html body .hero-nav .nav-wrap { background: none; border-bottom: 0; margin-bottom: 0; }

  /* stickyNavbar .stop()s the page's own fadeIn on every scroll event, and a stopped
     jQuery tween never restores what it was fading, so the bar sits part-transparent
     for as long as the gesture lasts and the table reads through it. */
  html body .hero-nav { opacity: 1 !important; }

  /* The plugin aims at offsetTop-barHeight, then focus()es the tabindex=-1 section and
     THAT scroll wins, landing the title at y=0 behind the bar. scroll-margin-top is the
     only lever a focus scroll reads; 63 clears the 46px pinned bar by one 16px gutter. */
  html body article.content_wrap .content_box2 { scroll-margin-top: 63px; }

  /* one 36px gap before every section title; each table's last card drops its 14px: bottom 40 */
  html body article.content_wrap .content_box2 { margin-top: 36px; }
  html body article.content_wrap .tb_guide2 tbody:last-of-type > tr:last-child { margin-bottom: 0; }
}