/* 학습 데이터셋 허브(datasets.html) — tokens.css·hub.css 위에 배경(오로라·그레인)·'고르기 전에' 상자·공통 조건·카드를 얹는다. 클래스는 dataset-* 로 분리한다. */
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:560px;height:560px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-220px;left:-140px;animation:dset1 21s ease-in-out infinite alternate}
.blob.b{width:460px;height:460px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:46%;right:-180px;animation:dset2 25s ease-in-out infinite alternate}
@keyframes dset1{to{transform:translate(70px,60px) scale(1.1)}}
@keyframes dset2{to{transform:translate(-60px,-40px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}
/* 스크립트가 켜는 필터 패널·0건 안내, 필터가 가린 카드 — 카드 display:flex 보다 앞서야 한다 */
.datasets [hidden]{display:none!important}

.datasets-main{padding-bottom:64px}
.phead{padding:62px 0 18px;position:relative;max-width:680px}
.phead h1{font-size:clamp(40px,6vw,72px);font-weight:700;font-family:"Space Grotesk",var(--font-sans);letter-spacing:-.03em;line-height:1}
.phead h1 .it{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--amber),var(--ember),var(--crim));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .16em 0 .04em}
.phead p{color:var(--txt-dim);font-size:16px;line-height:1.7;margin-top:18px;max-width:560px}

/* 고르기 전에 확인할 세 가지 */
.dataset-choose{margin-top:36px;scroll-margin-top:100px}
.dataset-choose h2,.dataset-catalog h2{font-size:22px;font-weight:600;margin:0 0 12px}
.dataset-choose-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;counter-reset:choose}
.dataset-choose-list li{counter-increment:choose;padding:16px 18px;border:1px solid var(--glass-line);border-radius:14px;background:rgba(var(--amber-rgb),.05);backdrop-filter:blur(14px)}
.dataset-choose-list h3{font-size:15.5px;font-weight:600;margin:0 0 6px;color:var(--txt)}
.dataset-choose-list h3::before{content:counter(choose,decimal-leading-zero);margin-right:8px;color:var(--amber);font-family:"Space Grotesk",var(--font-sans);font-size:13px}
.dataset-choose-list p{margin:0;font-size:13.5px;line-height:1.7;color:var(--read)}
.dataset-choose a,.dataset-common a,.dataset-elsewhere a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.dataset-section{margin-top:24px}
.datasets{display:grid;gap:36px}
/* AI 허브 공통 이용 조건 */
.dataset-common{scroll-margin-top:100px;padding:18px 22px 16px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);font-size:13.5px;line-height:1.7;color:var(--read)}
.dataset-common:target{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.dataset-common h2{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--txt)}
.dataset-common-note{margin:0 0 8px;color:var(--txt-dim);font-size:13px}
.dataset-common ul{margin:0;padding-left:20px}
.dataset-common li{margin:4px 0}
.dataset-common-src{margin:10px 0 0;font-size:12.5px;color:var(--txt-dim)}

/* 목록·필터 */
.dataset-catalog{scroll-margin-top:100px}
.dataset-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:0 0 12px;padding:14px 16px;border:1px solid var(--glass-line);border-radius:12px;background:var(--panel)}
.dataset-controls label{display:grid;gap:4px;font-size:12px;color:var(--txt-dim);min-width:0}
.dataset-controls input[type=search],.dataset-controls select{min-height:36px;max-width:100%;padding:6px 10px;border:1px solid var(--glass-line);border-radius:8px;background:transparent;color:var(--txt);font-size:14px}
.dataset-controls select option{background:var(--bg-2);color:var(--txt)}
.dataset-field-search{flex:1 1 220px}
#dataset-reset{min-height:36px;padding:0 14px;border:1px solid var(--glass-line);border-radius:999px;background:transparent;color:var(--txt);font:inherit;font-size:13px;cursor:pointer}
#dataset-reset:disabled{opacity:.45;cursor:default}
#dataset-count{color:var(--txt-dim);font-size:13px;margin:0 0 10px}
#dataset-empty{margin:16px 0 0;padding:14px 16px;border:1px dashed var(--glass-line);border-radius:12px;color:var(--read);font-size:14px}
.dataset-topic{margin-top:22px}
.dataset-topic-title{font-size:16px;font-weight:600;margin:0 0 10px;color:var(--txt)}
.dataset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}

