/* ============================================================
   MEDI2KOREA — Gateway (보험사 선택 / Company ID 인증) 공용 스타일
   실사 이미지 + Pretendard/Gmarket Sans + Font Awesome 폰트아이콘
============================================================ */

:root{
  --primary:#1565C0; --primary-dark:#0D47A1; --primary-light:#E3F2FD;
  --ink:#0F1E30; --ink-soft:#51677E; --ink-faint:#8B9CAD;
  --paper:#F3F6FA; --surface:#FFFFFF; --surface-2:#EAF0F7;
  --line:#E1E8F0;
  --shadow-sm:0 1px 2px rgba(15,30,48,.06);
  --shadow-md:0 14px 34px -10px rgba(15,30,48,.18);
  --shadow-lg:0 34px 80px -20px rgba(15,30,48,.35);
  --r-card:14px; --r-pill:999px; --r-input:10px;
  --font-kr:'Pretendard',-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-en:'Gmarket Sans','Pretendard',-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#EAF1F8; --ink-soft:#A9BBCC; --ink-faint:#6C7E90;
    --paper:#0A1420; --surface:#111E2E; --surface-2:#16263A;
    --line:#1E3049;
    --primary:#5B9BE0; --primary-dark:#8AB9EA; --primary-light:#122942;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 14px 34px -10px rgba(0,0,0,.55);
    --shadow-lg:0 34px 80px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ink:#EAF1F8; --ink-soft:#A9BBCC; --ink-faint:#6C7E90;
  --paper:#0A1420; --surface:#111E2E; --surface-2:#16263A;
  --line:#1E3049;
  --primary:#5B9BE0; --primary-dark:#8AB9EA; --primary-light:#122942;
}
:root[data-theme="light"]{
  --primary:#1565C0; --primary-dark:#0D47A1; --primary-light:#E3F2FD;
  --ink:#0F1E30; --ink-soft:#51677E; --ink-faint:#8B9CAD;
  --paper:#F3F6FA; --surface:#FFFFFF; --surface-2:#EAF0F7;
  --line:#E1E8F0;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body.gw-body{
  font-family:var(--font-kr); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.gw-body a{color:inherit; text-decoration:none}
.gw-body h1,.gw-body h2,.gw-body h3{text-wrap:balance; margin:0}
.gw-body button{font:inherit; cursor:pointer}
.gw-body .en{font-family:var(--font-en)}
.gw-body ::selection{background:var(--primary); color:#fff}
.gw-body :focus-visible{outline:2px solid var(--primary); outline-offset:2px}

.gw-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); display:flex; align-items:center; gap:9px; font-family:var(--font-en);
}
.gw-eyebrow::before{content:"";width:20px;height:2px;background:var(--primary); border-radius:2px}

/* ============================================================
   히어로 배경 (실사 이미지, 여러 장이면 랜덤 크로스페이드)
============================================================ */
.gw-bg-wrap{position:fixed; inset:0; z-index:0; overflow:hidden; background:#0A1420}
.gw-bg-layer{
  position:absolute; inset:0; background-image:var(--scrim), var(--img);
  background-size:cover; background-position:center;
  transform:scale(1.04); opacity:0; transition:opacity 1.8s ease;
  animation:gwKenburns 11s ease-in-out infinite alternate;
}
.gw-bg-layer.is-shown{opacity:1; z-index:1}
@keyframes gwKenburns{ to{ transform:scale(1.13) translate(-1%,-1%); } }
@media (prefers-reduced-motion: reduce){ .gw-bg-layer{animation:none} }

/* ============================================================
   상단바
============================================================ */
.gw-topbar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:28px 48px;
}
.gw-logo-img{height:26px; width:auto; display:block; filter:brightness(0) invert(1)}
.gw-topbar-right{display:flex; align-items:center; gap:14px}
.gw-icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px); color:#fff;
  display:grid; place-items:center; font-size:14px; transition:background .2s, transform .2s;
}
.gw-icon-btn:hover{background:rgba(255,255,255,.2); transform:translateY(-1px)}
.gw-body .gw-pill{
  display:inline-flex; align-items:center; gap:9px; padding:10px 20px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px);
  color:#fff; font-size:13.5px; font-weight:700; font-family:var(--font-en); transition:background .2s;
  text-decoration:none;
}
.gw-pill:hover{background:rgba(255,255,255,.22)}

/* ============================================================
   SCREEN — 보험사 선택
============================================================ */
.gw-main{min-height:calc(100vh - 84px); display:flex; align-items:center; padding:24px 48px 64px; position:relative; z-index:2}
.gw-inner{width:100%; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center}

