/* ChainScope Heritage v5 — editorial intelligence design system */
:root {
  --paper: #f4f5f1;
  --paper2: #e9eee8;
  --white: #ffffff;
  --card: #ffffff;
  --forest: #0e3026;
  --forest-d: #08251d;
  --forest2: #355d50;
  --gold: #c5a665;
  --gold-d: #9c7a39;
  --cream: #f7f3e9;
  --ink: #19221f;
  --ink2: #5d6964;
  --ink3: #8b9691;
  --line: #dfe5df;
  --line2: #d4ddd6;
  --tintg: #edf2ee;
  --up: #a34d39;
  --up-bg: #f6e9e4;
  --dn: #4d6f88;
  --dn-bg: #e8eff4;
  --sage: #2e7359;
  --shadow: 0 18px 46px -32px rgba(14, 48, 38, .42);
  --shadow-h: 0 24px 58px -30px rgba(14, 48, 38, .48);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 8% 12%, rgba(197, 166, 101, .08), transparent 24rem),
    var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.68;
  letter-spacing: -.012em;
}
.wrap { max-width: 1220px; padding-inline: 28px; }

/* Calm, spacious navigation */
header.top {
  background: rgba(10, 40, 31, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 30px rgba(7, 28, 22, .12);
  backdrop-filter: blur(18px);
}
.top-inner { height: 68px; gap: 20px; }
.brand { font-size: 19px; letter-spacing: -.5px; }
.brand .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e2c77e, #ad8438);
  box-shadow: 0 0 0 5px rgba(197, 166, 101, .11);
}
.brand small {
  color: #d7bd7e;
  background: transparent;
  border: 1px solid rgba(215, 189, 126, .25);
  padding: 3px 8px;
}
.nav, .tabs { gap: 5px; margin-left: 10px; }
.nav a, .tabs button {
  color: rgba(238, 244, 240, .7);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: -.1px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.nav a:hover, .tabs button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.nav a.on, .tabs button.on {
  color: var(--forest);
  background: #f4f1e8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.mock {
  color: #f0dfb6;
  background: rgba(197, 166, 101, .13);
  border: 1px solid rgba(197, 166, 101, .28);
  padding: 6px 12px;
  letter-spacing: .35px;
}

/* Homepage hero */
.hero {
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: 82px 0 76px;
  background:
    radial-gradient(circle at 84% 28%, rgba(205, 173, 103, .2), transparent 17rem),
    linear-gradient(128deg, #0b2a21 0%, #103c2f 58%, #163d31 100%);
}
.hero::after {
  right: -90px;
  bottom: -210px;
  width: 500px;
  height: 500px;
  border-color: rgba(225, 200, 139, .19);
}
.hero::before {
  right: 8%;
  bottom: -120px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at 38% 35%, rgba(211, 178, 104, .26), transparent 64%);
  filter: blur(3px);
}
.hero .kick { font-size: 11px; letter-spacing: 4px; color: #d9bd7b; }
.hero h1 {
  max-width: 780px;
  margin-top: 18px;
  font-size: clamp(38px, 5.1vw, 62px);
  line-height: 1.08;
  letter-spacing: -2.7px;
}
.hero h1 b { color: #d7b76e; font-weight: 700; }
.hero .sub {
  max-width: 680px;
  margin-top: 22px;
  color: rgba(240, 236, 224, .72);
  font-family: var(--sans);
  font-style: normal;
  font-size: 16px;
  line-height: 1.75;
}
.hero .stats { gap: 0; margin-top: 34px; }
.hero .stats div {
  min-width: 120px;
  border-left: 1px solid rgba(218, 188, 119, .45);
  padding: 2px 28px 2px 16px;
}
.hero .stats b { font-size: 25px; letter-spacing: -1px; }
.hero .stats span { margin-top: 3px; color: rgba(218, 230, 223, .58); }
.hero .trust { margin-top: 28px; gap: 9px; }
.hero .trust span {
  color: rgba(246, 242, 231, .76);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  padding: 6px 12px;
  font-weight: 500;
}

/* Editorial section rhythm */
section.blk { padding: 70px 0; }
section.blk + section.blk { border-top: 1px solid rgba(31, 54, 46, .08); }
.sh { gap: 14px; margin-bottom: 10px; }
.sh h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -1.1px; }
.sh .en { color: var(--gold-d); letter-spacing: 2.4px; }
.sh .rule { background: linear-gradient(90deg, rgba(39, 72, 61, .16), transparent); }
.ssub { max-width: 830px; margin-bottom: 28px; color: var(--ink2); font-size: 14.5px; }

/* Controls */
.yearbar { gap: 8px; margin-bottom: 26px; }
.ychip, .axchip, .catpill, .relchip {
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(39, 72, 61, .11);
  border-radius: 999px;
  box-shadow: 0 8px 24px -22px rgba(14, 48, 38, .7);
}
.ychip { padding: 8px 18px; font-weight: 600; }
.ychip.on, .axchip.on { background: var(--forest); color: #fff; border-color: var(--forest); }

/* Soft cards: fewer lines, stronger hierarchy */
.sgrid, .scoregrid, .toolgrid, .diarygrid { gap: 20px; }
.stile, .scard, .tcard, .dcard, .ranktbl, .filterbar {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(39, 72, 61, .085);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.stile { min-height: 220px; padding: 22px; }
.stile::before { display: none; }
.stile:hover, .scard:hover, .tcard:hover, .dcard:hover {
  transform: translateY(-3px);
  border-color: rgba(156, 122, 57, .26);
}
.stile .t-top { align-items: center; gap: 12px; }
.stile .em {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tintg);
  font-size: 20px;
}
.stile h4 { font-size: 17px; letter-spacing: -.5px; }
.stile .mo { border-radius: 999px; padding: 3px 8px; }
.stile .gy { margin: 14px 0 10px; border: 0; background: #f2eee3; }
.stile p { font-size: 13px; line-height: 1.65; }
.stile .lead { margin-top: 16px; }
.stile .go { margin-top: 10px; }

.lead-grid { gap: 22px; }
.lead-hero, .eduband {
  border-radius: 26px;
  box-shadow: 0 26px 64px -38px rgba(4, 29, 21, .68);
  background: linear-gradient(138deg, #0c3025, #1d5a48);
}
.lead-hero { padding: 32px 34px; }
.lead-hero h3 { font-size: 32px; }
.ranktbl { overflow: hidden; }
.ranktbl .rt-h { padding: 14px 18px; background: #173d31; }
.ranktbl .rt-r { padding: 11px 18px; border-bottom-color: rgba(39, 72, 61, .08); }
.ranktbl .rt-r:hover { background: #f2f6f2; }

.filterbar { padding: 20px 22px; margin-bottom: 22px; }
.scard { padding: 20px; }
.scard .comp b { font-size: 34px; }
.tcard { padding: 24px; }
.tcard .ic {
  border-radius: 14px;
  background: #edf2ee;
  box-shadow: inset 0 0 0 1px rgba(39, 72, 61, .07);
}
.dcard { padding: 23px; border-top: 1px solid rgba(39, 72, 61, .085); }
.dcard h4 { font-family: var(--disp); font-size: 18px; }
.eduband { padding: 32px 34px; }
.eduband .txt b { font-family: var(--disp); font-style: normal; font-size: 22px; }
.srcnote {
  margin-top: 34px;
  padding: 18px 20px;
  background: rgba(232, 238, 233, .72);
  border: 0;
  border-radius: 18px;
}
footer.foot { padding: 32px 0; border-top-color: rgba(39, 72, 61, .09); }

/* Shared data-page shell */
.sec-title { font-size: 28px !important; letter-spacing: -1.1px !important; }
.sec-sub { max-width: 900px; font-size: 14px !important; line-height: 1.75 !important; }
.pagehead { padding: 42px 0 24px !important; }
.stab { gap: 24px !important; padding-bottom: 80px !important; }
.rail { padding: 4px !important; }
.rtab {
  margin-bottom: 8px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(39, 72, 61, .08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: none !important;
}
.rtab:hover { background: #fff !important; transform: translateX(2px); }
.rtab.sel { color: #fff !important; background: var(--forest) !important; border-color: var(--forest) !important; }
.detail {
  overflow: hidden;
  border: 1px solid rgba(39, 72, 61, .08) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 30px 70px -46px rgba(14, 48, 38, .58) !important;
}
.dhead {
  padding: 34px 36px 30px !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(211, 178, 104, .2), transparent 15rem),
    linear-gradient(138deg, #0c3025, #164638) !important;
}
.dhead h2 { font-size: 30px !important; letter-spacing: -1px !important; }
.dhead .ol { font-family: var(--sans) !important; font-style: normal !important; color: rgba(242, 238, 226, .72) !important; }
.dhead .kw span { border-radius: 999px !important; padding: 5px 10px !important; }
.dbody { padding: 28px 30px 34px !important; }
.mrow {
  overflow: hidden;
  border: 1px solid rgba(39, 72, 61, .08) !important;
  border-radius: 18px !important;
  background: #fbfcfa !important;
}
.mrow .m { min-height: 86px; padding: 18px !important; border-color: rgba(39, 72, 61, .08) !important; }
.mrow .m b { margin-top: 5px; font-size: 17px !important; }
.twocol { gap: 20px !important; }
.finbox, .futurebox, .radarbox, .research, .cons-wait {
  border: 1px solid rgba(39, 72, 61, .085) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px -34px rgba(14, 48, 38, .5);
}
.finbox, .futurebox, .radarbox { padding: 20px 22px !important; }
.futurebox { border-left: 1px solid rgba(39, 72, 61, .085) !important; }
.chain { gap: 10px !important; }
.cstage { border-radius: 15px !important; border-left-width: 0 !important; }
.cstage .cc b { border-radius: 9px !important; }
.research { padding: 22px 24px !important; background: linear-gradient(138deg, #0d3026, #1c5040) !important; }
.graph-shell { gap: 22px !important; }
.canvas-box { border-radius: 24px !important; }
.subtabs { padding: 6px !important; border: 0 !important; border-radius: 999px !important; }
.subtabs button { border-radius: 999px !important; }
.exptbl td.cell { border-radius: 12px !important; }

/* Responsive refinement */
@media (max-width: 820px) {
  .wrap { padding-inline: 20px; }
  .top-inner { height: auto; min-height: 64px; padding: 10px 0; gap: 8px 12px; }
  .brand { flex: 1 0 auto; }
  .nav, .tabs {
    order: 3;
    width: 100%;
    margin: 2px 0 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .nav a, .tabs button { flex: 0 0 auto; }
  .mock { font-size: 0; padding: 6px 9px; }
  .mock::after { content: "데이터 상태"; font-size: 9px; }
  .hero { min-height: 540px; padding: 70px 0 62px; }
  .hero h1 { letter-spacing: -1.8px; }
  .hero .stats div { min-width: 50%; padding: 8px 18px 8px 14px; }
  section.blk { padding: 52px 0; }
  .sh { align-items: flex-start; flex-wrap: wrap; }
  .sh .rule { display: none; }
  .stile { min-height: auto; }
  .stab { gap: 18px !important; }
  .rail {
    display: flex !important;
    gap: 8px;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 8px 12px 4px !important;
    scrollbar-color: rgba(31, 81, 64, .32) transparent;
  }
  .rail .rlabel { flex: 0 0 100%; }
  .rtab { flex: 0 0 auto; min-width: 142px; margin: 0 !important; }
  .detail { border-radius: 22px !important; }
  .dhead { padding: 26px 24px 24px !important; }
  .dhead h2 { font-size: 26px !important; }
  .dbody { padding: 22px 18px 26px !important; }
}

@media (max-width: 520px) {
  body { font-size: 14px; }
  .wrap { padding-inline: 18px; }
  .brand { font-size: 17px; }
  .brand small { display: none; }
  .hero { min-height: 510px; }
  .hero h1 { font-size: 39px; line-height: 1.1; }
  .hero .sub { font-size: 14px; }
  .hero .stats b { font-size: 21px; }
  .hero .trust span { font-size: 10px; }
  .yearbar .cnt { width: 100%; margin: 8px 0 0; }
  .sgrid, .scoregrid, .toolgrid, .diarygrid { grid-template-columns: 1fr; }
  .lead-hero, .eduband { padding: 26px 24px; border-radius: 22px; }
  .lead-hero .lstats { gap: 12px; flex-wrap: wrap; }
  .ranktbl { overflow-x: auto; }
  .ranktbl .rt-h, .ranktbl .rt-r { min-width: 560px; }
  .mrow { grid-template-columns: repeat(2, 1fr) !important; }
  .mrow .m:last-child { grid-column: span 2; }
  .chain { overflow-x: auto; padding-bottom: 8px; }
  .cstage { min-width: 145px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}