/* ========== 공통 ========== */
.sec-service__grid{display:grid;gap:var(--gap-sm)}

.sec-service__card{
  position:relative;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:var(--tr);
}

.sec-service__num{display:none}

.sec-service__media{overflow:hidden;border-radius:var(--radius);background:var(--c-bg-alt)}
.sec-service__media img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s ease;
}
a.sec-service__card:hover .sec-service__media img{transform:scale(1.06)}
/* 이미지가 있으면 아이콘을 숨긴다 (이미지 우선) */
.sec-service__card.has-img .sec-service__icon{display:none}
.sec-service__icon{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  border-radius:var(--radius);
  background:var(--c-primary-l);color:var(--c-primary);
  transition:var(--tr);
}
.sec-service__icon svg{width:30px;height:30px}
a.sec-service__card:hover .sec-service__icon{background:var(--c-primary);color:#fff}

.sec-service__title{
  margin:0;
  font-size:var(--fs-h3);font-weight:var(--fw-head);
  line-height:1.4;letter-spacing:-.02em;color:var(--c-text);
  transition:color var(--tr);
}
a.sec-service__card:hover .sec-service__title{color:var(--c-primary)}

.sec-service__text{
  margin:10px 0 0;
  font-size:var(--fs-sm);color:var(--c-text-sub);line-height:var(--lh-body);
}

.sec-service__arrow{
  display:inline-flex;align-items:center;margin-top:16px;
  color:var(--c-text-mute);transition:var(--tr);
}
.sec-service__arrow-icon{display:inline-flex}
/* 라벨은 --i 처럼 필요한 스타일에서만 켠다 */
.sec-service__arrow-label{display:none}
.sec-service__arrow svg{width:18px;height:18px}
a.sec-service__card:hover .sec-service__arrow{color:var(--c-primary);transform:translateX(4px)}

/* ========== A — 아이콘 4열 ========== */
.sec-service--a .sec-service__grid{grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.sec-service--a .sec-service__media{display:none}
.sec-service--a .sec-service__card.has-img .sec-service__icon{display:flex}
.sec-service--a .sec-service__icon{width:76px;height:76px;margin:0 auto}
.sec-service--a .sec-service__icon svg{width:36px;height:36px}
.sec-service--a .sec-service__info{padding-top:20px;text-align:center}
.sec-service--a .sec-service__arrow{align-self:center}

/* ========== B — 이미지 카드 3열 / G — 이미지 카드 4열 ==========
   카드 모양은 완전히 동일. 열 수만 갈린다 */
.sec-service--b .sec-service__grid{grid-template-columns:repeat(3,1fr)}
.sec-service--g .sec-service__grid{grid-template-columns:repeat(4,1fr)}

.sec-service--b .sec-service__card,
.sec-service--g .sec-service__card{
  padding:0 0 24px;
  border:1px solid var(--c-line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--c-bg);
}
a.sec-service--b .sec-service__card:hover,
.sec-service--b a.sec-service__card:hover,
a.sec-service--g .sec-service__card:hover,
.sec-service--g a.sec-service__card:hover{
  border-color:var(--c-primary);box-shadow:var(--shadow);
}
.sec-service--b .sec-service__media,
.sec-service--g .sec-service__media{border-radius:0}
.sec-service--b .sec-service__icon,
.sec-service--g .sec-service__icon{margin:24px 24px 0}
.sec-service--b .sec-service__info,
.sec-service--g .sec-service__info{padding:20px 24px 0}
.sec-service--b .sec-service__arrow,
.sec-service--g .sec-service__arrow{margin:12px 24px 0}

/* 4열은 폭이 좁아 안쪽 여백만 살짝 줄인다 */
.sec-service--g .sec-service__card{padding-bottom:20px}
.sec-service--g .sec-service__icon{margin:20px 20px 0}
.sec-service--g .sec-service__info{padding:18px 20px 0}
.sec-service--g .sec-service__arrow{margin:10px 20px 0}
.sec-service--g .sec-service__title{font-size:var(--fs-body)}

/* ========== C — 번호 리스트 ========== */
.sec-service--c .sec-service__grid{grid-template-columns:1fr;gap:0}
.sec-service--c .sec-service__media,
.sec-service--c .sec-service__icon{display:none}

.sec-service--c .sec-service__card{
  flex-direction:row;align-items:flex-start;gap:var(--gap-sm);
  padding:28px 4px;
  border-bottom:1px solid var(--c-line);
}
.sec-service--c .sec-service__grid > :first-child{border-top:1px solid var(--c-line)}

.sec-service--c .sec-service__num{
  display:block;flex-shrink:0;width:64px;
  font-family:var(--f-head);font-size:var(--fs-h2);font-weight:var(--fw-head);
  line-height:1;color:var(--c-primary);opacity:.35;
}
.sec-service--c .sec-service__info{flex:1;min-width:0}
.sec-service--c .sec-service__arrow{margin-top:0;padding-top:6px}

/* ========== D — 가로 2열 ========== */
.sec-service--d .sec-service__grid{grid-template-columns:repeat(2,1fr);gap:var(--gap)}

.sec-service--d .sec-service__card{
  flex-direction:row;
  gap:20px;
  padding:24px;
  border:1px solid var(--c-line);
  border-radius:12px;
  align-items:center;
}
.sec-service--d .sec-service__media{flex-shrink:0;width:140px}
.sec-service--d .sec-service__media img{aspect-ratio:1/1}
.sec-service--d .sec-service__icon{flex-shrink:0;width:52px;height:52px}
.sec-service--d .sec-service__icon svg{width:24px;height:24px}
.sec-service--d .sec-service__info{flex:1;min-width:0}
.sec-service--d .sec-service__title{font-size:var(--fs-body);white-space:nowrap}
.sec-service--d .sec-service__arrow{margin-top:12px}

/* ========== E — 가로 2열 · 큰 이미지 ========== */
.sec-service--e .sec-service__grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--gap-lg, 40px);
}

