/* ═══════════════════════════════════════════════════════
   INFOVIL Korea — Design System  style.css
   재난안전 디지털 전환 전문기업 · 공공기관 B2B
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:    #0B3D91;   /* 주조색 */
  --navy-d:  #072B6B;   /* 다크 네이비 */
  --sky:     #1E6FD9;   /* 밝은 파랑 */
  --sky-l:   #5B9FEC;
  --mint:    #00C896;   /* 액센트 */
  --mint-d:  #00A87C;
  --slate:   #1B2B4B;   /* 다크 배경 */

  /* 위기경보 4단계 (정보 계층 시스템) */
  --al-관심-bg:  #EBF5FF;  --al-관심-bd:  #93C5E8;  --al-관심-txt: #0B5E8A;
  --al-주의-bg:  #FFFBEB;  --al-주의-bd:  #FCD34D;  --al-주의-txt: #92400E;
  --al-경계-bg:  #FFF7ED;  --al-경계-bd:  #FDBA74;  --al-경계-txt: #9A3412;
  --al-심각-bg:  #FEF2F2;  --al-심각-bd:  #FCA5A5;  --al-심각-txt: #991B1B;

  /* Neutrals */
  --g50:   #F7F9FC;
  --g100:  #EEF2F8;
  --g200:  #D8DEEB;
  --g300:  #B4BDD4;
  --g400:  #8A96B0;
  --g500:  #5E6D8C;
  --g600:  #3D4F6E;
  --text:  #1A2540;
  --ts:    #4A5E7A;   /* secondary text */
  --tx:    #7A8FA8;   /* muted text */

  /* Spacing & radii */
  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 22px; --r-2xl: 30px;

  /* Shadows */
  --sh-s: 0 1px 4px rgba(11,61,145,.07);
  --sh-m: 0 4px 16px rgba(11,61,145,.11);
  --sh-l: 0 8px 28px rgba(11,61,145,.15);
  --sh-xl:0 16px 48px rgba(11,61,145,.20);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .20s;

  /* Type */
  --f-ko: 'Noto Sans KR', sans-serif;
  --f-en: 'Inter', sans-serif;

  /* Layout */
  --max: 1200px;
  --w:   1200px;   /* --max 별칭 (index.html 호환) */

  /* Text alias (index.html 호환) */
  --text-xs: #7A8FA8;   /* = --tx */
  --text-s:  #4A5E7A;   /* = --ts */

  /* Font alias */
  --mono: 'Inter', sans-serif;  /* = --f-en */
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--f-ko); color: var(--text); background: #fff; line-height: 1.65; font-size: 15px; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: var(--f-ko); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--f-ko); }
img { max-width: 100%; display: block; }

/* ── LAYOUT ─────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.sec  { padding: 88px 0; }
.sec-sm { padding: 56px 0; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) { .g2,.g3,.g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .g2,.g3,.g4 { grid-template-columns: 1fr; }
  .sec { padding: 56px 0; }
  .wrap { padding: 0 18px; }
}

/* ── GNB ────────────────────────────────────────────── */
.gnb {
  position: sticky; top: 0; z-index: 200;
  background: var(--g50); height: 60px;
  border-bottom: 1.5px solid var(--g200);
}
.gnb-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 28px;
  height: 100%; display: flex; align-items: center;
}
.gnb-logo { display: flex; align-items: center; gap: 0; margin-right: 32px; flex-shrink: 0; }
/* .gnb-mark, .gnb-name — SVG 로고에서 이미지 로고로 교체됨 (2026-06)
.gnb-mark { width:30px; height:30px; background:var(--mint); border-radius:7px;
  display:flex; align-items:center; justify-content:center; }
.gnb-mark svg { width:17px; height:17px; fill:var(--navy-d); }
.gnb-name { font-size:1rem; font-weight:800; color:#fff; letter-spacing:-.01em; }
.gnb-name em { color:var(--mint); font-style:normal; } */
.gnb-logo-img { height: 34px; width: auto; display: block; }
.gnb-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.gnb-a {
  padding: 7px 13px; border-radius: var(--r-m);
  font-size: .875rem; font-weight: 500;
  color: var(--ts);
  transition: all var(--dur) var(--ease); white-space: nowrap;
}
.gnb-a:hover { color: var(--navy); background: var(--g100); }
.gnb-a.on   { color: var(--navy); background: var(--g100); font-weight: 700; }
.gnb-a.hl   { color: var(--sky);  font-weight: 700; }
.gnb-cta {
  margin-left: auto; background: var(--navy); color: #fff;
  padding: 8px 18px; border-radius: var(--r-m);
  font-size: .875rem; font-weight: 700;
  transition: all var(--dur) var(--ease); flex-shrink: 0;
}
.gnb-cta:hover { background: var(--navy-d); transform: translateY(-1px); }
.gnb-ham {
  display: none; margin-left: auto;
  width: 36px; height: 36px; border-radius: var(--r-m);
  background: var(--g100); color: var(--navy); font-size: 1.25rem;
  align-items: center; justify-content: center;
}
.gnb-mob { display: none; background: var(--g50); border-top: 1.5px solid var(--g200); }
.gnb-mob a {
  display: block; padding: 13px 24px;
  font-size: .9rem; color: var(--ts);
  border-bottom: 1px solid var(--g100);
  transition: all var(--dur) var(--ease);
}
.gnb-mob a:hover { color: var(--navy); background: var(--g100); }
.gnb-mob.open { display: block; }
@media (max-width: 960px) {
  .gnb-links, .gnb-cta { display: none; }
  .gnb-ham { display: flex; }
}

