@media (max-width: 700px) {
  .diagnostic-hero { height: auto; background: #fff; }
  .diagnostic-hero::before {
    inset: auto 0 0;
    height: 85vw;
    background-size: auto 100%;
    background-position: center bottom;
  }
  .diagnostic-hero .hero-inner { display: grid; grid-template-columns: 1fr; width: 100%; height: auto; margin: 0; }
  .diagnostic-hero .hero-motto { display: none; }
  .diagnostic-hero .hero-copy { display: contents; }
  .diagnostic-hero .eyebrow { grid-row: 1; margin: 68px 8% 0; font-size: 15px; line-height: 23px; letter-spacing: .12em; font-weight: 400; }
  .diagnostic-hero .eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: #222; margin-bottom: 18px; }
  .diagnostic-hero h1 { grid-row: 2; margin: 27px 8% 0; font-size: 30px; line-height: 42px; font-weight: 600; }
  .diagnostic-hero .english { grid-row: 3; margin: 6px 8% 0; font-size: 20px; line-height: 30px; }
  .diagnostic-hero .hero-description { grid-row: 4; margin: 30px 8% 24px; font-size: 15px; line-height: 24px; word-break: keep-all; }
  .diagnostic-hero .hero-equipment {
    grid-row: 5;
    position: relative;
    inset: auto;
    width: 132%;
    max-width: none;
    height: auto;
    margin: -25px 0 0 -16%;
    transform: scaleX(-1);
    mask-image: none;
    mix-blend-mode: normal;
  }
  .diagnostic-hero .our-role { grid-row: 6; position: relative; z-index: 2; margin: -55px 5% 20px; padding: 12px 7% 16px; border-radius: 4px; background: rgb(140 146 150 / 25%); }
  .diagnostic-hero .our-role h2 { font-size: 18px; line-height: 27px; }
  .diagnostic-hero .our-role ul { grid-template-columns: repeat(3, max-content); gap: 8px 16px; margin-top: 8px; }
  .diagnostic-hero .our-role li { font-size: 11px; line-height: 20px; gap: 5px; }
  .diagnostic-hero .our-role svg { width: 15px; height: 18px; }
}
@media (max-width: 400px) {
  .diagnostic-hero .our-role { padding-inline: 16px; margin-top: -60px; }
  .diagnostic-hero .our-role ul { grid-template-columns: repeat(2, max-content); gap: 6px 16px; }
}

@media (max-width: 700px) {
  .concept-section { margin-top: 0; padding: 30px 16px 26px; }
  .concept-inner { width: 100%; height: auto; display: block; padding: 30px 14px 24px; background: #f8f8f8; }
  .concept-heading { gap: 12px; align-items: center; }
  .concept-heading .section-number { font-size: 50px; line-height: 52px; font-weight: 400; color: #777; }
  .concept-heading h2 { font-size: 16px; line-height: 23px; font-weight: 400; letter-spacing: .06em; color: #929292; }
  .concept-desktop-title { display: none; }
  .concept-mobile-title[hidden] { display: inline; }
  .concept-heading p { font-size: 13px; line-height: 19px; margin-top: 0; color: #555; }
  .concept-description { margin: 30px 8px 0; font-size: 14px; line-height: 21px; color: #888; word-break: keep-all; }
  .concept-description p + p { margin-top: 22px; }
  .concept-features { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
  .concept-features .feature-icon { width: 70.4px; height: 70.4px; margin: 0 auto 14px; background: #eee; }
  .concept-features .feature-icon svg { width: 48.4px; height: 48.4px; stroke-width: 2.5; }
  .concept-features .feature-icon svg:has(use[href="#cartridge"]) { height: 57.2px; }
  .concept-features h3 { font-size: 16px; line-height: 24px; font-weight: 400; }
  .concept-features p { margin-top: 8px; font-size: 14px; line-height: 21px; color: #888; }
}

@media (max-width: 700px) {
  .cartridge-section { padding: 0 0 40px; }
  .cartridge-layout { width: calc(100% - 40px); height: auto; grid-template-columns: 1fr; gap: 18px; }
  .cartridge-main { height: max(420px, calc((100vw - 40px) * 1.075)); border: 0; }
  .cartridge-heading { padding: 30px 16px 14px; gap: 14px; align-items: center; }
  .cartridge-heading .section-number { font-size: 50px; line-height: 52px; color: #777; font-weight: 400; }
  .cartridge-heading h2 { font-size: 16px; line-height: 23px; font-weight: 400; color: #929292; }
  .cartridge-heading p { margin-top: 0; font-size: 13px; line-height: 20px; }
  .cartridge-introduction { margin: 0 24px; font-size: 12px; line-height: 18px; word-break: keep-all; }
  .cartridge-animation { bottom: 40px; height: calc(100% - 160px); }
  .cartridge-details { grid-template-rows: repeat(3, minmax(160px, auto)); gap: 18px; }
  .cartridge-point { min-height: 160px; grid-template-columns: 1fr 1fr; background: #edf0f4; border: 1px solid #ddd; }
  .cartridge-point-copy { padding: 16px 16px 18px; }
  .cartridge-point header { gap: 8px; }
  .cartridge-point-number { font-size: 36px; line-height: 38px; }
  .cartridge-point h3 { font-size: 13px; line-height: 20px; white-space: normal; }
  .cartridge-subtitle { font-size: 10px; line-height: 15px; white-space: normal; }
  .cartridge-point-description { margin-top: auto; font-size: 10px; line-height: 15px; word-break: keep-all; }
  .cartridge-point-description::before { width: 18px; height: 2px; margin: 14px 0 10px; }
  .cartridge-point-image svg { display: block; width: 100%; height: 100%; }
}
@media (max-width: 360px) {
  .cartridge-heading { gap: 10px; padding-inline: 12px; }
  .cartridge-heading h2 { font-size: 14px; }
  .cartridge-heading p { font-size: 11px; }
  .cartridge-introduction { margin-inline: 18px; }
  .cartridge-point-copy { padding: 12px 10px; }
  .cartridge-point-number { font-size: 30px; line-height: 34px; }
  .cartridge-point h3 { font-size: 11px; line-height: 17px; }
  .cartridge-point header { gap: 5px; }
}

@media (max-width: 700px) {
  .mechanism-inner {
    width: calc(100% - 40px);
    padding: 32px 20px 30px;
    background: radial-gradient(at 22% 40%, rgb(255 255 255 / 82%), transparent 58%), linear-gradient(135deg, #dce1e8 0%, #eef0f3 48%, #c9cfd7 100%);
  }
  .mechanism-overview { height: auto; display: flex; flex-direction: column; }
  .mechanism-copy { position: relative; inset: auto; width: 100%; }
  .mechanism-heading { gap: 16px; align-items: center; }
  .mechanism-heading .section-number { font-size: 50px; line-height: 52px; font-weight: 400; color: #777; }
  .mechanism-heading h2 { font-size: 16px; line-height: 23px; font-weight: 400; color: #929292; }
  .mechanism-heading > div > p { font-size: 13px; line-height: 20px; margin-top: 0; white-space: normal; word-break: keep-all; }
  .mechanism-description { margin: 26px 0 0; font-size: 14px; line-height: 22px; word-break: keep-all; }
  .mechanism-main-image.mechanism-animation {
    /* Align the visible equipment, including the extended tray, not its alpha canvas. */
    --mechanism-canvas-width: min(600px, 112vw);
    position: relative;
    inset: auto;
    width: var(--mechanism-canvas-width);
    height: auto;
    max-width: none;
    margin: 40px 0 -15px calc(50% - var(--mechanism-canvas-width) * .5955);
    object-fit: contain;
    object-position: center;
    transform: none;
  }
  .mechanism-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .mechanism-detail-image { height: 30vw; border-radius: 0; }
  .mechanism-gallery figcaption { margin: 6px 0 0; font-size: 12px; line-height: 19px; font-weight: 400; word-break: keep-all; }
  .mechanism-replay { right: 0; bottom: 10px; font-size: 11px; }
}

@media (max-width: 700px) {
  .case-design-section { margin-top: 30px; }
  .case-design-inner { width: calc(100% - 40px); height: auto; padding: 30px 16px 24px; background: #f8f8f8; }
  .case-design-copy { width: 100%; }
  .case-design-heading { gap: 12px; align-items: center; }
  .case-design-heading .section-number { font-size: 50px; line-height: 52px; font-weight: 400; color: #777; }
  .case-design-heading h2 { font-size: 16px; line-height: 23px; font-weight: 400; color: #929292; }
  .case-design-heading > div > p { margin-top: 0; font-size: 13px; line-height: 20px; color: #555; word-break: keep-all; }
  .case-design-description { margin: 22px 0 0; font-size: 14px; line-height: 21px; word-break: keep-all; }
  .case-design-images { position: static; inset: auto; grid-template-columns: 1fr; height: auto; gap: 36px; margin: 22px 0 0; }
  .case-design-images figure { height: min(260px, 60vw); }
  .case-design-images figure:first-child svg,
  .case-design-images figure:last-child svg { transform: none; mask-image: none; }
  .case-design-features { position: static; inset: auto; grid-template-columns: 1fr; gap: 0; margin: 48px 16px 0; }
  .case-design-features article { gap: 18px; padding: 0 6px 20px; align-items: center; }
  .case-design-features article + article { border-left: 0; border-top: 1px solid #d5d5d5; padding: 20px 6px; }
  .case-design-features article:last-child { padding-bottom: 0; }
  .case-design-features article > span { font-size: 36px; line-height: 42px; flex: 0 0 34px; }
  .case-design-features h3 { font-size: 14px; line-height: 21px; font-weight: 500; }
  .case-design-features p { margin-top: 2px; font-size: 12px; line-height: 19px; word-break: keep-all; }
}

@media (max-width: 700px) {
  .engineering-section { margin-top: 30px; }
  .engineering-inner { width: calc(100% - 40px); padding: 30px 16px 26px; }
  .engineering-overview { height: auto; display: flex; flex-direction: column; }
  .engineering-copy { position: static; width: 100%; order: 0; }
  .engineering-heading { gap: 12px; align-items: center; }
  .engineering-heading .section-number { font-size: 50px; line-height: 52px; font-weight: 400; color: #777; }
  .engineering-heading h2 { font-size: 16px; line-height: 23px; font-weight: 400; color: #929292; }
  .engineering-heading > div > p { margin-top: 0; font-size: 13px; line-height: 20px; word-break: keep-all; }
  .engineering-description { margin: 22px 0 0; font-size: 14px; line-height: 21px; word-break: keep-all; }
  .engineering-exploded { position: static; order: 1; width: 100%; height: auto; margin: 26px 0; object-fit: contain; }
  .engineering-animation { position: static; order: 2; width: 100%; height: auto; margin: 0; transform: none; object-fit: contain; background: #f8f8f8; border-radius: 4px; }
  .engineering-replay { position: static; order: 3; align-self: flex-end; margin: 6px 0 0; font-size: 11px; }
  .engineering-features { grid-template-columns: 1fr; gap: 0; margin: 24px 14px 0; }
  .engineering-features article { gap: 14px; padding: 0 0 18px; }
  .engineering-features article + article { border-left: 0; border-top: 1px solid #d1d1d1; padding: 20px 0 18px; }
  .engineering-features article:last-child { padding-bottom: 0; }
  .engineering-feature-number { font-size: 36px; line-height: 40px; flex: 0 0 30px; width: 30px; }
  .engineering-features h3 { font-size: 14px; line-height: 21px; font-weight: 500; word-break: keep-all; }
  .engineering-features h4 { font-size: 13px; line-height: 20px; font-weight: 400; color: #7189b2; }
  .engineering-features p { margin-top: 8px; font-size: 12px; line-height: 19px; word-break: keep-all; }
}

@media (max-width: 700px) {
  .cartridge-point-number,
  .case-design-features article > span,
  .engineering-feature-number,
  .validation-group header > span {
    display: inline-block;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    transform: scaleX(.65);
    transform-origin: left center;
  }
}

@media (max-width: 700px) {
  .concept-inner,
  .cartridge-main,
  .mechanism-inner,
  .case-design-inner,
  .engineering-inner,
  .validation-inner {
    background: radial-gradient(at 22% 40%, rgb(255 255 255 / 82%), transparent 58%), linear-gradient(135deg, #dce1e8 0%, #eef0f3 48%, #c9cfd7 100%);
  }
}

@media (max-width: 700px) {
  .validation-section { margin-top: 30px; }
  .validation-inner { width: calc(100% - 40px); padding: 30px 10px 12px; }
  .validation-copy { margin: 0 6px 28px; }
  .validation-heading { gap: 10px; align-items: center; }
  .validation-heading .section-number { font-size: 50px; line-height: 52px; color: #777; font-weight: 400; }
  .validation-heading h2 { font-size: 16px; line-height: 23px; font-weight: 400; color: #929292; }
  .validation-heading > div > p { margin-top: 0; font-size: 13px; line-height: 20px; }
  .validation-description { margin: 18px 6px 0; font-size: 12px; line-height: 18px; word-break: keep-all; }
  .validation-grid { grid-template-columns: 1fr; gap: 28px; }
  .validation-group header { gap: 8px; height: auto; min-height: 64px; align-items: last baseline; padding-bottom: 16px; }
  .validation-group header > span { font-size: 45px; line-height: 46px; flex: 0 0 36px; width: 36px; }
  .validation-group h3 { position: relative; top: 2px; font-size: 14px; line-height: 19px; font-weight: 500; letter-spacing: .025em; }
  .validation-group header p { margin-top: 6px; font-size: 13px; line-height: 17px; color: #7189b2; font-weight: 400; }
  .validation-photos { gap: 6px; }
  .photo-build { height: auto; aspect-ratio: 1.6; grid-template-columns: 54fr 46fr; grid-template-rows: 1fr 1fr; }
  .photo-assembly { height: auto; aspect-ratio: 2.5; grid-template-columns: 62fr 38fr; grid-template-rows: 1fr 1fr; }
  .photo-functional { height: auto; aspect-ratio: 1.54; grid-template-columns: 56fr 44fr; grid-template-rows: 58fr 42fr; }
  .photo-final { height: auto; aspect-ratio: 1.65; }
}