/* 제작규약 -- html/sub_guide/contract/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. */

/* The 3 !important out-rank !important rules in sheets that cascade AFTER this one
   (content_new.css .txt_p_blue2, sub.css .coral_color); contract_scope.py re-proves
   each one still changes the answer. */

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

.sub_wrap article.sub_default {
  --c-primary: #159fda;
  max-width: 1000px;
  margin: 0 auto;
  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;
  margin: 0;
}

/* 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;
  font-weight: 400;
  margin: 12px 0 10px;
  color: #e0483d !important;
}

.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;
  line-height: 1.5;
  color: #222 !important;
  margin: 0 0 18px;
  padding: 0;
}

/* The bullet is legacy's own disc marker, shared with desktop: the page's <style>
   after </html> sets li list-style/margin/font last in source, so nothing here
   redraws or restyles the li -- a ::before dot used to double the bullet. */

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

/* keeps the li (and its disc) #666 as on desktop; the article above sets #3a3d44 */
.contract ul > li {
  color: #666;
}

.contract li span {
  color: #333;
  font-weight: 700;
}

.contract li span.coral_color {
  color: #e0483d !important;
  text-decoration: none;
}
}

@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; }
}