/* -----------------------------
   다운로드 가이드 (수정 안정화 버전)
   PC 디자인 그대로, 모바일은 overflow-x 방지만 추가
------------------------------ */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 버튼 영역 */
.btn_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap; /* 모바일 줄바꿈 */
}
.btn_list > button {
  padding: 10px 20px;
  border-radius: 20px;
  border: 0;
  background-color: #222;
  color: #fff;
  margin-right: 20px;
}
.btn_list > button:last-child {
  margin-right: 0;
}

/* 텍스트 박스 */
.text_box {
  margin: 40px 0 80px 40px;
}
.text_box > ul {
  width: 100%;
  line-height: 1.6;
  margin: 20px 0;
}
.text_box > ul > li {
  list-style: none;
}
.text_box > p {
  width: 100%;
  line-height: 1.6;
  margin: 20px 0;
}

/* 표 스타일 (그대로 유지) */
table:last-child {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
table th {
  padding: 20px 10px;
  background-color: #eee;
  width: 20%;
  word-wrap: break-word;
}
table td {
  padding: 20px 10px;
  border: 1px #eee solid;
  width: 20%;
  word-wrap: break-word; /* 오타 수정 (w ord-wrap → word-wrap) */
  overflow-wrap: anywhere;
}

/* 표를 감싸는 컨테이너 추가 (필수는 아님, 있으면 더 안전) */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 전체 레이아웃 */
.layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 왼쪽 설명 */
.left-desc {
  flex: 0 0 40%;
  position: sticky;
  top: 80px; /* 헤더 높이에 맞게 */
}
.left-desc h3 {
  font-size: 22px;
  margin-bottom: 8px;
}
.left-desc p {
  color: #555;
  line-height: 1.6;
}

/* 오른쪽 스와이프 */
.right-swiper {
  flex: 1;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    padding: 16px;
  }
  .left-desc {
    position: static;
    flex: auto;
  }
  .text_box {
    margin: 20px 0 60px 0;
  }
  table {
    width: 100%;
  }
  table th, table td {
    font-size: 14px;
    padding: 14px 8px;
  }
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 첫 번째 표만 특별히 넓게 유지 */
.table-wrap.wide-table table {
  min-width: 800px; /* 또는 1000px, 필요에 맞게 조절 */
}

/* 스크롤 시 디자인 안정화 */
.table-wrap::-webkit-scrollbar {
  height: 8px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.table-wrap::-webkit-scrollbar-track {
  background: #f0f0f0;
}

/* 스와이프 */
.swipe-only {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #fff;
  touch-action: pan-y;
}
.swipe-only .track {
  display: flex;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.swipe-only .slide {
  min-width: 100%;
  display: grid;
}
.swipe-only img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.swipe-only .cap {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.swipe-only .cap h4 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
}
.swipe-only .cap p {
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.55;
}
.swipe-only.grab {
  cursor: grabbing;
  user-select: none;
}

/* PC에서는 이미지 40% 유지 */
@media (min-width: 769px) {
  .slide > img {
    width: 40%;
  }
}

/* 기타 */
#nonstop {
  margin-top: 80px;
}

/* ===== [모바일 스와이프 오버사이즈/잘림 패치] ===== */
@media (max-width: 768px){

  /* 부모·컨테이너가 뷰포트 넘지 않도록 강제 */
  html, body { overflow-x: hidden; }
  .layout, .right-swiper { max-width: 100vw; width: 100%; }
  
  /* 스와이프 박스가 화면 기준으로 꽉 차되 넘치지 않게 */
  .swipe-only{
    width: 100%;
    max-width: 100vw;   /* ← 핵심 */
  }

  /* 트랙/슬라이드가 여백 등으로 폭을 키우지 못하게 */
  .swipe-only .track{
    width: 100%;
    gap: 0;             /* 혹시 다른 곳에서 gap 넣었으면 무력화 */
  }
  .swipe-only .slide{
    min-width: 100%;
    width: 100%;
    display: block;     /* grid가 폭을 늘리는 경우 방지 */
  }

  /* 이미지가 무조건 컨테이너 안에 맞도록 */
  .swipe-only img,
  .slide > img{
    width: 100% !important;   /* 데스크톱용 40% 규칙 덮어쓰기 */
    max-width: 100%;
    height: auto;
  }

  /* 캡션도 안전 폭 유지 */
  .swipe-only .cap{
    padding: 12px 14px 14px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .btn_list button {flex:0 0 calc(50% - 20px); margin:10px !important;}
}

/* 데스크톱에서는 기존처럼 이미지 40% 유지 */
@media (min-width: 769px){
  .slide > img { width: 40%; }
}