.gw-copy{color:#fff}
.gw-copy .gw-eyebrow{color:#BFD8F5}
.gw-copy .gw-eyebrow::before{background:#BFD8F5}
.gw-title{
  font-size:clamp(2.1rem, 3.4vw, 3.1rem); font-weight:700; line-height:1.22; letter-spacing:-.01em;
  margin:20px 0 18px; text-shadow:0 2px 20px rgba(0,0,0,.25);
}
.gw-title .hl{color:#8FC3FF}
.gw-sub{font-size:15.5px; line-height:1.75; color:rgba(255,255,255,.82); max-width:38ch; margin-bottom:32px}

.gw-trust-list{display:flex; flex-direction:column; gap:16px}
.gw-trust-item{display:flex; align-items:center; gap:12px; font-size:13.5px; color:rgba(255,255,255,.88)}
.gw-trust-item .ic{
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; color:#8FC3FF; flex:none; font-size:13px;
}
.gw-trust-item strong{font-weight:700; color:#fff; margin-right:5px}

.gw-card-panel{
  background:rgba(255,255,255,.94); backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px; padding:30px; box-shadow:var(--shadow-lg);
}
@media (prefers-color-scheme: dark){ .gw-card-panel{ background:rgba(11,20,32,.92); border-color:rgba(255,255,255,.1) } }
:root[data-theme="dark"] .gw-card-panel{ background:rgba(11,20,32,.92); border-color:rgba(255,255,255,.1) }
:root[data-theme="light"] .gw-card-panel{ background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.7) }

.gw-card-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.gw-card-panel-head h2{font-size:16px; font-weight:700; color:var(--ink); font-family:var(--font-kr)}
.gw-card-panel-head span{font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--primary); font-family:var(--font-en); background:var(--primary-light); padding:5px 11px; border-radius:var(--r-pill)}

.gw-card-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.gw-prov-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:20px 18px; text-align:left; width:100%;
  display:block; text-decoration:none; color:inherit;
  opacity:0; transform:translateY(14px);
  animation:gwRiseIn .55s cubic-bezier(.22,.61,.36,1) forwards;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
  overflow:hidden;
}
.gw-prov-card:nth-child(1){animation-delay:.05s}
.gw-prov-card:nth-child(2){animation-delay:.11s}
.gw-prov-card:nth-child(3){animation-delay:.17s}
.gw-prov-card:nth-child(4){animation-delay:.23s}
.gw-prov-card:nth-child(n+5){animation-delay:.29s}
@keyframes gwRiseIn{to{opacity:1; transform:translateY(0)}}
.gw-prov-card::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-card);
  box-shadow:inset 0 0 0 2px var(--brand,var(--primary)); opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.gw-prov-card.is-current{border-color:var(--brand,var(--primary))}
.gw-prov-card.is-current::after{opacity:1}
.gw-prov-card:hover, .gw-prov-card:focus-visible{ transform:translateY(-5px); box-shadow:var(--shadow-md); outline:none }
.gw-prov-card:hover::after, .gw-prov-card:focus-visible::after{opacity:1}
.gw-current-tag{
  position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:800; letter-spacing:.03em;
  color:#fff; background:var(--brand,var(--primary)); padding:4px 9px; border-radius:var(--r-pill);
  font-family:var(--font-en);
}
.gw-prov-badge{
  height:44px; max-width:130px; border-radius:10px; background:#fff;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:flex-start; margin-bottom:16px;
  padding:8px 12px; transition:border-color .3s, box-shadow .3s;
}
.gw-prov-badge img{max-height:100%; max-width:100%; width:auto; object-fit:contain; display:block}
.gw-prov-badge .fa{font-size:14px; font-weight:700; color:var(--brand,var(--primary))}
.gw-prov-card:hover .gw-prov-badge{border-color:var(--brand,var(--primary)); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand,var(--primary)) 14%, transparent)}
.gw-prov-name{font-family:var(--font-en); font-size:16px; font-weight:700; margin-bottom:4px}
.gw-prov-desc{font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; min-height:32px}
.gw-prov-cta{
  font-size:12px; font-weight:700; color:var(--ink-faint); display:flex; align-items:center; gap:6px;
  transition:color .25s, gap .25s; font-family:var(--font-kr);
}
.gw-prov-card:hover .gw-prov-cta{color:var(--brand,var(--primary)); gap:9px}
.gw-prov-cta .fa{font-size:10px; transition:transform .25s}
.gw-prov-card:hover .gw-prov-cta .fa{transform:translateX(2px)}

.gw-help-row{
  margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);
  font-size:12.5px; color:var(--ink-soft); text-align:center;
}
.gw-help-row a{color:var(--primary); font-weight:700; text-decoration:none}
.gw-help-row a:hover{text-decoration:none}

