/*     1655115 : HTML 편집기      */
/* ============ 재설 자재 리스트 (FINAL) ============ */
:root{
  --mx:1480px;
  --pad:clamp(1rem,2vw,2rem);
  --radius:12px;
  --shadow:10px 10px 22px rgba(0,0,0,.06);
  --line:rgba(0,0,0,.08);
}

.deice_tools *{ box-sizing:border-box; color:#0b1b34; word-break:keep-all; margin:0; padding:0; }
.deice_tools{ line-height:1.9; letter-spacing:-0.01em; }
.deice_tools .inner{ max-width:var(--mx); margin:0 auto; padding:0 var(--pad); }

/* 배너 */
.deice_tools .tools-hero{ margin:0 0 clamp(1.6rem,3.6vw,3rem); }
.deice_tools .tools-hero .hero-img{ margin:0; }
.deice_tools .tools-hero img{
  display:block; width:100%; height:auto; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
/* (옵션) 배너 위 텍스트 사용할 경우 */
.deice_tools .tools-hero .cap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; padding:clamp(1rem,3vw,3rem);
}
.deice_tools .tools-hero .cap h2{ font-size:clamp(1.8rem,3vw,3rem); line-height:1.2; }
.deice_tools .tools-hero .cap p{ font-size:clamp(1.1rem,1.3vw,1.3rem); opacity:.9; margin-top:.6rem; }

/* 카드 그리드 */
.deice_tools .tools-list{ margin:clamp(1.2rem,3vw,2rem) 0; }
.deice_tools .tools-grid{
  display:grid; gap:clamp(1rem,1.6vw,1.6rem);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.deice_tools .tool-card{
  display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; text-align:center; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.deice_tools .tool-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.06);
}
.deice_tools .tool-card .thumb{
  aspect-ratio: 4 / 5;
  display:block; background:#fff;
}
.deice_tools .tool-card .thumb img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.deice_tools .tool-card .name{
  padding:clamp(.7rem,1vw,1rem) clamp(.6rem,1vw,1rem);
  font-size:1.08rem; line-height:1.6; color:#4a4f59;
}

/* 페이저(간단 표기) */
.deice_tools .pager{ display:flex; justify-content:center; gap:.4rem; margin:clamp(1.4rem,2.6vw,2rem) 0; }
.deice_tools .pager a{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:8px; border:1px solid var(--line); color:#334; text-decoration:none;
  font-size:1rem;
}
.deice_tools .pager a.current{ background:#0d5bd7; color:#fff; border-color:transparent; }

/* 반응형 */
@media (max-width:1200px){
  .deice_tools .tools-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:1023px){
  .deice_tools .tools-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .deice_tools .tools-grid{ grid-template-columns:1fr; }
}


/* ===== Hero: CSS-only 디자인 버전 ===== */
.deice_tools .tools-hero.is-css{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: clamp(220px, 28vw, 420px);
  isolation: isolate; /* overlay 블렌딩 안정화 */
}

/* 배경: 그라디언트 + (선택) 배경이미지 var(--hero-bg) */
.deice_tools .tools-hero.is-css .hero-bg{
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(8,13,28,0.2) 0%, rgba(8,13,28,0.25) 45%, rgba(8,13,28,0.2) 100%),
    linear-gradient(180deg, rgba(13,38,82,0.7) 0%, rgba(10,27,58,0.8) 100%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}

/* 눈산/안개 느낌 */
.deice_tools .tools-hero.is-css .hero-bg::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:42%;
  background:
    radial-gradient(180% 120% at 50% 120%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  mix-blend-mode: screen;
  pointer-events:none;
}

/* 카피 */
.deice_tools .tools-hero.is-css .cap{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(1rem,3vw,3rem);
  color:#fff;
}
.deice_tools .tools-hero.is-css .cap h2{
  margin:0;
  font-size:clamp(1.8rem, 3.6vw, 3.4rem);
  font-weight:900; letter-spacing:-.02em; line-height:1.1;
  text-shadow:0 4px 18px rgba(0,0,0,.45);
color:#fff;
}
.deice_tools .tools-hero.is-css .cap .sub{
  margin-top:.6rem;
  font-size:clamp(1.1rem, 1.6vw, 1.6rem);
  font-weight:800; opacity:.95;
  color:#9fd0ff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* 제품 이미지 라인업 */
.deice_tools .tools-hero.is-css .hero-products{
  position:absolute; right:clamp(1rem,2.6vw,2.6rem); bottom:clamp(.6rem,1.8vw,1.8rem);
  z-index:1; display:flex; align-items:flex-end; gap:clamp(.6rem,1.2vw,1.2rem);
}
.deice_tools .tools-hero.is-css .hero-products li{ list-style:none; }
.deice_tools .tools-hero.is-css .hero-products img{
  display:block; height:clamp(70px, 12vw, 160px); width:auto; object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transform: translateY(0); transition: transform .25s ease;
}
.deice_tools .tools-hero.is-css .hero-products li:hover img{ transform: translateY(-4px); }

/* 반응형 */
@media (max-width:1023px){
  .deice_tools .tools-hero.is-css .hero-products img{ height:clamp(60px, 14vw, 140px); }
}
@media (max-width:767px){
  .deice_tools .tools-hero.is-css{ min-height: clamp(200px, 42vw, 340px); }
  .deice_tools .tools-hero.is-css .cap{ align-items:flex-start; text-align:left; padding:clamp(1rem,4vw,1.5rem); }
  .deice_tools .tools-hero.is-css .cap h2{ font-size:clamp(1.6rem, 6.2vw, 2.4rem); }
  .deice_tools .tools-hero.is-css .cap .sub{ font-size:clamp(1rem, 3.8vw, 1.3rem); }
  .deice_tools .tools-hero.is-css .hero-products{ right:auto; left:clamp(.8rem,2.6vw,1.2rem); gap:.6rem; }
  .deice_tools .tools-hero.is-css .hero-products img{ height:clamp(56px, 14vw, 110px); }
}