.sec-service--e .sec-service__card{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:24px;
    padding:20px;
    border:1px solid var(--c-line);
    border-radius:12px;
}

.sec-service--e .sec-service__media{
    margin:0;
    border-radius:8px;
    overflow:hidden;
    aspect-ratio:4/3;
}
.sec-service--e .sec-service__media img{
    width:100%;height:100%;
    object-fit:cover;
}

.sec-service--e .sec-service__num{display:none}

.sec-service--e .sec-service__title{
    font-size:15px;
    font-weight:800;
    color:var(--c-primary);
    margin-bottom:12px;
}

/* ========== F — 이미지 오버레이 4열 ==========
   평소엔 하단 딤 + 제목만, 호버하면 전체가 어두워지며 내용이 올라온다.
   ⚠️ 터치 기기는 호버가 없어 항상 펼친 상태로 보여준다 (아래 hover:none) */
.sec-service--f .sec-service__grid{
    grid-template-columns:repeat(4,1fr);
    gap:var(--gap-sm);
}

.sec-service--f .sec-service__card{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:var(--radius-lg, 14px);
    background:#111;
}

.sec-service--f .sec-service__media{
    position:absolute;inset:0;
    z-index:0;
    border-radius:0;
    margin:0;
}
.sec-service--f .sec-service__media img{
    width:100%;height:100%;
    aspect-ratio:auto;
    object-fit:cover;
}

/* 딤 — 평소엔 아래쪽만, 호버하면 전체로 퍼진다 */
.sec-service--f .sec-service__media::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.78));
    transition:background .4s ease;
}
.sec-service--f .sec-service__card:hover .sec-service__media::after{
    background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.82));
}
.sec-service--f .sec-service__card:hover .sec-service__media img{transform:scale(1.06)}

.sec-service--f .sec-service__icon,
.sec-service--f .sec-service__num{display:none}