/* ── TRUST STRIP ────────────────────────────────────── */
.trust { background: var(--slate); padding: 11px 0; }
.trust-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 32px;
  flex-wrap: wrap; justify-content: center;
}
.trust-i { display: flex; align-items: center; gap: 8px; }
.trust-bdg {
  background: rgba(0,200,150,.18); border: 1px solid rgba(0,200,150,.36);
  border-radius: var(--r-s); padding: 3px 9px;
  font-size: .71rem; font-weight: 800; color: var(--mint);
  letter-spacing: .04em; font-family: var(--f-en);
}
.trust-lbl { font-size: .77rem; color: rgba(255,255,255,.58); font-weight: 500; }
@media (max-width: 620px) { .trust-lbl { display: none; } .trust-inner { gap: 16px; } }

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 24px; border-radius: var(--r-l);
  font-size: .9375rem; font-weight: 700;
  transition: all var(--dur) var(--ease); white-space: nowrap; border: none;
}
.btn-pri   { background: var(--sky); color: #fff; }
.btn-pri:hover { background: var(--navy); transform: translateY(-2px); box-shadow: var(--sh-l); }
.btn-acc   { background: var(--mint); color: var(--navy-d); }
.btn-acc:hover { background: var(--mint-d); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,200,150,.3); }
.btn-out   { border: 2px solid var(--navy); color: var(--navy); background: transparent; }
.btn-out:hover { background: var(--navy); color: #fff; }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.38); color: rgba(255,255,255,.9); background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.btn-wht   { background: #fff; color: var(--navy); }
.btn-wht:hover { background: var(--g100); transform: translateY(-2px); }
.btn-sm    { padding: 8px 16px; font-size: .84rem; border-radius: var(--r-m); }
.btn-lg    { padding: 14px 32px; font-size: 1.0625rem; border-radius: var(--r-xl); }

/* ── TAGS ───────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 100px;
  font-size: .71rem; font-weight: 700; letter-spacing: .04em;
}
.tag-navy  { background: var(--navy); color: #fff; }
.tag-sky   { background: var(--sky); color: #fff; }
.tag-mint  { background: var(--mint); color: var(--navy-d); }
.tag-slate { background: var(--slate); color: rgba(255,255,255,.85); }
.tag-gray  { background: var(--g100); color: var(--g600); }
.tag-green { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.tag-orange{ background: #FFF7ED; color: #9A3412; border: 1px solid #FDBA74; }

/* ── CARDS ──────────────────────────────────────────── */
.card {
  background: #fff; border-radius: var(--r-xl); padding: 28px;
  border: 1.5px solid var(--g200);
  transition: all var(--dur) var(--ease);
}
.card:hover { border-color: var(--sky-l); box-shadow: var(--sh-l); transform: translateY(-4px); }
.card-flat  { background: var(--g50); border-radius: var(--r-xl); padding: 24px; }
.card-dark  { background: var(--slate); border-radius: var(--r-xl); padding: 28px; }

/* ── SECTION HEADER ────────────────────────────────── */
.sec-hdr { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.sec-hdr p { margin-top: 12px; font-size: .9375rem; color: var(--ts); line-height: 1.75; }

/* ── EYEBROW ────────────────────────────────────────── */
.ey { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ey::before { content: ''; display: block; width: 22px; height: 3px; background: var(--mint); border-radius: 2px; }
.ey span { font-size: .71rem; font-weight: 700; color: var(--mint-d); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.eyebrow::before { content: ''; display: block; width: 22px; height: 3px; background: var(--mint); border-radius: 2px; }
.eyebrow span { font-size: .71rem; font-weight: 700; color: var(--mint-d); letter-spacing: .12em; text-transform: uppercase; }

/* ── PAGE HERO ──────────────────────────────────────── */
.phero { background: linear-gradient(140deg, var(--slate) 0%, var(--navy) 100%); padding: 56px 0 48px; }
.phero h1 { color: #fff; }
.phero p  { color: rgba(255,255,255,.66); margin-top: 10px; max-width: 560px; }
.bc { display: flex; align-items: center; gap: 5px; font-size: .77rem; margin-bottom: 16px; }
.bc a   { color: var(--mint); }
.bc span{ color: rgba(255,255,255,.28); }
.bc-dark a    { color: var(--sky); }
.bc-dark span { color: var(--g400); }

/* ── TABLE ──────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-l); border: 1.5px solid var(--g200); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th { background: var(--navy); color: #fff; padding: 12px 16px; text-align: left; font-weight: 700; font-size: .84rem; }
tbody td { padding: 11px 16px; border-bottom: 1px solid var(--g100); color: var(--ts); vertical-align: top; }
tbody tr:hover td { background: var(--g50); }
tbody tr:last-child td { border-bottom: none; }

/* ── FORM ───────────────────────────────────────────── */
.fg { margin-bottom: 18px; }
.fg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fl { display: block; font-size: .84rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.req { color: #DC2626; margin-left: 2px; }
.fi, .fs, .ft {
  width: 100%; padding: 11px 14px; border-radius: var(--r-m);
  border: 1.5px solid var(--g200); font-family: var(--f-ko);
  font-size: .9375rem; color: var(--text); background: #fff;
  transition: all var(--dur) var(--ease);
}
.fi:focus, .fs:focus, .ft:focus {
  outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(30,111,217,.12);
}
.ft { min-height: 110px; resize: vertical; line-height: 1.6; }
.fchk { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--ts); }
.fchk input { margin-top: 3px; accent-color: var(--sky); flex-shrink: 0; }
@media (max-width: 580px) { .fg-2 { grid-template-columns: 1fr; } }

/* ── FOOTER ─────────────────────────────────────────── */
.footer { background: var(--slate); color: rgba(255,255,255,.6); padding: 52px 0 28px; }
.ft-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.ft-logo { font-size: 1.125rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
.ft-logo em { color: var(--mint); font-style: normal; }
.ft-desc { font-size: .84rem; line-height: 1.8; }
.ft-head { font-size: .84rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.ft-a { display: block; font-size: .8rem; padding: 3px 0; transition: color var(--dur) var(--ease); }
.ft-a:hover { color: var(--mint); }
.ft-bot { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; flex-wrap: wrap; gap: 10px; }
.ft-copy { font-size: .77rem; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ft-grid { grid-template-columns: 1fr; } }

/* ── CHIP ───────────────────────────────────────────── */
.chip { background: var(--g100); border-radius: var(--r-m); padding: 5px 11px; font-size: .8rem; font-weight: 600; color: var(--g600); display: inline-flex; align-items: center; gap: 5px; }

/* ── MISC UTILS ─────────────────────────────────────── */
.n    { font-family: var(--f-en); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; } .mt-72 { margin-top: 72px; }
.mb-8  { margin-bottom: 8px;  } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }

/* ── SCROLL REVEAL ──────────────────────────────────── */
.rv {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.rv.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseGlow { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.au  { animation: fadeUp .6s var(--ease) both; }
.au1 { animation-delay: .10s; }
.au2 { animation-delay: .20s; }
.au3 { animation-delay: .32s; }
.au4 { animation-delay: .44s; }

/* ── TYPOGRAPHY CLASSES ─────────────────────────────── */
.t-d1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 900; line-height: 1.12; letter-spacing: -.04em; }
.t-h1 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.2;  letter-spacing: -.025em; }
.t-h2 { font-size: clamp(1.2rem, 2vw,  1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.t-h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.t-b  { font-size: .9375rem; line-height: 1.75; color: var(--ts); }
.t-sm { font-size: .875rem;  line-height: 1.7;  color: var(--ts); }
.t-xs { font-size: .8125rem; line-height: 1.55; color: var(--tx); }
.t-mono { font-family: var(--f-en); }