/* 카드 */
.dataset{position:relative;scroll-margin-top:100px;display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);cursor:pointer;overflow-wrap:anywhere}
.dataset:target,.dataset.is-current{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.dataset h4{font-size:15.5px;line-height:1.4;margin:0}
.dataset h4 a{color:var(--txt)}
.dataset-sub{margin:-4px 0 0;font-size:13px;color:var(--txt-dim)}
.dataset-tags{display:flex;flex-wrap:wrap;gap:6px}
.dataset-tags span{padding:2px 8px;border:1px solid var(--glass-line);border-radius:999px;font-size:11.5px;color:var(--txt-dim)}
/* 이용 조건 배지는 모두 중립색 — '개방형'을 '써도 된다'는 신호로 읽지 않게 한다. 미확인만 점선. */
.dataset-tags :is(.dataset-unknowns,.dataset-license-unknown){border-style:dashed}
.dataset-facts{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:12.5px;line-height:1.55}
.dataset-facts div{display:contents}
.dataset-facts dt{color:var(--txt-dim);white-space:nowrap}
.dataset-facts dd{margin:0;color:var(--read);min-width:0}
.dataset-facts small{display:block;color:var(--txt-dim);font-size:12px}
.dataset-facts a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-size:12px}
.dataset-summary{margin:0;font-size:13.5px;line-height:1.65;color:var(--read)}
.dataset-point{font-size:13.5px;line-height:1.6;padding:8px 10px;border-radius:8px;background:rgba(var(--ember-rgb),.06)}
.dataset-point b{margin-right:6px;color:var(--amber)}
.dataset-related{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0;font-size:12.5px}
.dataset-related span{margin-right:4px;color:var(--txt-dim)}
.dataset-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin:auto 0 0;padding-top:4px;font-size:13px}
.dataset-foot span{color:var(--txt-dim);font-size:12px}

.dataset-elsewhere{margin:28px 0 0;font-size:13.5px;line-height:1.7;color:var(--txt-dim)}

/* 카드의 접힌 사양·MCP 줄 — 요약·소방 활용을 먼저 읽고 사양은 펼쳐 본다 */
.dataset-more{font-size:12.5px}
.dataset-more summary{width:max-content;cursor:pointer;color:var(--txt-dim);padding:2px 0}
.dataset-more summary:hover{color:var(--ember)}
.dataset-more[open] summary{margin-bottom:4px}
.dataset-tags .dataset-mcp-tag{border-color:rgba(var(--green-rgb),.55);color:var(--green)}
.dataset-mcp{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:12.5px;color:var(--txt-dim)}
.dataset-mcp a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* 한눈에 보기 — 분야 × 접근 방식 표, 점 하나 = 데이터셋 하나 */
.dataset-overview{margin-top:40px;scroll-margin-top:100px}
.dataset-overview h2,.dataset-ai h2{font-size:22px;font-weight:600;margin:0 0 8px}
.dmap-lead{margin:0 0 6px;font-size:14px;line-height:1.7;color:var(--txt-dim)}
.dmap-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;font-size:12.5px;color:var(--txt-dim)}
.dmap-legend>span{display:inline-flex;align-items:center;gap:6px}
.dmap-scroll{overflow-x:auto;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px)}
.dmap-table{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
.dmap-table th,.dmap-table td{padding:8px 10px;border-bottom:1px solid var(--glass-line);text-align:left;vertical-align:middle}
.dmap-table thead th{font-size:12px;font-weight:600;color:var(--txt-dim);white-space:nowrap}
.dmap-table tbody th,.dmap-table tfoot th{font-weight:600;color:var(--txt);white-space:nowrap}
.dmap-table th[scope=row] a{color:var(--txt)}
.dmap-table th[scope=row] a:hover{color:var(--ember)}
.dmap-table tfoot th,.dmap-table tfoot td{border-bottom:0}
.dmap-total{margin-left:8px;font-family:"Space Grotesk",var(--font-sans);font-size:12px;font-weight:500;color:var(--txt-dim)}
.dmap-n{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;min-height:30px;padding:2px 6px;margin:-2px -6px;border-radius:8px;color:var(--txt)}
.dmap-n:hover,.dmap-n:focus-visible{background:rgba(var(--ember-rgb),.08)}
.dmap-n b{font-family:"Space Grotesk",var(--font-sans);font-size:14px;font-weight:600}
.dmap-dots{display:flex;flex-wrap:wrap;gap:4px;max-width:132px}
.dmap-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--viz-2)}
.dmap-dot.is-domestic{background:var(--ember)}
.dmap-dot.is-mcp{outline:1.5px solid var(--green);outline-offset:1.5px}
.dmap-legend .dmap-dot.is-mcp{background:transparent}
.dmap-linked{font-size:12px;color:var(--txt-dim);white-space:nowrap}
.dmap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dmap-table th[scope=row]{position:sticky;left:0;z-index:1;background:var(--bg)}