/* 내용은 카드 바닥에 붙는다 — 길이가 늘면 위로 밀려 올라간다 */
.sec-service--f .sec-service__info{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:26px 24px;
}

.sec-service--f .sec-service__title{
    color:#fff;
    font-size:var(--fs-h3);
    transition:none;
}
.sec-service--f .sec-service__card:hover .sec-service__title{color:#fff}

.sec-service--f .sec-service__text{
    margin-top:0;
    max-height:0;
    opacity:0;
    overflow:hidden;
    color:rgba(255,255,255,.88);
    transition:max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}
.sec-service--f .sec-service__card:hover .sec-service__text{
    margin-top:14px;
    max-height:260px;
    opacity:1;
}
.sec-service--f .sec-service__text li::before{background:#fff;opacity:.7}

.sec-service--f .sec-service__arrow{
    margin-top:0;
    color:rgba(255,255,255,.75);
    opacity:0;
    transition:opacity .35s ease, transform .35s ease;
}
.sec-service--f .sec-service__card:hover .sec-service__arrow{
    margin-top:14px;
    opacity:1;
    color:#fff;
}

/* 이미지가 없으면 컬러 판으로 대체한다 */
.sec-service--f .sec-service__card:not(.has-img){
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--c-primary) 88%, #000),
            color-mix(in srgb, var(--c-primary) 55%, #000));
}

/* ========== H — 가로 카드 3열 (좌 텍스트 · 우 이미지) ==========
   ⚠️ 이미지는 배경 흰색으로 준비할 것. 카드 배경과 이어져 누끼처럼 보인다.
      사각 원본이 들어와도 cover 라 레이아웃은 깨지지 않는다 (덜 예쁠 뿐) */
.sec-service--h .sec-service__grid{
    grid-template-columns:repeat(3,1fr);
    gap:var(--gap-sm);
}

.sec-service--h .sec-service__card{
    flex-direction:row;
    align-items:stretch;
    min-height:190px;
    padding:0;
    overflow:hidden;
    border:1px solid var(--c-line);
    border-radius:8px;
    background:var(--c-bg);
}
.sec-service--h a.sec-service__card:hover{
    border-color:var(--c-primary);
    box-shadow:var(--shadow);
}

.sec-service--h .sec-service__num{display:none}

/* 텍스트가 왼쪽. DOM 순서(media → info)를 order 로 뒤집는다 */
.sec-service--h .sec-service__info{
    order:1;
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    padding:24px 22px;
}
.sec-service--h .sec-service__arrow{margin-top:auto;padding-top:14px}

.sec-service--h .sec-service__media{
    order:2;
    flex-shrink:0;
    width:46%;
    margin:0;
    border-radius:0;
    background:var(--c-bg);
}
.sec-service--h .sec-service__media img{
    width:100%;height:100%;
    aspect-ratio:auto;
    object-fit:cover;
}

/* 이미지가 없는 카드는 세로형으로 폴백 — 아이콘이 살아난다 */
.sec-service--h .sec-service__card:not(.has-img){flex-direction:column}
.sec-service--h .sec-service__card:not(.has-img) .sec-service__icon{margin:24px 22px 0}

/* ========== I — 상단 이미지 3열 (각진 카드) ==========
   테두리·라운드 없음. 연한 배경 섹션 위에서 흰 판으로 뜨는 것을 전제로 한다.
   화살표는 원형 버튼 + 라벨 */
.sec-service--i .sec-service__grid{
    grid-template-columns:repeat(3,1fr);
    gap:var(--gap, 32px);
}

.sec-service--i .sec-service__card{
    padding:0 0 30px;
    border:0;
    border-radius:0;
    overflow:hidden;
    background:var(--c-bg);
}
.sec-service--i a.sec-service__card:hover{box-shadow:var(--shadow)}

.sec-service--i .sec-service__num{display:none}

.sec-service--i .sec-service__media{
    margin:0;
    border-radius:0;
}
.sec-service--i .sec-service__media img{aspect-ratio:4/3}

.sec-service--i .sec-service__icon{margin:30px 28px 0;border-radius:0}

.sec-service--i .sec-service__info{
    display:flex;flex-direction:column;
    padding:26px 28px 0;
}
.sec-service--i .sec-service__text{margin-top:12px}

/* 라벨 + 원형 화살표 */
.sec-service--i .sec-service__arrow{
    margin-top:auto;
    padding-top:24px;
    gap:12px;
    color:var(--c-primary);
    transform:none;
}
.sec-service--i a.sec-service__card:hover .sec-service__arrow{transform:none}

.sec-service--i .sec-service__arrow-label{
    display:inline-block;
    font-size:var(--fs-sm);
    font-weight:var(--fw-head);
    letter-spacing:-.01em;
}

.sec-service--i .sec-service__arrow-icon{
    align-items:center;justify-content:center;
    width:36px;height:36px;
    border-radius:50%;
    border:1px solid var(--c-line);
    background:var(--c-bg);
    transition:var(--tr);
}
.sec-service--i .sec-service__arrow svg{width:16px;height:16px}
.sec-service--i a.sec-service__card:hover .sec-service__arrow-icon{
    background:var(--c-primary);
    border-color:var(--c-primary);
    color:#fff;
}

/* ========== 반응형 ========== */
@media (max-width:1024px){
  .sec-service--a .sec-service__grid{grid-template-columns:repeat(2,1fr)}
  .sec-service--b .sec-service__grid{grid-template-columns:repeat(2,1fr)}
  .sec-service--g .sec-service__grid{grid-template-columns:repeat(2,1fr)}
  .sec-service--d .sec-service__grid{grid-template-columns:1fr}
  .sec-service--e .sec-service__grid{grid-template-columns:1fr}
  .sec-service--f .sec-service__grid{grid-template-columns:repeat(2,1fr)}
  .sec-service--h .sec-service__grid{grid-template-columns:repeat(2,1fr)}
  .sec-service--i .sec-service__grid{grid-template-columns:repeat(2,1fr)}

  .sec-service--c .sec-service__num{width:48px;font-size:var(--fs-h3)}
  .sec-service--g .sec-service__title{font-size:var(--fs-h3)}
}

/* ⚠️ 터치 기기에는 호버가 없다 — 처음부터 펼쳐 둔다 */
@media (hover:none){
    .sec-service--f .sec-service__card{aspect-ratio:3/4}
    .sec-service--f .sec-service__media::after{
        background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.8));
    }
    .sec-service--f .sec-service__text{
        margin-top:14px;
        max-height:none;
        opacity:1;
    }
    .sec-service--f .sec-service__arrow{opacity:1;margin-top:14px}
}

@media (max-width:768px){
  .sec-service--a .sec-service__grid,
  .sec-service--b .sec-service__grid,
  .sec-service--g .sec-service__grid{grid-template-columns:1fr}

  .sec-service--c .sec-service__card{gap:16px;padding:22px 2px}
  .sec-service--c .sec-service__num{width:38px}

  .sec-service--d .sec-service__card{flex-direction:column;gap:16px}
  .sec-service--d .sec-service__media{width:100%}
  .sec-service--d .sec-service__media img{aspect-ratio:4/3}
  .sec-service--d .sec-service__title{white-space:normal}

  .sec-service--h .sec-service__grid{grid-template-columns:1fr}
  .sec-service--i .sec-service__grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .sec-service--e .sec-service__card{grid-template-columns:1fr}
  .sec-service--f .sec-service__grid{grid-template-columns:1fr}
  .sec-service--f .sec-service__card{aspect-ratio:16/10}

  .sec-service--h .sec-service__card{min-height:150px}
  .sec-service--h .sec-service__info{padding:18px 16px}
  .sec-service--h .sec-service__media{width:44%}

  .sec-service--i .sec-service__card{padding-bottom:24px}
  .sec-service--i .sec-service__info{padding:22px 20px 0}
}