
:root{
  --bg:#f5f0e8;
  --surface:rgba(255,255,255,.74);
  --ink:#14120f;
  --muted:#5d554e;
  --line:rgba(20,18,15,.12);
  --deep:#22333b;
  --point-blue:#1655C0;
  --point-orange:#FC4C02;
  --max:1200px;
  --shadow:0 20px 50px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#f7f2ea 0%,#f1ece3 100%);
  color:var(--ink);
  line-height:1.68;
  /* Global font rule: English glyphs use Space Grotesk first, Korean glyphs fall back to Orbit */
  font-family:"Space Grotesk","Orbit",ui-sans-serif,system-ui,sans-serif;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 32px));margin:0 auto}
.topbar{position:sticky;top:0;z-index:40;background:rgba(247,242,234,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px}
.brand{display:flex;flex-direction:column;gap:2px}
.brand-mark{font-size:.88rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.brand-sub{font-weight:700;color:var(--point-orange)}
.nav-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.nav-links a:hover{color:var(--point-orange)}
.nav-cta,.btn-primary{background:linear-gradient(135deg,var(--point-blue),#1b66e5);color:#fff;font-weight:700}
.nav-cta,.btn{min-height:48px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.btn{border:1px solid transparent}
.btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.nav-cta:hover,.btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.hero,.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);display:grid;align-items:end}
.hero{min-height:78vh}
.page-hero{min-height:58vh}
.hero-media{position:absolute;inset:0;background-size:cover;background-position:center}
.hero::before,.page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(15,13,11,.68) 0%, rgba(15,13,11,.24) 100%),
  radial-gradient(circle at 80% 12%, rgba(252,76,2,.16), transparent 28%),
  radial-gradient(circle at 18% 82%, rgba(22,85,192,.16), transparent 22%);
}
.hero-inner{position:relative;z-index:1;padding:110px 0 64px;color:#fff}
.hero-label{
  display:inline-flex;gap:14px;align-items:center;letter-spacing:.22em;text-transform:uppercase;
  font-size:1.06rem;font-weight:500;color:rgba(255,255,255,.82);margin-bottom:18px;
}
.hero-label::before{content:"";width:52px;height:1px;background:rgba(255,255,255,.44)}
.hero-title{margin:0;font-size:clamp(3.4rem, 8.8vw, 8rem);line-height:.9;letter-spacing:-.06em;white-space:nowrap}
.lead{max-width:720px;margin:18px 0 0;font-size:clamp(1rem,2vw,1.26rem);color:rgba(255,255,255,.84)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.intro-strip{border-bottom:1px solid var(--line);background:rgba(255,255,255,.4)}
.intro-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;padding:24px 0}
.intro-card small{display:block;text-transform:uppercase;letter-spacing:.14em;color:var(--point-orange);margin-bottom:8px}
.section{padding:84px 0}
.section-tight{padding:56px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;color:var(--point-orange);margin-bottom:10px}
.section h2{margin:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;letter-spacing:-.04em}
.section-desc{max-width:620px;color:var(--muted);margin:12px 0 0}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.image-card{position:relative;min-height:460px;border-radius:28px;overflow:hidden;background:#d9d0c5;box-shadow:var(--shadow)}
.image-card .media{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.01);transition:transform .45s ease}
.image-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,13,11,.04) 0%, rgba(15,13,11,.58) 100%)}
.image-card:hover .media{transform:scale(1.06)}
.image-card .content{position:absolute;inset:auto 0 0 0;z-index:2;padding:24px;color:#fff}
.image-card small{display:block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:10px}
.image-card h3{margin:0;font-size:1.6rem;letter-spacing:-.03em;text-shadow:0 4px 14px rgba(0,0,0,.18)}
.image-card p{margin:10px 0 0;color:rgba(255,255,255,.84)}
.feature-grid,.split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.panel,.metric-card,.article-card,.contact-card,.markdown,.dash-card,.transparency-link-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.panel{overflow:hidden}
.panel-media{min-height:520px;background-size:cover;background-position:center}
.panel-body{padding:28px}
.metric-card,.article-card,.contact-card,.dash-card,.transparency-link-card{padding:22px}
.metric-card small,.dash-card .label{display:block;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.metric-card strong{font-size:1.28rem;letter-spacing:-.03em}
.data-grid,.article-grid,.contact-grid,.simple-grid,.dash-grid,.transparency-links{display:grid;gap:18px}
.data-grid{grid-template-columns:repeat(3,1fr)}
.article-grid{grid-template-columns:repeat(3,1fr)}
.contact-grid{grid-template-columns:repeat(3,1fr)}
.simple-grid{grid-template-columns:repeat(2,1fr)}
.dash-grid{grid-template-columns:repeat(3,1fr)}
.transparency-links{grid-template-columns:repeat(2,1fr)}
.meta{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.article-card h3,.transparency-link-card h3{margin:0 0 12px;font-size:1.28rem;line-height:1.18;letter-spacing:-.03em}
.article-card:hover,.metric-card:hover,.contact-card:hover,.dash-card:hover,.transparency-link-card:hover{border-color:rgba(22,85,192,.22)}
.article-card:hover h3,.transparency-link-card:hover h3{color:var(--point-blue)}
.copy p{margin:0 0 14px;color:rgba(20,18,15,.82)}
.bullets{display:grid;gap:12px;margin-top:18px}
.bullets div{padding:16px 18px;background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:18px}
.footer{border-top:1px solid var(--line);padding:28px 0 44px;color:var(--muted);font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
.markdown{max-width:820px;margin:0 auto;padding:42px 32px}
.markdown h1,.markdown h2,.markdown h3{line-height:1.1;letter-spacing:-.04em;margin-top:1.4em}
.markdown h1:first-child{margin-top:0}
.markdown a{color:var(--point-blue);text-decoration:underline;text-underline-offset:2px}
.tag,.filter-pill{
  display:inline-flex;padding:9px 14px;border-radius:999px;background:rgba(22,85,192,.08);
  color:var(--point-blue);font-size:.84rem;margin-right:8px;margin-bottom:8px;border:1px solid transparent;cursor:pointer
}
.filter-pill.active{background:var(--point-blue);color:#fff}
.empty-state{padding:42px;text-align:center;border:1px dashed var(--line);border-radius:24px;color:var(--muted)}
.hidden{display:none !important}
.helper{font-size:.9rem;color:var(--muted)}
@media (max-width:1100px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.split,.intro-grid,.footer-grid,.data-grid,.article-grid,.contact-grid,.simple-grid,.dash-grid,.transparency-links{grid-template-columns:1fr}
}
@media (max-width:980px){ .hero-title{white-space:normal} }
@media (max-width:720px){
  .nav-links{display:none}
  .hero{min-height:70vh}
  .hero-inner{padding:92px 0 48px}
  .card-grid{grid-template-columns:1fr}
  .image-card{min-height:360px}
  .panel-media{min-height:320px}
  .section{padding:64px 0}
}
