.design-reference-page {
    --dr-primary: var(--color-primary, #4a6da7);
    --dr-primary-dark: var(--color-primary-hover, #3a5a8a);
    --dr-primary-strong: var(--color-primary-strong, #355285);
    --dr-primary-soft: var(--color-primary-soft, #e8f0fb);
    --dr-bg: var(--color-bg-page, #f4f7fc);
    --dr-surface: var(--color-surface, #ffffff);
    --dr-surface-alt: var(--color-surface-alt, #f1f3f4);
    --dr-surface-soft: var(--color-surface-soft, #f8fbff);
    --dr-surface-raised: var(--color-surface-raised, #fcfdff);
    --dr-text: var(--color-text-primary, #1f2f46);
    --dr-muted: var(--color-text-muted, #627087);
    --dr-border: var(--color-border-default, #d8e1ef);
    --dr-border-soft: color-mix(in srgb, var(--dr-border) 82%, var(--dr-primary) 18%);
    --dr-link: color-mix(in srgb, var(--dr-primary-dark) 88%, var(--dr-text) 12%);
    --dr-link-hover: var(--dr-primary-dark);
    --dr-info: var(--color-info, #17a2b8);
    --dr-success: var(--color-success, #2f936f);
    --dr-success-soft: var(--color-success-soft, #e4f7ec);
    --dr-warning: var(--color-warning, #b07a14);
    --dr-warning-soft: var(--color-warning-soft, #f5f3ee);
    --dr-danger: var(--color-danger, #c24747);
    --dr-danger-soft: var(--color-danger-soft, #fff4f4);
    --dr-focus-ring: var(--color-focus-ring, rgba(74, 109, 167, 0.32));
    --dr-on-primary: var(--dr-surface);
    --dr-code-bg: var(--color-code-bg, #0f1d31);
    --dr-overlay: var(--color-overlay, rgba(0, 0, 0, 0.12));
    --dr-radius-lg: 20px;
    --dr-radius-md: 12px;
    --dr-shadow: 0 8px 24px rgba(42, 60, 92, 0.1);
    --dr-transition: all 0.2s ease;
    font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dr-text);
    background: var(--dr-bg);
    max-width: 1160px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.design-reference-page .dr-hero {
    padding: 2rem;
    border-radius: var(--dr-radius-lg);
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    box-shadow: var(--dr-shadow);
    margin-bottom: 1.5rem;
}

.design-reference-page .dr-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--dr-muted);
    margin-bottom: 1rem;
}

.design-reference-page .dr-breadcrumb a {
    color: var(--dr-primary);
    text-decoration: none;
    font-weight: 600;
}

.design-reference-page .dr-hero h1 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    line-height: 1.25;
}

.design-reference-page .dr-hero p {
    margin: 0;
    color: var(--dr-muted);
    line-height: 1.6;
}

.design-reference-page .dr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.design-reference-page .dr-apple-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--dr-border-soft);
    border-radius: 999px;
    background: var(--dr-surface);
    color: var(--dr-link);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.5rem 0.82rem;
    transition: var(--dr-transition);
}

.design-reference-page .dr-apple-link:hover {
    border-color: var(--dr-border-soft);
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--dr-border-soft);
    border-radius: 999px;
    background: var(--dr-surface);
    color: var(--dr-link);
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.5rem 0.82rem;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-theme-toggle:hover {
    border-color: var(--dr-border-soft);
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-theme-toggle:focus-visible {
    outline: 2px solid var(--color-focus-ring, var(--dr-focus-ring));
    outline-offset: 2px;
}

.design-reference-page .dr-panel-palette {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-palette-stack {
    display: grid;
    gap: 0.85rem;
}

.design-reference-page .dr-palette-group {
    border: 1px solid var(--dr-border-soft);
    border-radius: 14px;
    background: var(--dr-surface);
    padding: 0.85rem;
}

.design-reference-page .dr-palette-group h3 {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    color: var(--dr-primary-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.design-reference-page .dr-token-usage-group {
    background: var(--dr-surface);
}

.design-reference-page .dr-token-usage-list {
    margin: 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 0.38rem;
    color: var(--dr-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.design-reference-page .dr-token-usage-list code {
    color: var(--dr-primary-dark);
    font-size: 0.8rem;
}

.design-reference-page .dr-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem;
}

.design-reference-page .dr-palette-item {
    border: 1px solid var(--dr-border-soft);
    border-radius: 10px;
    background: var(--dr-surface-soft);
    padding: 0.5rem 0.58rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.08rem;
    align-items: center;
}

.design-reference-page .dr-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--dr-overlay);
    background: var(--sw);
    grid-row: span 2;
}

.design-reference-page .dr-palette-item span {
    font-size: 0.78rem;
    color: var(--dr-muted);
    font-weight: 700;
}

.design-reference-page .dr-palette-item code {
    font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: var(--dr-muted);
}

.design-reference-page .dr-panel {
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius-lg);
    padding: 1.4rem;
    margin-bottom: 1rem;
}

.design-reference-page .dr-panel-head {
    margin-bottom: 1rem;
}

.design-reference-page .dr-panel-head h2 {
    margin: 0 0 0.45rem;
    color: var(--dr-primary-dark);
    font-size: 1.25rem;
}

.design-reference-page .dr-panel-head p {
    margin: 0;
    color: var(--dr-muted);
    font-size: 0.95rem;
}

.design-reference-page .dr-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.design-reference-page .dr-card {
    border-radius: var(--dr-radius-md);
    padding: 1rem;
    border: 1px solid var(--dr-border);
    transition: var(--dr-transition);
}

.design-reference-page .dr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--dr-primary-dark) 18%, transparent);
}

.design-reference-page .dr-card h3 {
    margin: 0.6rem 0 0.5rem;
    font-size: 1.05rem;
}

.design-reference-page .dr-card p {
    margin: 0;
    color: var(--dr-muted);
    line-height: 1.55;
    font-size: 0.9rem;
}

.design-reference-page .dr-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    text-decoration: none;
    color: var(--dr-primary);
    font-weight: 600;
    font-size: 0.88rem;
}

.design-reference-page .dr-card-soft {
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-card-outline {
    background: var(--dr-surface);
    border-style: dashed;
}

.design-reference-page .dr-card-solid {
    background: var(--dr-primary);
    color: var(--dr-surface);
}

.design-reference-page .dr-card-solid p,
.design-reference-page .dr-card-solid a {
    color: color-mix(in srgb, var(--dr-on-primary) 92%, transparent);
}

.design-reference-page .dr-card-lift {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-chip {
    display: inline-flex;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--dr-primary-soft);
    color: var(--dr-primary-dark);
    font-size: 0.74rem;
    font-weight: 700;
}

.design-reference-page .dr-button-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.design-reference-page .dr-btn,
.design-reference-page .dr-pill {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.65rem 0.95rem;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-btn i,
.design-reference-page .dr-pill i {
    margin-right: 0.35rem;
}

.design-reference-page .dr-btn-primary {
    background: var(--dr-primary);
    color: var(--dr-surface);
}

.design-reference-page .dr-btn-primary:hover {
    background: var(--dr-primary-dark);
}

.design-reference-page .dr-btn-secondary {
    background: var(--dr-surface-soft);
    color: var(--dr-primary-dark);
    border-color: var(--dr-border-soft);
}

.design-reference-page .dr-btn-ghost {
    background: var(--dr-surface);
    border-color: var(--dr-border);
    color: var(--dr-text);
}

.design-reference-page .dr-btn-danger {
    background: var(--dr-danger-soft);
    border-color: color-mix(in srgb, var(--dr-danger) 30%, var(--dr-surface) 70%);
    color: var(--dr-danger);
}

.design-reference-page .dr-btn:hover,
.design-reference-page .dr-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--dr-text) 12%, transparent);
}

.design-reference-page .dr-pill {
    background: var(--dr-surface);
    border-color: var(--dr-border-soft);
    color: var(--dr-primary-dark);
    border-radius: 999px;
}

.design-reference-page .dr-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.design-reference-page .dr-badge {
    display: inline-flex;
    border-radius: 8px;
    padding: 0.32rem 0.55rem;
    border: 1px solid var(--dr-border-soft);
    background: var(--dr-surface-soft);
    color: var(--dr-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
}

.design-reference-page .dr-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.design-reference-page .dr-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--dr-primary-dark);
    line-height: 1.45;
    font-size: 0.9rem;
}

.design-reference-page .dr-list i {
    color: var(--dr-primary);
    margin-top: 0.16rem;
}

.design-reference-page .dr-panel-pagination {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-pagination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
}

.design-reference-page .dr-pagination-card {
    border: 1px solid var(--dr-border-soft);
    border-radius: 12px;
    padding: 0.95rem;
    background: var(--dr-surface);
}

.design-reference-page .dr-pagination-card h3 {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-pagination {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.design-reference-page .dr-page-btn,
.design-reference-page .dr-page-nav,
.design-reference-page .dr-jump-btn,
.design-reference-page .dr-mini-btn {
    border: 1px solid var(--dr-border-soft);
    border-radius: 9px;
    background: var(--dr-surface);
    color: var(--dr-primary-dark);
    height: 34px;
    min-width: 34px;
    padding: 0 0.62rem;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-page-btn:hover,
.design-reference-page .dr-page-nav:hover,
.design-reference-page .dr-jump-btn:hover,
.design-reference-page .dr-mini-btn:hover {
    border-color: var(--dr-border-soft);
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-page-btn.is-active {
    border-color: var(--dr-primary);
    background: var(--dr-primary);
    color: var(--dr-surface);
}

.design-reference-page .dr-page-ellipsis {
    color: var(--dr-muted);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0 0.12rem;
}

.design-reference-page .dr-pagination-jump {
    justify-content: space-between;
}

.design-reference-page .dr-page-indicator {
    border: 1px solid var(--dr-border-soft);
    border-radius: 9px;
    background: var(--dr-surface-soft);
    padding: 0.42rem 0.7rem;
    font-size: 0.83rem;
    color: var(--dr-primary-dark);
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
}

.design-reference-page .dr-page-indicator strong {
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-mini-text {
    padding: 0 0.3rem;
    color: var(--dr-primary-dark);
    font-size: 0.83rem;
    font-weight: 700;
}

.design-reference-page .dr-combo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
}

.design-reference-page .dr-combo {
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius-md);
    padding: 1rem;
    background: var(--dr-surface);
}

.design-reference-page .dr-combo-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.design-reference-page .dr-combo h3 {
    margin: 0;
    font-size: 1rem;
}

.design-reference-page .dr-combo p {
    margin: 0 0 0.9rem;
    color: var(--dr-muted);
    line-height: 1.55;
    font-size: 0.9rem;
}

.design-reference-page .dr-status {
    background: var(--dr-surface-soft);
    color: var(--dr-primary);
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.design-reference-page .dr-status-muted {
    background: var(--dr-surface-alt);
    color: var(--dr-muted);
}

.design-reference-page .dr-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.design-reference-page .dr-metrics div {
    border: 1px solid var(--dr-border-soft);
    border-radius: 10px;
    padding: 0.5rem;
    background: var(--dr-surface-soft);
    text-align: center;
}

.design-reference-page .dr-metrics strong {
    display: block;
    font-size: 1rem;
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-metrics span {
    font-size: 0.75rem;
    color: var(--dr-muted);
}

.design-reference-page .dr-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.design-reference-page .dr-panel-test {
    border-style: dashed;
}

.design-reference-page .dr-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
}

.design-reference-page .dr-test-card {
    border: 1px solid var(--dr-border-soft);
    border-radius: 12px;
    padding: 1rem;
    background: var(--dr-surface);
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.design-reference-page .dr-test-card-fullclick {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--dr-transition);
    position: relative;
}

.design-reference-page .dr-test-card-fullclick:hover {
    border-color: var(--dr-border-soft);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--dr-primary-dark) 14%, transparent);
    transform: translateY(-2px);
}

.design-reference-page .dr-test-card-fullclick:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

.design-reference-page .dr-test-card-direct {
    justify-content: flex-start;
    min-height: 220px;
}

.design-reference-page .dr-test-card-direct .dr-metrics {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.design-reference-page .dr-test-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.design-reference-page .dr-test-top h3 {
    margin: 0;
    font-size: 1rem;
}

.design-reference-page .dr-test-card p {
    margin: 0 0 0.9rem;
    color: var(--dr-muted);
    line-height: 1.55;
    font-size: 0.9rem;
}

.design-reference-page .dr-test-actions {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dr-border-soft);
}

.design-reference-page .dr-test-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dr-border-soft);
    border-radius: 8px;
    background: var(--dr-surface);
    color: var(--dr-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-test-icon-btn:hover {
    border-color: var(--dr-border-soft);
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-test-pill-btn {
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--dr-primary);
    color: var(--dr-surface);
    height: 32px;
    padding: 0 0.72rem 0 0.56rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-test-pill-btn:hover {
    background: var(--dr-primary-dark);
}

.design-reference-page .dr-test-cta-bar {
    margin-top: auto;
    width: 100%;
    border: 1px solid var(--dr-border-soft);
    border-radius: 10px;
    background: var(--dr-surface-soft);
    color: var(--dr-primary-dark);
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.design-reference-page .dr-panel-code {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-snippet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.9rem;
}

.design-reference-page .dr-snippet-card {
    border: 1px solid var(--dr-border-soft);
    border-radius: 12px;
    background: var(--dr-surface);
    padding: 0.95rem;
}

.design-reference-page .dr-snippet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.design-reference-page .dr-snippet-head h3 {
    margin: 0 0 0.3rem;
    font-size: 0.98rem;
}

.design-reference-page .dr-snippet-lang {
    display: inline-flex;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--dr-border-soft);
    background: var(--dr-surface-soft);
    color: var(--dr-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.design-reference-page .dr-snippet-copy {
    border: 1px solid var(--dr-border-soft);
    border-radius: 9px;
    background: var(--dr-surface);
    color: var(--dr-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.38rem 0.56rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-snippet-copy:hover {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border-soft);
}

.design-reference-page .dr-code-block {
    margin: 0;
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--dr-code-bg);
    background: var(--dr-code-bg);
    color: color-mix(in srgb, var(--dr-primary) 22%, var(--dr-surface) 78%);
    font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.79rem;
    line-height: 1.55;
    overflow-x: auto;
}

.design-reference-page .dr-code-block code {
    white-space: pre;
}

.design-reference-page .dr-snippet-caption {
    margin: 0.75rem 0 0;
    color: var(--dr-primary-dark);
    font-size: 0.85rem;
    line-height: 1.45;
}

.design-reference-page .dr-panel-jelly {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-jelly-demo {
    border: 1px solid var(--dr-border-soft);
    border-radius: 14px;
    background: var(--dr-surface);
    padding: 0.9rem;
}

.design-reference-page .dr-jelly-tabs {
    position: relative;
    display: inline-flex;
    gap: 0.2rem;
    border: 1px solid var(--dr-border-soft);
    border-radius: 999px;
    background: var(--dr-surface-soft);
    padding: 0.24rem;
}

.design-reference-page .dr-jelly-tab {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: var(--dr-primary-dark);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 180ms ease;
}

.design-reference-page .dr-jelly-tab.is-active {
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-jelly-indicator {
    position: absolute;
    left: 0;
    top: 0.24rem;
    height: calc(100% - 0.48rem);
    border-radius: 999px;
    background: var(--dr-surface);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dr-primary-dark) 20%, transparent);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.design-reference-page .dr-jelly-panels {
    margin-top: 0.9rem;
}

.design-reference-page .dr-jelly-panel {
    border: 1px solid var(--dr-border-soft);
    border-radius: 12px;
    background: var(--dr-surface-soft);
    padding: 0.95rem;
}

.design-reference-page .dr-jelly-panel h3 {
    margin: 0 0 0.45rem;
    font-size: 0.98rem;
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-jelly-panel p {
    margin: 0;
    color: var(--dr-primary-dark);
    line-height: 1.5;
    font-size: 0.88rem;
}

.design-reference-page .dr-jelly-panel.is-entering {
    animation: dr-jelly-panel-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.design-reference-page .dr-panel-search {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.8rem;
}

.design-reference-page .dr-search-card {
    border: 1px solid var(--dr-border-soft);
    border-radius: 12px;
    background: var(--dr-surface);
    padding: 0.9rem;
}

.design-reference-page .dr-search-card h3 {
    margin: 0 0 0.55rem;
    font-size: 0.93rem;
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-search-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--dr-border-soft);
    border-radius: 11px;
    background: var(--dr-surface-soft);
    padding: 0.38rem 0.45rem;
}

.design-reference-page .dr-search-bar i {
    color: var(--dr-primary-dark);
    font-size: 0.85rem;
}

.design-reference-page .dr-search-bar input,
.design-reference-page .dr-search-bar select {
    border: 0;
    background: transparent;
    color: var(--dr-primary-dark);
    font-size: 0.84rem;
    outline: none;
}

.design-reference-page .dr-search-bar input {
    flex: 1;
}

.design-reference-page .dr-search-bar select {
    padding: 0 0.2rem;
}

.design-reference-page .dr-search-bar button {
    border: 1px solid var(--dr-border-soft);
    border-radius: 8px;
    background: var(--dr-surface);
    color: var(--dr-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    height: 30px;
    padding: 0 0.65rem;
    cursor: pointer;
}

.design-reference-page .dr-classic-search-box {
    position: relative;
    width: 100%;
}

.design-reference-page .dr-classic-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dr-muted);
    font-size: 0.92rem;
}

.design-reference-page .dr-classic-search-input {
    width: 100%;
    min-height: 56px;
    padding: 0.98rem 4rem 0.98rem 3rem;
    border: 1px solid var(--dr-border-soft);
    border-radius: 999px;
    background: var(--dr-surface);
    color: var(--dr-text);
    font-size: 1rem;
    outline: none;
}

.design-reference-page .dr-classic-search-input:focus {
    border-color: var(--dr-primary);
    box-shadow: 0 0 0 3px var(--dr-focus-ring);
}

.design-reference-page .dr-classic-search-input::-webkit-search-cancel-button {
    display: none;
}

.design-reference-page .dr-classic-search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--dr-primary), var(--dr-primary-strong));
    color: var(--dr-on-primary);
    cursor: pointer;
    font-size: 0.88rem;
}

.design-reference-page .dr-notion-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    border: 1px solid var(--dr-border-soft);
    border-radius: 11px;
    background: var(--dr-surface);
    padding: 0.38rem 0.45rem;
    min-height: 38px;
    transition: var(--dr-transition);
}

.design-reference-page .dr-notion-input:focus-within {
    border-color: var(--dr-primary);
    box-shadow: 0 0 0 3px var(--dr-focus-ring);
}

.design-reference-page .dr-notion-icon {
    color: var(--dr-muted);
    font-size: 0.82rem;
}

.design-reference-page .dr-notion-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--dr-primary-soft);
    color: var(--dr-primary-strong);
    font-size: 0.78rem;
    font-weight: 600;
}

.design-reference-page .dr-notion-pill button {
    border: 0;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: transparent;
    color: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.design-reference-page .dr-notion-pill button:hover {
    background: color-mix(in srgb, var(--dr-primary-dark) 12%, transparent);
}

.design-reference-page .dr-notion-input input {
    flex: 1 1 130px;
    min-width: 120px;
    border: 0;
    background: transparent;
    color: var(--dr-text);
    font-size: 0.84rem;
    outline: none;
}

.design-reference-page .dr-notion-input input::placeholder {
    color: var(--dr-muted);
}

.design-reference-page .dr-panel-chat {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin-top: 0.62rem;
    border: 1px solid var(--dr-border-soft);
    border-radius: 999px;
    background: var(--dr-surface);
    color: var(--dr-link);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem 0.68rem;
    transition: var(--dr-transition);
}

.design-reference-page .dr-chat-link:hover {
    border-color: var(--dr-border-soft);
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-chat-shell {
    border: 1px solid var(--dr-border-soft);
    border-radius: 14px;
    background: var(--dr-surface);
    overflow: hidden;
}

.design-reference-page .dr-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--dr-border-soft);
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-chat-head strong {
    display: block;
    font-size: 0.9rem;
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-chat-status {
    display: inline-flex;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--dr-success);
    background: var(--dr-success-soft);
    border: 1px solid color-mix(in srgb, var(--dr-success) 35%, var(--dr-surface) 65%);
    border-radius: 999px;
    padding: 0.16rem 0.42rem;
}

.design-reference-page .dr-chat-head button {
    border: 1px solid var(--dr-border-soft);
    border-radius: 8px;
    background: var(--dr-surface);
    color: var(--dr-primary-dark);
    width: 30px;
    height: 30px;
}

.design-reference-page .dr-chat-body {
    padding: 0.85rem;
    display: grid;
    gap: 0.55rem;
    background: var(--dr-surface-raised);
}

.design-reference-page .dr-msg {
    max-width: 86%;
    border-radius: 11px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--dr-border-soft);
}

.design-reference-page .dr-msg p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.design-reference-page .dr-msg span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--dr-muted);
}

.design-reference-page .dr-msg-ai {
    background: var(--dr-surface-soft);
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-msg-user {
    margin-left: auto;
    background: var(--dr-primary);
    border-color: var(--dr-primary);
    color: var(--dr-surface);
}

.design-reference-page .dr-msg-user span {
    color: color-mix(in srgb, var(--dr-on-primary) 80%, transparent);
}

.design-reference-page .dr-chat-input {
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem;
    border-top: 1px solid var(--dr-border-soft);
    background: var(--dr-surface-soft);
    border-radius: 18px;
    border: 1px solid var(--dr-border-soft);
    margin: 0.7rem;
}

.design-reference-page .dr-chat-input-top {
    border: 0;
    border-radius: 12px;
    background: var(--dr-surface-soft);
    padding: 0.62rem 0.72rem;
}

.design-reference-page .dr-chat-input-top input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--dr-primary-dark);
    font-size: 0.84rem;
    padding: 0;
}

.design-reference-page .dr-chat-input-top input:focus {
    outline: none;
}

.design-reference-page .dr-chat-input-bottom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.2rem 0.1rem;
}

.design-reference-page .dr-chat-plus,
.design-reference-page .dr-chat-send {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.design-reference-page .dr-chat-plus {
    border: 0;
    background: transparent;
    color: var(--dr-primary-dark);
}

.design-reference-page .dr-chat-model {
    border: 0;
    background: transparent;
    color: var(--dr-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
    height: 30px;
    padding: 0 0.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    margin-right: auto;
    cursor: pointer;
}

.design-reference-page .dr-chat-send {
    border: 0;
    background: var(--dr-primary);
    color: var(--dr-surface);
}

.design-reference-page .dr-chat-send:hover {
    background: var(--dr-primary-dark);
    border-color: var(--dr-primary-dark);
}

.design-reference-page .dr-panel-comment {
    background: linear-gradient(180deg, var(--dr-surface) 0%, var(--dr-surface-soft) 100%);
}

.design-reference-page .dr-comment-shell {
    border: 1px solid var(--dr-border-soft);
    border-radius: 14px;
    background: var(--dr-surface);
    padding: 0.95rem;
}

.design-reference-page .dr-comment-profile {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    margin-bottom: 0.75rem;
}

.design-reference-page .dr-comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dr-primary-soft);
    color: var(--dr-primary-strong);
    font-size: 0.85rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.design-reference-page .dr-comment-author strong {
    display: block;
    color: var(--dr-primary-dark);
    font-size: 0.88rem;
    line-height: 1.2;
}

.design-reference-page .dr-comment-author span {
    display: block;
    margin-top: 0.12rem;
    color: var(--dr-muted);
    font-size: 0.76rem;
}

.design-reference-page .dr-comment-shell textarea {
    width: 100%;
    min-height: 120px;
    border: 0;
    border-radius: 11px;
    background: var(--dr-surface-soft);
    color: var(--dr-text);
    font-size: 0.86rem;
    line-height: 1.6;
    padding: 0.72rem 0.78rem;
    resize: none;
    outline: none;
}

.design-reference-page .dr-comment-shell textarea:focus {
    box-shadow: 0 0 0 3px var(--dr-focus-ring);
}

.design-reference-page .dr-comment-bottom {
    margin-top: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.design-reference-page .dr-comment-secret {
    border: 1px solid var(--dr-border-soft);
    border-radius: 999px;
    background: var(--dr-surface);
    color: var(--dr-primary-dark);
    height: 32px;
    padding: 0 0.66rem;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-comment-secret:hover {
    background: var(--dr-surface-soft);
}

.design-reference-page .dr-comment-submit {
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--dr-primary);
    color: var(--dr-on-primary);
    height: 32px;
    padding: 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--dr-transition);
}

.design-reference-page .dr-comment-submit:hover {
    background: var(--dr-primary-dark);
}

@keyframes dr-jelly-panel-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.995);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .design-reference-page {
        padding: 1.2rem 0.9rem 2rem;
    }

    .design-reference-page .dr-hero,
    .design-reference-page .dr-panel {
        border-radius: 14px;
        padding: 1rem;
    }

    .design-reference-page .dr-hero h1 {
        font-size: 1.55rem;
    }

    .design-reference-page .dr-test-actions {
        justify-content: flex-end;
    }

    .design-reference-page .dr-test-icon-btn {
        width: 30px;
        height: 30px;
    }

    .design-reference-page .dr-test-pill-btn {
        height: 30px;
        padding: 0 0.66rem 0 0.52rem;
    }

    .design-reference-page .dr-snippet-grid {
        grid-template-columns: 1fr;
    }

    .design-reference-page .dr-pagination-jump {
        justify-content: flex-start;
    }

    .design-reference-page .dr-snippet-copy {
        padding: 0.34rem 0.5rem;
    }

    .design-reference-page .dr-code-block {
        font-size: 0.74rem;
    }

    .design-reference-page .dr-jelly-tab {
        padding: 0.47rem 0.72rem;
        font-size: 0.8rem;
    }

    .design-reference-page .dr-search-grid {
        grid-template-columns: 1fr;
    }

    .design-reference-page .dr-search-bar {
        flex-wrap: wrap;
    }

    .design-reference-page .dr-search-bar input {
        min-width: 180px;
    }

    .design-reference-page .dr-comment-shell {
        padding: 0.8rem;
    }

    .design-reference-page .dr-comment-shell textarea {
        min-height: 108px;
    }

    .design-reference-page .dr-comment-secret,
    .design-reference-page .dr-comment-submit {
        height: 30px;
    }

    .design-reference-page .dr-msg {
        max-width: 94%;
    }

    .design-reference-page .dr-chat-input {
        gap: 0.4rem;
    }
}