.nextjs-structure-page {
    --structure-bg: #f6f8fc;
    --structure-surface: #fff;
    --structure-soft: #eef3fb;
    --structure-text: #142038;
    --structure-muted: #5d6980;
    --structure-border: #d9e2f0;
    --structure-blue: #2563eb;
    --structure-cyan: #0891b2;
    --structure-violet: #7c3aed;
    --blog-bg: var(--structure-bg);
    --blog-surface: var(--structure-surface);
    --blog-surface-soft: var(--structure-soft);
    --blog-text: var(--structure-text);
    --blog-muted: var(--structure-muted);
    --blog-border: var(--structure-border);
    --blog-accent: var(--structure-blue);
    --blog-accent-2: var(--structure-cyan);
    background: var(--structure-bg);
}

.nextjs-structure-page.active-dark-mode {
    --structure-bg: #08101e;
    --structure-surface: #0f192a;
    --structure-soft: #15233a;
    --structure-text: #eff5ff;
    --structure-muted: #acb9ce;
    --structure-border: #263a59;
    --structure-blue: #73a4ff;
    --structure-cyan: #5de1f3;
    --structure-violet: #b795ff;
}

.nextjs-structure-page .blog-hero--article {
    padding: 116px 0 68px;
    border-bottom: 1px solid var(--structure-border);
    background:
        radial-gradient(circle at 86% 18%, rgba(37, 99, 235, .16), transparent 31%),
        radial-gradient(circle at 5% 90%, rgba(124, 58, 237, .1), transparent 26%),
        var(--structure-surface);
}

