/* COSMAX ESG Strategy Book — design system derived from COSMAX Sustainability Report 2024 */
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;  /* force light regardless of OS preference */

  /* Brand colors extracted from COSMAX SR 2024 */
  --brand-red: #D61923;        /* COSMAX logo red */
  --brand-red-hover: #B01520;  /* deeper on light bg */
  --brand-red-dim: #8E1018;    /* darkest emphasis */

  /* 3 ESG strategy pillar colors */
  --esg-planet: #2E9A4E;    /* Creating a Beautiful Planet (green) — slightly deepened for contrast */
  --esg-ethical: #C96A12;   /* Creating Ethical Business (orange) — slightly deepened */
  --esg-innovation: #5A4A8A; /* Creating Innovation (violet) — slightly deepened */

  /* Neutral surfaces — warm off-white matching SR 2024 cover tone */
  --bg: #F7F4EE;         /* warm off-white (close to SR cover cream) */
  --bg-warm: #FBF8F1;
  --fg: #1C1A17;         /* warm charcoal */
  --fg-dim: #4A433D;
  --muted: #7A7166;
  --panel: #FFFFFF;
  --panel-solid: #FFFFFF;
  --panel-alt: #F0EBE2;
  --border: #DDD4C5;
  --border-soft: #EAE3D4;

  /* Semantic */
  --accent: var(--brand-red);
  --accent-bold: var(--brand-red-dim);
  --link: var(--brand-red);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "NanumSquareNeo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.75;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
