/*
 * neis.me 시안 — design.css
 *
 * tokens.css 만 의존. 외부 CDN/라이브러리 0.
 * neis.me 전용: emerald 톤, sidebar nav, link-card 그리드, AI 강조 섹션, dark mode.
 *
 * 섹션:
 *   1) reset / typography
 *   2) layout helpers
 *   3) button (.btn)
 *   4) site-header (light, sticky, 통합형)
 *   5) sidebar nav (.cat-nav)
 *   6) link-card (.link-card)
 *   7) ai-card (.ai-card — AI 섹션 강조)
 *   8) form (검색 input)
 *   9) ad-slot
 *  10) hero (간략 — directory 톤)
 *  11) section-block, badge, etc
 *  12) footer
 *  13) dark theme (data-theme="dark")
 */

/* ──────────────────────────────────────────────────────────
 * neisme brand override (emerald 톤 — 사용자 요구 "녹색 계열")
 * tokens.css 의 [data-brand="neisme"] (Bootstrap blue) 를 덮어씀.
 * ────────────────────────────────────────────────────────── */
[data-brand="neisme"] {
    /* 깊은 emerald — 형광 녹색 회피, 고급감 */
    --color-primary: #047857;          /* emerald-700 */
    --color-primary-hover: #065f46;    /* emerald-800 */
    --color-primary-active: #064e3b;   /* emerald-900 */
    --color-primary-fg: #ffffff;
    --color-primary-soft: #d1fae5;     /* emerald-100 */
    --color-primary-soft-fg: #065f46;

    --color-accent: #f59e0b;           /* amber 유지 — emerald 와 보색 대비 좋음 */
    --color-accent-fg: #ffffff;

    /* neis.me 전용 그라데이션 */
    --gradient-emerald-1: linear-gradient(135deg, #047857 0%, #064e3b 100%);
    --gradient-emerald-soft:
        linear-gradient(135deg, #ecfdf5 0%, #ffffff 50%, #f0fdfa 100%);
    --gradient-hero: var(--gradient-emerald-soft);
    --gradient-navbar: var(--gradient-emerald-1);

    /* focus ring — emerald 계열로 매핑 */
    --shadow-focus: 0 0 0 3px rgb(4 120 87 / 0.25);
}

/* ──────────────────────────────────────────────────────────
 * 1) Reset & Typography
 * ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; font-size: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ──────────────────────────────────────────────────────────
 * 2) Layout helpers
 * ────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }

.cluster {
    display: flex; flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-3));
    align-items: center;
}

/* ──────────────────────────────────────────────────────────
 * 3) Button (iteach 와 동일 — 디자인 시스템 공유)
 * ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
    user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-sm { font-size: var(--fs-sm); padding: var(--space-1) var(--space-3); min-height: 32px; border-radius: var(--radius-sm); }
.btn-md { font-size: var(--fs-base); padding: var(--space-2) var(--space-4); min-height: 40px; }
.btn-lg { font-size: var(--fs-md); padding: var(--space-3) var(--space-6); min-height: 48px; }

.btn-icon { padding: 0; aspect-ratio: 1 / 1; }
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon.btn-md { width: 40px; height: 40px; }
.btn-icon.btn-lg { width: 48px; height: 48px; }

.btn-block { width: 100%; }

.btn-primary { background-color: var(--color-primary); color: var(--color-primary-fg); box-shadow: var(--shadow-xs); }
.btn-primary:hover  { background-color: var(--color-primary-hover); box-shadow: var(--shadow-sm); }
.btn-primary:active { background-color: var(--color-primary-active); }

.btn-secondary { background-color: var(--gray-200); color: var(--gray-800); }
.btn-secondary:hover  { background-color: var(--gray-300); }
.btn-secondary:active { background-color: var(--gray-400); }

.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); }
.btn-outline:hover  { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-soft-fg); }

.btn-ghost { background: transparent; color: var(--color-fg); }
.btn-ghost:hover  { background: var(--color-surface-2); }
.btn-ghost:active { background: var(--color-border); }

.btn-dark { background: var(--gray-900); color: var(--color-on-dark); }
.btn-dark:hover  { background: var(--gray-800); box-shadow: var(--shadow-sm); }

/* ──────────────────────────────────────────────────────────
 * 4) Site Header (light, sticky, 통합형)
 *    로고 + 검색바 (큰 비중) + 다크모드 토글 + 사용자
 * ────────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.site-header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-2) var(--space-3);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: center;
}
@media (min-width: 768px) { .site-header-inner { padding: var(--space-3) var(--space-6); gap: var(--space-4); } }
@media (min-width: 1024px) { .site-header-inner { padding-inline: var(--space-8); } }

.site-logo {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: var(--fw-bold);
    color: var(--color-fg);
    font-size: var(--fs-md);
    letter-spacing: var(--letter-tight);
    flex-shrink: 0;
}
.site-logo:hover { text-decoration: none; color: var(--color-primary); }
.site-logo-mark {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    background: var(--gradient-emerald-1);
    color: var(--color-on-dark);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
}
.site-logo-suffix {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

/* 헤더 내 검색바 */
.header-search {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}
.header-search-input {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) 40px;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 40px;
    transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast);
}
.header-search-input::placeholder { color: var(--color-fg-subtle); }
.header-search-input:hover { border-color: var(--color-border-strong); background-color: var(--color-bg); }
.header-search-input:focus {
    outline: none;
    background-color: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.header-search-icon {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--color-fg-subtle);
    pointer-events: none;
}
.header-search-shortcut {
    position: absolute;
    right: 8px; top: 50%; transform: translateY(-50%);
    padding: 2px 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
    pointer-events: none;
}
@media (max-width: 639px) {
    .header-search-shortcut { display: none; }
}

