/* =========================================================
   KUMSUNG PLASTIC — TECH INFO
   Final organized stylesheet
   common.css is intentionally untouched.
========================================================= */

/* =========================================================
   SHARED / BASE
   공통 스타일 · 모든 해상도 기본값
========================================================= */

.tech-body{
  --tech-blue:#155fc1;
  --tech-blue-dark:#0b3f86;
  --tech-black:#111;
  --tech-muted:#6f7782;
  --tech-line:#e3e7ec;
  --page-active-color:#1256a0;
  --page-hover-color:#6596d8;
}

.tech-page{
  font-family:'Paperlogy','Pretendard',sans-serif;
  color:#111;
  background:#fff;
}

.tech-page .wrap{
  max-width:1540px;
}

/* Hero */
.tech-hero{
  min-height:calc(100vh - 86px);
  overflow:hidden;
  color:#fff;
  background:url('tech-info-hero.webp') center/cover no-repeat;
}

.tech-hero-inner{
  min-height:calc(100vh - 86px);
  display:flex;
  align-items:flex-start;
  padding-top:110px;
  padding-bottom:70px;
}

.tech-hero-text{
  max-width:650px;
  padding:0;
  text-shadow:0 1px 2px rgba(0,20,48,.16);
}

.tech-eyebrow{
  display:inline-block;
  margin:0 0 18px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(196,216,238,.55);
  color:#c4d8ee;
  font-family:'Pretendard',sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:2.8px;
}

.tech-hero h1,
.tech-hero .tech-hero-main-title{
  margin:0;
  color:#fff;
  font-family:'Pretendard',sans-serif;
  font-size:72px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-3px;
}

.tech-hero-en{
  margin:6px 0 50px;
  color:#e4edf8;
  font-size:22px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:1.7px;
}

.tech-hero-desc{
  max-width:650px;
  margin:0;
  color:#f0f5fb;
  font-size:20px;
  font-weight:450;
  line-height:1.7;
  letter-spacing:-.15px;
}

