/* KoreaPlus life apps — Korean study + Hansik (shared chrome, lane accents) */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.life-korean { --life: #60a5fa; --life-deep: #1d4ed8; --life-soft: rgba(96,165,250,.14); }
.life-hansik { --life: #fb923c; --life-deep: #c2410c; --life-soft: rgba(251,146,60,.14); }

.life-page .hub-nav-logo span { color: var(--life); }
.life-page .kp-hero { padding: 48px 20px 36px; position: relative; overflow: hidden; }
.life-page .kp-hero-glow {
  position: absolute; inset: -20% 20% auto; height: 220px;
  background: radial-gradient(ellipse, var(--life-soft), transparent 70%);
  pointer-events: none;
}
.life-page .kp-hero-inner { max-width: 820px; margin: 0 auto; position: relative; }
.life-page .kp-hero-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--life); margin-bottom: 10px;
}
.life-page .kp-hero-title { font-size: clamp(28px, 5vw, 44px); font-weight: 900; letter-spacing: -.7px; color: #0f172a; }
.life-page .kp-grad-text {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: inherit;
}
.life-page .hub-nav-link { color: #1e293b; font-weight: 650; }
.life-page .kp-hero-ko { font-size: 15px; color: #475569; margin: 8px 0 0; }
.life-page .kp-hero-sub { font-size: 15px; color: #334155; margin-top: 12px; max-width: 640px; line-height: 1.6; }
.life-page .kp-hero-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.life-page .kp-stat { display: flex; flex-direction: column; }
.life-page .kp-stat b { font-size: 22px; color: #0f172a; }
.life-page .kp-stat span { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
html.light .life-page .kp-hero-title,
html.light .life-page .kp-grad-text,
html.light .life-page .life-article h1 { color: #0f172a !important; }
html.light .life-page .kp-stat b { color: #0f172a !important; }
html.light .life-page .hub-nav-link { color: #1e293b !important; }
html.light .life-page .kp-hero-sub,
html.light .life-page .life-article .lead { color: #334155 !important; }
html:not(.light) .life-page .kp-hero-title,
html:not(.light) .life-page .kp-grad-text,
html:not(.light) .life-page .life-article h1 { color: #f8fafc; }
html:not(.light) .life-page .kp-stat b { color: #f8fafc; }
html:not(.light) .life-page .hub-nav-link { color: rgba(248,250,252,.92); }
html:not(.light) .life-page .kp-hero-sub { color: rgba(226,232,240,.86); }
html:not(.light) .life-page .kp-hero-ko { color: rgba(148,163,184,.95); }
.life-page .gp-rail,
.life-page #kp-essentials-rail,
.life-page #kp-mt-btn,
.life-page .kp-tabbar,
.life-page .gp-save,
.life-page .gp-print,
.life-page .kp-plan-cta,
.life-page .guide-plus-bar { display: none !important; }
.life-page .kp-hero-browse {
  display: inline-block; margin-top: 20px; padding: 10px 16px; border-radius: 999px;
  background: var(--life-deep); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
}
.life-page .life-note {
  margin: 0 0 20px; padding: 10px 14px; border-radius: 10px;
  background: var(--life-soft); border: 1px solid var(--border); font-size: 13px; color: var(--text2);
}

.life-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.life-card {
  display: block; padding: 16px; border-radius: 16px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .16s, border-color .16s;
}
.life-card:hover { transform: translateY(-3px); border-color: var(--life); }
.life-card .ic { font-size: 26px; display: block; margin-bottom: 8px; }
.life-card strong { display: block; font-size: 15px; margin-bottom: 4px; }
.life-card span { font-size: 12.5px; color: var(--text2); line-height: 1.45; }

.life-article { max-width: 820px; margin: 0 auto; padding: 8px 0 40px; }
.life-article h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 900; letter-spacing: -.4px; margin: 8px 0 10px; }
.life-article .lead { font-size: 16px; color: var(--text2); line-height: 1.65; margin-bottom: 18px; }
.life-article h2 { font-size: 20px; margin: 28px 0 10px; }
.life-article p, .life-article li { font-size: 15px; line-height: 1.7; color: var(--text); }
.life-article ul, .life-article ol { margin: 8px 0 14px 1.2em; }
.life-ko { font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
.life-ex {
  display: grid; gap: 8px; margin: 12px 0 16px;
}
.life-ex-row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
}
.life-ex-ko { font-size: 20px; font-weight: 700; }
.life-ex-rom { font-size: 13px; color: var(--life); }
.life-ex-en { font-size: 13.5px; color: var(--text2); }
.life-page.rom-off .life-ex-rom, .life-page.rom-off .kr-rom { display: none; }

.life-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.life-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.life-btn[aria-pressed="true"], .life-btn.active { border-color: var(--life); color: var(--life); background: var(--life-soft); }

.hangul-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 14px 0; }
.hangul-cell {
  text-align: center; padding: 10px 4px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.hangul-cell b { display: block; font-size: 26px; line-height: 1.1; }
.hangul-cell i { display: block; font-style: normal; font-size: 11px; color: var(--text3); }
.life-page.rom-off .hangul-cell i { display: none; }

.quiz-box { margin: 16px 0; padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.quiz-opt {
  display: block; width: 100%; text-align: left; margin: 8px 0 0; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); cursor: pointer;
}
.quiz-opt.ok { border-color: #10b981; background: rgba(16,185,129,.12); }
.quiz-opt.bad { border-color: #ef4444; background: rgba(239,68,68,.1); }
.quiz-meta { font-size: 13px; color: var(--text2); margin-top: 10px; }

.life-bc { font-size: 12.5px; color: var(--text3); margin-bottom: 8px; }
.life-bc a { color: var(--life); text-decoration: none; }
.life-rel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.life-rel a {
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text2); text-decoration: none; font-size: 12.5px;
}
.life-rel a:hover { border-color: var(--life); color: var(--life); }

.life-search { width: 100%; max-width: 520px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; }
.life-ad { max-width: 820px; margin: 18px auto; min-height: 90px; }
.life-ad-tag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; }

.life-foot {
  text-align: center; padding: 36px 16px 48px; border-top: 1px solid var(--border); margin-top: 28px;
  font-size: 13px; color: var(--text3);
}
.life-foot a { color: var(--life); text-decoration: none; margin: 0 6px; }

.life-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 18px; }
.life-table th, .life-table td { border-bottom: 1px solid var(--border); padding: 8px 6px; text-align: left; vertical-align: top; }
.life-table th { color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

.life-callout {
  margin: 16px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--life-soft); border: 1px solid var(--border); font-size: 14px;
}

@media (max-width: 640px) {
  .life-page .kp-hero { padding: 36px 16px 28px; }
  .hangul-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

.life-fig { margin: 0 0 16px; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.life-fig img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.life-credit, .life-credit-mini {
  display: block; padding: 8px 12px; font-size: 11px; line-height: 1.45; color: #475569;
}
.life-credit a, .life-credit-mini a { color: var(--life-deep); }
html:not(.light) .life-credit, html:not(.light) .life-credit-mini { color: rgba(226,232,240,.75); }
.life-card.has-img { padding: 0 0 14px; overflow: hidden; }
.life-card-media { display: block; position: relative; }
.life-card-media img { width: 100%; height: 132px; object-fit: cover; display: block; }
.life-card.has-img strong, .life-card.has-img > span:not(.life-card-media) { padding: 0 14px; }
.life-card.has-img strong { margin-top: 10px; }
.life-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.life-gallery .life-fig img { max-height: 160px; }
.life-speak, .life-speak-glyph {
  border: 1px solid var(--life); background: var(--life-soft); color: var(--life-deep);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.life-speak-glyph { width: 100%; padding: 8px 4px; background: transparent; border-color: transparent; color: inherit; }
.life-speak-glyph:hover { border-color: var(--life); background: var(--life-soft); }
.life-ex-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.light .life-speak { color: #1d4ed8; }
.life-hansik html.light .life-speak, html.light .life-hansik .life-speak { color: #9a3412; }

.life-dict-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 18px; }
.life-dict-form .life-search { flex: 1; min-width: 200px; }
.life-dict-form .kp-hero-browse { margin-top: 0; }
.life-dict-src { margin: 22px 0; }
.life-dict-card, .life-rcp-card {
  margin: 12px 0; padding: 14px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
}
.life-dict-pos {
  font-size: 12px; color: var(--text3); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px;
}
.life-dict-senses { margin: 8px 0 4px 1.1em; }
.life-dict-senses .life-ex-en { display: block; font-size: 13px; color: var(--text2); }
.life-rcp { margin: 28px 0 8px; }
.life-rcp-card h3 { font-size: 15px; margin: 12px 0 6px; }
.life-rcp-card ol { margin: 6px 0 8px 1.2em; }