.header-actions {
    display: flex; align-items: center; gap: var(--space-1);
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
 * 5) Layout: sidebar + main
 * ────────────────────────────────────────────────────────── */
.app-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-4);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) { .app-layout { padding: var(--space-6); } }
@media (min-width: 1024px) {
    .app-layout {
        grid-template-columns: 220px 1fr;
        padding-inline: var(--space-8);
        gap: var(--space-8);
    }
}

/* sidebar nav */
.cat-nav {
    /* 데스크톱: sticky 사이드바 */
    align-self: start;
}
@media (min-width: 1024px) {
    .cat-nav {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        max-height: calc(100vh - var(--header-height) - var(--space-8));
        overflow-y: auto;
        padding-right: var(--space-2);
        scrollbar-width: thin;
    }
}

.cat-nav-heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-wide);
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-2);
}

.cat-nav-list {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
}
.cat-nav-list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
    .cat-nav-list {
        flex-direction: column;
        overflow-x: visible;
    }
}

.cat-nav-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.cat-nav-link:hover {
    background: var(--color-surface-2);
    color: var(--color-fg);
    text-decoration: none;
}
.cat-nav-link[aria-current="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
    font-weight: var(--fw-semibold);
}
.cat-nav-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    color: currentColor;
}
.cat-nav-count {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--color-fg-subtle);
    font-variant-numeric: tabular-nums;
}
.cat-nav-link[aria-current="true"] .cat-nav-count { color: var(--color-primary-soft-fg); opacity: 0.75; }

.cat-nav-link-special {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
}
.cat-nav-link-new-badge {
    margin-left: auto;
    padding: 2px 6px;
    background: var(--color-accent);
    color: var(--color-on-dark);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--letter-wide);
    border-radius: var(--radius-sm);
}

/* main content area */
.app-main { min-width: 0; }

/* ──────────────────────────────────────────────────────────
 * 10) Hero (간략 — directory 톤)
 * ────────────────────────────────────────────────────────── */
.directory-hero {
    background: var(--gradient-hero);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6);
    margin-bottom: var(--space-6);
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    align-items: center; justify-content: space-between;
}
.directory-hero-text {
    flex: 1; min-width: 240px;
}
.directory-hero-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-1);
    letter-spacing: var(--letter-tight);
    color: var(--color-fg);
}
.directory-hero-description {
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    margin: 0;
    line-height: var(--line-base);
}

/* ──────────────────────────────────────────────────────────
 * 11) Section block (각 카테고리)
 * ────────────────────────────────────────────────────────── */
.cat-section {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
    margin-bottom: var(--space-10);
}
.cat-section-heading {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.cat-section-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-fg);
    letter-spacing: var(--letter-tight);
    margin: 0;
    display: flex; align-items: center; gap: var(--space-2);
}
.cat-section-title-icon {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
}
.cat-section-meta {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────
 * 6) link-card (사이트 카드)
 *    grid 안에서 컴팩트하게 favicon + 이름 + 도메인 + 설명 + 즐겨찾기
 * ────────────────────────────────────────────────────────── */
