/* 재작업규약 -- html/sub_guide/rework/main.asp
   CSS ONLY ON THE LEGACY MARKUP: both lanes serve the same <article class="sub_default">
   and this sheet, linked for this page alone, is the whole difference between them. */

@media (max-width: 1023px) {
.sub_wrap { padding: 0; }

.sub_wrap article.sub_default {
  --c-primary: #159fda;
  max-width: 1000px;
  padding: 46px 30px 90px;
  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;
}

.sub_wrap article.sub_default,
.sub_wrap article.sub_default *,
.sub_wrap article.sub_default *::before,
.sub_wrap article.sub_default *::after { box-sizing: border-box; }

.sub_default h1.sub_h1 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
  color: #222;
  letter-spacing: -.02em;
}

/* Intro: legacy holds both sentences in ONE <p> split by a <br>, and Blink ignores
   display / line-height / vertical-align on it, so the mockup's 4px gap AND its grey-
   over-red both come from ::first-line.  Below 366px row 2 takes the red: accepted. */

.sub_default > p.sub_p {
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0 10px;
  color: #e0483d;
}

.sub_default > p.sub_p::first-line {
  color: #555;
  line-height: 29px;
}

/* The mockup's <hr> has no element in legacy: it becomes this block's border-top, and
   the <hr>'s two margins become its margin-top and padding-top. */

.sub_wrap section.sub_cont_box.contract {
  margin-top: 36px;
  border-top: 1px solid #e5e8ec;
  padding-top: 44px;
  text-align: start;
}

.contract h4 {
  font-size: 20px;
  font-weight: 800;
  color: #222;
  margin: 0 0 18px;
}

.contract ul {
  margin: 0 0 48px;
}

/* The bullet is legacy's own disc marker, shared with desktop: the page's <style>
   sets li list-style/margin/font last in source. Only the colour is kept here; a
   ::before dot used to double the bullet. */

.contract ul > li {
  color: #666;
}

.contract li span {
  color: #333;
}

/* Item 4 is the mockup's <ol>: legacy keeps its 12 lines as text split by <br>, so the
   type scale goes on the item and ::first-line hands the lead-in line its own back.
   No extra indent: the numbers are text here and stealing width would re-wrap the list. */

.contract ul > li:nth-child(4) {
  font-size: 13px;
  color: #888;
  line-height: 1.75;
}

.contract ul > li:nth-child(4)::first-line {
  font-size: 14px;
  color: #666;
  line-height: 25.2px;
}
}

@media (max-width: 1023px) {

  .sub_wrap article.sub_default { padding: 22px 16px 40px; }

  .sub_default h1.sub_h1 { font-size: 22px; }

  .sub_wrap section.sub_cont_box.contract { margin-top: 26px; padding-top: 32px; }

  .contract ul { margin-bottom: 36px; }

  .contract ul:last-child { margin-bottom: 0; }

  .contract h4 { font-size: 17px; }

  /* the page's own <style> repeats `.contract h4` and loads later: class doubled */
  .contract.contract h4 { padding-top: 0; margin-bottom: 12px; }

  .contract ul > li:first-child { margin-top: 0; }

  .contract ul > li:nth-child(4)::first-line { font-size: 13.5px; line-height: 24.3px; }
}