/* Hero copy animation — INDEX timing / text only */
@keyframes techHeroKickerEntrance{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes techHeroFadeUp{
  from{
    opacity:0;
    transform:translateY(22px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes techHeroDescFadeUp{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* INDEX actual rhythm:
   kicker 0.72s / delay 0.70s
   h1     0.92s / delay 1.30s
   sub    0.92s / delay 1.72s
   message 1.70s / delay 2.18s
*/
.tech-hero-text > .tech-eyebrow{
  opacity:0;
  transform:translateY(14px);
  animation:techHeroKickerEntrance .72s cubic-bezier(.22,.61,.36,1) .70s forwards;
}

.tech-hero-text > .tech-hero-main-title{
  opacity:0;
  transform:translateY(22px);
  animation:techHeroFadeUp .92s cubic-bezier(.22,.61,.36,1) 1.30s forwards;
}

.tech-hero-text > .tech-hero-en{
  opacity:0;
  transform:translateY(22px);
  animation:techHeroFadeUp .92s cubic-bezier(.22,.61,.36,1) 1.72s forwards;
}

.tech-hero-text > .tech-hero-desc{
  opacity:0;
  transform:translateY(18px);
  animation:techHeroDescFadeUp 1.70s cubic-bezier(.22,.61,.36,1) 2.18s forwards;
}

/* Main content */
.tech-library{
  background:#fff;
}

.tech-content{
  padding-top:62px;
  padding-bottom:92px;
}

.tech-section-heading,
.tech-library-heading{
  max-width:760px;
}

.tech-section-kicker{
  display:block;
  margin-bottom:12px;
  color:var(--tech-blue);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.65px;
}

.tech-section-heading h2,
.tech-library-heading h2{
  margin:0;
  color:#111;
  font-size:46px;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-1.6px;
}

.tech-section-heading p,
.tech-library-heading p{
  margin:14px 0 0;
  color:#4f5660;
  font-size:18px;
  font-weight:500;
  line-height:1.72;
  letter-spacing:-.25px;
}

/* The blog-opening hint is secondary to the library introduction. */
.tech-library-heading .tech-external-note{
  margin-top:8px;
  color:#697582;
  font-size:14px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:0;
}

/* Category cards */
.tech-category-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}

.tech-category{
  min-width:0;
  min-height:228px;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto auto;
  column-gap:14px;
  align-content:start;
  padding:28px 27px 25px;
  border:1px solid #e1e5ea;
  border-radius:11px;
  background:#fff;
  color:#111;
  text-align:left;
  cursor:pointer;
  transition:border-color .22s,box-shadow .22s,transform .22s;
}

.tech-category:hover,
.tech-category:focus-visible,
.tech-category.is-selected{
  border-color:#9dbde5;
  box-shadow:0 16px 34px rgba(18,55,96,.10);
  transform:translateY(-2px);
}

.tech-cat-num{
  grid-column:1;
  color:var(--tech-blue);
  font-size:31px;
  font-weight:800;
  line-height:1;
}

.tech-cat-line{
  grid-column:2;
  width:100%;
  height:1px;
  align-self:center;
  background:#dce5f1;
}

.tech-cat-en{
  grid-column:1/-1;
  margin-top:24px;
  color:#6683a8;
  font-size:11px;
  font-weight:600;
  letter-spacing:.7px;
}

.tech-category strong{
  grid-column:1/-1;
  margin-top:4px;
  color:#111;
  font-size:23px;
  line-height:1.25;
  letter-spacing:-.8px;
}

.tech-category small{
  grid-column:1/-1;
  margin-top:9px;
  color:#555d66;
  font-size:14px;
  line-height:1.55;
}

.tech-cat-arrow{
  position:absolute;
  right:24px;
  bottom:22px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f0f5fb;
  color:var(--tech-blue);
  font-size:17px;
  transition:background .2s,color .2s;
}

.tech-category:hover .tech-cat-arrow,
.tech-category.is-selected .tech-cat-arrow{
  background:var(--tech-blue);
  color:#fff;
}

/* Library — extra breathing room after categories */
.tech-library-heading{
  margin-top:110px;
}

/* Search / filters */
.tech-toolbar{
  scroll-margin-top:112px;
  margin-top:30px;
  display:grid;
  grid-template-columns:minmax(340px,1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:18px 0;
  border-top:1px solid #e5e8ec;
  border-bottom:1px solid #e5e8ec;
}

.tech-search{
  min-width:0;
  height:52px;
  display:flex;
  overflow:hidden;
  border:1px solid #cfd5dc;
  border-radius:5px;
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
}

.tech-search:focus-within{
  border-color:#6596d8;
  box-shadow:0 0 0 3px rgba(101,150,216,.10);
}

.tech-search input{
  min-width:0;
  flex:1;
  padding:0 18px;
  border:0;
  outline:0;
  background:#fff;
  color:#171717;
  font-family:inherit;
  font-size:15px;
}

.tech-search input::placeholder{
  color:#707780;
}

.tech-search-icon{
  width:54px;
  min-width:54px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#102f5d;
  color:#fff;
}

.tech-search-icon svg{
  display:block;
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
}

.tech-filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.tech-filters button{
  height:40px;
  padding:0 15px;
  border:1px solid #d9dde3;
  border-radius:22px;
  background:#fff;
  color:#333;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  transition:.18s;
}

.tech-filters button:hover{
  border-color:#aab7c6;
}

.tech-filters button.is-selected{
  border-color:#111;
  background:#111;
  color:#fff;
}

.tech-sort-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#555d66;
  font-size:13px;
  white-space:nowrap;
}

.tech-sort-label select{
  height:40px;
  padding:0 31px 0 12px;
  border:1px solid #d9dde3;
  border-radius:5px;
  background:#fff;
  color:#222;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
}

.tech-count{
  margin:24px 0 14px;
  color:#4f5660;
  font-size:15px;
  font-weight:600;
  line-height:1.55;
}

/* Article grid */
.tech-article-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px 20px;
}

.tech-article{
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  color:#111;
  text-decoration:none;
}

.tech-thumb{
  aspect-ratio:1/1;
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid #e6e9ed;
  border-radius:8px;
  background:#f6f7f9;
}

.tech-thumb img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#fff;
  transition:transform .35s ease;
}

.tech-article:hover .tech-thumb img{
  transform:scale(1.018);
}

.tech-thumb-fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:22px;
  background:#f4f7fb;
}

.tech-thumb-fallback small{
  align-self:start;
  color:var(--tech-blue);
  font-size:11px;
  font-weight:700;
}

.tech-thumb-fallback b{
  color:#111;
  font-size:22px;
  line-height:1.35;
  letter-spacing:-.7px;
  word-break:keep-all;
}

.tech-card-body{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px 2px 0;
  border-top:2px solid transparent;
  transition:border-color .2s;
}

.tech-article:hover .tech-card-body{
  border-top-color:var(--tech-blue);
}

.tech-card-body small{
  color:#555d66;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
}

.tech-card-body strong{
  color:#111;
  font-size:18px;
  font-weight:750;
  line-height:1.45;
  letter-spacing:-.45px;
  word-break:keep-all;
}

.tech-empty{
  padding:58px;
  border-radius:8px;
  background:#f7f8fa;
  color:#68717b;
  text-align:center;
}

/* Pagination */
.tech-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:46px 0 0;
}