body.lang-en { font-family: "Inter", -apple-system, sans-serif; }
main { max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem 6rem; }
main.toc-content { max-width: 1000px; }
h1, h2, h3, h4, h5 {
  color: var(--fg); font-weight: 700; line-height: 1.35;
  letter-spacing: -0.02em;
}
h1 { font-size: 2.1rem; margin-top: 2.5rem; font-weight: 800; }
h2 {
  font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--border);
  font-weight: 700;
}
h2::before {
  content: ""; display: inline-block;
  width: 3px; height: 1.1em;
  background: var(--brand-red); vertical-align: -0.14em;
  margin-right: .6rem; border-radius: 2px;
}
h3 { font-size: 1.18rem; margin-top: 1.8rem; font-weight: 700; color: var(--fg); }
h4 { font-size: 1.02rem; margin-top: 1.2rem; color: var(--fg-dim); font-weight: 600; }
a { color: var(--link); text-decoration-color: rgba(229, 85, 99, 0.3); text-underline-offset: 2px; }
a:hover { color: var(--brand-red); text-decoration-color: var(--brand-red); }
.cite-link { text-decoration: none; color: var(--accent); font-weight: 600; }
.cite-link:hover { text-decoration: underline; }
.cite-backlink {
  display: inline-block; margin-left: .5rem;
  color: var(--muted); font-size: .85em;
  text-decoration: none;
}
.cite-backlink:hover { color: var(--accent); }
.xref { color: var(--accent); text-decoration: none; }
.xref:hover { text-decoration: underline; }
.md-table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  background: var(--panel); font-size: .94em;
  border-radius: .5rem; overflow: hidden;
}
.md-table th, .md-table td {
  border: 1px solid var(--border); padding: .6rem .9rem; text-align: left;
  vertical-align: top;
}
.md-table thead { background: var(--panel-alt); }
.md-table thead th {
  color: var(--brand-red); font-weight: 700;
  letter-spacing: -0.005em; border-bottom: 2px solid var(--brand-red);
}
.md-table tbody tr:hover { background: var(--bg-warm); }
figure { margin: 1.8rem 0; text-align: center; }
figure img {
  max-width: 100%; height: auto; border-radius: .5rem;
  cursor: zoom-in; box-shadow: 0 4px 16px rgba(28, 26, 23, .12);
  border: 1px solid var(--border-soft);
}
figcaption { color: var(--muted); font-size: .88em; margin-top: .6rem; font-weight: 400; }
code {
  background: var(--panel-alt); color: var(--brand-red-dim); padding: .12rem .4rem;
  border-radius: .25rem; font-size: .88em; font-weight: 500;
  border: 1px solid var(--border-soft);
}
.math-inline { color: var(--brand-red-dim); font-weight: 500; }
.math-block {
  margin: 1.2rem 0; padding: .9rem 1rem; background: var(--panel-alt);
  border-radius: .4rem; overflow-x: auto;
  border-left: 3px solid var(--brand-red);
}
.en-gloss {
  color: var(--muted);
  font-size: 0.82em;
  font-weight: 400;
  opacity: 0.78;
  margin: 0 0.05em;
}
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.chapter-meta {
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem; padding-bottom: 1.2rem;
}
.chapter-part {
  color: var(--brand-red); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  margin-bottom: .4rem;
}
.chapter-title {
  font-size: 2.3rem; margin: .5rem 0 .3rem;
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.25;
}
.chapter-title::first-letter { color: var(--fg); }
.chapter-subtitle {
  color: var(--muted); font-size: 1rem; font-weight: 400;
  font-family: "Inter", "NanumSquareNeo", sans-serif;
  letter-spacing: .02em;
}
.toc-content { padding-top: 2rem; max-width: 960px; margin: 0 auto; }
.book-title {
  font-size: 2.6rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.2;
  margin-bottom: .5rem;
}
.book-subtitle {
  color: var(--muted); font-size: 1.1rem; margin-bottom: 3rem;
  font-weight: 400;
}
.toc-list { list-style: none; padding: 0; margin: 1rem 0; }
.toc-list li { margin: .6rem 0; }
.toc-list a {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: .9rem 1.1rem; border-radius: .4rem;
  text-decoration: none;
  background: var(--panel); border: 1px solid var(--border);
  transition: background .18s ease, border-color .18s ease, transform .1s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.toc-list a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--brand-red);
  opacity: 0; transition: opacity .15s ease;
  border-radius: .4rem 0 0 .4rem;
}
.toc-list a:hover {
  background: var(--bg-warm); border-color: var(--brand-red);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(214, 25, 35, .08);
}
.toc-list a:hover::before { opacity: 1; }
.toc-list a:hover .ch-num { color: var(--brand-red); }
.ch-num {
  color: var(--brand-red-hover); font-weight: 800;
  min-width: 4rem; flex-shrink: 0;
  letter-spacing: .02em; font-size: .95rem;
  transition: color .18s ease;
}
.ch-title {
  color: var(--fg); flex: 1;
  font-weight: 600; font-size: 1.02rem;
  overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.toc-part {
  color: var(--brand-red); font-weight: 800;
  border-bottom: 1px solid var(--border); padding-bottom: .4rem;
  margin-top: 2.5rem; letter-spacing: -0.01em; font-size: 1.1rem;
}
#site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247, 244, 238, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: .9rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
}
.header-logo {
  color: var(--fg); font-weight: 800; text-decoration: none;
  font-size: 1.02rem; letter-spacing: -0.01em;
}
.header-logo::before {
  content: ""; display: inline-block;
  width: 10px; height: 10px; background: var(--brand-red);
  border-radius: 50%; margin-right: .55rem; vertical-align: middle;
  box-shadow: 0 0 10px rgba(214, 25, 35, .4);
}
.header-links { display: flex; gap: 1.2rem; }
.header-links a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; }
.header-links a:hover { color: var(--brand-red-hover); }
#site-footer {
  border-top: 1px solid var(--border); margin-top: 4rem;
  padding: 2rem 1.5rem; text-align: center; color: var(--muted); font-size: .9em;
}
.sidebar-nav {
  position: fixed; left: 2rem; top: 6rem;
  width: 220px;
  background: var(--panel); border: 1px solid var(--border); border-radius: .4rem;
  padding: 1rem; font-size: .88em;
  max-height: 72vh; overflow-y: auto;
}
.sidebar-nav strong { display: block; color: var(--fg); font-size: .92em; margin-bottom: .5rem; letter-spacing: .02em; }
.sidebar-nav a {
  color: var(--muted); text-decoration: none; display: block;
  padding: .3rem .4rem; border-left: 2px solid transparent;
  line-height: 1.4; border-radius: 0 .25rem .25rem 0;
  transition: color .15s, border-color .15s, background .15s;
}
.sidebar-nav a:hover { color: var(--fg); background: rgba(214, 25, 35, .06); }
.sidebar-nav a.active {
  color: var(--brand-red-hover); border-left-color: var(--brand-red);
  background: rgba(214, 25, 35, .1);
  font-weight: 600;
}
.cite-highlight { background: rgba(214, 25, 35, 0.18); transition: background 2s ease; }

