/* ═══ infosafe.co.kr — 사이버 위험 보험 가입센터 ═══════════════════════
   뼈대는 innohi.kr/site.css 다 (색 토큰·히어로·카드·표·FAQ·상담 폼·푸터).
   innohi 와 다른 점
     · 협회·보험사 로고가 없다 → .brandmark 대신 .logo (방패 + 글자)
     · 회원사 코드칸·게이지·공문 팝업이 없다
     · 상품 페이지 3개 + 해설 1개 + 가입 신청서가 있다 → .pagehead · .phero · .doc · .apply
   🔴 CSS 를 고치면 _server/build.ps1 을 돌린다. 링크의 ?v= 가 내용 해시로 바뀐다
      (Cloudflare·nginx 가 7일 캐시한다).
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"A2Z";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/A2Z-400.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/A2Z-500.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/A2Z-600.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/A2Z-700.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/A2Z-800.woff2") format("woff2")}

:root{
  --sans:"A2Z","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  /* 🔴 2026-10-07 현대해상 색으로 바꿨다 (대표). 이름은 그대로 두고 값만 바꿨다 — --blue* 가 주황·남색을 뜻한다.
     로고 실측: 주황 #F89A1A 부근 · 남색 #001A5E 부근 (innohi logo-h.png).
     --blue      진한 주황 — 버튼·링크·태그 글자. 흰 글자와 대비 4.6:1 (밝은 주황 #F7941D 는 2.2:1 이라 글자 바탕으로 못 쓴다)
     --hi        밝은 주황 — 넓은 면(히어로·안내 띠)·점·선. 이 위에는 남색 글자만 쓴다
     --blue-deep 현대해상 남색 — 제목·표 머리·상단 바 */
  --blue:#B85A07; --blue-deep:#0E2350; --blue-dark:#081736; --blue-mid:#F08A1C;
  --blue-soft:#FFF4E8; --blue-line:#F8D2A8; --hi:#F7941D; --hi2:#F26C1C; --on-hi:#0E2350; --on-hi-mid:#33405F;
  --teal:#0F7B6C; --teal-soft:#E7F3F0; --mint:#6FD3C0;
  --violet:#5B4BC4; --violet-soft:#F0EEFB;
  --alert:#C4342B; --alert-soft:#FDF0EF;
  --ink:#16202B; --ink-mid:#4C5866; --ink-soft:#8894A2;
  --line:#E8E6E3; --bg:#FFFFFF; --bg-soft:#FAF7F3;
  --r-s:12px; --r-m:18px; --r-l:26px;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--bg);
  line-height:1.68;word-break:keep-all;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.34}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{padding:92px 0}
@media(max-width:760px){section{padding:60px 0}.wrap{padding:0 16px}}

