/* ================================
   RESET & BASE
================================ */
:where(.pub_page), :where(.pub_page) *, :where(.pub_page) *::before, :where(.pub_page) *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* html reset removed for site embed */

.pub_page {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1817;
  background: #fff;
  overflow-x: hidden;
}

:where(.pub_page) img { display: block; max-width: 100%; }
:where(.pub_page) a { text-decoration: none; color: inherit; }
:where(.pub_page) button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ================================
   UTILITIES
================================ */
.container { max-width: 1460px; margin: 0 auto; padding: 0 40px; }
.c-yellow { color: #ffc117; }
.c-gold   { color: #FFCC00; }

/* ================================
   SCROLL REVEAL
================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   SECTION 2: BRAND INTRO
================================ */
.intro {
  background: #fff;
  height: clamp(640px, 62.78vw, 1205px);
  display: flex;
  align-items: center;
}
.intro__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.intro__label {
  font-size: clamp(16px, 1.875vw, 24px);
  font-weight: 500;
  color: #1a1817;
  margin-bottom: 24px;
}

.intro__logo {
  width: clamp(200px, 21.98vw, 422px);
  margin-bottom: 48px;
}
.intro__logo img { width: 100%; }

.intro__title {
  font-size: clamp(32px, 3.65vw, 56px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a1817;
  margin-bottom: 32px;
}

.intro__desc {
  font-size: clamp(15px, 1.56vw, 20px);
  color: #8f8f93;
  line-height: 1.7;
  margin-bottom: 52px;
}

.btn-cta {
  position: relative;
  display: inline-block;
  transition: transform 0.2s;
}

.btn-cta__bg {
  width: clamp(180px, 16.72vw, 321px);
  display: block;
}
.btn-cta__arrow {
  position: absolute;
  left: 80%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(12px, 1.302vw, 25px);
  height: auto;
  transition: transform 0.35s ease;
  pointer-events: none;
}
.btn-cta:hover .btn-cta__arrow {
  transform: translateY(-50%) rotate(45deg);
}

/* ================================
   SECTION 3
================================ */
.sec3 {
  position: relative;
  background: #F5F5F7;
  height: clamp(500px, 49.11vw, 943px);
  overflow: hidden;
}

.sec3__badge {
  position: absolute;
  left: 44.66%;
  top: 55.05%;
  width: clamp(140px, 14.76vw, 284px);
  height: clamp(32px, 3.09vw, 60px);
  border: 2px solid #FFD633;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec3__badge-label {
  font-size: clamp(14px, 1.354vw, 26px);
  font-weight: 600;
  color: #1a1817;
  line-height: 1;
}

.sec3__keypoints {
  position: absolute;
  left: 11.70%;
  top: 54.75%;
  width: clamp(240px, 28.26vw, 543px);
  height: clamp(136px, 15.97vw, 307px);
}

.sec3__kp {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.sec3__kp--active { opacity: 1; }

.sec3__kp-title {
  position: absolute;
  left: 44.66%;
  top: 61.34%;
  width: clamp(320px, 43.65vw, 838px);
  font-size: clamp(26px, 2.8125vw, 54px);
  font-weight: 700;
  color: #1a1817;
  line-height: 1.3;
  word-break: keep-all;
  margin-top: 10px;
}

.sec3__kp-desc {
  position: absolute;
  left: 44.66%;
  top: 72%;
  width: clamp(300px, 38.28vw, 735px);
  font-size: clamp(15px, 1.56vw, 20px);
  color: #8f8f93;
  line-height: 1.7;
  word-break: keep-all;
}

.sec3__text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 14.85%;
  text-align: center;
  white-space: nowrap;
}

.sec3__title {
  font-size: clamp(32px, 3.65vw, 56px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a1817;
  margin-bottom: 32px;
  word-break: keep-all;
}

.c-gold2 { color: #FFD633; }

.sec3__desc {
  font-size: clamp(15px, 1.56vw, 20px);
  color: #8f8f93;
  line-height: 1.7;
  word-break: keep-all;
}

/* ================================
   SECTION 4
================================ */
/* 1920×1307.93 */
.sec4 {
  position: relative;
  background: #fff;
  height: clamp(654px, 68.12vw, 1158px);
  overflow: hidden;
}

.sec4__title {
  position: absolute;
  left: 25.18%;   /* 483.5/1920 */
  top: 15%;    /* 140/1307.93 */
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(32px, 3.65vw, 56px);
  font-weight: 700;
  color: #1a1817;
  line-height: 1.35;
  word-break: keep-all;
}

.sec4__hero {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 28%;
  width: clamp(300px, 31.57vw, 606px);
  height: auto;
}

/* 137.92/1920=7.18%, 807.96/1307.93=61.77%, 4-item window */
.sec4__carousel {
  position: absolute;
  left: 7.18%;
  top: 56%;
  width: clamp(820px, 85.63vw, 1644px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1%, black 99%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 1%, black 99%, transparent 100%);
}

.sec4__track {
  display: flex;
  gap: clamp(35px, 3.68vw, 71px);
  will-change: transform;
}

.sec4__item {
  width: clamp(180px, 18.65vw, 358px);
  height: clamp(181px, 18.75vw, 360px);  /* 359.97/1920*100=18.75vw */
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.sec4__ctrl {
  position: absolute;
  right: 7.18%;
  top: calc(55.77% + clamp(181px, 18.75vw, 360px) + 20px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #1a1817;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.sec4__ctrl:hover { background: #333; }

.sec4__icon--play { display: none; }

.sec4__ctrl.is-paused .sec4__icon--pause { display: none; }
.sec4__ctrl.is-paused .sec4__icon--play  { display: block; }

/* ================================
   SECTION 5
================================ */
/* 1920×966.84, bg #F5F5F7 */
.sec5 {
  position: relative;
  background: #F5F5F7;
  height: clamp(480px, 50.36vw, 967px);
  overflow: hidden;
}

.sec5__label {
  position: absolute;
  left: 25.18%;
  top: 13%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(24px, 1.25vw, 24px);
  font-weight: 600;
  color: #FFD633;
  line-height: 1;
}

.sec5__title {
  position: absolute;
  left: 25.18%;
  top: 20%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(24px, 3.3vw, 48px);
  color: #1a1817;
  line-height: 1.35;
  word-break: keep-all;
}

.sec5__content {
  position: absolute;
  left: 20.16%;    /* 387/1920 */
  top: 40.54%;
  right: 5%;
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3.65vw, 70px);
}

.sec5__imgs {
  flex: 0 0 clamp(300px, 32.21vw, 618px);
  position: relative;
}

.sec5__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.sec5__img--active { opacity: 1; }

.sec5__list {
  width: clamp(228px, 23.75vw, 456px);
  list-style: none;
  display: flex;
  flex-direction: column;
  /* gap: clamp(12px, 1.25vw, 24px); */
}

.sec5__item {
  padding: clamp(10px, 1.04vw, 20px) clamp(12px, 1.25vw, 24px);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s;
}

.sec5__tag {
  display: inline-block;
  font-size: clamp(13px, 1.3vw, 24px);
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 10px;
  background: #FFD633;
  color: #fff;
}

.sec5__desc {
  font-size: clamp(11px, 1.1vw, 22px);
  color: #C8C8CC;
  line-height: 1.8;
  white-space: nowrap;
  transition: color 0.3s;
}
.sec5__item--active .sec5__desc { color: #8F8F93; }

/* ================================
   SECTION 1: HERO
================================ */
/* 1920×735 → height = 38.28vw */
.hero {
  position: relative;
  background: #FFD633;
  height: clamp(380px, 38.28vw, 735px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 이미지: 1313.7×875.8 → width = 68.42vw */
.hero__illust {
  width: clamp(560px, 68.42vw, 1314px);
  pointer-events: none;
  flex-shrink: 0;
}

/* ================================
   SECTION 6
================================ */
/* 1920×1077.76, bg #fff */
.sec6 {
  position: relative;
  background: #fff;
  height: clamp(440px, 46.13vw, 978px);
  overflow: hidden;
}

.sec6__grid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 32%;
  display: grid;
  grid-template-columns: repeat(4, clamp(187px, 19.48vw, 374px));
  gap: clamp(12px, 1.30vw, 25px);
}

.sec6__img {
  width: clamp(187px, 19.48vw, 374px);
  height: clamp(118px, 12.33vw, 237px);
  object-fit: cover;
  display: block;
}

.sec6__label {
  position: absolute;
  left: 25.18%;
  top: 13%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(24px, 1.25vw, 24px);
  font-weight: 600;
  color: #FFD633;
  line-height: 1;
}

.sec6__title {
  position: absolute;
  left: 25.18%;
  top: 20%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(24px, 3.3vw, 48px);
  font-weight: 700;
  color: #1a1817;
  line-height: 1.35;
  word-break: keep-all;
}

/* ================================
   SECTION 7
================================ */
.sec7 {
  background: #E8EFF6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(40px, 4.17vw, 80px) 0 clamp(60px, 6.25vw, 120px);
  gap: clamp(20px, 2.5vw, 48px);
  overflow: hidden;
}

.sec7__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 11.46vw, 220px);
  height: clamp(34px, 3.13vw, 60px);
  background: #FF5900;
  border-radius: 50px;
  font-size: clamp(12px, 1.04vw, 20px);
  font-weight: 700;
  color: #fff;
}

.sec7__logo {
  width: clamp(150px, 21.98vw, 302px);
  height: auto;
}

.sec7__title {
  font-size: clamp(24px, 3.3vw, 48px);
  font-weight: 700;
  color: #1a1817;
  text-align: center;
  line-height: 1.45;
  word-break: keep-all;
}

.c-blue2 { color: #5E7FA2; }

.sec7__app {
  width: clamp(260px, 39.06vw, 750px);
  height: auto;
}

.sec7__features {
  display: grid;
  grid-template-columns: repeat(3, clamp(120px, 12.5vw, 240px));
  row-gap: clamp(16px, 1.67vw, 32px);
  column-gap: clamp(6px, 0.63vw, 12px);
}

.sec7__feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.sec7__feat-icon {
  width: clamp(80px, 8.33vw, 160px);
  height: clamp(80px, 8.33vw, 160px);
  object-fit: contain;
}

.sec7__feat-label { display: none; }

/* ================================
   SECTION 8
================================ */
/* 1920×1015, bg #fff */
.sec8 {
  position: relative;
  background: #fff;
  height: clamp(508px, 52.86vw, 1015px);
  overflow: hidden;
}

.sec8__label {
  position: absolute;
  left: 25.18%;
  top: 10%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(24px, 1.25vw, 24px);
  font-weight: 600;
  color: #8EB5DD;
  line-height: 1;
}

.sec8__title {
  position: absolute;
  left: 25.18%;
  top: 18%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(24px, 3.3vw, 48px);
  font-weight: 700;
  color: #1a1817;
  line-height: 1.35;
  word-break: keep-all;
}

.sec8__layout {
  position: absolute;
  left: 7.18%;
  right: 7.18%;
  top: 38%;
  bottom: 8%;
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 3.65vw, 70px);
}

.sec8__imgs {
  flex: 1;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.sec8__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sec8__img--active { opacity: 1; }

.sec8__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.sec8__feature {
  padding: 16px 0;
  opacity: 0.28;
  transition: opacity 0.35s;
  cursor: pointer;
}
.sec8__feature--active { opacity: 1; }
.sec8__feature:hover   { opacity: 0.85; }

.sec8__num {
  font-size: clamp(20px, 1.82vw, 28px);
  font-weight: 700;
  color: #8EB5DD;
  margin-bottom: 8px;
  line-height: 1.45;
}

.sec8__desc {
  font-size: clamp(16px, 1.30vw, 20px);
  color: #1a1817;
  line-height: 1.6;
  white-space: nowrap;
}

.sec8__divider {
  border: none;
  border-top: 1.5px solid #e5e5e5;
  margin: 0;
}

/* ================================
   SECTION 9
================================ */
/* 1920×1102, bg #E8EFF6 */
.sec9 {
  position: relative;
  background: #fff;
  height: clamp(405px, 42.19vw, 810px);
  overflow: hidden;
}

.sec9__title {
  position: absolute;
  left: 25.18%;
  top: 8%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(24px, 3.3vw, 48px);
  font-weight: 700;
  color: #1a1817;
  line-height: 1.35;
  word-break: keep-all;
}

.sec9__desc {
  position: absolute;
  left: 25.18%;
  top: 22%;
  width: clamp(478px, 49.74vw, 955px);
  text-align: center;
  font-size: clamp(15px, 1.25vw, 20px);
  color: #8f8f93;
  line-height: 1.7;
  word-break: keep-all;
}

.sec9__one {
  position: absolute;
  left: 14.02%;
  top: 40%;
  width: clamp(86px, 8.97vw, 172px);
  height: auto;
}

.sec9__pad-wrap {
  position: absolute;
  left: 22.12%;
  top: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sec9__pad {
  width: clamp(274px, 28.58vw, 549px);
  height: auto;
  display: block;
}

.sec9__wacom-wrap {
  position: absolute;
  left: 53.76%;
  top: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sec9__wacom {
  width: clamp(309px, 32.21vw, 618px);
  height: auto;
  display: block;
}

.sec9__img-label {
  font-size: clamp(16px, 1.875vw, 24px);
  font-weight: 500;
  color: #1a1817;
}

/* ================================
   SECTION 10
================================ */
/* 1920×805.87 */
.sec10 {
  position: relative;
  height: clamp(403px, 41.97vw, 806px);
  overflow: hidden;
}

.sec10__bg {
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  height: 50%;
  object-fit: cover;
}

.sec10__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.5vw, 48px);
}

.sec10__text {
  font-size: clamp(16px, 1.875vw, 24px);
  font-weight: 500;
  color: #1a1817;
  text-align: center;
  line-height: 1.6;
}

.sec10__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(177px, 18.44vw, 354px);
  height: clamp(48px, 5vw, 96px);
  background: #1a1817;
  border-radius: 50px;
  font-size: clamp(16px, 1.67vw, 32px);
  font-weight: 700;
  color: #fff;
  transition: background 0.2s;
}
.sec10__btn:hover { background: #333; }

/* ================================
   RESPONSIVE — TABLET (≤1024px)
================================ */
@media (max-width: 1024px) {
  /* Sec3: 키포인트 텍스트 여백 확보 */
  .sec3__kp-title {
    left: 42%;
    top: 58%;
    width: clamp(240px, 38vw, 580px);
    font-size: clamp(18px, 2.0vw, 38px);
  }
  .sec3__kp-desc {
    left: 42%;
    top: 74%;
    width: clamp(300px, 44vw, 600px);
  }

  /* Sec4 */
  .sec4__title    { left: 10%; width: 80%; }
  .sec4__carousel { left: 4%; width: 92%; }

  /* Sec5 */
  .sec5__label, .sec5__title { left: 8%; width: 84%; }
  .sec5__content { left: 4%; right: 4%; }

  /* Sec6 */
  .sec6__label, .sec6__title { left: 8%; width: 84%; }
  .sec6__grid {
    grid-template-columns: repeat(4, clamp(150px, 16.5vw, 280px));
    gap: clamp(8px, 1vw, 16px);
  }
  .sec6__img {
    width: clamp(150px, 16.5vw, 280px);
    height: clamp(95px, 10.4vw, 177px);
  }

  /* Sec7 */
  .sec7__app      { width: min(92vw, 1100px); }
  .sec7__features { grid-template-columns: repeat(3, clamp(140px, 17vw, 280px)); }
  .sec7__feat-icon { width: clamp(140px, 17vw, 280px); height: clamp(140px, 17vw, 280px); }

  /* Sec8 */
  .sec8__label, .sec8__title { left: 8%; width: 84%; }
  .sec8__layout { left: 4%; right: 4%; }

  /* Sec9 */
  .sec9__title, .sec9__desc { left: 8%; width: 84%; }
}

/* ================================
   RESPONSIVE — MOBILE (≤768px)
================================ */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* ── Section 1 ── */
  .hero { height: auto; min-height: 200px; padding: 32px 0; }
  .hero__illust { width: min(90vw, 480px); }

  /* ── Section 2 ── */
  .intro { height: auto; padding: 52px 0; }
  .intro__inner { padding: 0 24px; }
  .intro__label { font-size: 14px; margin-bottom: 14px; }
  .intro__logo  { width: min(56vw, 240px); margin-bottom: 24px; }
  .intro__title { font-size: 24px; margin-bottom: 18px; }
  .intro__desc  { font-size: 13.6px; margin-bottom: 32px; word-break: keep-all; }
  .intro__desc br { display: none; }

  /* ── Section 3 ── */
  .sec3 {
    height: auto;
    padding: 48px 24px 56px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .sec3__text {
    position: static;
    transform: none;
    white-space: normal;
    width: 100%;
    order: -1;
    text-align: center;
    margin-bottom: 32px;
  }
  .sec3__title {
    font-size: 24px;
    margin-bottom: 12px;
    word-break: keep-all;
  }
  .sec3__desc { font-size: 13.6px; word-break: keep-all; }
  .sec3__desc br { display: none; }

  /* 순서: text → image → badge → kp-title → kp-desc */
  .sec3__keypoints {
    position: relative;
    order: 1;
    left: unset;
    top: unset;
    width: 220px;
    height: 130px;
    margin: 0 auto 20px;
  }
  .sec3__badge {
    position: static;
    display: inline-flex;
    order: 2;
    margin-bottom: 10px;
  }
  .sec3__kp-title {
    position: static;
    order: 3;
    width: 100%;
    font-size: 24px;
    margin-top: 0;
    text-align: center;
    word-break: keep-all;
    margin-bottom: 12px;
  }
  .sec3__kp-desc {
    position: static;
    order: 4;
    width: 100%;
    font-size: 13.2px;
    text-align: center;
    word-break: keep-all;
    line-height: 1.8;
  }

  /* ── Section 4 ── */
  .sec4 { height: auto; padding: 48px 0 60px; overflow: hidden; }
  .sec4__title {
    position: static;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    padding: 0 24px;
    margin-bottom: 20px;
  }
  .sec4__hero {
    position: static;
    transform: none;
    width: min(56vw, 280px);
    margin: 0 auto 20px;
  }
  .sec4__carousel {
    position: static;
    width: 100%;
    left: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sec4__carousel { width: 80vw; margin: 0 auto; padding: 0; overflow: hidden; }
  .sec4__track { gap: 16px; }
  .sec4__item { width: 80vw; height: 80vw; }
  .sec4__ctrl { position: static; margin: 10px 24px 0 auto; }

  /* ── Section 5 ── */
  .sec5 { height: auto; padding: 48px 24px 56px; overflow: visible; }
  .sec5__label {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .sec5__title {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    margin-bottom: 28px;
  }
  .sec5__content {
    position: static;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  .sec5__imgs { flex: none; width: 100%; height: 220px; }
  .sec5__list { width: 100%; }
  .sec5__desc { white-space: normal; font-size: 14px; }

  /* ── Section 6 ── */
  .sec6 { height: auto; padding: 48px 24px 56px; overflow: visible; }
  .sec6__label {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .sec6__title {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
  }
  .sec6__grid {
    position: static;
    transform: none;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .sec6__img { width: 100%; height: auto; aspect-ratio: 374 / 237; }

  /* ── Section 7 ── */
  .sec7 { padding: 40px 20px 48px; gap: 18px; }
  .sec7__new   { width: min(48vw, 200px); height: 42px; font-size: 14.4px; }
  .sec7__logo  { width: min(68vw, 300px); }
  .sec7__title { font-size: 24px; }
  .sec7__app   { width: 100%; }
  .sec7__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
  }
  .sec7__feat-icon  { width: 100%; height: auto; aspect-ratio: 1; }
  .sec7__feat-label { font-size: 14px; }

  /* ── Section 8 ── */
  .sec8 { height: auto; padding: 48px 24px 56px; overflow: visible; }
  .sec8__label {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .sec8__title {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    margin-bottom: 24px;
  }
  .sec8__layout { position: static; flex-direction: column; gap: 20px; }
  .sec8__imgs   { flex: none; height: 240px; }
  .sec8__desc   { white-space: normal; font-size: 14px; }

  /* ── Section 9 ── */
  .sec9 {
    height: auto;
    padding: 48px 24px 56px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .sec9__title {
    position: static;
    width: 100%;
    text-align: center;
    font-size: 24px;
  }
  .sec9__desc {
    position: static;
    width: 100%;
    text-align: center;
    font-size: 13.6px;
    margin-bottom: 8px;
  }
  .sec9__one       { display: none; }
  .sec9__pad-wrap  { position: static; }
  .sec9__wacom-wrap { position: static; }
  .sec9__pad   { width: min(72vw, 360px); }
  .sec9__wacom { width: min(72vw, 380px); }
  .sec9__img-label { font-size: 16px; }

  /* ── Section 10 ── */
  .sec10 { min-height: 280px; }
  .sec10__text { font-size: clamp(14px, 3.5vw, 17.6px); white-space: nowrap; }
  .sec10__btn  { width: min(54vw, 200px); height: 48px; font-size: 16px; }
}

/* ================================
   RESPONSIVE — SMALL MOBILE (≤480px)
================================ */
@media (max-width: 480px) {
  .sec3__keypoints { height: 160px; max-width: 280px; }
  .sec4__item { width: 80vw; height: 80vw; }
  .sec5__imgs { height: 180px; }
  .sec8__imgs { height: 200px; }
  .sec9__pad   { width: min(80vw, 300px); }
  .sec9__wacom { width: min(80vw, 320px); }
}