/* honglifecalc.com — one design system for every section, modelled on /ko/ (2026-11-12, unify_step.py).
   White paper sheet with a gold top rule on the green felt, ink-grey headings with a gold accent word,
   gold "stamp" badge, white form/result cards (result card gets the gold rule), 3-column category tiles.
   Loaded after hl-theme.css / hl-theme-g.css and page CSS; colours/layout only — no content, no scripts. */
:root{--u-ink:#2F343B;--u-muted:#5C626B;--u-gold:#C9A04A;--u-gold2:#B8862B;--u-line:#E6E9EF;--u-card:#E1E5EC;--u-shadow:0 20px 60px rgba(0,0,0,.35)}

/* ---------- top bar (same width/padding as /ko/ .brandbar) ---------- */
html:not([lang^="ko"]) body>.brand>.in,html:not([lang^="ko"]) body>.brandbar>.in{max-width:1040px!important;margin:0 auto!important;padding:12px 16px!important;box-sizing:border-box}
html body>.brandbar{background:rgba(22,42,15,.72);border-bottom:1px solid rgba(255,248,231,.12);color:#fff}
html body>.brandbar>.in{display:flex;align-items:center;justify-content:space-between;gap:12px}
html body>.brandbar .logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:16px}
html body .brand .flag{color:#E3EED6!important}

/* ---------- the sheet: hero/header = top of the paper, main = rest ---------- */
html:not([lang^="ko"]) body>header.hero,
html:not([lang^="ko"]) body>.brandbar+header.top{box-sizing:border-box;background:#fff!important;max-width:1080px;margin:22px auto 0!important;padding:26px 28px 14px!important;border-top:4px solid var(--u-gold);border-bottom:1px solid var(--u-line);border-radius:18px 18px 0 0;color:var(--u-ink);position:relative;z-index:2;box-shadow:0 -12px 40px -14px rgba(0,0,0,.3)}
html:not([lang^="ko"]) body>header.hero>.in,
html:not([lang^="ko"]) body>.brandbar+header.top>.in{max-width:none!important;margin:0!important;padding:0!important;width:auto}
html:not([lang^="ko"]) body>header.hero+main,
html:not([lang^="ko"]) body>.brandbar+header.top+main{box-sizing:border-box;background:#fff;max-width:1080px;margin:0 auto!important;padding:16px 28px 28px!important;border-radius:0 0 18px 18px;box-shadow:var(--u-shadow);position:relative;z-index:1}
/* /en/ pages that already use the /ko/ markup (.brandbar + .wrap) but had no paper sheet */
html:not([lang^="ko"]) body>div.wrap{box-sizing:border-box;background:#fff!important;max-width:1080px!important;margin:22px auto 0!important;padding:6px 28px 28px!important;border-radius:18px;border-top:4px solid var(--u-gold);box-shadow:var(--u-shadow)}
html:not([lang^="ko"]) body>div.wrap>header.top{border-bottom:1px solid var(--u-line)}

/* headings, lede and badge inside the sheet = /ko/ colours */
html:not([lang^="ko"]) body>header.hero h1,html:not([lang^="ko"]) body>.brandbar+header.top h1,html:not([lang^="ko"]) body>div.wrap>header.top h1{color:var(--u-ink)!important}
html:not([lang^="ko"]) body>header.hero h1 b,html:not([lang^="ko"]) body>header.hero h1 em,
html:not([lang^="ko"]) body>.brandbar+header.top h1 b,html:not([lang^="ko"]) body>div.wrap>header.top h1 b{color:var(--u-gold2)!important}
html:not([lang^="ko"]) body>header.hero p,html:not([lang^="ko"]) body>.brandbar+header.top p,
html:not([lang^="ko"]) body>div.wrap>header.top .sub,html:not([lang^="ko"]) body>div.wrap>header.top p{color:var(--u-muted)!important}
html:not([lang^="ko"]) body>header.hero a,html:not([lang^="ko"]) body>header.hero .crumb,html:not([lang^="ko"]) body>header.hero nav{color:#12305C!important}
html:not([lang^="ko"]) body>header.hero .year,html:not([lang^="ko"]) body>header.hero .badge{display:inline-block;font:600 12px/1.4 "Pretendard Variable",Pretendard,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#8A6414!important;background:#FBF4E4!important;border:1px solid #E8C27A!important;border-radius:4px!important;padding:5px 10px!important}
html:not([lang^="ko"]) body>div.wrap>header.top .stamp{background:#FBF4E4!important;color:#8A6414!important;border:1px solid #E8C27A!important}
/* long words (e.g. German compounds) never push the page sideways */
html body h1,html body h2{overflow-wrap:break-word;hyphens:auto}
/* the pet sits on its own row at the bottom of the header, like /ko/ */
html:not([lang^="ko"]) body>header.hero .in::after{position:relative!important;display:block;right:auto!important;bottom:auto!important;width:100%!important;height:76px!important;margin:6px 0 -14px;background-position:right 10px bottom!important;background-size:auto 100%!important}

/* ---------- cards & result boxes inside the sheet (= /ko/ .form / .receipt) ---------- */
html:not([lang^="ko"]) body>header.hero+main .card,html:not([lang^="ko"]) body>div.wrap .panel>.card,html:not([lang^="ko"]) body>div.wrap section.card{background:#fff!important;border:1px solid var(--u-card)!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(15,27,45,.04)!important}
html:not([lang^="ko"]) body>header.hero+main #out.card,html:not([lang^="ko"]) body>header.hero+main .card:has(>.big),
html:not([lang^="ko"]) body>div.wrap .card.result,html:not([lang^="ko"]) body>div.wrap .card:has(>.big){border-top:4px solid var(--u-gold)!important;box-shadow:0 1px 2px rgba(15,27,45,.04),0 8px 24px rgba(15,27,45,.06)!important}
html:not([lang^="ko"]) body>.brandbar+header.top+main .card{background:#fff!important;border:1px solid var(--u-card)!important;border-radius:12px!important}
html body main .card h2{color:var(--u-ink)}
/* form fields = /ko/ .field input */
html:not([lang^="ko"]) body>header.hero+main .card input:not([type=checkbox]):not([type=radio]):not([type=range]),html:not([lang^="ko"]) body>header.hero+main .card select{background:#FBFCFD!important;border-color:#C9D1DC!important}
html:not([lang^="ko"]) body>header.hero+main .card input:focus,html:not([lang^="ko"]) body>header.hero+main .card select:focus{border-color:#12305C!important;background:#fff!important;box-shadow:0 0 0 3px rgba(18,48,92,.12)}
html:not([lang^="ko"]) body>.brandbar+header.top h1{margin-top:6px!important}
/* category menus on hubs keep the cream paper inside the white sheet */
html:not([lang^="ko"]) body .hl-cats,html:not([lang^="ko"]) body .hlx-home{background:#FFFBF0!important;box-shadow:0 0 0 1px #EDE4CC!important}

/* ---------- things that sat on the felt outside the sheet: same width as the sheet ---------- */
html body>a.hl-dlink{box-sizing:border-box;width:min(1080px,calc(100% - 16px));margin:12px auto!important}
html:not([lang^="ko"]) body>footer{box-sizing:border-box;max-width:1080px!important;margin:24px auto 0!important;padding:16px 20px!important;background:#fff;border:1px solid var(--u-card);border-radius:12px;color:var(--u-muted)!important}
html:not([lang^="ko"]) body>footer a{color:#12305C!important}

/* ---------- top category tiles: 3 per row everywhere (PC and 390px), compact ---------- */
html body .hlh-tiles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
html body .hlh-tiles .hlh-tile{display:grid!important;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;justify-items:start;text-align:start;padding:10px 12px!important;min-height:62px;min-width:0;box-sizing:border-box}
html body .hlh-tiles .hlh-tile img{grid-row:1/3;width:40px;height:40px;margin:0}
html body .hlh-tiles .hlh-tile b{align-self:end;text-align:start!important;font-size:14px!important;line-height:1.25!important;word-break:keep-all;overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
html body .hlh-tiles .hlh-tile span{align-self:start;font-size:12px!important}
html body .hlh-tiles .hlh-tile[data-g="benefits"]{box-shadow:0 0 0 1.5px #E8C27A!important}

@media (max-width:640px){
  html:not([lang^="ko"]) body>header.hero,html:not([lang^="ko"]) body>.brandbar+header.top{margin:12px 8px 0!important;padding:18px 14px 10px!important;border-radius:14px 14px 0 0}
  html:not([lang^="ko"]) body>header.hero+main,html:not([lang^="ko"]) body>.brandbar+header.top+main{margin:0 8px!important;padding:12px 14px 20px!important;border-radius:0 0 14px 14px}
  html:not([lang^="ko"]) body>div.wrap{margin:12px 8px 0!important;padding:4px 14px 20px!important;border-radius:14px}
  html:not([lang^="ko"]) body>footer{margin:18px 8px 0!important}
  html body .hlh-tiles{gap:6px!important}
  html body .hlh-tiles .hlh-tile{grid-template-columns:minmax(0,1fr);grid-template-rows:38px auto auto;align-content:start;justify-items:center;row-gap:3px;text-align:center;padding:9px 4px 8px!important;min-height:0}
  html body .hlh-tiles .hlh-tile img{grid-row:auto;width:38px;height:38px}
  html body .hlh-tiles .hlh-tile b{align-self:center;text-align:center!important;font-size:12.5px!important}
  html body .hlh-tiles .hlh-tile span{align-self:center;font-size:11px!important}
}
@media print{html body>header.hero,html body>header.hero+main,html body>div.wrap{box-shadow:none!important;margin:0!important}}
html.hl-embed body>header.hero,html.hl-embed body>header.hero+main,html.hl-embed body>div.wrap{margin:0!important;box-shadow:none!important}