:root {
  --bg: #f3f0e8;
  --paper: #fffdf8;
  --ink: #1c2416;
  --muted: #5c6556;
  --line: #e4ddd0;
  --link: #1f5c45;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
}
a { color: var(--link); }
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 22px 28px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.brand { color: var(--ink); font-weight: 650; font-size: 18px; text-decoration: none; }
.brand span { color: var(--muted); font-weight: 500; margin-left: 8px; font-size: 13px; }
.nav { display: flex; gap: 16px; }
.nav a { color: var(--muted); font-size: 14px; text-decoration: none; }
.nav a.on { color: var(--ink); font-weight: 650; }
.host { color: var(--muted); font-size: 13px; }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.stat {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}
.stat b { display: block; font-size: 28px; letter-spacing: -0.03em; }
.stat span { color: var(--muted); font-size: 13px; }
.stat.on { border-color: var(--link); }
.section-label { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.cat {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.cat em { font-style: normal; color: var(--muted); }
.cat.on { border-color: var(--link); color: var(--link); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 48px; }
h1 { margin: 0 0 8px; font-size: 32px; font-weight: 650; letter-spacing: -0.03em; }
.wrap h2 { margin: 0 0 12px; font-size: 18px; font-weight: 650; }
.lead { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.count { margin: -8px 0 14px; color: var(--muted); font-size: 13px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.pager button, .pager b {
  margin: 0;
  min-width: 36px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
}
.pager button { background: var(--paper); color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.pager button:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager b { background: var(--link); color: #fff; font-weight: 650; }
.pager .gap { color: var(--muted); padding: 0 2px; }
.search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  margin-bottom: 18px;
}
.hyperbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.hyperbar .search { flex: 1 1 240px; margin-bottom: 0; }
.export {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink, inherit);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.export:hover { border-color: var(--link); color: var(--link); }
.meta.off { color: var(--muted); opacity: 0.7; }
/* HyperAsset: 6열 레이아웃 그대로 쓰되 줄 전체를 펼침 버튼으로 */
.hrow { }
button.hhead { width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.hhead .tw { display: inline-block; color: var(--muted); font-size: 11px; transition: transform 0.12s; margin-right: 2px; }
.hrow.open .hhead .tw { transform: rotate(90deg); }
.list { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.row {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(120px, 0.9fr) 64px 70px 48px minmax(200px, 1.6fr);
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.row[hidden] { display: none; }
.row:first-child { border-top: 0; }
.row.head { color: var(--muted); font-size: 12px; }
.row:not(.head):hover { background: #f7f4ec; }
.name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.vendor, .license { font-size: 14px; line-height: 1.45; min-width: 0; }
.vendor { overflow-wrap: anywhere; }
.cat-cell { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ltype { font-size: 13px; font-weight: 650; letter-spacing: 0.02em; }
/* 목록에서는 한 줄만. 전체 문장은 줄을 눌러 상세에서 본다. */
.row .license { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 타입 칸. 넓은 화면에서는 grid 칸이 되고, 좁은 화면에서는 배지로 모인다. */
.row .flags { display: contents; }
.tag {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #faf8f2;
  color: var(--muted);
  white-space: nowrap;
}
.tag-allowed, .tag-free { color: #1f5c45; border-color: #bcd9c9; background: #eaf5ee; }
.tag-forbidden, .tag-paid { color: #8d3b32; border-color: #e4c2bc; background: #f9ecea; }
.tag-conditional, .tag-freemium { color: #7a5a12; border-color: #e8d6a8; background: #f9f3e2; }
/* 판단하지 않은 칸. 넓은 화면에서는 grid 자리만 차지하고, 좁은 화면에서는 아예 없앤다. */
.tag-empty { display: block; }
.v .flags { display: flex; flex-wrap: wrap; gap: 6px; }
.back { display: inline-block; margin-bottom: 14px; font-size: 14px; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 22px 18px;
}
.field {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.field:first-child { border-top: 0; }
.k { color: var(--muted); font-size: 13px; padding-top: 2px; }
.v { font-size: 16px; line-height: 1.55; }
.v .meta { margin-top: 4px; color: var(--muted); font-size: 12px; }
.lookups { margin-top: 18px; }
.lookups h2 { margin: 12px 0 0; font-size: 18px; }
.lookups .field:first-of-type { border-top: 0; }
.aliases { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.suggest, .proposals { margin-top: 22px; }
.suggest h2, .proposals h2 { margin: 0 0 6px; font-size: 18px; }
.suggest p, .empty { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
textarea, input[type="url"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
}
textarea { min-height: 96px; resize: vertical; }
button {
  margin-top: 14px;
  background: var(--link);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: default; }
.proposal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
}
.proposal p { margin: 0; font-size: 15px; line-height: 1.5; }
.proposal .meta { margin-top: 6px; color: var(--muted); font-size: 12px; }
.err { color: #8d3b32; font-size: 14px; }
.note { margin-top: 28px; color: var(--muted); font-size: 12px; }
/* ── NCC 카탈로그 (/ncc) ── */
.licbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lic {
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.lic:hover { border-color: var(--link); color: var(--link); }
.lic.on { background: var(--link); border-color: var(--link); color: #fff; font-weight: 650; }
.nccheadrow, .ncchead {
  display: grid;
  grid-template-columns: 16px minmax(140px, 1fr) 52px 64px 64px;
  gap: 10px;
  align-items: center;
}
.nccheadrow { padding: 12px 16px; }
.nccheadrow > div:nth-child(n+4) { text-align: right; }
.nccrow { border-top: 1px solid var(--line); }
.nccrow:first-child { border-top: 0; }
.ncchead {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ncchead:hover { background: #f7f4ec; }
.ncchead .tw { color: var(--muted); font-size: 11px; transition: transform 0.12s; }
.nccrow.open .ncchead .tw { transform: rotate(90deg); }
.ncchead .nname { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.ncchead .ltype { font-size: 13px; font-weight: 650; }
.ncchead .nn { text-align: right; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.nccdetail { padding: 4px 16px 18px; background: #faf8f2; border-top: 1px solid var(--line); }
.nccdetail[hidden] { display: none; }
.ncddetail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vhead { color: var(--muted); font-size: 12px; margin: 12px 0 8px; font-weight: 650; }
.vrow {
  display: grid;
  grid-template-columns: 1fr auto 64px;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}
.vrow:hover { border-color: var(--link); }
.vname { font-weight: 500; overflow-wrap: anywhere; }
.vpub { color: var(--muted); font-size: 13px; }
.vn { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.rulebox .ruletree { font-size: 14px; }
.rnode { margin: 0 0 6px; }
.rop {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  margin-bottom: 6px;
}
.rkids { margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.rcond {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  margin-bottom: 6px;
  line-height: 1.5;
}
.rcond.exclude { border-color: #e4c2bc; background: #f9ecea; }
.rcond .cmp { color: var(--link); font-size: 12px; }
.rcond.exclude .cmp { color: #8d3b32; }
.rtag { color: var(--muted); font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.rsub { margin-top: 6px; margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--line); }
details.raw { margin-top: 10px; }
details.raw summary { color: var(--muted); font-size: 12px; cursor: pointer; }
details.raw pre {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  overflow: auto;
  max-height: 320px;
}
.loading { color: var(--muted); font-size: 14px; padding: 10px 0; }

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .row.head { display: none; }
  .row .flags { display: flex; flex-wrap: wrap; gap: 6px; }
  .row .flags:not(:has(.tag)) { display: none; }
  .row .cat-cell:empty, .row .ltype:empty { display: none; }
  .row .ltype:not(:empty)::before { content: "코드 "; color: var(--muted); font-weight: 400; }
  .row .tag::before { content: attr(data-k) " "; }
  .tag-empty { display: none; }
  .row .license { white-space: normal; }
  .field { grid-template-columns: 1fr; gap: 4px; }
  .nccheadrow { display: none; }
  .ncchead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
  .ncchead .nname { flex: 1 1 auto; }
  .ncchead .nn { text-align: left; font-size: 13px; }
  .ncddetail-grid { grid-template-columns: 1fr; gap: 10px; }
}