.nextjs-structure-page .blog-hero--article .blog-container {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.nextjs-structure-page .blog-breadcrumbs { grid-column: 1 / -1; margin-bottom: 30px; }
.nextjs-structure-page .blog-eyebrow,
.nextjs-structure-page .blog-hero h1,
.nextjs-structure-page .blog-hero__intro,
.nextjs-structure-page .article-meta { grid-column: 1; }
.nextjs-structure-page .blog-eyebrow {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 6px 11px;
    border: 1px solid rgba(37, 99, 235, .2);
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
    color: var(--structure-blue);
    font-size: 11px;
    letter-spacing: .08em;
}
.nextjs-structure-page .blog-hero h1 { max-width: 680px; margin: 17px 0 18px; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.042em; }
.nextjs-structure-page .blog-hero__intro { max-width: 650px; color: var(--structure-muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.62; }
.nextjs-structure-page .article-meta { gap: 8px 18px; margin-top: 26px; color: var(--structure-muted); font-size: 14px; }
.structure-hero__visual { grid-column: 2; grid-row: 2 / 6; margin: 0; overflow: hidden; border: 1px solid #243a66; border-radius: 22px; background: #051126; box-shadow: 0 28px 60px rgba(8, 18, 40, .22); }
.structure-hero__visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.nextjs-structure-page .article-layout { width: min(1120px, calc(100% - 40px)); grid-template-columns: minmax(0, 780px) minmax(220px, 270px); gap: clamp(38px, 5vw, 68px); padding: 68px 0 96px; }
.nextjs-structure-page .article-content { max-width: 780px; color: var(--structure-text); font-size: 17px; line-height: 1.77; }
.nextjs-structure-page .article-content > p:first-child { font-size: 19px; line-height: 1.68; }
.nextjs-structure-page .article-content h2 { margin: 54px 0 17px; font-size: clamp(28px, 3.2vw, 36px); letter-spacing: -.025em; }
.nextjs-structure-page .article-content h3 { margin: 32px 0 10px; font-size: clamp(21px, 2.3vw, 25px); }
.nextjs-structure-page .article-content p,
.nextjs-structure-page .article-content ul { margin-bottom: 21px; }
.nextjs-structure-page .article-toc { top: 98px; padding: 21px; border-radius: 14px; box-shadow: none; }
.nextjs-structure-page .article-toc h2 { font-size: 17px; }
.nextjs-structure-page .article-toc ol { font-size: 13px; }

.learning-path,
.structure-map,
.route-converter,
.route-tree {
    margin: 36px 0 44px;
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--structure-border);
    border-radius: 20px;
    background: var(--structure-surface);
}
.learning-path h2 { margin: 0 0 24px !important; font-size: clamp(22px, 3vw, 28px) !important; }
.learning-path ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 !important; padding: 0; list-style: none; }
.learning-path li { position: relative; min-width: 0; padding: 15px 12px; border: 1px solid var(--structure-border); border-radius: 12px; background: var(--structure-soft); }
.learning-path li:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -9px; width: 8px; height: 8px; border-top: 2px solid var(--structure-blue); border-right: 2px solid var(--structure-blue); content: ''; transform: translateY(-50%) rotate(45deg); }
.learning-path a { color: inherit; text-decoration: none; }
.learning-path small, .learning-path strong, .learning-path em { display: block; }
.learning-path small { color: var(--structure-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.learning-path strong { margin-top: 4px; font-size: 13px; line-height: 1.3; }
.learning-path em { margin-top: 5px; color: var(--structure-muted); font-size: 10px; font-style: normal; }
.learning-path .is-current { border-color: var(--structure-blue); background: linear-gradient(145deg, rgba(37,99,235,.15), rgba(124,58,237,.1)); }
.learning-path .is-complete strong { color: var(--structure-blue); }

.article-art { margin: 36px 0 44px; overflow: hidden; border: 1px solid #24385f; border-radius: 20px; background: #061126; }
.article-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article-art figcaption { padding: 15px 18px 17px; border-top: 1px solid #24385f; background: #0c172a; color: #bbc9df; font-size: 14px; line-height: 1.55; }
.article-art figcaption strong { color: #fff; }

.structure-map figcaption,
.route-converter figcaption,
.route-tree figcaption { margin-bottom: 24px; }
.structure-map figcaption strong,
.route-converter figcaption strong,
.route-tree figcaption strong { display: block; color: var(--structure-text); font-size: clamp(21px, 3vw, 28px); }
.structure-map figcaption span,
.route-converter figcaption span,
.route-tree figcaption span { display: block; margin-top: 5px; color: var(--structure-muted); font-size: 14px; line-height: 1.55; }
.structure-map__root { display: flex; justify-content: center; }
.structure-map__root span { position: relative; padding: 12px 22px; border: 1px solid #4983f3; border-radius: 12px; background: #10254b; color: #fff; font-weight: 700; }
.structure-map__root span::after { position: absolute; top: 100%; left: 50%; width: 2px; height: 25px; background: linear-gradient(#4983f3, #7c3aed); content: ''; }
.structure-map__branch { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 10px; padding-top: 24px; }
.structure-map__branch article { min-width: 0; padding: 15px; border: 1px solid #2b4675; border-radius: 13px; background: #0c1930; color: #d9e7ff; }
.structure-map__branch article > code { color: #75dcff; font-size: 15px; }
.structure-map__branch p { margin: 5px 0 0 !important; color: #9db0ce; font-size: 12px; line-height: 1.4; }
.structure-map__branch ul { margin: 13px 0 0 !important; padding: 0; list-style: none; }
.structure-map__branch li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-top: 1px solid #243b63; font-size: 11px; }
.structure-map__branch li span { color: #aebcd2; }

.route-converter__rows { display: grid; gap: 10px; }
.route-converter__rows > div { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(110px, .45fr); align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--structure-border); border-radius: 12px; background: var(--structure-soft); }
.route-converter__rows code { overflow-wrap: anywhere; color: var(--structure-text); }
.route-converter__rows span { color: var(--structure-blue); font-size: 25px; text-align: center; }
.route-converter__rows b { padding: 7px 10px; border-radius: 8px; background: #10254b; color: #8be6ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }

.layout-stack { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 30px 0; padding: 22px; border: 1px solid #31518b; border-radius: 16px; background: #0a162b; color: #dce9ff; text-align: center; }
.layout-stack strong { color: #8fdfff; font-size: 18px; }
.layout-stack span { padding: 11px; border: 1px solid #2c4777; border-radius: 9px; background: #122440; }
.layout-stack .layout-stack__page { padding-block: 28px; background: linear-gradient(145deg, #132c56, #24194f); }

.route-tree__canvas { display: grid; justify-items: center; gap: 28px; padding: 8px 4px 2px; }
.route-node, .route-tree__level span { padding: 9px 13px; border: 1px solid #315a9e; border-radius: 9px; background: #10254b; color: #dff5ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.route-node--root { position: relative; min-width: 70px; text-align: center; }
.route-node--root::after { position: absolute; top: 100%; left: 50%; width: 2px; height: 29px; background: #587fde; content: ''; }
.route-tree__level { position: relative; display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: clamp(20px, 7vw, 80px); }
.route-tree__level::before { position: absolute; bottom: calc(100% + 14px); left: 15%; width: 70%; height: 14px; border-top: 2px solid #587fde; border-right: 2px solid #587fde; border-left: 2px solid #587fde; content: ''; }
.route-tree__level--leaf { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 18px; }
.route-tree__level--leaf::before { left: 18%; width: 64%; border-color: #a879ff; }

.structure-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0; }
.structure-compare > div { min-width: 0; padding: 18px; border: 1px solid var(--structure-border); border-radius: 14px; background: var(--structure-surface); }
.structure-compare strong { display: block; margin-bottom: 10px; color: var(--structure-text); }
.structure-compare pre { margin: 0; padding: 14px; overflow: auto; border-radius: 9px; background: #0b1628; color: #dceaff; font-size: 13px; line-height: 1.55; }
.mistake-list { display: grid; gap: 10px; padding: 0 !important; list-style: none; }
.mistake-list li { padding: 15px 17px; border: 1px solid var(--structure-border); border-left: 4px solid var(--structure-violet); border-radius: 10px; background: var(--structure-surface); }

.tutorial-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 50px 0 34px; }
.tutorial-nav > * { min-width: 0; padding: 18px; border: 1px solid var(--structure-border); border-radius: 13px; background: var(--structure-surface); }
.tutorial-nav a { color: inherit; text-decoration: none; }
.tutorial-nav a:hover { border-color: var(--structure-blue); }
.tutorial-nav small, .tutorial-nav strong { display: block; }
.tutorial-nav small { margin-bottom: 5px; color: var(--structure-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tutorial-nav strong { color: var(--structure-text); font-size: 14px; line-height: 1.4; }
.tutorial-nav [aria-disabled="true"] { opacity: .68; text-align: right; }

@media (max-width: 991px) {
    .nextjs-structure-page .blog-hero--article .blog-container { grid-template-columns: 1fr; }
    .nextjs-structure-page .blog-breadcrumbs,
    .nextjs-structure-page .blog-eyebrow,
    .nextjs-structure-page .blog-hero h1,
    .nextjs-structure-page .blog-hero__intro,
    .nextjs-structure-page .article-meta,
    .structure-hero__visual { grid-column: 1; }
    .structure-hero__visual { grid-row: auto; max-width: 780px; margin-top: 34px; }
    .nextjs-structure-page .article-layout { grid-template-columns: 1fr; gap: 28px; }
    .nextjs-structure-page .article-content { max-width: 780px; margin-inline: auto; }
    .nextjs-structure-page .article-toc { position: static; grid-row: 1; width: min(780px, 100%); max-height: none; margin-inline: auto; }
    .nextjs-structure-page .article-toc ol { display: flex; gap: 8px; overflow-x: auto; margin: 0; padding: 0 0 8px; list-style: none; scrollbar-width: thin; }
    .nextjs-structure-page .article-toc li,
    .nextjs-structure-page .article-toc li + li { flex: 0 0 auto; margin: 0; }
    .nextjs-structure-page .article-toc a { display: block; padding: 7px 10px; border: 1px solid var(--structure-border); border-radius: 999px; background: var(--structure-soft); text-decoration: none; }
    .learning-path ol { grid-template-columns: repeat(3, 1fr); }
    .structure-map__branch { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .nextjs-structure-page .blog-hero--article { padding: 102px 0 46px; }
    .nextjs-structure-page .blog-hero h1 { font-size: clamp(32px, 10vw, 43px); }
    .nextjs-structure-page .blog-hero__intro { font-size: 17px; }
    .structure-hero__visual { margin-top: 27px; border-radius: 14px; box-shadow: none; }
    .nextjs-structure-page .article-layout { width: min(100% - 28px, 780px); padding: 44px 0 74px; }
    .nextjs-structure-page .article-content { font-size: 16px; line-height: 1.72; }
    .nextjs-structure-page .article-content > p:first-child { font-size: 18px; }
    .nextjs-structure-page .article-content h2 { margin-top: 44px; font-size: clamp(26px, 8vw, 33px); }
    .learning-path ol { grid-template-columns: 1fr; }
    .learning-path li:not(:last-child)::after { top: auto; right: 50%; bottom: -8px; transform: translateX(50%) rotate(135deg); }
    .structure-map__branch { grid-template-columns: 1fr; }
    .route-converter__rows > div { grid-template-columns: 1fr; gap: 5px; text-align: center; }
    .route-converter__rows span { transform: rotate(90deg); }
    .structure-compare, .tutorial-nav { grid-template-columns: 1fr; }
    .tutorial-nav [aria-disabled="true"] { text-align: left; }
    .route-tree__level { width: 100%; grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .route-tree__level--leaf { grid-template-columns: repeat(2, 1fr); }
    .route-node, .route-tree__level span { padding-inline: 7px; font-size: 10px; text-align: center; }
}

@media (max-width: 420px) {
    .nextjs-structure-page .blog-container { width: min(100% - 22px, 1180px); }
    .nextjs-structure-page .article-layout { width: calc(100% - 22px); }
    .learning-path, .structure-map, .route-converter, .route-tree { padding: 16px; border-radius: 12px; }
    .article-art { border-radius: 12px; }
}

@media print {
    .learning-path a { color: #000; }
    .article-art { break-inside: avoid; }
}