/* 강점 그리드 — 3열 타일. 넓은 타일은 2칸 */
.sec-bento__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.sec-bento__tile{
  position:relative;
  display:flex;flex-direction:column;
  min-height:240px;
  padding:30px;
  border-radius:var(--radius-lg);
  background:var(--c-bg-alt);
  border:1px solid var(--c-line);
  color:var(--c-text);
  transition:var(--tr);
}
a.sec-bento__tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sec-bento__tile.is-wide{grid-column:span 2}

.sec-bento__tile--dark{background:#0f172a;border-color:#0f172a;color:#fff}
.sec-bento__tile--primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

.sec-bento__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:auto}
.sec-bento__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  border-radius:14px;
  color:var(--c-primary);
  background:var(--c-primary-l);
}
.sec-bento__tile--dark .sec-bento__icon,
.sec-bento__tile--primary .sec-bento__icon{color:#fff;background:rgba(255,255,255,.14)}
.sec-bento__tag{
  padding:4px 12px;
  font-size:12px;font-weight:700;
  border-radius:999px;
  color:var(--c-primary);
  background:var(--c-primary-l);
}
.sec-bento__tile--dark .sec-bento__tag,
.sec-bento__tile--primary .sec-bento__tag{color:#fff;background:rgba(255,255,255,.16)}

.sec-bento__title{margin-top:28px;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.sec-bento__body{margin-top:10px;font-size:15px;line-height:1.65;opacity:.75}
.sec-bento__points{
  margin:18px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;
  font-size:14px;
}
.sec-bento__points li{display:flex;gap:6px;align-items:flex-start}
.sec-bento__points .icon{flex:none;margin-top:3px;opacity:.8}

@media (max-width:1024px){
  .sec-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sec-bento__grid{grid-template-columns:1fr}
  .sec-bento__tile.is-wide{grid-column:auto}
  .sec-bento__points{grid-template-columns:1fr}
}

/* ========== B — 어두운 배경 · 유리 카드 2열 ==========
 * 남색 배경 + 은은한 빛 · 동심원, 카드는 반투명 유리. 아이콘은 오른쪽 아래.
 * 마우스를 올리면 카드 테두리가 메인 컬러로 빛난다.
 */
.sec-bento--b{
  position:relative;overflow:hidden;
  color:#fff;
  background:
    radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--c-primary) 35%, transparent) 0, transparent 70%),
    radial-gradient(50% 45% at 100% 100%, color-mix(in srgb, var(--c-primary) 22%, transparent) 0, transparent 70%),
    #070d1c !important;
}
.sec-bento--b::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 55%, rgba(255,255,255,.035) 0 1px, transparent 1px 90px);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 55%, #000 30%, transparent 75%);
          mask-image:radial-gradient(70% 70% at 50% 55%, #000 30%, transparent 75%);
}
.sec-bento--b .sec__inner{position:relative}
.sec-bento--b .sec__eyebrow{color:#fff;background:rgba(255,255,255,.1)}
.sec-bento--b .sec__title{color:#fff}
.sec-bento--b .sec__title .sec__hl{display:block;color:color-mix(in srgb, var(--c-primary) 55%, #fff)}   /* 강조 부분은 둘째 줄로 */
.sec-bento--b .sec__desc{color:rgba(255,255,255,.65)}

.sec-bento--b .sec-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sec-bento.sec-bento--b .sec-bento__tile{
  position:relative;
  min-height:260px;
  padding:40px 40px 36px;
  color:#fff;
  background:linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  overflow:hidden;
}
/* 카드 안쪽 위 가장자리 빛 */
.sec-bento--b .sec-bento__tile::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
/* 마우스 올렸을 때 퍼지는 빛 */
.sec-bento--b .sec-bento__tile::after{
  content:'';position:absolute;right:-30%;bottom:-60%;width:80%;aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--c-primary) 45%, transparent) 0, transparent 65%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.sec-bento--b .sec-bento__top{order:3;margin:auto 0 0;justify-content:flex-end}
.sec-bento--b .sec-bento__tag{display:none}
.sec-bento--b .sec-bento__icon{
  width:64px;height:64px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 85%, #fff) 0%, var(--c-primary) 100%);
  box-shadow:0 12px 30px color-mix(in srgb, var(--c-primary) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.sec-bento--b .sec-bento__icon svg{width:28px;height:28px}
.sec-bento--b .sec-bento__title{order:1;margin-top:0;font-size:28px;font-weight:800;letter-spacing:-.03em}
.sec-bento--b .sec-bento__body{order:2;margin-top:14px;max-width:420px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.68);opacity:1}
.sec-bento--b .sec-bento__tile.is-wide{grid-column:auto}
@media (hover:hover){
  .sec-bento.sec-bento--b .sec-bento__tile:hover{
    transform:translateY(-6px);
    border-color:color-mix(in srgb, var(--c-primary) 70%, #fff);
    box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--c-primary) 40%, transparent);
  }
  .sec-bento--b .sec-bento__tile:hover::after{opacity:1}
}
@media (max-width:768px){
  .sec-bento--b .sec-bento__grid{grid-template-columns:1fr;gap:14px}
  .sec-bento.sec-bento--b .sec-bento__tile{min-height:0;padding:28px 24px 24px}
  .sec-bento--b .sec-bento__title{font-size:21px}
  .sec-bento--b .sec-bento__body{font-size:14.5px}
  .sec-bento--b .sec-bento__top{margin-top:18px}
  .sec-bento--b .sec-bento__icon{width:48px;height:48px;border-radius:14px}
  .sec-bento--b .sec-bento__icon svg{width:22px;height:22px}
}

/* 이미지 · 번호 · 칩은 C 스타일에서만 */
.sec-bento__media,.sec-bento__no,.sec-bento__chips{display:none}

/* ========== C — 메인 컬러 배경 · 이미지 카드 3열 ==========
 * 파란 배경(격자 무늬) 위 흰 카드. 위쪽 이미지, 제목 + 영문 부제, 설명, 해시태그 칩.
 */
.sec-bento--c{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 60% at 20% 0%, rgba(255,255,255,.18) 0, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--c-primary) 82%, #fff) 0%, var(--c-primary) 45%, color-mix(in srgb, var(--c-primary) 85%, #000) 100%) !important;
}
.sec-bento--c::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.sec-bento--c .sec__inner{position:relative}
.sec-bento--c .sec__eyebrow{color:#fff;background:rgba(255,255,255,.16)}
.sec-bento--c .sec__title{color:#fff}
.sec-bento--c .sec__title .sec__hl{display:block;color:#fff}
.sec-bento--c .sec__desc{color:rgba(255,255,255,.82)}

.sec-bento--c .sec-bento__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sec-bento.sec-bento--c .sec-bento__tile{
  position:relative;
  min-height:0;
  padding:12px 12px 28px;
  color:var(--c-text);
  background:#fff;
  border:0;
  border-radius:24px;
  box-shadow:0 30px 60px rgba(8,20,60,.25);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.sec-bento--c .sec-bento__media{
  display:block;overflow:hidden;
  aspect-ratio:16/10;
  border-radius:16px;
  background:var(--c-primary-l);
}
.sec-bento--c .sec-bento__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sec-bento--c .sec-bento__top{display:none}
.sec-bento--c .sec-bento__no{
  display:block;
  position:absolute;right:28px;top:calc(12px + (100% - 24px) * 0);   /* 아래에서 다시 잡는다 */
}
.sec-bento--c .sec-bento__title{margin:26px 16px 0;font-size:30px;font-weight:800;letter-spacing:-.03em}
.sec-bento--c .sec-bento__tile{display:flex;flex-direction:column}
.sec-bento--c .sec-bento__no{
  position:static;order:0;align-self:flex-end;
  margin:-30px 18px 0 0;
  font-size:13px;font-weight:700;color:var(--c-text-mute);font-variant-numeric:tabular-nums;
}
.sec-bento--c .sec-bento__media{order:-1}
.sec-bento--c .sec-bento__title{order:1;margin-top:20px}
/* 영문 부제 — tag 를 제목 아래로 */
.sec-bento--c .sec-bento__tile::after{content:none}
.sec-bento--c .sec-bento__body{order:3;margin:16px 16px 0;padding-top:16px;border-top:1px solid var(--c-line);font-size:15px;line-height:1.7;color:var(--c-text-sub);opacity:1}
.sec-bento--c .sec-bento__chips{
  order:4;display:flex;flex-wrap:wrap;gap:6px;
  margin:18px 16px 0;padding:0;list-style:none;
}
.sec-bento--c .sec-bento__chips li{
  padding:5px 10px;
  font-size:12px;font-weight:600;
  color:var(--c-primary);
  background:var(--c-primary-l);
  border-radius:6px;
}
.sec-bento--c .sec-bento__chips li::before{content:'# ';opacity:.6}
@media (hover:hover){
  .sec-bento.sec-bento--c .sec-bento__tile:hover{transform:translateY(-8px);box-shadow:0 40px 80px rgba(8,20,60,.35)}
  .sec-bento--c .sec-bento__tile:hover .sec-bento__media img{transform:scale(1.05)}
}
@media (max-width:1024px){
  .sec-bento--c .sec-bento__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}
@media (max-width:640px){
  .sec-bento--c .sec-bento__title{font-size:24px;margin:18px 12px 0}
  .sec-bento--c .sec-bento__body{margin:14px 12px 0;font-size:14.5px}
  .sec-bento--c .sec-bento__chips{margin:14px 12px 0}
}
.sec-bento__sub{display:none}
.sec-bento--c .sec-bento__sub{order:2;display:block;margin:6px 16px 0;font-size:14px;font-weight:700;color:var(--c-primary)}
@media (max-width:640px){.sec-bento--c .sec-bento__sub{margin:6px 12px 0}}
/* 번호 — 이미지 왼쪽 위 작은 배지 */
.sec-bento--c .sec-bento__no{
  position:absolute;top:26px;left:26px;right:auto;margin:0;z-index:1;
  padding:5px 11px;
  font-size:12px;font-weight:800;letter-spacing:.04em;
  color:var(--c-primary);
  background:rgba(255,255,255,.9);
  border-radius:999px;
  box-shadow:0 4px 12px rgba(8,20,60,.12);
}

/* ========== D — 포함 항목 체크리스트 ==========
 * 꼬리표로 묶인 판(panel) 2개를 나란히. 판 안에 2열 작은 카드, 오른쪽 위 「✓ 포함」.
 */
.sec-bento__panels{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:28px;
  overflow:hidden;
}
.sec-bento__panel{padding:48px 44px}
.sec-bento__panel + .sec-bento__panel{border-left:1px solid var(--c-line)}
.sec-bento__badge{
  display:inline-block;
  padding:6px 14px;
  font-size:13px;font-weight:800;
  color:#fff;background:var(--c-primary);
  border-radius:999px;
}
.sec-bento__panel + .sec-bento__panel .sec-bento__badge{background:var(--c-text)}
.sec-bento__panel-title{margin-top:16px;font-size:30px;font-weight:800;letter-spacing:-.03em}
.sec-bento__panel-desc{margin-top:10px;color:var(--c-text-sub);font-size:15.5px}
.sec-bento__checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.sec-bento__check{
  display:flex;flex-direction:column;gap:6px;
  padding:22px;
  background:var(--c-bg-alt);
  border-radius:18px;
}
.sec-bento__check-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.sec-bento__check-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  color:var(--c-primary);background:#fff;
  border-radius:12px;
}
.sec-bento__check-ok{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:var(--c-primary)}
.sec-bento__check strong{font-size:17px;font-weight:800;letter-spacing:-.02em}
.sec-bento__check-body{font-size:13.5px;line-height:1.6;color:var(--c-text-sub)}
@media (max-width:1024px){
  .sec-bento__panels{grid-template-columns:1fr}
  .sec-bento__panel + .sec-bento__panel{border-left:0;border-top:1px solid var(--c-line)}
}
@media (max-width:640px){
  .sec-bento__panel{padding:32px 20px}
  .sec-bento__panel-title{font-size:24px}
  .sec-bento__checks{gap:8px}
  .sec-bento__check{padding:16px}
  .sec-bento__check strong{font-size:15px}
}

/* D 머리 — 큰 번호 + 얇은 라인 위 작은 라벨 (알약 배지 대신) */
.sec-bento__panel{position:relative}
.sec-bento__panel::before{
  content:'';position:absolute;left:44px;right:44px;top:0;height:3px;
  background:linear-gradient(90deg, var(--c-primary) 0, var(--c-primary) 48px, var(--c-line) 48px);
  border-radius:0 0 3px 3px;
}
.sec-bento__panel + .sec-bento__panel::before{background:linear-gradient(90deg, var(--c-text) 0, var(--c-text) 48px, var(--c-line) 48px)}
.sec-bento__panel-head{display:flex;align-items:center;gap:14px}
.sec-bento__panel-no{
  font-size:44px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--c-primary);
}
.sec-bento__panel + .sec-bento__panel .sec-bento__panel-no{-webkit-text-stroke-color:var(--c-text)}
.sec-bento--d .sec-bento__badge,
.sec-bento__panel + .sec-bento__panel .sec-bento__badge{
  padding:0;
  font-size:12px;font-weight:800;letter-spacing:.14em;
  color:var(--c-text-mute);
  background:none;
  border-radius:0;
}
.sec-bento--d .sec-bento__panel-title{margin-top:14px;font-size:28px}
@media (max-width:640px){
  .sec-bento__panel::before{left:20px;right:20px}
  .sec-bento__panel-no{font-size:34px}
  .sec-bento--d .sec-bento__panel-title{font-size:22px}
}