/* ===================== 공급망지도 (SupplyMap) — 스타일 ===================== */

:root{
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);
  --success-text:   #006300;

  /* categorical (order fixed — do not cycle) */
  --series-1: #2a78d6; /* blue    -> 소재 */
  --series-2: #eb6834; /* orange  -> 부품 */
  --series-3: #1baf7a; /* aqua    -> 장비 */
  --series-4: #eda100; /* yellow  -> 계열사 */
  --series-5: #e87ba4; /* magenta -> 완성품 */
  --series-6: #008300; /* green   -> 서비스 */
  --series-7: #7c5cbf; /* purple  -> 사업부문 */
  --series-8: #5b7083; /* slate   -> 주요고객 */

  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);
    --success-text:   #0ca30c;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9b7fd4;
    --series-8: #7f97ac;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page-plane:     #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --baseline:       #383835;
  --border:         rgba(255,255,255,0.10);
  --success-text:   #0ca30c;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9b7fd4;
  --series-8: #7f97ac;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  background: var(--page-plane);
  color: var(--text-primary);
  line-height: 1.55;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; }

/* ---------- layout shell ---------- */
.site-header{
  position: sticky; top:0; z-index:20;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.site-header-inner{
  max-width: 1120px; margin: 0 auto;
  padding: 14px 20px;
  display:flex; align-items:center; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:18px; letter-spacing:-0.02em;
  white-space:nowrap;
}
.brand-mark{
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--series-1), var(--series-3));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:800;
}
.site-nav{ display:flex; gap:4px; margin-left:auto; }
.site-nav a{
  padding:8px 12px; border-radius:999px; font-size:14px; color: var(--text-secondary);
}
.site-nav a:hover{ background: var(--page-plane); color: var(--text-primary); }
.site-nav a.active{ background: var(--text-primary); color: var(--surface-1); }

.container{ max-width: 1120px; margin: 0 auto; padding: 32px 20px 80px; }

/* ---------- hero / search ---------- */
.hero{ padding: 28px 0 8px; }
.hero h1{ font-size: clamp(26px, 4vw, 36px); margin: 0 0 8px; letter-spacing:-0.02em; }
.hero p{ color: var(--text-secondary); max-width: 640px; margin:0; font-size:15.5px; }

.search-box{
  margin-top:22px;
  display:flex; align-items:center; gap:10px;
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
}
.search-box input{
  flex:1; border:none; outline:none; background:transparent;
  font-size:15px; color: var(--text-primary);
}
.search-box input::placeholder{ color: var(--text-muted); }
.search-icon{ color: var(--text-muted); font-size:16px; }

.filter-row{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.chip-btn{
  border:1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary); font-size:13px; padding:6px 12px;
  border-radius:999px; cursor:pointer;
}
.chip-btn:hover{ color: var(--text-primary); }
.chip-btn.active{ background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }

/* ---------- section headings ---------- */
.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  margin: 36px 0 14px;
}
.section-title h2{ font-size:19px; margin:0; letter-spacing:-0.01em; }
.section-title .hint{ font-size:13px; color: var(--text-muted); }

