@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
        
        body {
            font-family: 'Pretendard', sans-serif;
            background-color: #f8fafc;
            scroll-behavior: smooth;
        }

        header h1 {
            max-width: min(92vw, 58rem);
            margin-left: auto;
            margin-right: auto;
            line-height: 1.15;
            overflow-wrap: break-word;
        }

        header p {
            max-width: min(90vw, 42rem);
        }

        @media (max-width: 520px) {
            header h1 {
                font-size: 2rem !important;
            }
        }

        /* 아코디언 애니메이션용 */
        .accordion-content {
            transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        .accordion-content.active {
            max-height: 6200px;
            opacity: 1;
        }

        .interface-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 0.75rem;
            margin-bottom: 1.25rem;
        }

        @media (min-width: 768px) {
            .interface-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .interface-item {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            padding: 0.95rem;
            border: 1px solid #dbeafe;
            border-radius: 0.75rem;
            background: #f8fbff;
        }

        .interface-no {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            flex: 0 0 auto;
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            background: #0f766e;
            color: #ffffff;
            font-weight: 800;
        }

        .interface-item h4 {
            margin: 0 0 0.25rem;
            font-size: 0.95rem;
            font-weight: 800;
            color: #0f172a;
        }

        .interface-item p {
            margin: 0;
            font-size: 0.82rem;
            line-height: 1.45;
            color: #475569;
        }

        .pin-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0 0 1rem;
        }

        .legend-item {
            display: inline-flex;
            align-items: center;
            min-height: 1.8rem;
            padding: 0.3rem 0.65rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 700;
            border: 1px solid transparent;
        }

        .legend-general {
            color: #166534;
            background: #dcfce7;
            border-color: #bbf7d0;
        }

        .legend-input {
            color: #1e40af;
            background: #dbeafe;
            border-color: #bfdbfe;
        }

        .legend-i2c {
            color: #6b21a8;
            background: #f3e8ff;
            border-color: #e9d5ff;
        }

        .legend-caution {
            color: #92400e;
            background: #fef3c7;
            border-color: #fde68a;
        }

        .legend-serial {
            color: #991b1b;
            background: #fee2e2;
            border-color: #fecaca;
        }

        .pin-bank-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 1rem;
        }

        @media (min-width: 1024px) {
            .pin-bank-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .pin-bank {
            overflow: hidden;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            background: #ffffff;
        }

        .pin-bank-header {
            padding: 1rem;
            background: #0f172a;
            color: #ffffff;
        }

        .pin-bank-header h4 {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
        }

        .pin-bank-header p {
            margin: 0.25rem 0 0;
            font-size: 0.8rem;
            color: #cbd5e1;
        }

        .pin-table {
            display: grid;
        }

        .pin-row {
            display: grid;
            grid-template-columns: 4.5rem 5.5rem minmax(8rem, 1fr);
            gap: 0.55rem;
            align-items: center;
            padding: 0.7rem 0.85rem;
            border-top: 1px solid #e2e8f0;
        }

        .pin-row:first-child {
            border-top: 0;
        }

        .pin-cell {
            min-width: 0;
        }

        .pin-name span {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 3.2rem;
            min-height: 2rem;
            border-radius: 0.55rem;
            color: #ffffff;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-weight: 800;
            letter-spacing: 0;
        }

        .pin-gpio {
            font-size: 0.82rem;
            font-weight: 800;
            color: #0f172a;
        }

        .pin-role {
            font-size: 0.82rem;
            color: #334155;
            line-height: 1.35;
        }

        .pin-note {
            grid-column: 2 / 4;
            font-size: 0.76rem;
            color: #64748b;
            line-height: 1.4;
        }

        @media (max-width: 520px) {
            .pin-row {
                grid-template-columns: 4.2rem minmax(0, 1fr);
            }

            .pin-role,
            .pin-note {
                grid-column: 2 / 3;
            }
        }

        .pin-general .pin-name span {
            background: #16a34a;
        }

        .pin-input .pin-name span {
            background: #2563eb;
        }

        .pin-i2c .pin-name span {
            background: #7e22ce;
        }

        .pin-caution .pin-name span {
            background: #d97706;
        }

        .pin-serial .pin-name span {
            background: #dc2626;
        }

        .pin-reset .pin-name span {
            background: #475569;
        }

        .pin-warning {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            margin-top: 1rem;
            padding: 0.9rem 1rem;
            border: 1px solid #fde68a;
            border-radius: 0.75rem;
            background: #fffbeb;
            color: #78350f;
            font-size: 0.86rem;
            line-height: 1.5;
        }

        .pin-warning p {
            margin: 0;
        }

        .expansion-board-guide {
            padding: 1rem;
            border: 1px solid #cbd5e1;
            border-radius: 0.9rem;
            background:
                linear-gradient(135deg, rgba(219, 234, 254, 0.92), rgba(240, 253, 250, 0.82)),
                #f8fafc;
        }

        .board-guide-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 0.9rem;
        }

        .board-kicker {
            margin: 0 0 0.2rem;
            color: #2563eb;
            font-size: 0.74rem;
            font-weight: 900;
        }

        .board-guide-header h4 {
            margin: 0;
            color: #0f172a;
            font-size: 1.05rem;
            font-weight: 900;
            line-height: 1.3;
        }

        .svg-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.4rem;
            min-width: 11rem;
        }

        .svg-legend span {
            display: inline-flex;
            align-items: center;
            gap: 0.32rem;
            min-height: 1.75rem;
            padding: 0.22rem 0.5rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
            color: #334155;
            font-size: 0.72rem;
            font-weight: 800;
            border: 1px solid rgba(148, 163, 184, 0.3);
        }

        .svg-legend b,
        .rail-cell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.35rem;
            height: 1.35rem;
            border-radius: 0.38rem;
            color: #ffffff;
            font-size: 0.72rem;
            font-weight: 950;
            line-height: 1;
        }

        .rail-s {
            background: #2563eb;
        }

        .rail-v {
            background: #dc2626;
        }

        .rail-g {
            background: #111827;
        }

        .board-scroll {
            overflow-x: auto;
            padding-bottom: 0.3rem;
        }

        .board-layout {
            display: grid;
            grid-template-columns: minmax(10rem, 1fr) minmax(13.5rem, 0.95fr) minmax(10rem, 1fr);
            gap: 0.7rem;
            min-width: 45rem;
            align-items: stretch;
        }

        .gvs-bank,
        .esp-board-core {
            border: 1px solid rgba(100, 116, 139, 0.36);
            border-radius: 0.65rem;
            background: rgba(255, 255, 255, 0.86);
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
        }

        .gvs-bank {
            padding: 0.55rem;
        }

        .bank-title {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 1.9rem;
            margin-bottom: 0.4rem;
            border-radius: 0.45rem;
            background: #0f172a;
            color: #ffffff;
            font-size: 0.78rem;
            font-weight: 900;
        }

        .gvs-head,
        .gvs-row {
            display: grid;
            grid-template-columns: 2.2rem minmax(2.5rem, 1fr) repeat(3, 1.52rem);
            align-items: center;
            gap: 0.28rem;
        }

        .gvs-head {
            margin-bottom: 0.28rem;
            color: #64748b;
            font-size: 0.64rem;
            font-weight: 900;
            text-align: center;
        }

        .gvs-row {
            min-height: 1.92rem;
            padding: 0.16rem 0;
            border-top: 1px solid rgba(203, 213, 225, 0.75);
        }

        .gvs-row:first-of-type {
            border-top: 0;
        }

        .pin-no {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 1.65rem;
            height: 1.45rem;
            border-radius: 999px;
            background: #e0f2fe;
            color: #075985;
            font-size: 0.68rem;
            font-weight: 950;
        }

        .pin-id {
            color: #0f172a;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.76rem;
            font-weight: 900;
        }

        .esp-board-core {
            position: relative;
            display: grid;
            grid-template-rows: auto 1fr auto auto;
            gap: 0.62rem;
            padding: 0.78rem;
            background:
                linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
            color: #ffffff;
            overflow: hidden;
        }

        .esp-board-core::before {
            content: "";
            position: absolute;
            inset: 0.55rem;
            border: 1px dashed rgba(148, 163, 184, 0.42);
            border-radius: 0.58rem;
            pointer-events: none;
        }

        .usb-port,
        .dc-jack {
            justify-self: center;
            z-index: 1;
            min-width: 6.8rem;
            padding: 0.34rem 0.58rem;
            border: 1px solid rgba(191, 219, 254, 0.52);
            border-radius: 0.45rem;
            background: rgba(15, 23, 42, 0.82);
            color: #bfdbfe;
            font-size: 0.72rem;
            font-weight: 900;
            text-align: center;
        }

        .esp-chip {
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 11.5rem;
            margin: 0.1rem auto;
            width: min(10rem, 80%);
            border: 2px solid #38bdf8;
            border-radius: 0.65rem;
            background:
                repeating-linear-gradient(90deg, transparent 0 0.62rem, rgba(56, 189, 248, 0.12) 0.62rem 0.82rem),
                #0f172a;
            box-shadow: inset 0 0 0 0.35rem rgba(14, 165, 233, 0.12);
            text-align: center;
        }

        .chip-label {
            color: #e0f2fe;
            font-size: 1rem;
            font-weight: 950;
        }

        .chip-sub {
            margin-top: 0.35rem;
            color: #94a3b8;
            font-size: 0.7rem;
            font-weight: 800;
        }

        .i2c-zone,
        .power-zone {
            z-index: 1;
            display: grid;
            gap: 0.25rem;
            padding: 0.55rem;
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(203, 213, 225, 0.18);
        }

        .i2c-zone span,
        .power-zone span {
            color: #bae6fd;
            font-size: 0.7rem;
            font-weight: 950;
        }

        .i2c-zone b,
        .i2c-zone em {
            color: #ffffff;
            font-size: 0.72rem;
            font-style: normal;
            font-weight: 800;
        }

        .jumper-switch {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 0.35rem;
        }

        .jumper-switch b {
            padding: 0.28rem 0.35rem;
            border-radius: 0.35rem;
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            font-size: 0.68rem;
            text-align: center;
        }

        .jumper-switch i {
            width: 1.5rem;
            height: 0.62rem;
            border-radius: 999px;
            background: linear-gradient(90deg, #dc2626 0 48%, #22c55e 52% 100%);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
        }

        .board-number {
            position: absolute;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.55rem;
            height: 1.55rem;
            border-radius: 999px;
            background: #facc15;
            color: #111827;
            font-size: 0.74rem;
            font-weight: 950;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
        }

        .n1 { top: 0.5rem; left: 0.6rem; }
        .n2 { top: 0.5rem; right: 0.6rem; }
        .n3 { bottom: 0.58rem; left: 0.6rem; }
        .n4 { top: 3.6rem; right: 0.55rem; }
        .n5 { top: 50%; left: 0.52rem; transform: translateY(-50%); }
        .n6 { top: 42%; right: 0.52rem; transform: translateY(-50%); }
        .n7 { bottom: 4.55rem; right: 0.55rem; }
        .n8 { bottom: 2.25rem; right: 0.55rem; }

        .board-callout-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.45rem;
            margin-top: 0.85rem;
        }

        .board-callout-grid div {
            display: flex;
            align-items: center;
            gap: 0.48rem;
            min-width: 0;
            padding: 0.48rem 0.55rem;
            border: 1px solid rgba(148, 163, 184, 0.34);
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.72);
        }

        .board-callout-grid b {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 1.42rem;
            height: 1.42rem;
            border-radius: 999px;
            background: #0f172a;
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 950;
        }

        .board-callout-grid span {
            min-width: 0;
            color: #334155;
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1.35;
        }

        @media (max-width: 760px) {
            .board-guide-header {
                flex-direction: column;
            }

            .svg-legend {
                justify-content: flex-start;
                min-width: 0;
            }

            .board-callout-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .wiring-box {
            margin: 0 0 1rem;
            padding: 1rem;
            border: 1px solid #bbf7d0;
            border-radius: 0.75rem;
            background: #f0fdf4;
        }

        .wiring-box h4 {
            margin: 0 0 0.5rem;
            color: #166534;
            font-size: 0.95rem;
            font-weight: 800;
        }

        .wiring-diagram {
            display: grid;
            gap: 0.6rem;
        }

        .wire-row {
            display: grid;
            grid-template-columns: minmax(7.5rem, 1fr) minmax(4.25rem, 0.45fr) minmax(7.5rem, 1fr);
            align-items: center;
            gap: 0.55rem;
        }

        .wire-block {
            min-width: 0;
            padding: 0.62rem 0.72rem;
            border: 1px solid #cbd5e1;
            border-radius: 0.55rem;
            background: #ffffff;
            color: #0f172a;
            font-size: 0.82rem;
            font-weight: 800;
            line-height: 1.35;
            overflow-wrap: anywhere;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        }

        .wire-path {
            position: relative;
            min-height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wire-line {
            width: 100%;
            height: 0.18rem;
            border-radius: 999px;
            background: #64748b;
        }

        .wire-line::after {
            content: "";
            position: absolute;
            right: -0.05rem;
            top: 50%;
            transform: translateY(-50%);
            border-left: 0.5rem solid #64748b;
            border-top: 0.32rem solid transparent;
            border-bottom: 0.32rem solid transparent;
        }

        .wire-label {
            position: absolute;
            top: -0.28rem;
            max-width: 100%;
            padding: 0.12rem 0.38rem;
            border-radius: 999px;
            background: #f8fafc;
            color: #475569;
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1.2;
            text-align: center;
            overflow-wrap: anywhere;
        }

        .wire-power .wire-block {
            border-color: #fecaca;
            background: #fff7f7;
        }

        .wire-power .wire-line,
        .wire-power .wire-line::after {
            background: #dc2626;
            border-left-color: #dc2626;
        }

        .wire-ground .wire-block {
            border-color: #cbd5e1;
            background: #f8fafc;
        }

        .wire-ground .wire-line,
        .wire-ground .wire-line::after {
            background: #334155;
            border-left-color: #334155;
        }

        .wire-signal .wire-block {
            border-color: #bfdbfe;
            background: #eff6ff;
        }

        .wire-signal .wire-line,
        .wire-signal .wire-line::after {
            background: #2563eb;
            border-left-color: #2563eb;
        }

        .wire-caution .wire-block {
            border-color: #fde68a;
            background: #fffbeb;
        }

        .wire-caution .wire-line,
        .wire-caution .wire-line::after {
            background: #d97706;
            border-left-color: #d97706;
        }

        .wiring-notes {
            display: grid;
            gap: 0.4rem;
            margin-top: 0.15rem;
        }

        .wiring-notes p {
            margin: 0;
            padding: 0.6rem 0.72rem;
            border: 1px solid #fde68a;
            border-radius: 0.55rem;
            background: #fffbeb;
            color: #78350f;
            font-size: 0.8rem;
            font-weight: 700;
            line-height: 1.45;
        }

        @media (max-width: 640px) {
            .wire-row {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.25rem;
            }

            .wire-path {
                min-height: 1.7rem;
                justify-content: flex-start;
                padding-left: 1rem;
            }

            .wire-line {
                width: 0.18rem;
                height: 1.55rem;
            }

            .wire-line::after {
                right: auto;
                top: auto;
                bottom: -0.08rem;
                left: 50%;
                transform: translateX(-50%);
                border-left: 0.32rem solid transparent;
                border-right: 0.32rem solid transparent;
                border-top: 0.5rem solid #64748b;
                border-bottom: 0;
            }

            .wire-power .wire-line::after {
                border-top-color: #dc2626;
                border-left-color: transparent;
            }

            .wire-ground .wire-line::after {
                border-top-color: #334155;
                border-left-color: transparent;
            }

            .wire-signal .wire-line::after {
                border-top-color: #2563eb;
                border-left-color: transparent;
            }

            .wire-caution .wire-line::after {
                border-top-color: #d97706;
                border-left-color: transparent;
            }

            .wire-label {
                position: static;
                margin-left: 0.55rem;
                text-align: left;
            }
        }

        .science-app-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 0.9rem;
        }

        @media (min-width: 768px) {
            .science-app-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (min-width: 1180px) {
            .science-app-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        .science-app-card {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            min-height: 100%;
            padding: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        }

        .science-app-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 0.5rem;
            font-size: 1rem;
        }

        .science-app-card h4 {
            margin: 0;
            color: #0f172a;
            font-size: 1rem;
            font-weight: 850;
            line-height: 1.35;
        }

        .science-app-card p {
            margin: 0;
            color: #475569;
            font-size: 0.84rem;
            line-height: 1.5;
        }

        .science-app-card dl {
            display: grid;
            gap: 0.35rem 0.5rem;
            grid-template-columns: 4.1rem minmax(0, 1fr);
            margin: auto 0 0;
            padding-top: 0.65rem;
            border-top: 1px solid #e2e8f0;
            font-size: 0.78rem;
            line-height: 1.4;
        }

        .science-app-card dt {
            color: #334155;
            font-weight: 850;
        }

        .science-app-card dd {
            margin: 0;
            color: #64748b;
        }

        .code-frame {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem;
            background: #282c34;
        }

        .code-frame pre {
            margin: 0;
        }

        .code-toolbar {
            position: absolute;
            top: 0.55rem;
            right: 0.55rem;
            z-index: 20;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .code-file-label {
            display: inline-flex;
            align-items: center;
            min-height: 1.75rem;
            padding: 0.25rem 0.55rem;
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 0.45rem;
            background: rgba(15, 23, 42, 0.72);
            color: #cbd5e1;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.72rem;
        }

        .copy-code-button {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            min-height: 1.75rem;
            padding: 0.25rem 0.6rem;
            border: 1px solid rgba(96, 165, 250, 0.35);
            border-radius: 0.45rem;
            background: rgba(37, 99, 235, 0.9);
            color: #ffffff;
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            transition: background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
        }

        .copy-code-button:hover {
            background: #1d4ed8;
            border-color: rgba(191, 219, 254, 0.72);
        }

        .copy-code-button:active {
            transform: translateY(1px);
        }

        .copy-code-button.copied {
            background: #16a34a;
            border-color: rgba(187, 247, 208, 0.7);
        }

        /* highlight.js 커스텀 설정 */
        .hljs {
            padding: 3.15rem 1.25rem 1.25rem !important;
            border-radius: 0.5rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.9rem;
            line-height: 1.5;
        }