/* ============================================================
   professional.html — page-specific CSS
   분리: 2026-06-07
   ============================================================ */

/* ─────────────────────────────────────────────────────
   Block 1 — pro-feat-* (전문가용 기능 카드)
   ───────────────────────────────────────────────────── */
.pro-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pro-feat-card{display:flex;flex-direction:column;gap:11px;background:#fff;border:1px solid #e6e9f4;border-radius:14px;padding:22px 20px;box-shadow:0 2px 10px rgba(20,40,160,.05);transition:transform .2s,border-color .2s}
.pro-feat-card:hover{transform:translateY(-3px);border-color:#1428a0}
.pro-feat-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#1428a0,#0e1d75)}
.pro-feat-t{font-size:15px;font-weight:800;color:#0e1d75;line-height:1.35;margin:0}
.pro-feat-d{font-size:12.5px;color:#5b6577;line-height:1.55;margin:0}
@media(max-width:980px){.pro-feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pro-feat-grid{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────
   Block 2 — pro-enc-* (암호화 강조 영역)
   ───────────────────────────────────────────────────── */
.pro-enc-wrap{padding-top:24px;padding-bottom:8px}
.pro-enc{background:linear-gradient(135deg,#0e1d75 0%,#1428a0 100%);border-radius:22px;padding:38px 40px;color:#fff;box-shadow:0 16px 40px rgba(20,40,160,.18)}
.pro-enc-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9db4ff;margin:0 0 10px}
.pro-enc-h{font-size:27px;font-weight:900;letter-spacing:-.01em;margin:0 0 8px;line-height:1.3;color:#fff}
.pro-enc-sub{font-size:15.5px;color:#cdd8ff;margin:0 0 24px;line-height:1.7;font-weight:500}
.pro-enc-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.pro-enc-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:11px 18px;font-size:14px;font-weight:700;color:#fff}
.pro-enc-badge i{color:#7ee0c0;font-size:13px}
.pro-enc-note{display:flex;gap:12px;align-items:flex-start;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 18px}
.pro-enc-note i{color:#ffd34d;font-size:18px;margin-top:2px;flex-shrink:0}
.pro-enc-note p{margin:0;font-size:14px;line-height:1.75;color:#eaf0ff;font-weight:500}
.pro-enc-note strong{color:#fff;font-weight:800}
@media(max-width:768px){.pro-enc{padding:28px 22px;border-radius:18px}.pro-enc-h{font-size:21px}.pro-enc-sub{font-size:14px}.pro-enc-badge{font-size:13px;padding:9px 14px}}

/* ─────────────────────────────────────────────────────
   Block 3 — pro-plat-* (대표 분석 플랫폼)
   ───────────────────────────────────────────────────── */
.pro-plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pro-plat-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid #e6e9f4;border-radius:14px;padding:24px 14px;text-align:center;box-shadow:0 2px 10px rgba(20,40,160,.05);transition:transform .2s,border-color .2s}
.pro-plat-card:hover{transform:translateY(-3px);border-color:#1428a0}
.pro-plat-ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#1428a0;background:#eef0fa}
.pro-plat-name{font-size:14.5px;font-weight:800;color:#0e1d75;line-height:1.2}
.pro-plat-cat{font-size:12px;color:#6b7280;font-weight:600}
@media(max-width:880px){.pro-plat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.pro-plat-grid{grid-template-columns:repeat(2,1fr)}}

/* ─────────────────────────────────────────────────────
   Block 4 — pro-nas-* (지원 NAS)
   ───────────────────────────────────────────────────── */
.pro-nas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pro-nas-card{display:flex;gap:14px;background:#fff;border:1px solid #e6e9f4;border-radius:14px;padding:20px 22px;box-shadow:0 2px 10px rgba(20,40,160,.05)}
.pro-nas-ic{width:44px;height:44px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#1428a0;background:#eef0fa}
.pro-nas-card h3{margin:0 0 4px;font-size:16px;font-weight:800;color:#0e1d75;line-height:1.3}
.pro-nas-card p{margin:0;font-size:13.5px;color:#475067;line-height:1.65}
.pro-nas-note{max-width:1080px;margin:16px auto 0;font-size:13.5px;color:#475067;line-height:1.7;text-align:center;padding:0 16px}
@media(max-width:680px){.pro-nas-grid{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────
   Block 5 — st-aud-* (대상 사용자) + Hero h1 fluid + Lightbox
   ───────────────────────────────────────────────────── */
.st-aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.st-aud-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e6e9f4;border-radius:16px;padding:24px 22px;box-shadow:0 2px 10px rgba(20,40,160,.05)}
.st-aud-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#1428a0,#0e1d75)}
.st-aud-eyebrow{font-size:12px;font-weight:800;color:#1428a0;letter-spacing:.04em;text-transform:uppercase}
.st-aud-card h3{margin:0;font-size:17px;font-weight:800;color:#0e1d75;line-height:1.4}
.st-aud-card>p{margin:0;font-size:14px;color:#475067;line-height:1.7}
.st-aud-list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:7px}
.st-aud-list li{font-size:13px;color:#475067;padding-left:15px;position:relative;line-height:1.55}
.st-aud-list li::before{content:'·';position:absolute;left:0;color:#1428a0;font-weight:800}
@media(max-width:980px){.st-aud-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.st-aud-grid{grid-template-columns:1fr}}

/* 히어로 h1 좁은 Android(320px) 깨짐 방지 — include CSS 의 52px 를 fluid clamp 로 오버라이드 */
@media(max-width:768px){
  .st-hero-h1 { font-size: clamp(36px, 10vw, 52px) !important; }
}

/* ═══ IMAGE ZOOM — 클릭 시 원본 크기 lightbox (SEO 친화 <a> wrap) ═══ */
.st-zoom-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; position: relative;
  text-decoration: none; color: inherit; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none; user-drag: none;
}
.st-zoom-link picture { display: contents; }
.st-zoom-link img {
  transition: opacity .2s;
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none;
}
.st-zoom-link:hover img { opacity: .94; }
.st-zoom-badge {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px 0 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 3; pointer-events: none;
  transition: background .2s, transform .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.st-zoom-badge i { font-size: 12px; }
.st-zoom-link:hover .st-zoom-badge,
.st-zoom-link:focus-visible .st-zoom-badge {
  background: rgba(20, 40, 160, 0.95);
  transform: scale(1.05);
}
@media (max-width: 640px) {
  .st-zoom-badge { height: 28px; padding: 0 10px 0 9px; font-size: 10.5px; top: 8px; right: 8px; }
  .st-zoom-badge i { font-size: 11px; }
}
#stLightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 99999;
  align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  cursor: zoom-out;
  animation: stLbFade .18s ease-out;
  touch-action: pinch-zoom;
}
#stLightbox.active { display: flex; }
@keyframes stLbFade { from { opacity: 0 } to { opacity: 1 } }
#stLightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; display: block;
  -webkit-user-drag: none;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  border-radius: 4px;
  touch-action: pinch-zoom;
}
#stLightboxClose {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); border: 0;
  color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  padding: 0; line-height: 1; z-index: 2;
}
#stLightboxClose:hover { background: rgba(255, 255, 255, 0.32); transform: scale(1.06); }
#stLightboxCaption {
  position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 12px; letter-spacing: .02em;
  padding: 7px 16px;
  background: rgba(0,0,0,.55); border-radius: 20px;
  max-width: 88vw; text-align: center;
  pointer-events: none; line-height: 1.4;
}
#stLightboxLoading {
  position: absolute; color: rgba(255,255,255,.5); font-size: 13px;
}
@media (max-width: 640px) {
  #stLightbox { padding: 12px; }
  #stLightboxClose { width: 40px; height: 40px; top: 12px; right: 12px; font-size: 20px; }
  #stLightboxCaption { font-size: 11px; bottom: 14px; padding: 6px 14px; }
}

/* ─────────────────────────────────────────────────────
   Block 6 — st-eng-grid--six (엔진 6단 그리드)
   ───────────────────────────────────────────────────── */
.st-eng-grid--six{grid-template-columns:repeat(3,1fr) !important}
@media(max-width:1024px){.st-eng-grid--six{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:560px){.st-eng-grid--six{grid-template-columns:1fr !important}}