@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Noto+Serif+KR:wght@400;700&display=swap');

/* Cafe24Shiningstar, GmarketSansBold: real webfonts, sourced from 눈누(noonnu.cc)'s
   commercial-free-use catalog via the projectnoonnu GitHub mirror + jsDelivr CDN.
   Previously mapped to a Noto Sans KR Bold fallback because "no stable CDN was
   found" - that was wrong, a proper search turned these up. This matters beyond
   cosmetics: Cafe24Shiningstar (the 연금보험 notebook/checklist section's font) is
   much narrower than Noto Sans KR Bold, and the fallback's extra width was pushing
   text past its measured box into a photo area behind it (found via screenshot). */
@font-face {
  font-family: 'Cafe24Shiningstar';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve/Cafe24Shiningstar.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GmarketSansBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* THEFACESHOP (더페이스샵 잉크리퀴드체/Ink Liquid, a calligraphy brush font) - same
   situation as above, previously unmapped so it fell back to Noto Sans KR. Used
   for the "유병자도 OK!" speech-bubble text (유병자보험/암보험) where a separately
   positioned "ok!" emphasis layer sits right after it - the fallback font's wider
   metrics made "유병자도" run into "ok!" (found via screenshot). */
@font-face {
  font-family: 'THEFACESHOP';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.pc-layout, .mobile-layout, .pc-layout *, .mobile-layout * { box-sizing: border-box; margin: 0; padding: 0; }


.pc-layout img, .mobile-layout img {
  display: block;
  max-width: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

.pc-layout a, .mobile-layout a { color: inherit; text-decoration: none; }

.pc-layout button, .mobile-layout button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

/*
  Layout scaling: --u is "1 PSD pixel" for the current viewport.
  Every generated component positions/sizes elements with calc(var(--u) * N),
  where N is the raw pixel value measured from the PSD guide.
  PC design width = 1920, mobile design width = 720.

  font-size is the ONE exception: Chromium has a rendering bug where
  `font-size: calc(var(--u) * N)` corrupts glyph shaping for large bold CJK
  text (verified directly - same text, same computed px value, only differs
  by calc() vs a plain rem number on the font-size property itself). So text
  components use `Nrem` (a plain number, computed at generation time) instead,
  and only the root element's font-size uses calc() to drive that rem scale.
  1rem = 10 raw PSD px at the reference width, matching --u's divisor/10.
*/
html {
  font-size: min(calc(100vw / 192), 10px);
}
@media (max-width: 1023px) {
  html {
    font-size: calc(100vw / 72);
  }
}

.pc-layout {
  /* No min(...,1px) cap - matches .mobile-layout's approach (always fills
     100vw). Capping at 1px kept the design pinned to exactly 1920px on wider
     monitors, leaving blank white margins on both sides instead of filling
     the screen (found via screenshot at 2560px width - visible ~300px+ white
     bars each side). Removing the cap means the whole design (including
     raster images) scales up proportionally past its native 1920px on very
     wide screens - a mild softness tradeoff on e.g. 2560px+/4K monitors, but
     no more dead white space. Bonus: QuickMenu's position:fixed;right:N was
     previously measured from the VIEWPORT edge while the design was pinned
     narrower and centered, so it drifted away from the design's own right
     edge on wide screens (already-documented limitation) - now that the
     design's width always equals the viewport's width, that same fixed
     offset lines up with the design edge again at any width. */
  --u: calc(100vw / 1920);
  position: relative;
  width: calc(var(--u) * 1920);
  margin: 0 auto;
  overflow: hidden;
}

.mobile-layout {
  --u: calc(100vw / 720);
  position: relative;
  width: 100vw;
  overflow: hidden;
}

.pc-layout {
  display: block;
}
.mobile-layout {
  display: none;
}

@media (max-width: 1023px) {
  .pc-layout {
    display: none;
  }
  .mobile-layout {
    display: block;
  }
}

/* 자매 사이트 박스 링크 (하단 보험 그리드) */
a.bn-sitelink{text-decoration:none;color:inherit;cursor:pointer;box-sizing:content-box;padding:calc(var(--u)*9) calc(var(--u)*16);margin:calc(var(--u)*-9) calc(var(--u)*-16);}
a.bn-sitelink:hover{opacity:0.85;}