/* AI로 데이터 찾기 — MCP 서버 카드와 AI가 읽는 목록 파일 */
.dataset-ai{margin-top:48px;scroll-margin-top:100px}
.dataset-ai-lead{max-width:760px;margin:0 0 4px;font-size:14px;line-height:1.75;color:var(--txt-dim)}
.dataset-ai-sub{margin:26px 0 12px;font-size:16px;font-weight:600;scroll-margin-top:100px}
.dmcp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.dmcp-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);overflow-wrap:anywhere;scroll-margin-top:100px}
.dmcp-card:target{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.dmcp-card h4{margin:0;font-size:15.5px;line-height:1.4}
.dmcp-card h4 a{color:var(--txt)}
.dmcp-provider{margin:-4px 0 0;font-size:13px;color:var(--txt-dim)}
.dmcp-endpoint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.dmcp-endpoint code,.dmcp-card dd code{padding:2px 8px;border-radius:6px;background:var(--well);font:12.5px/1.6 "JetBrains Mono",ui-monospace,monospace;color:var(--read)}
.dmcp-copy,.dai-copy{font-size:12.5px;color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dmcp-reach{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:12.5px}
.dmcp-reach span{color:var(--txt-dim)}
.dmcp-reach a,.dmcp-api a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dmcp-api{margin:0;font-size:12.5px}
.dmcp-empty{color:var(--txt-dim);font-size:14px}
.dai{display:grid;gap:16px}
.dai-file{padding:22px 26px;border:1px solid var(--glass-line);border-radius:20px;background:var(--glass);backdrop-filter:blur(14px);font-size:14px;line-height:1.75;color:var(--read)}
.dai-file>p{margin:0 0 8px}
.dai-file a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.dai-label{font-size:12px!important;font-weight:600;letter-spacing:.02em;color:var(--green)!important;margin:12px 0 4px!important}
.dai-label:first-child{margin-top:0!important}
.dai-url{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(18px,2.6vw,26px);font-weight:600;line-height:1.35}
.dai-url a{color:var(--txt);text-decoration:none}
.dai-url a:hover{color:var(--ember)}
.dai-meta{color:var(--txt-dim);font-size:13px}
.dai-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.dai-topics li{display:inline-flex;align-items:baseline;gap:8px;padding:5px 12px;border:1px solid var(--glass-line);border-radius:999px;font-size:13px}
.dai-topics span{font-size:12px;color:var(--txt-dim)}
.dai-pair{display:grid;gap:16px;align-items:start}
.dai-card{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0}
.dai-card figcaption{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--txt-dim)}
.dai-ai figcaption{color:var(--green)}
.dai-text{margin:0;padding:16px 18px;border:1px solid var(--glass-line);border-left:2px solid rgba(var(--green-rgb),.55);border-radius:14px;background:var(--well);font:12.5px/1.75 "JetBrains Mono",ui-monospace,monospace;color:var(--read);white-space:pre-wrap;overflow-wrap:anywhere}
.dataset.is-example{cursor:default}
@media (min-width:861px){.dai-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

@media (max-width:560px){
  .dataset-grid,.dmcp-grid{grid-template-columns:minmax(0,1fr)}
  .dataset-controls label:not(.dataset-field-search){flex:1 1 calc(50% - 7px)}
  .dataset-controls select{width:100%}
  .dataset-common{padding:16px}
  .dai-file{padding:18px}
}
@media print{
  .card-pick,.dataset-controls,.dmcp-copy,.dai-copy{display:none!important}
  .dataset-grid{display:block}
  .dataset{margin:0 0 8px;break-inside:avoid}
}
.dmcp-local{display:inline-block;margin-right:8px;padding:1px 8px;border:1px solid rgba(var(--green-rgb),.55);border-radius:999px;color:var(--green);font-size:12px}
.dmcp-endpoint{font-size:13px;color:var(--txt-dim)}
details.dmcp-reach{display:block}
details.dmcp-reach summary{cursor:pointer;color:var(--txt-dim);width:max-content;max-width:100%}
details.dmcp-reach summary:hover{color:var(--green)}
details.dmcp-reach p{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0 0}