/* Chapter navigation (prev/toc/next) */
.chapter-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 4rem; padding: 1.5rem 0 1rem;
  border-top: 1px solid var(--border);
}
.chapter-nav a {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem; border-radius: .4rem;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--fg); text-decoration: none; font-size: .9rem;
  transition: background .15s, border-color .15s, transform .1s;
  max-width: 42%;
}
.chapter-nav a:hover {
  border-color: var(--brand-red); background: var(--bg-warm);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(214, 25, 35, .1);
}
.chapter-nav .nav-arrow { color: var(--brand-red); font-size: 1.1rem; font-weight: 700; flex-shrink: 0; }
.chapter-nav .nav-text { display: flex; flex-direction: column; overflow: hidden; }
.chapter-nav .nav-label { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.chapter-nav .nav-chnum { color: var(--fg); font-weight: 700; font-size: .92rem; }
.chapter-nav a:hover .nav-chnum { color: var(--brand-red); }
.chapter-nav .nav-prev .nav-text { align-items: flex-start; }
.chapter-nav .nav-next .nav-text { align-items: flex-end; }
.chapter-nav .nav-toc {
  color: var(--muted); font-size: .82rem; font-weight: 500;
  padding: .55rem .9rem; background: transparent; border-color: transparent;
}
.chapter-nav .nav-toc:hover { color: var(--brand-red); background: var(--panel); border-color: var(--border); }
.chapter-nav .nav-placeholder { flex: 0 0 auto; width: 0; }
@media (max-width: 600px) {
  .chapter-nav { gap: .5rem; }
  .chapter-nav a { padding: .55rem .8rem; font-size: .85rem; }
  .chapter-nav .nav-label { display: none; }
}

/* Back-to-top floating button */
.top-btn {
  position: fixed; right: 2rem; bottom: 2rem;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--brand-red); color: #fff;
  border: none; font-size: 1.4rem; font-weight: 700; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s, background .15s, transform .1s;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(214, 25, 35, .3);
}
.top-btn.visible { opacity: 1; visibility: visible; }
.top-btn:hover { background: var(--brand-red-dim); transform: translateY(-2px); }

/* Section fade-in on scroll */
.chapter-content h2, .chapter-content h3 { scroll-margin-top: 5rem; }
.chapter-content > p, .chapter-content > h2, .chapter-content > h3,
.chapter-content > ul, .chapter-content > ol, .chapter-content > figure,
.chapter-content > .md-table {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.chapter-content > .fade-in-done {
  opacity: 1; transform: translateY(0);
}
/* 첫 로드 시 상단 chapter-meta와 처음 몇 요소는 즉시 표시 */
.chapter-meta, .chapter-nav { opacity: 1 !important; transform: none !important; }
.lang-select { display: flex; justify-content: center; gap: 1rem; padding-top: 30vh; }
.lang-card {
  background: var(--panel); border: 1px solid var(--border);
  padding: 2rem 3rem; border-radius: .5rem; font-size: 1.2rem;
  color: var(--fg); text-decoration: none; font-weight: 600;
}
.lang-card:hover { border-color: var(--brand-red); color: var(--brand-red-hover); }
@media (max-width: 1100px) {
  .sidebar-nav { display: none; }
}
@media (max-width: 768px) {
  main { padding: 1rem; }
  .chapter-title { font-size: 1.7rem; }
}