.tech-pagination button{
  width:38px;
  height:38px;
  border:1px solid #dfe3e8;
  border-radius:50%;
  background:#fff;
  color:#222;
  cursor:pointer;
  font-family:inherit;
}

.tech-pagination button.is-selected{
  border-color:#111;
  background:#111;
  color:#fff;
}

.tech-pagination button:disabled{
  opacity:.3;
  cursor:default;
}

/* CTA — extra breathing room after pagination */
.tech-contact-cta{
  max-width:920px;
  margin:110px auto 0;
  padding:52px 24px 4px;
  border-top:1px solid #dedede;
  text-align:center;
}

.tech-contact-cta h2{
  margin:0;
  color:#111;
  font-size:42px;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-1.4px;
}

.tech-contact-cta p{
  margin:14px auto 0;
  color:#4f5660;
  font-size:18px;
  font-weight:500;
  line-height:1.7;
}

.tech-contact-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:25px;
}

.tech-contact-actions a{
  min-width:150px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:5px;
  font-size:14px;
  font-weight:700;
  transition:transform .18s,opacity .18s;
}

.tech-contact-actions a:first-child{
  background:#6596d8;
  color:#fff;
}

.tech-contact-actions a:last-child{
  background:#03c75a;
  color:#fff;
}

.tech-contact-actions a:hover{
  opacity:.92;
  transform:translateY(-1px);
}

/* Drawer — keep menu labels on one line */
.tech-body .kspl-drawer-nav > a{
  min-width:0;
}

.tech-body .kspl-drawer-nav > a > svg{
  flex:0 0 auto;
}

.tech-body .kspl-drawer-nav > a > span{
  display:block;
  min-width:0;
  white-space:nowrap;
  word-break:keep-all;
}

.tech-body .kspl-drawer-nav > a.active svg{
  stroke:currentColor;
}

/* =========================================================
   FINAL TEXT WRAP BALANCE — 캡처 기준 문단 정렬 보정
   크기/여백은 변경하지 않고 줄바꿈 균형만 정리
========================================================= */
.tech-section-heading h2,
.tech-library-heading h2,
.tech-contact-cta h2,
.tech-section-heading p,
.tech-library-heading p,
.tech-contact-cta p,
.kspl-final-process h2,
.kspl-final-process p{
  text-wrap: balance;
}