/* ── 로고 (방패 + 글자) — 모든 페이지 공용 ─────────────────── */
.logo{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto}
.logo svg{width:30px;height:34px;flex:0 0 auto}
.logo .wm{display:flex;flex-direction:column;line-height:1.1}
.logo .wm b{font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--blue-deep)}
.logo .wm b em{font-style:normal;color:var(--teal)}
.logo .wm small{font-size:10.5px;font-weight:500;color:var(--ink-soft);letter-spacing:-.02em;margin-top:2px;white-space:nowrap}
.logo.on-dark .wm b{color:#fff}
.logo.on-dark .wm b em{color:var(--mint)}
.logo.on-dark .wm small{color:#9DB8D2}

/* ── 헤더 (index) ────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:70px;display:flex;align-items:center;gap:20px}
.navlinks{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-mid)}
.navlinks a:hover,.navlinks a.on{color:var(--blue)}
.nav-cta{flex:0 0 auto}
@media(max-width:900px){.navlinks{display:none}}
@media(max-width:760px){.nav{padding:0 16px;height:62px}}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:100px;
  font-size:15px;font-weight:700;letter-spacing:-.02em;transition:transform .12s ease,box-shadow .12s ease;cursor:pointer;border:0}
.pill:hover{transform:translateY(-1px)}
.pill.solid{background:var(--blue);color:#fff;box-shadow:0 3px 14px rgba(27,90,158,.24)}
.pill.ghost{background:#fff;color:var(--blue-deep);border:1px solid var(--blue-line)}
.pill.white{background:#fff;color:var(--blue-dark)}
.pill.sm{padding:10px 18px;font-size:13.5px}

.hamburger{display:none;margin-left:auto;width:38px;height:38px;border:0;background:none;
  flex-direction:column;justify-content:center;gap:5px;cursor:pointer}
.hamburger span{display:block;height:2px;background:var(--blue-deep);border-radius:2px}
.pagehead .hamburger span{background:#fff}
@media(max-width:900px){.hamburger{display:flex}.nav-cta{display:none}}
.mob-overlay{position:fixed;inset:0;background:rgba(10,36,64,.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.mob-overlay.on{opacity:1;pointer-events:auto}
.mob-drawer{position:fixed;top:0;right:0;bottom:0;width:min(300px,82vw);background:#fff;z-index:80;
  transform:translateX(100%);transition:transform .24s ease;padding:84px 24px 24px;display:flex;flex-direction:column;gap:4px}
.mob-drawer.on{transform:none}
.mob-drawer a{padding:14px 6px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
.mob-drawer .mob-cta{margin-top:18px;border:0;background:var(--blue);color:#fff;border-radius:100px;text-align:center;font-weight:700}

/* ── 하위 페이지 헤더 .pagehead — 남색 54px (innohi 와 같은 높이) ── */
.pagehead{position:sticky;top:0;z-index:50;color:#fff;background:linear-gradient(110deg,#0A2440,#123A5E 60%,#1B5A9E)}
.pagehead .wrap{display:flex;align-items:center;gap:18px;height:58px}
.pagehead .logo svg{width:24px;height:27px}
.pagehead .logo .wm b{font-size:16.5px}
.pagehead .logo .wm small{display:none}
.pagehead .navlinks{color:#C9DAEA;font-size:14px}
.pagehead .navlinks a:hover,.pagehead .navlinks a.on{color:#fff}
.pagehead .pill{padding:8px 16px;font-size:13px}

/* ── 태그 ─────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:7px;background:var(--blue-soft);color:var(--blue);
  font-size:13px;font-weight:600;padding:6px 15px;border-radius:100px;letter-spacing:-.02em}
.tag i{font-style:normal;width:5px;height:5px;border-radius:50%;background:var(--blue-mid)}
.tag.teal{background:var(--teal-soft);color:var(--teal)} .tag.teal i{background:var(--teal)}
.tag.alert{background:var(--alert-soft);color:var(--alert)} .tag.alert i{background:var(--alert)}
.tag.violet{background:var(--violet-soft);color:var(--violet)} .tag.violet i{background:var(--violet)}

/* ── 히어로 ───────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,#0A2440 0%,#123A5E 52%,#1B5A9E 100%);color:#fff;padding:92px 0 84px;position:relative;overflow:hidden}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;
  display:grid;grid-template-columns:1.2fr .9fr;gap:52px;align-items:center}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:38px}.hero{padding:60px 0 56px}}
@media(max-width:760px){.hero-inner{padding:0 16px}}
.hero .tag{background:rgba(255,255,255,.13);color:#CBE1F5}
.hero .tag i{background:var(--mint)}
.hero h1{font-size:48px;font-weight:800;letter-spacing:-.045em;line-height:1.22;margin:20px 0 18px}
@media(max-width:760px){.hero h1{font-size:32px}}
.hero .lead{font-size:17.5px;color:#C3D5E5;line-height:1.72;max-width:31em}
.hero .lead b{color:#fff}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .pill.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.hero-note{margin-top:22px;font-size:13px;color:#8FAFC9}

/* 히어로 오른쪽 — AI 위협 패널 */
.threat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-l);padding:26px 24px}
.threat h3{font-size:14px;font-weight:700;color:#9FD9CC;letter-spacing:-.01em;margin-bottom:12px}
.threat li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.threat li:first-child{border-top:0}
.threat li i{font-style:normal;flex:0 0 32px;height:32px;border-radius:10px;background:rgba(111,211,192,.15);
  color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.threat li b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.threat li span{display:block;font-size:13px;color:#A9C1D7;line-height:1.6;margin-top:2px}

/* ── 상품 스트립 (히어로 바로 아래) ─────────────────────── */
.prod-strip{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.prod-grid{max-width:var(--maxw);margin:0 auto;padding:30px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.prod-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.prod-grid,.prod-grid.four{grid-template-columns:1fr;gap:12px}}
@media(max-width:760px){.prod-grid{padding:24px 16px}}
.prod{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:22px 22px 20px;
  transition:border-color .15s,box-shadow .15s,transform .15s;position:relative}
.prod:hover{border-color:var(--blue-line);box-shadow:0 8px 26px rgba(18,58,94,.08);transform:translateY(-2px)}
.prod em{font-style:normal;display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:-.02em}
.prod b{display:block;font-size:20px;font-weight:800;color:var(--blue-deep);letter-spacing:-.04em;margin-top:3px}
.prod span{display:block;font-size:13.5px;color:var(--ink-mid);margin-top:6px;line-height:1.6}
.prod .go{position:absolute;right:20px;top:22px;font-size:13px;font-weight:700;color:var(--blue)}
.prod.must{border-color:var(--blue-line);background:linear-gradient(180deg,#fff,var(--blue-soft))}
.prod.must em{color:var(--blue)}

/* ── 섹션 헤드 ───────────────────────────────────────── */
.sec-head{max-width:660px;margin-bottom:42px}
.sec-head h2{font-size:35px;font-weight:800;letter-spacing:-.04em;margin:16px 0 14px}
@media(max-width:760px){.sec-head h2{font-size:26px}}
.sec-head p{font-size:16px;color:var(--ink-mid);line-height:1.75}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ── 카드 ────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px 28px}
.card .ic{width:44px;height:44px;border-radius:13px;background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;margin-bottom:16px}
.card.teal .ic{background:var(--teal-soft);color:var(--teal)}
.card.alert .ic{background:var(--alert-soft);color:var(--alert)}
.card.violet .ic{background:var(--violet-soft);color:var(--violet)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink-mid);line-height:1.72}
.card ul{margin-top:14px}
.card li{font-size:14px;color:var(--ink-mid);padding:7px 0 7px 17px;position:relative;border-top:1px solid var(--line)}
.card li:first-child{border-top:0}
.card li::before{content:"";position:absolute;left:2px;top:16px;width:4px;height:4px;border-radius:50%;background:var(--blue-mid)}
.card .more{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--blue)}

/* ── 강조 박스 ───────────────────────────────────────── */
.note{border-left:3px solid var(--blue);background:var(--blue-soft);padding:20px 24px;
  border-radius:0 var(--r-m) var(--r-m) 0;font-size:15px;color:var(--ink-mid);line-height:1.75}
.note b{color:var(--blue-deep);font-weight:700}
.note.teal{border-color:var(--teal);background:var(--teal-soft)}
.note.alert{border-color:var(--alert);background:var(--alert-soft)}
.note.violet{border-color:var(--violet);background:var(--violet-soft)}

/* ── 표 ─────────────────────────────────────────────── */
.table-wrap{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{background:var(--blue-deep);color:#fff;font-weight:600;padding:14px 16px;text-align:center;letter-spacing:-.02em;font-size:13.5px}
tbody td{padding:13px 16px;border-top:1px solid var(--line);text-align:center;color:var(--ink-mid)}
tbody tr:nth-child(even){background:var(--bg-soft)}
tbody td:first-child{text-align:left;font-weight:500;color:var(--ink)}
tbody td.amt{font-weight:700;color:var(--blue-deep)}
td.y{color:var(--teal);font-weight:800} td.n{color:var(--ink-soft)} td.p{color:#B7791F;font-weight:700}
.table-cap{margin-top:12px;font-size:13px;color:var(--ink-soft);line-height:1.7}
@media(max-width:760px){.table-wrap{overflow-x:auto}table{min-width:560px}}

/* ── 진행 단계 ───────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.steps .step{background:var(--bg-soft);border-radius:var(--r-m);padding:26px 24px}
.steps .step .n{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.steps .step:nth-child(2) .n{background:var(--blue-deep)} .steps .step:nth-child(3) .n{background:var(--teal)}
.steps .step h3{font-size:17px;margin:14px 0 3px;letter-spacing:-.03em}
.steps .step .k{font-size:12.5px;font-weight:800;color:var(--blue)}
.steps .step p{font-size:14px;line-height:1.75;color:var(--ink-mid);margin-top:10px}

/* ── CTA 띠 ─────────────────────────────────────────── */
.cta-band{background:linear-gradient(120deg,#0A2440,#1B5A9E);color:#fff;border-radius:var(--r-l);
  padding:52px 48px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media(max-width:900px){.cta-band{grid-template-columns:1fr;padding:36px 26px}}
.cta-band h2{font-size:31px;font-weight:800;letter-spacing:-.04em;line-height:1.3}
@media(max-width:760px){.cta-band h2{font-size:24px}}
.cta-band p{margin-top:12px;font-size:15.5px;color:#C3D5E5;line-height:1.72}

/* ── FAQ — <details data-faq> (build.ps1 이 여기서 FAQPage 를 만든다) ── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;padding:22px 44px 22px 2px;font-size:16.5px;font-weight:600;cursor:pointer;
  position:relative;letter-spacing:-.025em;line-height:1.55}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄";position:absolute;right:6px;top:22px;color:var(--ink-soft);font-size:15px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .a{padding:0 40px 24px 2px;font-size:15px;color:var(--ink-mid);line-height:1.8}
.faq .a ul{margin:10px 0}
.faq .a li{padding:4px 0 4px 15px;position:relative}
.faq .a li::before{content:"·";position:absolute;left:3px;color:var(--ink-soft)}
.faq .a a{color:var(--blue);text-decoration:underline}

/* ── 상담 ───────────────────────────────────────────── */
.consult-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px}
@media(max-width:900px){.consult-grid{grid-template-columns:1fr}}
.call-card{background:var(--blue-deep);color:#fff;border-radius:var(--r-l);padding:34px 30px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.call-card small{font-size:13px;color:#8FB6DA;font-weight:500}
.call-card .num{font-size:25px;font-weight:800;letter-spacing:-.035em}
.call-card .mail{font-size:16px;font-weight:500;color:#CBE1F5;letter-spacing:-.02em;margin-top:4px}
.call-card .hours{margin-top:14px;font-size:13px;color:#8FB6DA}
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px}
@media(max-width:760px){.cform{padding:22px 18px}}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.cf-row{grid-template-columns:1fr}}
.cf-field{margin-bottom:14px}
.cf-field label,.cf-field .lb{display:block;font-size:13.5px;font-weight:600;color:var(--ink-mid);margin-bottom:6px}
.cf-field input,.cf-field textarea,.cf-field select{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-s);font-size:15px;color:var(--ink);background:#fff;transition:border-color .15s}
.cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus{outline:0;border-color:var(--blue-mid)}
.cf-field textarea{min-height:104px;resize:vertical}
.cf-agree{display:flex;gap:10px;align-items:flex-start;margin:6px 0 14px}
.cf-agree input{margin-top:4px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--blue)}
.cf-agree label{font-size:14px;color:var(--ink-mid);line-height:1.6}
.cf-agree label b{color:var(--blue);font-weight:700}
.cf-agree-detail{display:block;margin-top:7px;font-size:11.5px;line-height:1.78;color:var(--ink-soft);font-weight:400}
.cf-agree-detail b{color:var(--ink-mid);font-weight:600}
.cf-agree-detail a{color:var(--blue);text-decoration:underline}
.cf-submit{width:100%;padding:16px;border:0;border-radius:100px;background:var(--blue);color:#fff;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:-.02em}
.cf-submit:disabled{background:var(--ink-soft);cursor:default}
.cf-msg{margin-top:12px;font-size:14px;text-align:center;min-height:20px}
.cf-msg.ok{color:var(--teal)} .cf-msg.err{color:var(--alert)}

/* ── 하위 페이지 머리 ─────────────────────────────────── */
.phero{background:linear-gradient(160deg,#0A2440 0%,#123A5E 60%,#1B5A9E 100%);color:#fff;padding:64px 0 56px}
.phero .crumb{font-size:13px;color:#8FAFC9}
.phero .crumb a:hover{color:#fff}
.phero h1{font-size:40px;font-weight:800;letter-spacing:-.045em;line-height:1.25;margin:14px 0 14px}
@media(max-width:760px){.phero{padding:44px 0 40px}.phero h1{font-size:28px}}
.phero .lead{font-size:16.5px;color:#C3D5E5;line-height:1.75;max-width:40em}
.phero .lead b{color:#fff}
.phero .facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.phero .facts span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.1);color:#DCE8F3;border:1px solid rgba(255,255,255,.16)}

/* ── 해설 본문 .doc — 읽는 페이지 (ai-threat 등) ──────────── */
.doc{max-width:760px}
.doc h2{font-size:27px;font-weight:800;letter-spacing:-.04em;margin:54px 0 14px}
.doc h2:first-child{margin-top:0}
.doc h2[id],section[id]{scroll-margin-top:72px}   /* 목차·앵커가 고정 헤더 밑으로 숨지 않게 */
.doc h3{font-size:19px;margin:30px 0 8px}
.doc p{font-size:16px;color:var(--ink-mid);line-height:1.85;margin:12px 0}
.doc p b{color:var(--ink)}
.doc ul.dot{margin:10px 0 14px}
.doc ul.dot li{font-size:15.5px;color:var(--ink-mid);line-height:1.75;padding:5px 0 5px 17px;position:relative}
.doc ul.dot li::before{content:"";position:absolute;left:3px;top:16px;width:5px;height:5px;border-radius:50%;background:var(--blue-mid)}
.doc .table-wrap{margin:18px 0}
.doc .note{margin:20px 0}
.doc .src{font-size:13px;color:var(--ink-soft);line-height:1.75;margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.doc .src li{padding:3px 0}
.doc .src a{color:var(--blue);word-break:break-all}
.toc{background:var(--bg-soft);border-radius:var(--r-m);padding:20px 24px;margin:0 0 36px}
.toc b{font-size:13px;color:var(--ink-soft)}
.toc ol{margin:8px 0 0;padding-left:20px;font-size:15px;color:var(--blue-deep);line-height:1.9}
.toc a:hover{text-decoration:underline}

/* ── 진단 화면 공통 (check · deep) — innohi 의 .pagenote ── */
.pagenote{font-size:13.5px;color:var(--ink-soft);margin:0 0 20px;letter-spacing:-.01em}
.pagehead h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.04em;line-height:1.2;padding-left:13px;border-left:1px solid rgba(255,255,255,.26);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pagehead .back{margin-left:auto;flex:0 0 auto;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:7px 16px}
@media(max-width:560px){.pagehead h1{font-size:14.5px;padding-left:9px}.pagehead .back{font-size:12px;padding:6px 12px}}

/* ── 푸터 ───────────────────────────────────────────── */
footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:56px 0 30px;font-size:13px;color:var(--ink-soft);line-height:1.75}
.foot-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr;gap:20px}}
.foot-col h4{font-size:12.5px;font-weight:700;color:var(--ink-mid);letter-spacing:.02em;margin-bottom:8px}
.foot-links li{padding:2px 0} .foot-links a:hover{color:var(--blue)}
.foot-right ul li{padding:3px 0;font-size:12px;line-height:1.72}
.foot-right ul li b{color:var(--ink-mid);font-weight:600}
.foot-bottom{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.foot-bottom a{color:var(--blue);font-weight:600}
.foot-bottom span{margin-left:auto;color:var(--ink-soft)}

/* ── 스크롤 등장 ─────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── 개정법 고지 띠 (innohi 와 같은 것) ─────────────────── */
.law-note{margin-top:22px;background:var(--alert-soft);border:1px solid #F2D5D2;border-radius:var(--r-m);padding:26px 28px}
.law-note h4{font-size:15px;color:var(--alert);letter-spacing:-.03em}
.law-note p{font-size:14.5px;color:var(--ink-mid);line-height:1.72;margin-top:8px}
.law-note b{color:var(--alert);font-weight:700}
.law-note ul{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px}
.law-note li{font-size:13.5px;color:var(--ink-mid);line-height:1.62;padding:12px 0 0 15px;position:relative;border-top:1px solid #EED3D0}
.law-note li::before{content:"";position:absolute;left:2px;top:19px;width:4px;height:4px;border-radius:50%;background:var(--alert)}
.law-note .src{font-size:12.5px;color:var(--ink-soft);margin-top:16px;padding-top:13px;border-top:1px solid #EED3D0}
@media(max-width:760px){.law-note{padding:22px 20px}.law-note ul{grid-template-columns:1fr;gap:0}}

/* ═══ 현대해상 테마 — 주황 면 위의 글자는 남색 (2026-10-07) ═══════════════════ */
.pill.solid{box-shadow:0 3px 14px rgba(184,90,7,.25)}
.logo .wm b em{color:var(--hi2)}
.logo.on-dark .wm b em{color:var(--hi)}
.logo.on-dark .wm small{color:#AEB8CF}
.pagehead{background:linear-gradient(110deg,#081736,#0E2350 65%,#1A3270)}
.pagehead .navlinks{color:#C6CDDD}
.pagehead .pill.white{background:var(--hi);color:var(--on-hi)}

.hero,.phero{background:linear-gradient(155deg,#F9A13A 0%,var(--hi) 45%,var(--hi2) 100%);color:var(--on-hi)}
.hero .tag,.phero .tag{background:rgba(255,255,255,.4);color:var(--on-hi)}
.hero .tag i{background:var(--on-hi)}
.hero .lead,.phero .lead{color:var(--on-hi-mid)}
.hero .lead b,.phero .lead b{color:var(--on-hi)}
.hero .pill.white,.phero .pill.white,.cta-band .pill.white{background:var(--on-hi);color:#fff}
.hero .pill.ghost{color:var(--on-hi);border-color:rgba(14,35,80,.35)}
.hero-note{color:var(--on-hi-mid)}
.threat{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55)}
.threat h3{color:var(--on-hi)}
.threat li{border-top-color:rgba(14,35,80,.12)}
.threat li i{background:#fff;color:var(--hi2)}
.threat li span{color:var(--on-hi-mid)}
.phero .crumb{color:var(--on-hi-mid)}
.phero .crumb a:hover{color:var(--on-hi)}
.phero .facts span{background:rgba(255,255,255,.38);color:var(--on-hi);border-color:rgba(255,255,255,.6)}
.cta-band{background:linear-gradient(120deg,var(--hi),var(--hi2));color:var(--on-hi)}
.cta-band p{color:var(--on-hi-mid)}
.prod:hover{box-shadow:0 8px 26px rgba(184,90,7,.1)}
.prod.must{border-color:var(--hi)}
.call-card small,.call-card .hours{color:#AEB8CF}
.call-card .mail{color:#DCE2EE}
.call-card .num{color:var(--hi)}
.mob-overlay{background:rgba(8,23,54,.45)}