/* ---------- company grid ---------- */
.company-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.company-card{
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:18px;
  display:flex; flex-direction:column; gap:10px;
  transition: border-color .15s ease, transform .15s ease;
}
.company-card:hover{ border-color: var(--series-1); transform: translateY(-1px); }
.company-card-top{ display:flex; align-items:center; gap:10px; }
.company-logo{
  width:40px; height:40px; border-radius:10px;
  background: var(--page-plane); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color: var(--text-secondary);
  flex-shrink:0;
}
.company-name{ font-weight:700; font-size:16px; }
.company-meta{ font-size:12.5px; color: var(--text-muted); }
.company-oneliner{ font-size:13.5px; color: var(--text-secondary); flex:1; }
.company-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; color: var(--text-muted);
  border-top:1px dashed var(--gridline); padding-top:10px; margin-top:2px;
}
.supplier-count{ font-weight:700; color: var(--text-primary); }

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge-dot{ width:7px; height:7px; border-radius:50%; }
.badge[data-cat="소재"]  { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 14%, transparent); }
.badge[data-cat="부품"]  { color: var(--series-2); background: color-mix(in srgb, var(--series-2) 14%, transparent); }
.badge[data-cat="장비"]  { color: var(--series-3); background: color-mix(in srgb, var(--series-3) 14%, transparent); }
.badge[data-cat="계열사"]{ color: #8a6d00; background: color-mix(in srgb, var(--series-4) 18%, transparent); }
.badge[data-cat="완성품"]{ color: var(--series-5); background: color-mix(in srgb, var(--series-5) 14%, transparent); }
.badge[data-cat="서비스"]{ color: var(--series-6); background: color-mix(in srgb, var(--series-6) 14%, transparent); }
.badge[data-cat="사업부문"]{ color: var(--series-7); background: color-mix(in srgb, var(--series-7) 14%, transparent); }
.badge[data-cat="주요고객"]{ color: var(--series-8); background: color-mix(in srgb, var(--series-8) 14%, transparent); }
.badge .badge-dot[data-cat="소재"]  { background: var(--series-1); }
.badge .badge-dot[data-cat="부품"]  { background: var(--series-2); }
.badge .badge-dot[data-cat="장비"]  { background: var(--series-3); }
.badge .badge-dot[data-cat="계열사"]{ background: var(--series-4); }
.badge .badge-dot[data-cat="완성품"]{ background: var(--series-5); }
.badge .badge-dot[data-cat="서비스"]{ background: var(--series-6); }
.badge .badge-dot[data-cat="사업부문"]{ background: var(--series-7); }
.badge .badge-dot[data-cat="주요고객"]{ background: var(--series-8); }

/* ---------- detail page ---------- */
.breadcrumb{ font-size:13px; color: var(--text-muted); margin-bottom:14px; }
.breadcrumb a:hover{ color: var(--text-primary); text-decoration:underline; }

.detail-hero{
  display:flex; gap:18px; align-items:flex-start;
  background: var(--surface-1); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding:24px;
}
.detail-hero .company-logo{ width:56px; height:56px; font-size:18px; border-radius:14px; }
.detail-hero h1{ font-size:24px; margin:0 0 6px; letter-spacing:-0.02em; }
.detail-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 10px; font-size:12.5px; color:var(--text-muted); }
.detail-tags span{ background: var(--page-plane); border:1px solid var(--border); padding:3px 10px; border-radius:999px; }
.detail-oneliner{ color: var(--text-secondary); font-size:14.5px; max-width:640px; }
.detail-note{
  margin-top:14px; padding:12px 14px; border-radius: var(--radius-md);
  background: var(--page-plane); border:1px dashed var(--gridline);
  font-size:13px; color: var(--text-secondary);
}

.legend-row{ display:flex; flex-wrap:wrap; gap:8px; margin: 20px 0 6px; }

/* category groups */
.cat-group{ margin-top:22px; }
.cat-group-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cat-group-head h3{ font-size:15px; margin:0; }
.cat-group-head .count{ font-size:12.5px; color: var(--text-muted); }

.supplier-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background: var(--surface-1); border:1px solid var(--border);
  border-radius: var(--radius-md); overflow:hidden;
}
.supplier-table th{
  text-align:left; font-size:12px; color: var(--text-muted);
  font-weight:600; padding:10px 14px; background: var(--page-plane);
  border-bottom:1px solid var(--gridline);
}
.supplier-table td{
  padding:12px 14px; font-size:13.5px; border-bottom:1px solid var(--gridline);
  vertical-align:top;
}
.supplier-table tr:last-child td{ border-bottom:none; }
.supplier-name{ font-weight:700; }
.supplier-ticker{ color: var(--text-muted); font-size:12px; font-variant-numeric: tabular-nums; }
.source-link{ font-size:12.5px; color: var(--series-1); }
.source-link:hover{ text-decoration:underline; }

/* ---------- about / disclaimer ---------- */
.prose{ max-width: 720px; font-size:14.5px; color: var(--text-secondary); }
.prose h2{ color: var(--text-primary); font-size:19px; margin-top:28px; }
.prose h2:first-child{ margin-top:0; }
.disclaimer-box{
  margin-top:16px; padding:16px 18px; border-radius: var(--radius-md);
  background: var(--page-plane); border:1px solid var(--border);
  font-size:13px; color: var(--text-secondary);
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--border); margin-top:60px;
  padding: 22px 20px 40px; color: var(--text-muted); font-size:12.5px;
}
.site-footer-inner{ max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a:hover{ color: var(--text-primary); text-decoration:underline; }

/* ---------- empty state ---------- */
.empty-state{
  text-align:center; padding:60px 20px; color: var(--text-muted);
}

@media (max-width: 640px){
  .site-nav{ display:none; }
  .detail-hero{ flex-direction:column; }
  .supplier-table thead{ display:none; }
  .supplier-table, .supplier-table tbody, .supplier-table tr, .supplier-table td{ display:block; width:100%; }
  .supplier-table tr{ padding:10px 0; border-bottom:1px solid var(--gridline); }
  .supplier-table td{ border-bottom:none; padding:3px 14px; }
  .supplier-table td:before{
    content: attr(data-label); display:block; font-size:11px; color: var(--text-muted); margin-bottom:2px;
  }
}