/* =========================================================
   TECH CATEGORY IMAGE CARDS — 2026-09-25 REFINED
   원본 이미지 선명 노출 / Paperlogy / 가독성 확대
========================================================= */
.tech-category.tech-category--image{
  isolation:isolate;
  overflow:hidden;
  min-height:270px;
  padding:30px 27px 26px;
  border-color:#e4e6e8;
  background:#f4f4f3;
  box-shadow:none;
  font-family:'Paperlogy','Pretendard',sans-serif;
}
.tech-category.tech-category--image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--tech-cat-image);
  background-size:cover;
  background-position:center;
  opacity:1;
  filter:none;
  transform:scale(1.001);
  transition:transform .45s ease;
}
.tech-category.tech-category--image::after{
  content:none;
}
.tech-category.tech-category--image:hover,
.tech-category.tech-category--image:focus-visible,
.tech-category.tech-category--image.is-selected{
  border-color:#c8cdd2;
  box-shadow:0 18px 38px rgba(0,0,0,.10);
}
.tech-category.tech-category--image:hover::before,
.tech-category.tech-category--image:focus-visible::before{
  transform:scale(1.035);
}
.tech-category.tech-category--image .tech-cat-num{
  color:#111;
  font-family:'Paperlogy','Pretendard',sans-serif;
  font-size:35px;
  font-weight:500;
  line-height:1;
}
.tech-category.tech-category--image .tech-cat-line{
  max-width:54px;
  background:rgba(17,17,17,.28);
}
.tech-category.tech-category--image .tech-cat-en{
  margin-top:23px;
  color:#25292d;
  font-family:'Paperlogy','Pretendard',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.45px;
}
.tech-category.tech-category--image strong{
  margin-top:5px;
  color:#090909;
  font-family:'Paperlogy','Pretendard',sans-serif;
  font-size:30px;
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.7px;
}
.tech-category.tech-category--image small{
  max-width:82%;
  margin-top:10px;
  color:#30353a;
  font-family:'Paperlogy','Pretendard',sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:-.2px;
}
.tech-category.tech-category--image .tech-cat-arrow{
  background:rgba(255,255,255,.94);
  box-shadow:0 3px 12px rgba(0,0,0,.10);
}
.tech-category.tech-category--image:hover .tech-cat-arrow,
.tech-category.tech-category--image.is-selected .tech-cat-arrow{
  background:#fff;
  color:var(--tech-blue);
}

