@charset "utf-8";
/* ==================================================================
   스플린트(교합안정장치) 페이지 전용 CSS
   - 대상 : /html/sub/splint.html
   - 기존 공통 컴포넌트(.sub_section / .section_tit / .sub_top_tit /
     .top_num / .symptom_list / .step_list_lg / .faq_list)는
     common.css · style.css 를 그대로 사용하고,
     이 파일에는 스플린트 페이지에서 새로 쓰는 것만 담는다.
   - 단위는 사이트 규칙에 맞춰 rem (html font-size 62.5% / 모바일 55%)
===================================================================== */

.splint {
  --sp-orange: #f7941d;
  /* 제목 강조 */
  --sp-vermilion: #f24822;
  /* 포인트·CTA */
  --sp-text: #333;
  /* 본문 글자색. #595959(사이트 기본) 보다 진하게. 순수 #000 은 장문에서 눈이 피로해 피함 */
  --sp-line2: #eaeaea;
  --sp-tint: #f1f8f8;
  --sp-dark: #2a2724;

  /* 읽는 글의 최대 폭. 이 숫자 하나만 바꾸면 본문 폭이 일괄 조정된다.
     FAQ / 섹션 제목 / 원형 4단계 / STEP 5단계 / CTA 는 적용 대상이 아니다.
     100rem = 본문 컬럼(1000px) 전체 폭. 좁히려면 78rem 정도. */
  --sp-read: 100rem;

  /* ---------------------- 정렬 기준 ----------------------
     공통 CSS 의 .sub_section 은 text-align:center 다.
     이 페이지는 읽는 글이라 본문은 좌측정렬로 되돌리고,
     디자인상 가운데여야 하는 제목·대형 숫자만 다시 가운데로 잡는다. */
  .sub_section {
    text-align: left;
  }

  .sub_top_tit,
  .section_tit {
    text-align: center;
  }

  /* 섹션 제목 위 아이콘 — 공통 기본값(13rem)의 절반 정도로 축소.
     색은 공통 포인트(#F24822) 대신 물음표 원과 같은 검정 계열로 통일 */
  .section_tit>i {
    font-size: 7.5rem;
    color: var(--333, #333);
  }

  /* 7장 시계 아이콘만 조금 크게 */
  #sp7 .section_tit>i {
    font-size: 9.5rem;
  }

  /* 섹션 제목 위 SVG 아이콘 (아이콘 폰트 대신 파일을 쓰는 경우) */
  .section_tit .sec_ico {
    display: inline-block;
    width: 10rem;
    height: auto;
    margin: 0 auto 2rem;
  }

  /* ---------------------- 읽기 폭 ----------------------
     글을 읽는 블록만 폭을 좁혀 가운데로 모은다.
     제목·원형 4단계·STEP 5단계·CTA·FAQ 는 기존 폭을 유지한다. */
  .sp_lead,
  .sp_byline,
  .sp_answer,
  .sp_toc,
  .sp_body,
  .sp_rel,
  .sp_disc {
    max-width: var(--sp-read);
    margin-left: auto;
    margin-right: auto;
  }

  /* .top_num 은 inline-flex 라 부모 정렬에 끌려간다 → 직접 가운데 배치 */
  .top_num {
    display: flex;
    justify-content: center;
  }

  /* 히어로 h3 강조 — .section_tit h3 b 는 공통 CSS에 있으나
     .sub_top_tit h3 b 는 없어서 여기서 맞춘다 */
  .sub_top_tit h3 b {
    color: var(--sp-orange);
    font-weight: 700;
  }

  /* ---------------------- 도입부 ---------------------- */
  .sp_byline {
    font-size: 1.5rem;
    color: #8b8b8b;
    letter-spacing: -.02em;
    margin: 0 auto 3rem;

    b {
      color: #333;
      font-weight: 600;
    }
  }

  .sp_lead {
    font-size: 1.9rem;
    line-height: 1.85;
    color: #4a4a4a;
    margin: 0 auto 3.4rem;

    b,
    strong {
      color: #000;
      font-weight: 700;
    }
  }

  /* ------------- 두괄식 직답 (검색결과·AI 발췌 블록) ------------- */
  .sp_answer {
    border: 1px solid #e4ded5;
    background: #fdfaf5;
    padding: 3.8rem 4.4rem;
    margin: 0 auto 2rem;

    .tag {
      display: inline-block;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--sp-vermilion);
      border: 1px solid #f0d6b8;
      background: #fff;
      border-radius: 10rem;
      padding: .5rem 1.5rem;
      margin-bottom: 1.6rem;
    }

    p {
      font-size: 1.9rem;
      line-height: 1.85;
      color: #3d3d3d;
      margin: 0 0 1.4rem;

      &:last-child {
        margin-bottom: 0;
      }
    }

    b {
      color: var(--sp-vermilion);
      font-weight: 700;
    }

    a {
      color: var(--sp-vermilion);
      font-weight: 700;
    }
  }

  /* ---------------------- 목차 ---------------------- */
  .sp_toc {
    background: #fff;
    border: 2px solid var(--sp-orange);
    border-radius: 1.2rem;
    padding: 4.5rem 5rem 5rem;
    /* 박스를 내용 폭까지만 줄이고 가운데 배치 */
    width: fit-content;
    max-width: 100%;
    margin: 6rem auto 0;
    /* strong 을 inline-block 으로 두고 가운데 정렬하기 위해 */
    text-align: center;

    strong {
      display: inline-block;
      font-size: 1.9rem;
      font-weight: 700;
      color: #000;
      letter-spacing: -.02em;
      margin-bottom: 4.5rem;

      /* 소제목과 같은 로고 별(icon-star-2) */
      &:before {
        content: "\e8d1";
        font-family: "icon_font";
        font-style: normal;
        font-weight: normal;
        font-size: 1.4rem;
        color: var(--sp-orange);
        margin-right: .9rem;
        letter-spacing: 0;
        -webkit-font-smoothing: antialiased;
      }
    }

    /* 한 줄에 2개씩. 칸 폭을 내용에 맞추고(auto) 두 칸을 묶어 가운데 배치.
       1fr 로 두면 칸이 절반씩 차지해 두 항목이 멀리 떨어진다. */
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      justify-items: start;
      gap: 1.8rem 5rem;
      counter-reset: t;
    }

    li {
      counter-increment: t;
      font-size: 2rem;

      &:before {
        content: counter(t, decimal-leading-zero);
        font-family: 'Barlow', sans-serif;
        font-size: 2.1rem;
        color: var(--sp-orange);
        font-weight: 600;
        margin-right: 1rem;
      }
    }

    a {
      color: #333;
      text-decoration: none;

      &:hover {
        color: var(--sp-vermilion);
      }
    }
  }

  /* ---------------------- 본문 ---------------------- */
  .sp_body {
    font-size: 1.8rem;
    line-height: 1.85;
    color: var(--sp-text);

    p {
      margin: 0 0 2.2rem;
    }

    b,
    strong {
      color: #000;
      font-weight: 700;
    }

    em {
      font-style: normal;
      color: var(--sp-vermilion);
      font-weight: 700;
    }

    a {
      color: var(--sp-vermilion);
      font-weight: 700;
    }

    /* 본문 중 가운데 정렬이 필요한 문단 */
    .sp_mid {
      text-align: center;
    }

    /* 이유 목록 — 목차와 같은 Barlow 주황 번호(01, 02) */
    .sp_reason {
      list-style: none;
      margin: 0 0 2.6rem;
      padding: 0;
      counter-reset: r;

      >li {
        counter-increment: r;
        position: relative;
        padding-left: 5.2rem;
        margin-bottom: 1.6rem;

        &:last-child {
          margin-bottom: 0;
        }

        &:before {
          content: counter(r, decimal-leading-zero);
          position: absolute;
          left: 0;
          top: 0;
          font-family: 'Barlow', sans-serif;
          font-size: 2.2rem;
          font-weight: 600;
          color: var(--sp-orange);
          letter-spacing: 0;
          line-height: 1.55;
        }
      }
    }

    /* 원장 경험담 — 설명 문단과 구분되도록 왼쪽 세로바로 분리 */
    .sp_quote {
      border-left: 3px solid var(--sp-orange);
      padding: .6rem 0 .6rem 2.8rem;
      margin: 0 0 2.6rem;
      color: #4a4a4a;

      p:last-child {
        margin-bottom: 0;
      }
    }

    /* 정리 문장 — 앞에 주황 화살표, 본문보다 크게 */
    .sp_sum {
      position: relative;
      padding-left: 3.2rem;
      font-size: 2.1rem;
      font-weight: 600;
      color: #000;
      line-height: 1.7;

      /* flex 로 하면 <em> 이 별도 항목이 되어 앞뒤에 gap 이 붙는다.
         절대배치로 두어 문장 흐름을 그대로 유지한다. */
      &:before {
        content: "→";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--sp-orange);
        font-weight: 700;
      }
    }

    /* 정의 박스 — 본문 좌측정렬 그대로 두고 배경·테두리로만 구분 */
    .sp_def {
      background: #fdf4e8;
      border: 1px solid #f2e0c8;
      padding: 3rem 3.4rem;
      margin: 0 0 3.4rem;

      p:last-child {
        margin-bottom: 0;
      }
    }
  }

  /* 소제목 — FAQ 의 Q 원형(common.css .faq_q::before)과 같은 방식으로
     검정 원 안에 ? 를 넣는다. 기존 주황 세로바는 사용하지 않는다. */
  .sp_h4 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #000;
    letter-spacing: -.03em;
    margin: 7.5rem 0 1.8rem;
    line-height: 1.45;

    /* 본문 첫머리에 오는 소제목은 섹션 제목과 붙어야 하므로 위 여백 없음 */
    &:first-child {
      margin-top: 0;
    }
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;

    /* 기본 아이콘 = 로고의 별(icon-star-2, font.css \e8d1) */
    &:before {
      content: "\e8d1";
      font-family: "icon_font";
      font-style: normal;
      font-weight: normal;
      flex: none;
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 100%;
      background: none;
      color: var(--sp-orange);
      font-size: 1.4rem;
      line-height: 3.2rem;
      text-align: center;
      letter-spacing: 0;
      -webkit-font-smoothing: antialiased;
      /* 제목 첫 줄 가운데에 원이 오도록 미세 조정 */
      margin-top: .3rem;
    }

    /* 질문형 소제목만 물음표 — 검정 원 유지 */
    &.q:before {
      content: "?";
      font-family: inherit;
      font-size: 2rem;
      font-weight: 600;
      background: var(--333, #333);
      color: #fff;
    }
  }

  /* ---------------------- 표 ---------------------- */
  .sp_table {
    width: 100%;
    border-collapse: collapse;
    /* 표 앞뒤로 본문과 확실히 떨어지게 */
    margin: 5.5rem 0 6rem;
    font-size: 1.7rem;
    line-height: 1.65;
    letter-spacing: -.03em;

    th,
    td {
      border-bottom: 1px solid var(--sp-line2);
      padding: 1.8rem 2rem;
      text-align: center;
      vertical-align: middle;
    }

    thead th {
      background: var(--sp-dark);
      color: #fff;
      font-weight: 600;
      border-bottom: 0;
    }

    tbody th {
      background: #fafafa;
      color: #333;
      font-weight: 700;
      width: 26%;
    }

    /* 머리행 두 가지 색으로 나누는 변형.
       첫 칸(항목명)은 진한 배경, 나머지 칸은 밝은 배경.
       다른 표에도 쓰려면 <table class="sp_table two_tone"> 로 클래스만 추가하면 된다. */
    &.two_tone {
      thead th:first-child {
        background: #333;
        color: #fff;
      }

      thead th:not(:first-child) {
        background: #f0ede5;
        color: #333;
      }

      /* 3열 표(트랙션 비교)의 마지막 칸만 한 톤 따뜻하게 구분 */
      thead th:nth-child(3) {
        background: #f7e3c4;
      }
    }

    td b {
      color: var(--sp-vermilion);
    }

    td a {
      color: var(--sp-vermilion);
      font-weight: 700;
    }
  }

  .sp_cap {
    font-size: 1.4rem;
    color: #9a9a9a;
    /* 표 하단 여백(6rem)을 끌어올려 표에 붙이고, 아래로 다시 간격을 준다 */
    margin: -4.8rem 0 6rem;
    letter-spacing: -.02em;
  }

  /* ---------------------- 안내 박스 ---------------------- */
  .sp_note {
    background: var(--sp-tint);
    border: 1px solid #dbeaea;
    padding: 2.6rem 3rem;
    margin: 3rem 0;
    font-size: 1.7rem;
    line-height: 1.8;
    color: #4a5c5c;

    b {
      color: #2f6d6d;
    }

    &.warn {
      background: #fdf5f2;
      border-color: #f3ddd4;
      color: #7a4a3a;

      b {
        color: var(--sp-vermilion);
      }
    }
  }

  /* ---------------------- 체크리스트 ---------------------- */
  .sp_check {
    border: 1px solid var(--sp-line2);
    padding: 3rem 3.4rem;
    margin: 3rem 0;

    strong {
      display: block;
      font-size: 1.9rem;
      color: #222;
      margin-bottom: 1.6rem;
      letter-spacing: -.03em;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      position: relative;
      padding-left: 2.8rem;
      margin: 1rem 0;
      font-size: 1.7rem;
      line-height: 1.7;

      &:before {
        content: "\2713";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--sp-orange);
        font-weight: 700;
      }

      b {
        color: var(--sp-vermilion);
      }
    }
  }

  /* ---------------------- 비용 카드 ---------------------- */
  .sp_price {
    border: 2px solid var(--sp-dark);
    padding: 3.4rem 3.8rem;
    margin: 3.4rem 0 0;

    strong {
      display: block;
      font-size: 2.1rem;
      color: #000;
      margin-bottom: 1.4rem;
      letter-spacing: -.03em;
    }

    p {
      font-size: 1.7rem;
      line-height: 1.85;
      margin: 0 0 1rem;
    }

    .fill {
      background: #fff3d6;
      padding: .1rem .7rem;
      font-weight: 700;
      color: #8a5a00;
    }

    small {
      display: block;
      font-size: 1.4rem;
      color: #999;
      margin-top: 1.2rem;
      line-height: 1.6;

      a {
        color: var(--sp-vermilion);
        font-weight: 700;
      }
    }
  }

  /* ---------------------- 본문 이미지 ---------------------- */
  .sp_img {
    /* 아래쪽을 넉넉히 — 이미지 다음에 바로 본문이 오는 경우가 많다 */
    margin: 3.5rem 0 6rem;
    border-radius: .6rem;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  /* 원본이 본문 폭(1000px)보다 작은 이미지. 확대하면 흐려지므로
     실제 크기까지만 쓰고 가운데 배치한다. 더 큰 파일로 교체하면 sm 만 빼면 된다. */
  .sp_img.sm {
    max-width: 56.8rem;
    margin: 3.5rem auto 6.5rem;
  }

  /* ---------------------- 5단계 썸네일 ----------------------
     공통 CSS 의 .thumb 은 크기 지정이 없어 이미지 실제 픽셀이 그대로 폭이 된다.
     여기서 박스를 고정해 두면 2배수(레티나) 파일을 넣어도 레이아웃이 안 흔들린다. */
  .step_list_lg>li .thumb {
    width: 29.1rem;
    height: 10rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* ---------------------- 하단 CTA ---------------------- */
  .sp_cta {
    background: var(--sp-dark);
    color: #fff;
    text-align: center;
    padding: 5.6rem 3rem;
    margin: 12rem 0 0;

    h4 {
      color: #fff;
      font-size: 2.7rem;
      margin: 0 0 1.2rem;
      line-height: 1.5;

      b {
        color: var(--sp-orange);
      }
    }

    p {
      color: #c8c2bb;
      font-size: 1.7rem;
      margin: 0 0 2.6rem;
    }

    a.btn {
      display: inline-block;
      background: var(--sp-vermilion);
      color: #fff;
      text-decoration: none;
      font-size: 1.8rem;
      font-weight: 700;
      padding: 1.6rem 4.6rem;
      letter-spacing: -.03em;
    }

    .tel {
      display: block;
      font-family: 'Barlow', sans-serif;
      font-size: 3.8rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: .02em;
      margin-top: 2.6rem;
      text-decoration: none;
    }

    .addr {
      font-size: 1.5rem;
      color: #9b948d;
      margin: .8rem 0 0;
    }
  }

  /* ---------------------- 관련 글 ---------------------- */
  .sp_rel {
    margin: 7rem auto 0;
    border-top: 1px solid var(--sp-line2);
    padding-top: 2.8rem;

    strong {
      display: block;
      font-size: 1.7rem;
      color: #333;
      margin-bottom: 1.8rem;
    }

    a {
      display: block;
      font-size: 1.7rem;
      line-height: 1.6;
      color: #555;
      text-decoration: none;
      padding: 1.6rem 0;
      border-bottom: 1px solid #f2f2f2;

      &:hover {
        color: var(--sp-vermilion);
      }

      &:before {
        content: "\203A";
        color: var(--sp-orange);
        margin-right: .9rem;
      }
    }
  }

  /* ---------------------- 폭 제한 유틸 ----------------------
     표든 박스든 이 클래스만 붙이면 해당 폭으로 줄이고 가운데 배치한다.
     .sp_table / .sp_check 등의 margin 을 덮어야 하므로 그 뒤에 둔다. */
  .w650,
  .w780 {
    margin-left: auto;
    margin-right: auto;
  }

  .w650 {
    max-width: 65rem;
  }

  .w780 {
    max-width: 78rem;
  }

  /* ---------------------- 하단 고지문 ---------------------- */
  .sp_disc {
    background: #f7f7f7;
    padding: 2.6rem 3rem;
    margin: 5rem auto 0;
    font-size: 1.4rem;
    line-height: 1.85;
    color: #8a8a8a;
    letter-spacing: -.02em;
  }
}

/* ==================== 모바일 (사이트 공통 768px 기준) ==================== */
@media (max-width: 768px) {
  .splint {
    /* 모바일은 화면이 이미 좁아 폭 제한이 필요 없다 */
    --sp-read: 100%;

    .sp_answer {
      padding: 2.6rem 2.2rem;

      p {
        font-size: 1.7rem;
      }
    }

    .sp_lead {
      font-size: 1.65rem;
    }

    .sp_body {
      font-size: 1.65rem;
    }

    .sp_h4 {
      font-size: 2rem;
      margin-top: 3.4rem;
      gap: 1rem;

      &:before {
        width: 2.8rem;
        height: 2.8rem;
        line-height: 2.8rem;
        font-size: 1.7rem;
        margin-top: .2rem;
      }
    }

    .sp_toc {
      padding: 3rem 2rem 3.5rem;
    }

    /* 모바일은 1열 */
    .sp_toc ol {
      grid-template-columns: 1fr;
      gap: 1.2rem;
    }

    .sp_table {
      font-size: 1.5rem;
      margin: 4rem 0 4.5rem;

      th,
      td {
        padding: 1.3rem 1.2rem;
      }

      tbody th {
        width: 32%;
      }
    }

    .sp_price,
    .sp_check,
    .sp_note {
      padding: 2.2rem 2rem;
    }

    .sp_img.sm {
      max-width: 100%;
      margin: 2.5rem 0 4.5rem;
    }

    /* 모바일에서는 썸네일이 가로 전체를 쓴다
       (.chin 안에만 있는 공통 모바일 규칙이 .splint 에는 안 걸리므로 여기서 처리) */
    .step_list_lg>li .thumb {
      width: 100%;
      height: 14rem;
    }

    .sp_cta {
      padding: 4rem 2rem;
      margin-top: 8rem;

      h4 {
        font-size: 2.1rem;
      }

      .tel {
        font-size: 2.9rem;
      }
    }
  }
}