.link-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 480px) { .link-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .link-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .link-grid { grid-template-columns: repeat(4, 1fr); } }

.link-card {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.link-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.link-card-favicon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    overflow: hidden;
}
.link-card-favicon img,
.link-card-favicon svg {
    width: 20px; height: 20px;
    display: block;
}

.link-card-info {
    flex: 1; min-width: 0;
}
.link-card-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-card-domain {
    font-size: var(--fs-xs);
    color: var(--color-fg-subtle);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono);
}
.link-card-description {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
    margin-top: var(--space-2);
    line-height: var(--line-base);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.link-card-fav {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--color-fg-subtle);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}
.link-card:hover .link-card-fav { opacity: 1; }
.link-card-fav:hover { background: var(--color-surface-2); color: var(--color-warn); }
.link-card-fav[aria-pressed="true"] {
    color: var(--color-warn);
    opacity: 1;
}

.link-card-external-icon {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    width: 14px; height: 14px;
    color: var(--color-fg-subtle);
    opacity: 0;
    transition: opacity var(--duration-fast);
}
.link-card:hover .link-card-external-icon { opacity: 1; }

/* ──────────────────────────────────────────────────────────
 * 7) ai-card (AI 섹션 강조)
 *    배경이 light emerald, 호버 시 강조 강함
 * ────────────────────────────────────────────────────────── */
.ai-section {
    background: var(--gradient-emerald-soft);
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-10);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.ai-section-heading {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.ai-section-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-fg);
    letter-spacing: var(--letter-tight);
    margin: 0;
    display: flex; align-items: center; gap: var(--space-2);
}
.ai-section-title-icon {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    background: var(--gradient-emerald-1);
    color: var(--color-on-dark);
}
.ai-section-badge {
    padding: 2px 8px;
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--letter-wide);
}
.ai-section-description {
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    margin: 0;
    flex-basis: 100%;
    line-height: var(--line-base);
}

.ai-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 480px) { .ai-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .ai-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ai-grid { grid-template-columns: repeat(4, 1fr); } }

.ai-card {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.ai-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

/* ──────────────────────────────────────────────────────────
 * 8) Form (form 요소 — 헤더 검색 외에도 일반 form 가능)
 * ────────────────────────────────────────────────────────── */
.input, .select, .textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--color-fg);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    min-height: 40px;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ──────────────────────────────────────────────────────────
 * 9) Ad-slot
 * ────────────────────────────────────────────────────────── */
.ad-container {
    margin-block: var(--space-6);
    text-align: center;
}
.ad-label {
    font-size: var(--fs-xs);
    color: var(--color-fg-subtle);
    margin: 0 0 var(--space-2);
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
}
.ad-slot {
    display: inline-block;
    background: repeating-linear-gradient(45deg,
        var(--color-surface),
        var(--color-surface) 10px,
        var(--color-surface-2) 10px,
        var(--color-surface-2) 20px);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: var(--ad-w, 728px);
    min-height: var(--ad-h, 90px);
    overflow: hidden;
}
.ad-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: inherit;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    padding: var(--space-3);
    gap: var(--space-1);
}
.ad-placeholder-format { font-weight: var(--fw-semibold); color: var(--color-fg); }
.ad-placeholder-id {
    font-size: var(--fs-xs);
    color: var(--color-fg-subtle);
    font-family: var(--font-mono);
}

/* ──────────────────────────────────────────────────────────
 * Empty state (검색 결과 0건 / 즐겨찾기 0건)
 * ────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-fg-muted);
}
.empty-state-icon {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-fg-subtle);
}
.empty-state-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0 0 var(--space-1);
}
.empty-state-description {
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    margin: 0;
}

/* ──────────────────────────────────────────────────────────
 * 12) Footer
 * ────────────────────────────────────────────────────────── */
.site-footer {
    margin-top: var(--space-12);
    padding: var(--space-8) var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
}
.site-footer-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex; flex-direction: column; gap: var(--space-4);
    align-items: center;
    text-align: center;
}
.footer-links {
    display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center;
}
.footer-links a { color: inherit; }
.footer-links a:hover { color: var(--color-primary); text-decoration: none; }
.footer-bottom {
    color: var(--color-fg-subtle);
    font-size: var(--fs-xs);
}