/* =========================================================
   TECH CATEGORY SPLIT CARDS — 2026-09-25 FINAL
   상단 정보 / 하단 선명 이미지 / SVG 화살표 정중앙
========================================================= */
.tech-category.tech-category--image{
  min-height:350px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto auto 1fr;
  column-gap:14px;
  align-content:start;
  padding:24px 26px 0;
  overflow:hidden;
  background:#fff;
  border-color:#e1e4e7;
  font-family:'Paperlogy','Pretendard',sans-serif;
}
.tech-category.tech-category--image::before,
.tech-category.tech-category--image::after{content:none;}
.tech-category.tech-category--image .tech-cat-num{
  grid-column:1;
  font-size:34px;
  font-weight:500;
  color:#111;
}
.tech-category.tech-category--image .tech-cat-line{
  grid-column:2;
  width:52px;
  max-width:52px;
  background:#cfd3d7;
}
.tech-category.tech-category--image .tech-cat-en{
  grid-column:1/-1;
  margin-top:18px;
  color:#3f4449;
  font-size:13px;
  font-weight:600;
  letter-spacing:.45px;
}
.tech-category.tech-category--image strong{
  grid-column:1/-1;
  margin-top:4px;
  color:#090909;
  font-size:30px;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.7px;
}
.tech-category.tech-category--image small{
  grid-column:1/-1;
  max-width:none;
  margin-top:7px;
  color:#4d5359;
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.2px;
}
.tech-category.tech-category--image .tech-cat-media{
  grid-column:1/-1;
  align-self:end;
  width:calc(100% + 52px);
  height:188px;
  margin:14px -26px 0;
  display:block;
  background-image:var(--tech-cat-image);
  background-size:cover;
  background-position:center;
  filter:none;
  opacity:1;
  transition:transform .45s ease;
}
.tech-category.tech-category--image:hover .tech-cat-media,
.tech-category.tech-category--image:focus-visible .tech-cat-media{
  transform:scale(1.025);
}
.tech-category.tech-category--image .tech-cat-arrow{
  right:16px;
  bottom:16px;
  width:43px;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:rgba(255,255,255,.96);
  color:var(--tech-blue);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 3px 12px rgba(0,0,0,.12);
}
.tech-category.tech-category--image .tech-cat-arrow svg{
  display:block;
  width:24px;
  height:24px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tech-category.tech-category--image:hover .tech-cat-arrow,
.tech-category.tech-category--image:focus-visible .tech-cat-arrow,
.tech-category.tech-category--image.is-selected .tech-cat-arrow{
  background:#fff;
  color:var(--tech-blue);
}

/* TECH CATEGORY FINAL MICRO ADJUST — 2026-09-25 */
.tech-category-grid + .tech-library-heading{
  margin-top:72px;
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  .tech-hero-text > .tech-eyebrow,
  .tech-hero-text > .tech-hero-main-title,
  .tech-hero-text > .tech-hero-en,
  .tech-hero-text > .tech-hero-desc{
    opacity:1;
    animation:none;
    transform:none;
  }

  .tech-category,
  .tech-thumb img,
  .tech-card-body,
  .tech-contact-actions a{
    transition:none;
  }
}

/* =========================================================
   PC START
   1281px 이상
========================================================= */

/* Desktop uses the shared/base values above.
   No additional desktop-only override is required. */

/* =========================================================
   PC END
========================================================= */

/* =========================================================
   TABLET LANDSCAPE START
   981px ~ 1280px
========================================================= */

@media (min-width:981px) and (max-width:1280px){

.tech-hero{
    min-height:calc(100vh - 86px);
    background-image:url('tech-info-tablet-landscape.webp');
  }

  .tech-hero-inner{
    min-height:calc(100vh - 86px);
    padding-top:42px;
    padding-bottom:70px;
  }

  .tech-hero-text{
    max-width:620px;
  }

  .tech-eyebrow{
    font-size:13px;
    letter-spacing:2.8px;
  }

  .tech-hero h1,
  .tech-hero .tech-hero-main-title{
    font-size:60px;
    line-height:.98;
    letter-spacing:-3px;
  }

  .tech-hero-en{
    margin:6px 0 36px;
    font-size:17px;
  }

  .tech-hero-desc{
    max-width:620px;
    font-size:18px;
    line-height:1.7;
  }

  .tech-content{
    padding-top:54px;
  }

  .tech-section-heading h2,
  .tech-library-heading h2{
    font-size:40px;
  }

  .tech-section-heading p,
  .tech-library-heading p{
    font-size:17px;
  }

  .tech-category{
    min-height:215px;
    padding:24px 20px;
  }

  .tech-category strong{
    font-size:21px;
  }

  .tech-library-heading{
    margin-top:96px;
  }

  .tech-toolbar{
    grid-template-columns:1fr;
  }

  .tech-filters{
    order:2;
  }

  .tech-sort-label{
    order:3;
    justify-self:end;
    margin-top:-54px;
  }

  .tech-article-grid{
    gap:28px 16px;
  }

  .tech-card-body small{
    font-size:13px;
  }

  .tech-card-body strong{
    font-size:17px;
  }

  .tech-contact-cta{
    margin-top:96px;
  }

  .tech-contact-cta h2{
    font-size:38px;
  }

  .tech-contact-cta p{
    font-size:17px;
  }


  /* Closing brand: match INDEX at this breakpoint */

  .kspl-final-process h2{
    font-size: clamp(56px, calc(-9.619px + 6.689vw), 76px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: none;
  }

  .kspl-final-process p{
    font-size: 37px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -1px;
    margin: 18px 0 0;
  }

}

/* =========================================================
   TABLET LANDSCAPE END
========================================================= */

/* =========================================================
   TABLET PORTRAIT START
   769px ~ 980px
========================================================= */

@media (min-width:769px) and (max-width:980px){

.tech-hero{
    min-height:calc(100vh - 86px);
    background-image:url('tech-info-tablet-portrait.webp');
  }

  .tech-hero-inner{
    min-height:calc(100vh - 86px);
    padding-top:56px;
    padding-bottom:64px;
  }

  .tech-hero-text{
    max-width:560px;
  }

  .tech-eyebrow{
    font-size:13px;
    letter-spacing:2.8px;
  }

  .tech-hero h1,
  .tech-hero .tech-hero-main-title{
    font-size:60px;
    line-height:.98;
    letter-spacing:-3px;
  }

  .tech-hero-en{
    margin:5px 0 30px;
    font-size:16px;
  }

  .tech-hero-desc{
    max-width:560px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    color:#f0f5fb;
    font-size:17px;
    line-height:1.7;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    text-shadow:0 1px 2px rgba(0,18,45,.34),0 0 5px rgba(0,18,45,.16);
  }

  .tech-content{
    padding-top:48px;
    padding-bottom:76px;
  }

  .tech-section-heading h2,
  .tech-library-heading h2{
    font-size:40px;
  }

  .tech-section-heading p,
  .tech-library-heading p{
    font-size:17px;
  }

  .tech-category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .tech-category{
    min-height:205px;
  }

  .tech-library-heading{
    margin-top:84px;
  }

  .tech-toolbar{
    grid-template-columns:1fr;
  }

  .tech-filters{
    order:2;
  }

  .tech-sort-label{
    order:3;
    justify-self:start;
  }

  .tech-article-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 15px;
  }

  .tech-card-body small{
    font-size:13px;
  }

  .tech-card-body strong{
    font-size:17px;
  }

  .tech-contact-cta{
    margin-top:88px;
  }

  .tech-contact-cta h2{
    font-size:38px;
  }

  .tech-contact-cta p{
    font-size:17px;
  }


  /* Closing brand: match INDEX at this breakpoint */

  .kspl-final-process h2{
    font-size: clamp(45px, calc(4.910px + 5.213vw), 56px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: none;
  }

  .kspl-final-process p{
    font-size: 32px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.9px;
    margin: 18px 0 0;
  }


  /* Final category card refinements */



.tech-category.tech-category--image{min-height:342px;padding:22px 23px 0;}
  .tech-category.tech-category--image .tech-cat-media{width:calc(100% + 46px);height:180px;margin:13px -23px 0;}
  .tech-category.tech-category--image .tech-cat-num{font-size:33px;}
  .tech-category.tech-category--image .tech-cat-en{font-size:12px;}
  .tech-category.tech-category--image strong{font-size:27px;}
  .tech-category.tech-category--image small{font-size:15px;}

.tech-category-grid + .tech-library-heading{margin-top:62px;}

}

/* =========================================================
   TABLET PORTRAIT END
========================================================= */

/* =========================================================
   MOBILE START
   768px 이하
========================================================= */

@media (max-width:768px){

.tech-page .wrap{
    padding-left:20px;
    padding-right:20px;
  }

  .tech-hero{
    min-height:700px;
    background-image:url('tech-info-mobile.webp');
  }

  .tech-hero-inner{
    min-height:700px;
    padding-top:44px;
    padding-bottom:72px;
  }

  .tech-hero-text{
    max-width:420px;
  }

  .tech-eyebrow{
    margin-bottom:18px;
    padding-bottom:8px;
    font-size:13px;
    letter-spacing:2.8px;
  }

  .tech-hero h1,
  .tech-hero .tech-hero-main-title{
    font-size:42px;
    font-weight:900;
    line-height:1.08;
    letter-spacing:-1.8px;
  }

  .tech-hero-en{
    margin:5px 0 22px;
    font-size:14px;
    line-height:1.35;
    letter-spacing:.85px;
  }

  .tech-hero-desc{
    width:min(100%,390px);
    max-width:420px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    font-size:15px;
    font-weight:500;
    line-height:1.72;
    letter-spacing:-.25px;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    text-shadow:0 1px 3px rgba(0,20,55,.42);
  }

  .tech-content{
    padding-top:42px;
    padding-bottom:62px;
  }

  .tech-section-heading h2,
  .tech-library-heading h2{
    font-size:32px;
    line-height:1.2;
    letter-spacing:-1px;
  }

  .tech-section-heading p,
  .tech-library-heading p{
    font-size:16px;
    line-height:1.68;
  }

  .tech-category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:27px;
  }

  .tech-category{
    min-height:185px;
    padding:20px 15px;
  }

  .tech-cat-num{
    font-size:27px;
  }

  .tech-cat-en{
    margin-top:18px;
    font-size:9px;
  }

  .tech-category strong{
    font-size:19px;
  }

  .tech-category small{
    font-size:12px;
  }

  .tech-cat-arrow{
    right:14px;
    bottom:14px;
    width:27px;
    height:27px;
  }

  .tech-library-heading{
    margin-top:76px;
  }

  .tech-toolbar{
    grid-template-columns:1fr;
    gap:11px;
    margin-top:24px;
    padding:14px 0;
  }

  .tech-search{
    height:50px;
  }

  .tech-filters{
    order:2;
    gap:6px;
  }

  .tech-filters button{
    height:37px;
    padding:0 12px;
    font-size:12px;
  }

  .tech-sort-label{
    order:3;
    justify-self:end;
  }

  .tech-count{
    font-size:14px;
  }

  .tech-article-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 10px;
  }

  .tech-card-body{
    padding-top:10px;
  }

  .tech-card-body small{
    font-size:13px;
  }

  .tech-card-body strong{
    font-size:16px;
    line-height:1.45;
  }

  .tech-pagination{
    margin-top:36px;
  }

  .tech-contact-cta{
    margin-top:78px;
    padding-top:40px;
  }

  .tech-contact-cta h2{
    font-size:30px;
    line-height:1.22;
    letter-spacing:-.9px;
  }

  .tech-contact-cta p{
    font-size:16px;
    line-height:1.65;
  }


  /* Closing brand: match INDEX at this breakpoint */

  .kspl-final-process{
    margin: 72px auto 0;
    padding: 0 20px 32px;
  }

  .kspl-final-process h2{
    font-size: clamp(35px, calc(24.683px + 2.646vw), 45px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: none;
  }

  .kspl-final-process p{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.8px;
    margin: 14px 0 0;
  }


  /* Final category card refinements */



.tech-category.tech-category--image{min-height:342px;padding:22px 23px 0;}
  .tech-category.tech-category--image .tech-cat-media{width:calc(100% + 46px);height:180px;margin:13px -23px 0;}
  .tech-category.tech-category--image .tech-cat-num{font-size:33px;}
  .tech-category.tech-category--image .tech-cat-en{font-size:12px;}
  .tech-category.tech-category--image strong{font-size:27px;}
  .tech-category.tech-category--image small{font-size:15px;}

.tech-category-grid + .tech-library-heading{margin-top:62px;}

}


@media (max-width:520px){

.tech-page .wrap{
    padding-left:15px;
    padding-right:15px;
  }

  .tech-hero-desc br,
  .tech-section-heading p br{
    display:none;
  }

  .tech-hero-desc{
    font-size:14.5px;
    line-height:1.7;
  }

  .tech-category{
    min-height:176px;
    padding:18px 13px;
  }

  .tech-category small{
    padding-right:20px;
  }

  .tech-search input{
    padding-left:13px;
    font-size:14px;
  }

  .tech-search-icon{
    width:50px;
    min-width:50px;
  }

  .tech-article-grid{
    gap:22px 8px;
  }

  .tech-thumb{
    border-radius:6px;
  }

  .tech-contact-actions a{
    min-width:0;
    flex:1;
  }

  /* Mobile filters: three buttons on row one, two on row two. */
  .tech-filters{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
    width:100%;
  }

  .tech-filters button{
    grid-column:span 2;
    min-width:0;
    width:100%;
    padding:0 7px;
    white-space:nowrap;
    font-size:clamp(11px,2.9vw,12px);
  }

  .tech-filters button:nth-child(n+4){
    grid-column:span 3;
  }

}


@media (max-width:520px){

.tech-section-heading p,
  .tech-library-heading p,
  .tech-contact-cta p{
    max-width: 360px;
  }

}


@media (max-width:520px){

.tech-category.tech-category--image{
    min-height:205px;
    padding:20px 15px;
  }
  .tech-category.tech-category--image .tech-cat-num{font-size:30px;}
  .tech-category.tech-category--image .tech-cat-en{
    margin-top:17px;
    font-size:10.5px;
    letter-spacing:.25px;
  }
  .tech-category.tech-category--image strong{font-size:23px;}
  .tech-category.tech-category--image small{
    max-width:88%;
    font-size:13px;
    line-height:1.5;
  }

}


@media (max-width:520px){

.tech-category.tech-category--image{min-height:306px;padding:18px 16px 0;}
  .tech-category.tech-category--image .tech-cat-num{font-size:30px;}
  .tech-category.tech-category--image .tech-cat-line{width:34px;max-width:34px;}
  .tech-category.tech-category--image .tech-cat-en{margin-top:14px;font-size:10.5px;letter-spacing:.2px;}
  .tech-category.tech-category--image strong{font-size:23px;}
  .tech-category.tech-category--image small{max-width:none;font-size:13px;line-height:1.45;}
  .tech-category.tech-category--image .tech-cat-media{width:calc(100% + 32px);height:150px;margin:11px -16px 0;}
  .tech-category.tech-category--image .tech-cat-arrow{right:11px;bottom:11px;width:39px;height:39px;}
  .tech-category.tech-category--image .tech-cat-arrow svg{width:22px;height:22px;}

}


@media (max-width:520px){

.tech-category-grid + .tech-library-heading{margin-top:52px;}

}

/* =========================================================
   MOBILE CSS END
========================================================= */