.gw-back-note{
  text-align:center; margin-top:16px;
}
.gw-back-note a{color:#BFD8F5; font-size:13px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.gw-back-note a:hover{text-decoration:none}

/* ============================================================
   SCREEN — Company ID 인증
============================================================ */
.gw-verify-wrap{position:relative; z-index:2; min-height:calc(100vh - 84px); display:flex; align-items:center; justify-content:center; padding:24px}

.gw-id-card{
  width:100%; max-width:440px; background:rgba(255,255,255,.95); backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.7); border-radius:20px; box-shadow:var(--shadow-lg);
  padding:44px 40px 36px;
  animation:gwCardIn .55s .08s cubic-bezier(.22,.61,.36,1) both;
}
@media (prefers-color-scheme: dark){ .gw-id-card{ background:rgba(11,20,32,.94); border-color:rgba(255,255,255,.1) } }
:root[data-theme="dark"] .gw-id-card{ background:rgba(11,20,32,.94); border-color:rgba(255,255,255,.1) }
:root[data-theme="light"] .gw-id-card{ background:rgba(255,255,255,.95); border-color:rgba(255,255,255,.7) }
@keyframes gwCardIn{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}

.gw-id-seal{
  height:56px; width:auto; min-width:100px; max-width:150px; margin:0 auto 18px; border-radius:14px;
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:10px 16px; position:relative;
}
.gw-id-seal img{max-height:100%; max-width:100%; object-fit:contain; display:block}
.gw-id-seal .fa{font-size:20px; color:var(--brand,var(--primary))}

.gw-id-provider{text-align:center; font-family:var(--font-en); font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px; text-transform:uppercase}
.gw-id-title{text-align:center; font-size:23px; font-weight:700; margin-bottom:10px}
.gw-id-sub{text-align:center; font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:30px}

.gw-field{margin-bottom:20px}
.gw-field label{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:9px}
.gw-field label .fa{color:var(--primary); font-size:12px}
.gw-id-input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-input); background:var(--paper); color:var(--ink);
  font-family:var(--font-en); font-size:16px; letter-spacing:.03em; padding:14px 16px; transition:border-color .2s, box-shadow .2s;
}
.gw-id-input::placeholder{color:var(--ink-faint); font-family:var(--font-en)}
.gw-id-input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent)}
.gw-field-hint{font-size:11.5px; color:var(--ink-faint); margin-top:8px}

.gw-body .gw-verify-btn{
  width:100%; padding:15px; border:none; border-radius:var(--r-input);
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff;
  font-size:14.5px; font-weight:700; font-family:var(--font-kr);
  display:flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none;
  transition:transform .15s, box-shadow .2s;
}
.gw-verify-btn:hover{box-shadow:0 10px 26px -8px color-mix(in srgb, var(--primary) 60%, transparent)}
.gw-verify-btn:active{transform:scale(.98)}
.gw-verify-btn .fa{font-size:13px}

.gw-id-footnote{margin-top:24px; padding-top:18px; border-top:1px dashed var(--line); text-align:center; font-size:12px; color:var(--ink-faint); line-height:1.7}
.gw-id-footnote strong{color:var(--ink-soft); font-weight:700}

.gw-flash-error{
  background:#FDECEA; border:1px solid #F5C2BE; color:#B3261E; border-radius:var(--r-input);
  padding:12px 14px; font-size:13px; margin-bottom:18px; display:flex; align-items:center; gap:9px;
}
@media (prefers-color-scheme: dark){ .gw-flash-error{ background:#3A1A17; border-color:#5C2B26; color:#F2A79E } }
:root[data-theme="dark"] .gw-flash-error{ background:#3A1A17; border-color:#5C2B26; color:#F2A79E }

/* ── 인증완료: 고객사 카드 + 검진 한도 게이지 ── */
.gw-verified-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; font-size:22px;
}
.gw-company-card{
  border:1.5px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin-bottom:24px;
}
.gw-company-head{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff;
  padding:12px 18px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700;
}
.gw-company-body{padding:18px}
.gw-company-name{font-size:16px; font-weight:700; margin-bottom:6px}
.gw-company-id-row{font-family:var(--font-en); font-size:13px; color:var(--ink-soft); margin-bottom:16px}
.gw-gauge-header{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-bottom:7px}
.gw-gauge-bar{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-bottom:8px}
.gw-gauge-fill{height:100%; border-radius:99px; background:var(--primary)}
.gw-gauge-fill.warn{background:#E6A23C}
.gw-gauge-fill.danger{background:#C0392B}
.gw-gauge-meta{display:flex; justify-content:space-between; font-size:12px; font-family:var(--font-en)}
.gw-gauge-meta .danger{color:#C0392B; font-weight:700}
.gw-gauge-empty{margin-top:10px; font-size:12px; color:#C0392B}

/* ============================================================
   반응형
============================================================ */
@media (max-width:980px){
  .gw-inner{grid-template-columns:1fr; text-align:left}
  .gw-main{padding:24px 24px 48px}
  .gw-topbar{padding:20px 24px}
  .gw-card-grid{grid-template-columns:1fr}
  .gw-trust-list{flex-direction:row; flex-wrap:wrap; gap:18px}
}
@media (max-width:520px){
  .gw-id-card{padding:34px 24px 28px}
}

.gw-proto-bar{display:none}