@charset "UTF-8";

.kds .visual_text {
  word-break: keep-all;
}

.kds .visual-desc {
  font-weight: 400;
}

.kds br.mo {
  display: none;
}

/* section1: KDS·DID 비교 (배경 이미지 위 흰 글자) */
.kds .section1 {
  position: relative;
  background-color: #2B2622;
}

.kds .section1 .section_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kds .section1 .section_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kds .section1 .section_title,
.kds .section1 .section_text {
  color: #FFF;
}

.kds .compare {
  width: 100%;
  margin-top: 80px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #FFF;
  text-align: center;
}

.kds .compare th,
.kds .box.img figcaption {
  word-break: keep-all;
}

.kds .compare th {
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
}

.kds .compare thead th {
  padding-bottom: 16px;
}

.kds .compare tbody tr {
  border-top: 2px solid #FFF;
}

.kds .compare td {
  height: 78px;
  padding: 13px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  word-break: keep-all;
}

/* section2, section3: 텍스트 + 이미지 (section3은 좌우 반전) */
.kds .section_box {
  display: flex;
  align-items: center;
  gap: 30px;
}

.kds .section3 .section_box {
  flex-direction: row-reverse;
}

.kds .section_box .box {
  flex: 1;
  min-width: 0;
}

.kds .section2 .box.text {
  padding-left: 40px;
}

.kds .section_title .mark {
  background: linear-gradient(transparent 55%, rgba(0, 188, 86, .3) 55%, rgba(0, 188, 86, .3) 90%, transparent 90%);
}

.kds .section_title .mark small {
  font-size: 24px;
}

.kds .section_box .section_text {
  color: #1F2122;
}

.kds .box.img {
  text-align: center;
}

.kds .box.img img {
  max-width: 100%;
  height: auto;
}

.kds .box.img figcaption {
  margin-top: 24px;
  color: #6D767A;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.kds .box.img figcaption:before {
  display: inline-block;
  width: 3px;
  height: 18px;
  margin-right: 8px;
  background-color: #00BC56;
  vertical-align: -2px;
  content: '';
}

/* section4: 주문 통합 → 주문 처리 → 픽업 안내 */
.kds .section4 {
  background-color: #F5F8FA;
  text-align: center;
}

.kds .section4 .section_list {
  display: flex;
  gap: 30px;
  margin-top: 80px;
}

.kds .section4 .section_list li {
  flex: 1;
  min-width: 0;
  word-break: keep-all;
}

.kds .section4 .section_list .img {
  display: block;
  position: relative;
}

.kds .section4 .section_list .img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.kds .section4 .section_list li+li .img:before {
  display: block;
  position: absolute;
  top: 50%;
  left: -39px;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  background: #6D767A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23FFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center;
  content: '';
}

.kds .section4 .section_list strong {
  display: block;
  margin-top: 40px;
  color: #00BC56;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
}

.kds .section4 .section_list p {
  margin-top: 12px;
  color: #1F2122;
  font-size: 18px;
  line-height: 28px;
  word-break: keep-all;
}

/* section5 */
.kds .section5 {
  text-align: center;
}

.kds .section5 picture {
  display: block;
  margin-top: 80px;
}

.kds .section5 img {
  max-width: 100%;
  height: auto;
}

/* 일본어는 단어 구분 공백이 없어 keep-all이면 줄바꿈되지 않음 */
html[lang="ja"] .kds .visual_text,
html[lang="ja"] .kds .section_title,
html[lang="ja"] .kds .section_text,
html[lang="ja"] .kds .compare td,
html[lang="ja"] .kds .section4 .section_list li,
html[lang="ja"] .kds .section4 .section_list p {
  word-break: normal;
  word-break: auto-phrase;
}

@media all and (max-width:1000px) {
  /* 줄바꿈은 모바일 시안(360px) 기준: br.pc는 PC 전용, br.mo는 모바일 전용 */
  .kds br.pc,
  .kds .visual-desc br.pc {
    display: none;
  }

  .kds br.mo,
  .kds .visual-desc br {
    display: inline;
  }

  /* FAQ 답변: 시안의 줄바꿈이 들어가도록 글자 크기·여백을 모바일 시안 값으로 */
  .kds .section_faq .faq_item p {
    padding-left: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .kds .compare {
    margin-top: 60px;
    border-bottom: 1px solid #FFF;
  }

  .kds .compare thead td {
    width: 22%;
  }

  .kds .compare th {
    font-size: 14px;
    line-height: 21px;
  }

  .kds .compare thead th {
    padding-bottom: 10px;
  }

  .kds .compare tbody tr {
    border-top-width: 1px;
  }

  .kds .compare td {
    height: 60px;
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
  }

  .kds .section_box,
  .kds .section3 .section_box {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .kds .section2 .box.text {
    padding-left: 0;
  }

  .kds .section_title .mark small {
    font-size: 16px;
  }

  .kds .box.img figcaption {
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
  }

  .kds .section4 .section_list {
    flex-direction: column;
    gap: 72px;
    margin-top: 40px;
  }

  .kds .section4 .section_list li+li .img:before {
    top: -50px;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: 0 0 0 -14px;
    background-size: 16px;
    transform: rotate(90deg);
  }

  .kds .section4 .section_list strong {
    margin-top: 24px;
    font-size: 20px;
    line-height: 28px;
  }

  .kds .section4 .section_list p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 23px;
  }

  .kds .section5 picture {
    margin-top: 40px;
  }
}