@charset "UTF-8";
/* ==========================================================================
   Mobiluma Korea - shared inner-page components
   Loaded after mobiluma.css on every page except the home page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page header block (title + lead used at top of every inner page)
   -------------------------------------------------------------------------- */
.pagehead { padding-block: 28px 8px; }
.pagehead__pill { margin-bottom: 16px; }
.pagehead__title { margin-bottom: 14px; max-width: 640px; }
.pagehead__lead { max-width: 560px; margin-bottom: 20px; }
.pagehead__facts { display: grid; gap: 12px; margin-bottom: 20px; }
.pagehead__fact { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ml-navy); }
.pagehead__fact svg { width: 17px; height: 17px; color: var(--ml-blue); flex: none; }

@media (min-width: 640px) { .pagehead__facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) {
  .pagehead { padding-block: 44px 8px; }
  .pagehead__facts { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* image-led page header (used on esim / 010 / insurance) */
.pagehero { position: relative; overflow: hidden; background: linear-gradient(180deg, #FBFCFE 0%, #F2F6FC 100%); }
.pagehero__inner { display: grid; gap: 28px; padding-block: 8px 32px; }
.pagehero__media { border-radius: var(--ml-radius-lg); overflow: hidden; aspect-ratio: 16/10; position: relative; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__note {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  background: rgba(255,255,255,.96);
  border-radius: var(--ml-radius-md);
  padding: 14px 16px;
  box-shadow: var(--ml-shadow-md);
  font-size: 13px;
  display: flex; align-items: center; gap: 10px;
}
.pagehero__note svg { width: 20px; height: 20px; color: var(--ml-blue); flex: none; }

@media (min-width: 960px) {
  .pagehero__inner { grid-template-columns: minmax(0,1fr) minmax(0,440px); align-items: center; gap: 40px; padding-block: 20px 48px; }
  .pagehero__media { aspect-ratio: auto; height: 100%; min-height: 380px; }
}

/* --------------------------------------------------------------------------
   2. Filter bar
   -------------------------------------------------------------------------- */
.filterbar {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--ml-mist);
  border-radius: var(--ml-radius-md);
  box-shadow: var(--ml-shadow-sm);
}
.filterbar__field { display: grid; gap: 6px; }
.filterbar__field label { font-size: 11.5px; font-weight: 700; color: var(--ml-slate); text-transform: uppercase; letter-spacing: .02em; }
.filterbar select, .filterbar input[type="text"], .filterbar input[type="search"] {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ml-mist);
  border-radius: var(--ml-radius-sm);
  font-size: 14px;
  color: var(--ml-navy);
  background: #fff;
  width: 100%;
}
.filterbar select:focus, .filterbar input:focus { border-color: var(--ml-blue); }
.filterbar__more {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 14px;
  border: 1px solid var(--ml-mist); border-radius: var(--ml-radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ml-navy); background: #fff;
}
.filterbar__more svg { width: 16px; height: 16px; color: var(--ml-slate); }

@media (min-width: 780px) {
  .filterbar { grid-template-columns: repeat(4, minmax(0,1fr)) auto auto; align-items: end; gap: 12px; }
}

/* --------------------------------------------------------------------------
   3. Plan / product cards
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: 16px; }
.plan {
  position: relative;
  padding: 22px;
}
.plan--feature { border-color: var(--ml-blue); box-shadow: var(--ml-shadow-md); }
.plan__flag { position: absolute; top: -12px; left: 22px; }
.plan__name { margin-bottom: 4px; }
.plan__tag  { margin-bottom: 16px; }
.plan__specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; margin-bottom: 16px; }
.plan__spec dt { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ml-slate-light); margin-bottom: 2px; }
.plan__spec dd { font-size: 13.5px; font-weight: 600; color: var(--ml-navy); }
.plan__desc { margin-bottom: 16px; }
.plan__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ml-mist); }
.plan__price small { display: block; font-size: 11px; color: var(--ml-slate); }
.plan__price b { font-size: 22px; color: var(--ml-navy); letter-spacing: -.02em; }
.plan__price span { font-size: 11.5px; color: var(--ml-slate); }

@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* tier plans (010 number: horizontal spec table on mobile, columns on desktop) */
.tiers { display: grid; gap: 16px; }
.tier { display: flex; flex-direction: column; }
.tier--best { border-color: var(--ml-blue); background: linear-gradient(180deg,#FAFCFF 0%,#fff 50%); }
.tier__flag { align-self: flex-start; margin-bottom: 12px; }
.tier__name { margin-bottom: 2px; }
.tier__sub  { margin-bottom: 16px; }
.tier__duration { display: inline-flex; margin-bottom: 16px; }
.tier__specs { display: grid; gap: 8px; margin-bottom: 18px; }
.tier__spec { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--ml-mist); }
.tier__spec dt { color: var(--ml-slate); font-weight: 500; }
.tier__spec dd { color: var(--ml-navy); font-weight: 700; }
.tier__price { margin-top: auto; margin-bottom: 14px; }
.tier__price small { display: block; font-size: 11px; color: var(--ml-slate); }
.tier__price b { font-size: 24px; color: var(--ml-navy); letter-spacing: -.02em; }
.tier__price span { font-size: 12px; color: var(--ml-slate); }

@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .tiers { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* --------------------------------------------------------------------------
   4. Currency toggle
   -------------------------------------------------------------------------- */
.curtoggle { display: inline-flex; padding: 3px; background: var(--ml-cloud); border-radius: var(--ml-radius-pill); }
.curtoggle button {
  min-height: 34px; padding: 0 16px;
  border: 0; background: transparent; border-radius: var(--ml-radius-pill);
  font-size: 13px; font-weight: 700; color: var(--ml-slate);
}
.curtoggle button[aria-pressed="true"] { background: #fff; color: var(--ml-navy); box-shadow: var(--ml-shadow-sm); }

/* --------------------------------------------------------------------------
   5. Numbered step rail (used by "how it works" / "how to apply")
   -------------------------------------------------------------------------- */
.steprail { display: grid; gap: 22px; }
.steprail__item { position: relative; padding-left: 44px; }
.steprail__item::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -22px;
  width: 2px; background: var(--ml-mist);
}
.steprail__item:last-child::before { display: none; }
.steprail__num {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ml-blue); color: #fff; font-size: 13px; font-weight: 700;
}
.steprail__title { margin-bottom: 4px; }

@media (min-width: 900px) {
  .steprail { grid-template-columns: repeat(var(--rail-cols, 4), minmax(0,1fr)); gap: 20px; }
  .steprail__item { padding-left: 0; padding-top: 44px; }
  .steprail__item::before { left: 40px; right: -20px; top: 15px; bottom: auto; width: auto; height: 2px; }
  .steprail__num { top: 0; }
}

/* --------------------------------------------------------------------------
   6. Notice boxes (limitations / requirements / important notices)
   -------------------------------------------------------------------------- */
.noticegrid { display: grid; gap: 16px; }
.notice { padding: 20px 22px; }
.notice__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.notice__head svg { width: 20px; height: 20px; flex: none; }
.notice--warning { background: var(--ml-warning-soft); border-color: #F3DBAE; }
.notice--warning .notice__head svg { color: var(--ml-warning); }
.notice--info { background: var(--ml-blue-soft); border-color: var(--ml-blue-border); }
.notice--info .notice__head svg { color: var(--ml-blue); }
.notice ul { display: grid; gap: 8px; }
.notice li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 13.5px; color: var(--ml-ink); line-height: 1.5; }
.notice li svg { width: 15px; height: 15px; margin-top: 2px; }
.notice--warning li svg { color: var(--ml-warning); }
.notice--info li svg { color: var(--ml-blue); }
.notice__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; }

@media (min-width: 780px) { .noticegrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* --------------------------------------------------------------------------
   7. Info grid (who it may be for, coverage overview, etc)
   -------------------------------------------------------------------------- */
.infogrid { display: grid; gap: 14px; }
.infocard { display: flex; gap: 14px; padding: 18px; }
.infocard__title { margin-bottom: 4px; }

@media (min-width: 620px) { .infogrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .infogrid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* --------------------------------------------------------------------------
   8. Partner / logo strip
   -------------------------------------------------------------------------- */
.partnerstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.partnerstrip .logo-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 15px; color: var(--ml-slate);
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   9. Bottom band CTA (dark, image backed)
   -------------------------------------------------------------------------- */
.bandcta { border-radius: var(--ml-radius-lg); overflow: hidden; position: relative; background: var(--ml-navy); color: #fff; }
.bandcta__bg { position: absolute; inset: 0; }
.bandcta__bg img { width: 100%; height: 100%; object-fit: cover; }
.bandcta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,32,59,.94) 0%, rgba(15,32,59,.80) 46%, rgba(15,32,59,.30) 100%); }
.bandcta__inner { position: relative; z-index: 2; padding: 30px 22px; max-width: 600px; }
.bandcta__inner h2 { color: #fff; margin-bottom: 10px; }
.bandcta__inner p { color: rgba(255,255,255,.82); margin-bottom: 20px; font-size: 15px; }
.bandcta .ml-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); box-shadow: none; }
.bandcta .ml-btn--secondary:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
@media (min-width: 900px) { .bandcta__inner { padding: 48px; } }

/* light variant used mid-page */
.bandcta--light { background: var(--ml-blue-soft); color: var(--ml-navy); border: 1px solid var(--ml-blue-border); }
.bandcta--light .bandcta__inner h2 { color: var(--ml-navy); }
.bandcta--light .bandcta__inner p { color: var(--ml-slate); }
.bandcta--light .ml-btn--secondary { background: #fff; color: var(--ml-navy); border-color: var(--ml-mist); box-shadow: var(--ml-shadow-sm); }

/* --------------------------------------------------------------------------
   10. Trust footer strip (reused block: rating + 4 short reassurances)
   -------------------------------------------------------------------------- */
.trustband { display: grid; gap: 20px; text-align: center; }
.trustband__row { display: grid; gap: 16px; }
.trustband__item svg { width: 22px; height: 22px; color: var(--ml-blue); margin: 0 auto 8px; }
.trustband__item b { display: block; font-size: 13.5px; color: var(--ml-navy); margin-bottom: 2px; }
.trustband .ml-trust { justify-content: center; }
@media (min-width: 700px) { .trustband__row { grid-template-columns: repeat(4, minmax(0,1fr)); } }