/* ──────────────────────────────────────────────────────────
 * 13) Dark theme
 *    [data-theme="dark"] 활성 시 의미 변수 override
 *    tokens.css 의 dark 영역은 비활성이므로 본 시안에서 자체 정의
 * ────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg: #0b1015;             /* very dark slate */
    --color-fg: #f1f5f9;             /* slate-100 */
    --color-fg-muted: #94a3b8;       /* slate-400 */
    --color-fg-subtle: #64748b;      /* slate-500 */
    --color-border: #1f2937;         /* slate-800 */
    --color-border-strong: #334155;  /* slate-700 */
    --color-surface: #111827;        /* slate-900 */
    --color-surface-2: #1f2937;      /* slate-800 */
}

[data-theme="dark"][data-brand="neisme"] {
    --color-primary: #10b981;        /* emerald-500 — 다크 배경에서 더 밝은 톤 */
    --color-primary-hover: #059669;
    --color-primary-active: #047857;
    --color-primary-soft: #064e3b;   /* emerald-900 (배경용) */
    --color-primary-soft-fg: #6ee7b7;/* emerald-300 (글자용) */

    --gradient-emerald-soft: linear-gradient(135deg, #064e3b 0%, #0b1015 50%, #042f2e 100%);
    --gradient-hero: var(--gradient-emerald-soft);
}

[data-theme="dark"] .header-search-shortcut {
    background: var(--color-surface);
}
[data-theme="dark"] .ad-slot {
    background: repeating-linear-gradient(45deg,
        var(--color-surface),
        var(--color-surface) 10px,
        var(--color-surface-2) 10px,
        var(--color-surface-2) 20px);
}

/* ──────────────────────────────────────────────────────────
 * 14) SVG / Icon size safety + admin 공용 클래스
 *
 * 글로벌 `svg { max-width: 100%; height: auto }` 가 부모 너비만큼
 * SVG 를 부풀리는 것을 방지. 모든 아이콘/아바타/마크는
 * width/height 명시.
 *
 * 추가: v1·v3 시안 HTML 인라인 <style> 에만 정의되어 있던 클래스를
 * 메인 design.css 단일 소스로 흡수 (설계 부채 정리, 2026-04-29).
 * v3/assets/design.css 의 동일 클래스 정의가 있을 때는 후행 import
 * 우선이라 그 spec 이 살아남는다 (하위 호환).
 * ────────────────────────────────────────────────────────── */

/* 안전망: width/height 속성이 없는 인라인 SVG 의 부풀림 방지 */
svg:not([width]):not([height]) {
    width: 1em;
    height: 1em;
}

/* admin sidebar — link icon */
.admin-sidebar-link-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
}

/* admin sidebar — footer icon (보안 안내 등) */
.admin-sidebar-foot-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--color-success);
}

/* admin sidebar — brand mark (좌상단 로고 박스) */
.admin-sidebar-brand-mark {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-emerald-1);
    color: var(--color-on-dark);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
}

/* admin topbar — user avatar */
.admin-user-avatar {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    overflow: hidden;
}

/* stat card — small icon (label 옆) */
.stat-card-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* cred card — favicon (자격증명 카드) */
.cred-card-favicon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    color: var(--color-fg-muted);
    font-weight: var(--fw-bold);
    overflow: hidden;
}
.cred-card-favicon img,
.cred-card-favicon svg {
    width: 100%; height: 100%;
    object-fit: contain;
}

/* member avatar (자격증명 상세, members 표) */
.member-avatar {
    flex-shrink: 0;
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--gradient-emerald-1);
    color: var(--color-on-dark);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    overflow: hidden;
}
.member-avatar.is-other {
    /* 본인 외 다른 멤버는 중립 slate 그라데이션 */
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
}
.member-avatar img,
.member-avatar svg {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* auth page — login 로고 마크 */
.auth-logo-mark {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-emerald-1);
    color: var(--color-on-dark);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
}

/* tool card — v1 유틸리티 도구 카드 */
.tool-card-icon {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
}
.tool-card-icon svg {
    width: 22px; height: 22px;
}

/* timeline marker (v3 detail 변경 이력) */
.timeline-marker {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    display: grid; place-items: center;
}

/* link-card-favicon 의 내부 이미지/svg 안전 (이미 §6 에 정의되어
 * 있으므로 중복 방지 — 여기서는 안 적음) */

/* ai-card-fav (메인 시안 AI 섹션 즐겨찾기 버튼) — link-card-fav 와
 * 패턴 동일. JS 가 두 셀렉터 모두 매칭하므로 별도 정의 불필요. */